From 1bbe58123689396b9a078b31d9270a4768a2accd Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Tue, 2 Jun 2026 00:02:21 +0545
Subject: [PATCH 01/16] add details feature which shows the new addition in
 English language in a nice expandable way

---
 .github/actions/translation-tracker/index.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/.github/actions/translation-tracker/index.js b/.github/actions/translation-tracker/index.js
index 7d9f3ff715..6feb0ccd4b 100644
--- a/.github/actions/translation-tracker/index.js
+++ b/.github/actions/translation-tracker/index.js
@@ -269,7 +269,7 @@ class GitHubCommitTracker {
       let isTruncated = false;
       if (patch) {
         const lines = patch.split('\n');
-        const maxLines = 80;
+        const maxLines = 50;
         if (lines.length > maxLines) {
           patchSnippet = lines.slice(0, maxLines).join('\n');
           isTruncated = true;
@@ -407,6 +407,24 @@ class GitHubCommitTracker {
       });
     }
 
+    // English diff (optional best-effort)
+    if (englishDiff && (englishDiff.compareUrl || englishDiff.patchSnippet)) {
+      body += `### 🧩 Recent English Diff\n\n`;
+      if (englishDiff.compareUrl) {
+        body += `- [🔍 View full compare](${englishDiff.compareUrl})\n\n`;
+      }
+      if (englishDiff.patchSnippet) {
+        body += `<details>\n<summary>Show patch snippet</summary>\n\n`;
+        body += `\`\`\`diff\n${englishDiff.patchSnippet}\n\`\`\`\n\n`;
+        if (englishDiff.isTruncated) {
+          body += `_(Patch snippet truncated. Use the compare link above for the full diff.)_\n\n`;
+        }
+        body += `</details>\n\n`;
+      } else {
+        body += `_(No preview of the differences is available for this change. Use the compare link above.)_\n\n`;
+      }
+    }
+
     body += `### 🔗 Quick Links
 - [📄 Current English file](https://github.com/${this.owner}/${this.repo}/blob/${this.currentBranch}/${englishFile})
 

From 9cb73c3a7812ddf59b50fd8d91320619c2979c57 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Tue, 2 Jun 2026 00:05:18 +0545
Subject: [PATCH 02/16] Add comments and text readability

---
 .github/actions/translation-tracker/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/actions/translation-tracker/index.js b/.github/actions/translation-tracker/index.js
index 6feb0ccd4b..83a7e66025 100644
--- a/.github/actions/translation-tracker/index.js
+++ b/.github/actions/translation-tracker/index.js
@@ -407,7 +407,7 @@ class GitHubCommitTracker {
       });
     }
 
-    // English diff (optional best-effort)
+    // English diff. It shows the actual content changes in the English file.
     if (englishDiff && (englishDiff.compareUrl || englishDiff.patchSnippet)) {
       body += `### 🧩 Recent English Diff\n\n`;
       if (englishDiff.compareUrl) {
@@ -421,7 +421,7 @@ class GitHubCommitTracker {
         }
         body += `</details>\n\n`;
       } else {
-        body += `_(No preview of the differences is available for this change. Use the compare link above.)_\n\n`;
+        body += `_(Could't generate preview of the differences for this change. Use the compare link above to see the full diff.)_\n\n`;
       }
     }
 

From 70a2cd1227bee9687740fc25fd9eb92c605a7d1e Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Thu, 4 Jun 2026 13:15:21 +0545
Subject: [PATCH 03/16] fixed the small typo

---
 .github/actions/translation-tracker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/actions/translation-tracker/index.js b/.github/actions/translation-tracker/index.js
index 83a7e66025..9ca677c58f 100644
--- a/.github/actions/translation-tracker/index.js
+++ b/.github/actions/translation-tracker/index.js
@@ -421,7 +421,7 @@ class GitHubCommitTracker {
         }
         body += `</details>\n\n`;
       } else {
-        body += `_(Could't generate preview of the differences for this change. Use the compare link above to see the full diff.)_\n\n`;
+        body += `_(Couldn't generate preview of the differences for this change. Use the compare link above to see the full diff.)_\n\n`;
       }
     }
 

From 2557caef903ac282d2bdadeff8f38629b9dddac2 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Thu, 25 Jun 2026 19:33:09 +0545
Subject: [PATCH 04/16] remove unnecessary code snippet

---
 .github/actions/translation-tracker/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/actions/translation-tracker/index.js b/.github/actions/translation-tracker/index.js
index 9ca677c58f..3c6e4f2698 100644
--- a/.github/actions/translation-tracker/index.js
+++ b/.github/actions/translation-tracker/index.js
@@ -410,9 +410,8 @@ class GitHubCommitTracker {
     // English diff. It shows the actual content changes in the English file.
     if (englishDiff && (englishDiff.compareUrl || englishDiff.patchSnippet)) {
       body += `### 🧩 Recent English Diff\n\n`;
-      if (englishDiff.compareUrl) {
-        body += `- [🔍 View full compare](${englishDiff.compareUrl})\n\n`;
-      }
+      body += `- [🔍 View full compare](${englishDiff.compareUrl})\n\n`; // provides url to compare the differences
+    
       if (englishDiff.patchSnippet) {
         body += `<details>\n<summary>Show patch snippet</summary>\n\n`;
         body += `\`\`\`diff\n${englishDiff.patchSnippet}\n\`\`\`\n\n`;

From 659d2751f6ee87567803ac99095564de25d766f1 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Thu, 25 Jun 2026 21:15:34 +0545
Subject: [PATCH 05/16] implement the stub file generation logic

---
 .github/actions/translation-tracker/index.js  | 369 +++++++++++++++++-
 .../actions/translation-tracker/package.json  |   3 +-
 .../actions/translation-tracker/test-stubs.js |  19 +
 .github/workflows/translation-stubs.yml       |  52 +++
 4 files changed, 437 insertions(+), 6 deletions(-)
 create mode 100644 .github/actions/translation-tracker/test-stubs.js
 create mode 100644 .github/workflows/translation-stubs.yml

diff --git a/.github/actions/translation-tracker/index.js b/.github/actions/translation-tracker/index.js
index 3c6e4f2698..812c4c9ba3 100644
--- a/.github/actions/translation-tracker/index.js
+++ b/.github/actions/translation-tracker/index.js
@@ -44,6 +44,129 @@ function getSlugFromEnglishPath(englishFilePath, contentType) {
   return relative;
 }
 
+function parseEnvList(envValue, defaultList) {
+  if (!envValue || envValue.trim() === '') {
+    return defaultList;
+  }
+  return envValue.split(',').map((item) => item.trim()).filter(Boolean);
+}
+
+/**
+ * Find English content files that have no translation file yet.
+ * Used for stub-file generation (Week 2).
+ */
+function findMissingTranslations(contentTypes, languages, options = {}) {
+  const { fullScan = false, testFiles = null } = options;
+  const missing = [];
+
+  for (const contentType of contentTypes) {
+    let englishFiles;
+    if (testFiles) {
+      englishFiles = testFiles.filter(
+        (file) =>
+          file.startsWith(`src/content/${contentType}/en/`) &&
+          (file.endsWith('.mdx') || file.endsWith('.yaml'))
+      );
+    } else if (fullScan) {
+      englishFiles = getAllEnglishContentFiles(contentType);
+    } else if (process.env.GITHUB_ACTIONS) {
+      englishFiles = getChangedFiles(null, contentType);
+    } else {
+      englishFiles = getAllEnglishContentFiles(contentType);
+    }
+
+    for (const englishFile of englishFiles) {
+      for (const language of languages) {
+        const translationPath = getTranslationPath(englishFile, language);
+        if (!fileExists(translationPath)) {
+          missing.push({ englishFile, language, translationPath, contentType });
+        }
+      }
+    }
+  }
+
+  missing.sort((a, b) => a.translationPath.localeCompare(b.translationPath));
+  return missing;
+}
+
+/** Frontmatter fields copied into stubs (English values). Avoids duplicating params/examples. */
+const STUB_FRONTMATTER_KEYS = {
+  reference: ['title', 'module', 'submodule', 'file', 'description'],
+  examples: ['title', 'oneLineDescription', 'featuredImage', 'featuredImageAlt'],
+  tutorials: ['title', 'description'],
+  'text-detail': ['title', 'description'],
+  events: ['title', 'description'],
+  libraries: ['title', 'description'],
+};
+
+function pickStubFrontmatter(frontmatter, contentType) {
+  const keys = STUB_FRONTMATTER_KEYS[contentType] || ['title', 'description'];
+  const picked = { needsTranslation: true };
+  for (const key of keys) {
+    if (frontmatter[key] !== undefined) {
+      picked[key] = frontmatter[key];
+    }
+  }
+  return picked;
+}
+
+function parseFrontmatter(raw, filePath) {
+  const frontmatterMatch = raw.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
+  if (!frontmatterMatch) {
+    throw new Error(`Could not find frontmatter in ${filePath}`);
+  }
+
+  return yaml.load(frontmatterMatch[1]) || {};
+}
+
+function stringifyMdx(frontmatter, body) {
+  const frontmatterText = yaml.dump(frontmatter, {
+    lineWidth: 100,
+    noRefs: true,
+    sortKeys: false,
+  });
+
+  return `---\n${frontmatterText}---\n${body}`;
+}
+
+/**
+ * Build a placeholder translation file from an English source.
+ * Copies essential frontmatter (in English), sets needsTranslation: true, minimal body.
+ */
+function generateStubFromEnglish(englishPath, language, contentType = 'reference') {
+  const raw = fs.readFileSync(englishPath, 'utf8');
+  const frontmatter = parseFrontmatter(raw, englishPath);
+  const translationPath = getTranslationPath(englishPath, language);
+
+  const stubFrontmatter = pickStubFrontmatter(frontmatter, contentType);
+
+  const stubComment = `<!--
+  Auto-generated translation stub (${language}).
+  Translate from the English source and remove needsTranslation when done.
+  English source: ${englishPath}
+-->`;
+
+  const stubBody = `${stubComment}
+
+<!-- Translation needed. Replace this placeholder with the translated content. -->
+`;
+
+  const content = stringifyMdx(stubFrontmatter, stubBody);
+
+  return { translationPath, content, englishPath };
+}
+
+/** Where dry-run stubs are written locally (never touches src/content by default). */
+function getStubWritePath(translationPath, dryRun) {
+  if (!dryRun) {
+    return translationPath;
+  }
+  const outputRoot =
+    process.env.STUB_OUTPUT_DIR ||
+    path.join(process.cwd(), '.github/actions/translation-tracker/stub-preview');
+  return path.join(outputRoot, translationPath);
+}
+
 async function loadStewardsConfig() {
   const STEWARDS_URL = 'https://raw.githubusercontent.com/processing/p5.js/main/stewards.yml';
   
@@ -410,8 +533,9 @@ class GitHubCommitTracker {
     // English diff. It shows the actual content changes in the English file.
     if (englishDiff && (englishDiff.compareUrl || englishDiff.patchSnippet)) {
       body += `### 🧩 Recent English Diff\n\n`;
-      body += `- [🔍 View full compare](${englishDiff.compareUrl})\n\n`; // provides url to compare the differences
-    
+      if (englishDiff.compareUrl) {
+        body += `- [🔍 View full compare](${englishDiff.compareUrl})\n\n`;
+      }
       if (englishDiff.patchSnippet) {
         body += `<details>\n<summary>Show patch snippet</summary>\n\n`;
         body += `\`\`\`diff\n${englishDiff.patchSnippet}\n\`\`\`\n\n`;
@@ -461,6 +585,121 @@ ${outdatedLanguages.length > 0 || missingLanguages.length > 0 ? `**Change Type**
     };
     return languages[langCode] || langCode;
   }
+
+  /**
+   * Create a branch with one commit containing multiple new files (for stub PRs).
+   */
+  async createBranchWithFiles(branchName, commitMessage, fileChanges) {
+    const baseBranch = this.currentBranch || 'main';
+
+    const { data: ref } = await this.octokit.rest.git.getRef({
+      owner: this.owner,
+      repo: this.repo,
+      ref: `heads/${baseBranch}`,
+    });
+    const baseSha = ref.object.sha;
+
+    const { data: baseCommit } = await this.octokit.rest.git.getCommit({
+      owner: this.owner,
+      repo: this.repo,
+      commit_sha: baseSha,
+    });
+
+    const treeItems = await Promise.all(
+      fileChanges.map(async ({ path: filePath, content }) => {
+        const { data: blob } = await this.octokit.rest.git.createBlob({
+          owner: this.owner,
+          repo: this.repo,
+          content: Buffer.from(content, 'utf8').toString('base64'),
+          encoding: 'base64',
+        });
+        return { path: filePath, mode: '100644', type: 'blob', sha: blob.sha };
+      })
+    );
+
+    const { data: tree } = await this.octokit.rest.git.createTree({
+      owner: this.owner,
+      repo: this.repo,
+      base_tree: baseCommit.tree.sha,
+      tree: treeItems,
+    });
+
+    const { data: commit } = await this.octokit.rest.git.createCommit({
+      owner: this.owner,
+      repo: this.repo,
+      message: commitMessage,
+      tree: tree.sha,
+      parents: [baseSha],
+    });
+
+    await this.octokit.rest.git.createRef({
+      owner: this.owner,
+      repo: this.repo,
+      ref: `refs/heads/${branchName}`,
+      sha: commit.sha,
+    });
+
+    return { branchName, commitSha: commit.sha };
+  }
+
+  /**
+   * Open one PR per language with all stub files for that language.
+   */
+  async createStubPullRequest(language, stubs) {
+    const dateStr = new Date().toISOString().slice(0, 10).replace(/-/g, '');
+    const branchName = `translation-stubs/${language}-${dateStr}-${Date.now()}`;
+    const langName = this.getLanguageDisplayName(language);
+    const commitMessage = `chore(i18n): add ${language} translation stubs for ${stubs.length} page(s)`;
+
+    const fileChanges = stubs.map((stub) => ({
+      path: stub.translationPath,
+      content: stub.content,
+    }));
+
+    try {
+      await this.createBranchWithFiles(branchName, commitMessage, fileChanges);
+
+      const stewards = getStewardsForLanguage(this.stewardsConfig, language);
+      const stewardsText = stewards.length > 0 ? `\n\ncc ${stewards.join(' ')}` : '';
+      const fileList = stubs.map((stub) => `- \`${stub.translationPath}\` (from \`${stub.englishPath}\`)`).join('\n');
+
+      const { data: pr } = await this.octokit.rest.pulls.create({
+        owner: this.owner,
+        repo: this.repo,
+        title: `chore(i18n): add ${langName} translation stubs (${stubs.length})`,
+        head: branchName,
+        base: this.currentBranch || 'main',
+        body: `## Translation stub files
+
+This PR adds placeholder files for content that exists in English but has no ${langName} translation yet.
+
+Each stub:
+- copies English frontmatter
+- sets \`needsTranslation: true\`
+- includes a short placeholder body for translators to replace
+
+### Files (${stubs.length})
+
+${fileList}
+
+### Next steps for translators
+
+- [ ] Translate each file's body and frontmatter fields
+- [ ] Remove or set \`needsTranslation: false\` when complete
+- [ ] Keep code blocks, links, and structure aligned with the English source
+
+---
+🤖 *Auto-generated by the p5.js Translation Tracker*${stewardsText}`,
+      });
+
+      console.log(`\n🔀 Stub PR created for ${langName}: #${pr.number}`);
+      console.log(`   URL: ${pr.html_url}`);
+      return pr;
+    } catch (error) {
+      console.error(`❌ Failed to create stub PR for ${language}:`, error.message);
+      return null;
+    }
+  }
 }
 
 /**
@@ -700,19 +939,118 @@ async function checkTranslationStatus(changedFiles, githubTracker = null, create
   return translationStatus;
 }
 
+/**
+ * Week 2: generate stub files and open one PR per language.
+ */
+async function runStubGeneration(githubTracker, options = {}) {
+  const languages = parseEnvList(process.env.STUB_LANGUAGES, ['es']);
+  const contentTypes = parseEnvList(process.env.STUB_CONTENT_TYPES, ['reference']);
+  const fullScan = options.fullScan ?? process.env.STUB_FULL_SCAN === 'true';
+  const dryRun = process.env.STUB_DRY_RUN === 'true';
+  const maxFiles = parseInt(process.env.STUB_MAX_FILES || '50', 10);
+
+  console.log(`\n📦 Stub generation mode`);
+  console.log(`   Languages: ${languages.join(', ')}`);
+  console.log(`   Content types: ${contentTypes.join(', ')}`);
+  console.log(`   Scan: ${fullScan ? 'all English files' : 'changed files only'}`);
+
+  const missing = findMissingTranslations(contentTypes, languages, {
+    fullScan,
+    testFiles: options.testFiles || null,
+  });
 
-// Removed verbose summary function
+  if (missing.length === 0) {
+    console.log('\n✅ No missing translation files found for stub generation.');
+    return { prsCreated: [], stubsWritten: 0 };
+  }
 
+  console.log(`\n❌ Found ${missing.length} missing translation file(s):`);
+  missing.forEach((item) => {
+    console.log(`   - ${item.englishFile} → ${item.language}`);
+    console.log(`     Expected: ${item.translationPath}`);
+  });
+
+  const limited = missing.slice(0, maxFiles);
+  if (limited.length < missing.length) {
+    console.log(`\n⚠️  Limiting to ${maxFiles} stub(s) (STUB_MAX_FILES). Re-run to process more.`);
+  }
+
+  const byLanguage = new Map();
+  for (const item of limited) {
+    if (!byLanguage.has(item.language)) {
+      byLanguage.set(item.language, []);
+    }
+    byLanguage.get(item.language).push(item);
+  }
+
+  const prsCreated = [];
+  let stubsWritten = 0;
+
+  for (const [language, items] of byLanguage) {
+    const langName = githubTracker
+      ? githubTracker.getLanguageDisplayName(language)
+      : language;
+
+    console.log(`\n📝 Generating ${items.length} stub(s) for ${langName}:`);
+
+    const stubs = items.map((item) => {
+      const stub = generateStubFromEnglish(item.englishFile, language, item.contentType);
+      console.log(`   📄 ${item.englishFile} → ${stub.translationPath}`);
+      return stub;
+    });
+
+    if (dryRun || !githubTracker) {
+      const previewRoot =
+        process.env.STUB_OUTPUT_DIR ||
+        path.join(process.cwd(), '.github/actions/translation-tracker/stub-preview');
+      for (const stub of stubs) {
+        const writePath = getStubWritePath(stub.translationPath, true);
+        const dir = path.dirname(writePath);
+        if (!fs.existsSync(dir)) {
+          fs.mkdirSync(dir, { recursive: true });
+        }
+        fs.writeFileSync(writePath, stub.content, 'utf8');
+        stubsWritten += 1;
+      }
+      console.log(`\n🧪 Dry run: wrote ${stubs.length} stub file(s) under ${previewRoot}`);
+      continue;
+    }
+
+    const pr = await githubTracker.createStubPullRequest(language, stubs);
+    if (pr) {
+      prsCreated.push({
+        language,
+        prNumber: pr.number,
+        prUrl: pr.html_url,
+        fileCount: stubs.length,
+      });
+      stubsWritten += stubs.length;
+    }
+  }
 
-// Remove verbose repository exploration
+  if (prsCreated.length > 0) {
+    console.log(`\n🔀 Stub PRs created: ${prsCreated.length}`);
+    prsCreated.forEach((pr) => {
+      console.log(`   - ${pr.language}: PR #${pr.prNumber} (${pr.fileCount} file(s))`);
+      console.log(`     URL: ${pr.prUrl}`);
+    });
+  } else if (!dryRun && stubsWritten === 0 && limited.length > 0) {
+    console.log(`\n💡 Stubs were not written. Check GITHUB_TOKEN permissions (contents + pull-requests write).`);
+  }
+
+  return { prsCreated, stubsWritten };
+}
 
 
 async function main(testFiles = null, options = {}) {
   const hasToken = !!process.env.GITHUB_TOKEN;
   const isGitHubAction = !!process.env.GITHUB_ACTIONS; // Detect if running in GitHub Actions
   const isProduction = hasToken && !testFiles;
+  const generateStubsMode = process.env.GENERATE_STUBS === 'true';
   
-  if (testFiles) {
+  if (generateStubsMode) {
+    console.log(`📦 Stub generation: ${testFiles ? 'test files' : isGitHubAction ? 'changed files' : 'full scan'}`);
+  } else if (testFiles) {
     console.log(`🧪 Test mode: Checking ${testFiles.length} predefined files`);
   } else if (isGitHubAction) {
     console.log(`🚀 GitHub Actions: Checking changed files only`);
@@ -732,6 +1070,23 @@ async function main(testFiles = null, options = {}) {
     }
   }
 
+  // Week 2: stub-file PR generation (separate mode from issue tracking)
+  if (generateStubsMode) {
+    const dryRun = process.env.STUB_DRY_RUN === 'true';
+    if (!githubTracker && !dryRun) {
+      console.error('❌ GENERATE_STUBS requires GITHUB_TOKEN, or set STUB_DRY_RUN=true for local preview');
+      process.exitCode = 1;
+      return;
+    }
+
+    const fullScan =
+      process.env.STUB_FULL_SCAN === 'true' ||
+      (!isGitHubAction && !testFiles);
+
+    await runStubGeneration(githubTracker, { fullScan, testFiles });
+    return;
+  }
+
   const allTranslationStatus = [];
 
   for (const contentType of CONTENT_TYPES) {
@@ -853,6 +1208,10 @@ module.exports = {
   getChangedFiles,
   getAllEnglishContentFiles,
   checkTranslationStatus,
+  findMissingTranslations,
+  generateStubFromEnglish,
+  pickStubFrontmatter,
+  runStubGeneration,
   GitHubCommitTracker,
   SUPPORTED_LANGUAGES,
   CONTENT_TYPES
diff --git a/.github/actions/translation-tracker/package.json b/.github/actions/translation-tracker/package.json
index 74594d8db0..ee7c2f85b5 100644
--- a/.github/actions/translation-tracker/package.json
+++ b/.github/actions/translation-tracker/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "start": "node index.js",
-    "test": "node test-local.js"
+    "test": "node test-local.js",
+    "test:stubs": "node test-stubs.js"
   },
   "keywords": [
     "p5.js",
diff --git a/.github/actions/translation-tracker/test-stubs.js b/.github/actions/translation-tracker/test-stubs.js
new file mode 100644
index 0000000000..51be3b9246
--- /dev/null
+++ b/.github/actions/translation-tracker/test-stubs.js
@@ -0,0 +1,19 @@
+const path = require('path');
+const { main } = require('./index.js');
+
+// Run from repository root so content paths resolve correctly.
+process.chdir(path.join(__dirname, '../../..'));
+
+// Dry-run stub generation: writes stub files locally, does not open PRs.
+process.env.GENERATE_STUBS = 'true';
+process.env.STUB_DRY_RUN = 'true';
+process.env.STUB_LANGUAGES = 'es';
+process.env.STUB_CONTENT_TYPES = 'reference';
+process.env.STUB_FULL_SCAN = 'true';
+process.env.STUB_MAX_FILES = '3';
+
+console.log('🧪 Testing stub generation (dry run, max 3 files)');
+console.log('   Output: .github/actions/translation-tracker/stub-preview/');
+console.log('=================================================');
+
+main();
diff --git a/.github/workflows/translation-stubs.yml b/.github/workflows/translation-stubs.yml
new file mode 100644
index 0000000000..14e920d066
--- /dev/null
+++ b/.github/workflows/translation-stubs.yml
@@ -0,0 +1,52 @@
+name: Translation Stub Generator
+
+on:
+  push:
+    branches: [feature/translation-tracker/stub-file-generation]
+    paths:
+      - 'src/content/reference/en/**'
+  workflow_dispatch:
+    inputs:
+      full_scan:
+        description: 'Scan all English reference files (not just latest commit)'
+        required: false
+        default: 'false'
+        type: choice
+        options:
+          - 'false'
+          - 'true'
+      languages:
+        description: 'Comma-separated language codes (default: es)'
+        required: false
+        default: 'es'
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  generate-translation-stubs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Install translation tracker dependencies
+        run: cd .github/actions/translation-tracker && npm install
+
+      - name: Generate stub files and open PRs
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GENERATE_STUBS: 'true'
+          STUB_LANGUAGES: ${{ github.event.inputs.languages || 'es' }}
+          STUB_CONTENT_TYPES: reference
+          STUB_FULL_SCAN: ${{ github.event.inputs.full_scan || 'false' }}
+        run: node .github/actions/translation-tracker/index.js
\ No newline at end of file

From b3b9457eb97ae7f857af4758fbe7651b720d69ab Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 22:58:35 +0545
Subject: [PATCH 06/16] add new file

---
 .../examples/en/16_New_file_testing/test.mdx  | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/content/examples/en/16_New_file_testing/test.mdx

diff --git a/src/content/examples/en/16_New_file_testing/test.mdx b/src/content/examples/en/16_New_file_testing/test.mdx
new file mode 100644
index 0000000000..8f387301de
--- /dev/null
+++ b/src/content/examples/en/16_New_file_testing/test.mdx
@@ -0,0 +1,36 @@
+---
+featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
+featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
+title: Non-Orthogonal Reflection
+oneLineDescription: Simulate a ball bouncing on a slanted surface.
+
+remix:
+  - description: Based on
+    attribution:
+      - name: Processing example by Ira Greenberg
+        URL: https://processing.org/examples/reflection1.html
+  - description: Ported by
+    attribution:
+      - name: David Blitz
+  - description: Revised by
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
+  - collectivelyAttributedSince: 2024
+---
+
+This example demonstrates a ball bouncing on a slanted
+surface, implemented using vector calculations for reflection.
+
+The code makes extensive use of the 
+<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
+class, including the 
+<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
+and the vector methods
+<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
+and
+<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
+for the vector calculations.
\ No newline at end of file

From 254c58ff7d48fa6370302e4a49039ac30dffc958 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:04:41 +0545
Subject: [PATCH 07/16] Update branch specification format in
 translation-stubs.yml workflow

---
 .github/workflows/translation-stubs.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/translation-stubs.yml b/.github/workflows/translation-stubs.yml
index 14e920d066..c75dd7d2fc 100644
--- a/.github/workflows/translation-stubs.yml
+++ b/.github/workflows/translation-stubs.yml
@@ -2,7 +2,8 @@ name: Translation Stub Generator
 
 on:
   push:
-    branches: [feature/translation-tracker/stub-file-generation]
+    branches: 
+      - "feature/translation-tracker/stub-file-generation"
     paths:
       - 'src/content/reference/en/**'
   workflow_dispatch:

From 7d1939c9b1ba73e4064a4b6206fb81513c0ff288 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:11:15 +0545
Subject: [PATCH 08/16] Add new example for Non-Orthogonal Reflection
 simulation

---
 .../en/16_New_file_testing/test_copy.mdx      | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/content/examples/en/16_New_file_testing/test_copy.mdx

diff --git a/src/content/examples/en/16_New_file_testing/test_copy.mdx b/src/content/examples/en/16_New_file_testing/test_copy.mdx
new file mode 100644
index 0000000000..8f387301de
--- /dev/null
+++ b/src/content/examples/en/16_New_file_testing/test_copy.mdx
@@ -0,0 +1,36 @@
+---
+featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
+featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
+title: Non-Orthogonal Reflection
+oneLineDescription: Simulate a ball bouncing on a slanted surface.
+
+remix:
+  - description: Based on
+    attribution:
+      - name: Processing example by Ira Greenberg
+        URL: https://processing.org/examples/reflection1.html
+  - description: Ported by
+    attribution:
+      - name: David Blitz
+  - description: Revised by
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
+  - collectivelyAttributedSince: 2024
+---
+
+This example demonstrates a ball bouncing on a slanted
+surface, implemented using vector calculations for reflection.
+
+The code makes extensive use of the 
+<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
+class, including the 
+<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
+and the vector methods
+<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
+and
+<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
+for the vector calculations.
\ No newline at end of file

From 0232110ce33f77d1084b7816154ae89d64c20da9 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:16:51 +0545
Subject: [PATCH 09/16] Add new example files for Non-Orthogonal Reflection
 simulation

---
 .../reference/en/16_New_file_testing/test.mdx | 36 +++++++++++++++++++
 .../en/16_New_file_testing/test_copy.mdx      | 36 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 src/content/reference/en/16_New_file_testing/test.mdx
 create mode 100644 src/content/reference/en/16_New_file_testing/test_copy.mdx

diff --git a/src/content/reference/en/16_New_file_testing/test.mdx b/src/content/reference/en/16_New_file_testing/test.mdx
new file mode 100644
index 0000000000..8f387301de
--- /dev/null
+++ b/src/content/reference/en/16_New_file_testing/test.mdx
@@ -0,0 +1,36 @@
+---
+featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
+featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
+title: Non-Orthogonal Reflection
+oneLineDescription: Simulate a ball bouncing on a slanted surface.
+
+remix:
+  - description: Based on
+    attribution:
+      - name: Processing example by Ira Greenberg
+        URL: https://processing.org/examples/reflection1.html
+  - description: Ported by
+    attribution:
+      - name: David Blitz
+  - description: Revised by
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
+  - collectivelyAttributedSince: 2024
+---
+
+This example demonstrates a ball bouncing on a slanted
+surface, implemented using vector calculations for reflection.
+
+The code makes extensive use of the 
+<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
+class, including the 
+<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
+and the vector methods
+<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
+and
+<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
+for the vector calculations.
\ No newline at end of file
diff --git a/src/content/reference/en/16_New_file_testing/test_copy.mdx b/src/content/reference/en/16_New_file_testing/test_copy.mdx
new file mode 100644
index 0000000000..8f387301de
--- /dev/null
+++ b/src/content/reference/en/16_New_file_testing/test_copy.mdx
@@ -0,0 +1,36 @@
+---
+featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
+featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
+title: Non-Orthogonal Reflection
+oneLineDescription: Simulate a ball bouncing on a slanted surface.
+
+remix:
+  - description: Based on
+    attribution:
+      - name: Processing example by Ira Greenberg
+        URL: https://processing.org/examples/reflection1.html
+  - description: Ported by
+    attribution:
+      - name: David Blitz
+  - description: Revised by
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
+  - collectivelyAttributedSince: 2024
+---
+
+This example demonstrates a ball bouncing on a slanted
+surface, implemented using vector calculations for reflection.
+
+The code makes extensive use of the 
+<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
+class, including the 
+<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
+and the vector methods
+<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
+and
+<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
+for the vector calculations.
\ No newline at end of file

From e58df5db9dffdee71e47990be3c9182d2791f5b7 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:22:49 +0545
Subject: [PATCH 10/16] Update translation tracker to support multiple
 languages and enhance README documentation

---
 .github/actions/translation-tracker/README.md | 134 ++++++++----------
 .github/actions/translation-tracker/index.js  |   2 +-
 .github/workflows/translation-stubs.yml       |   6 +-
 .../reference/en/16_New_file_testing/test.mdx |  36 -----
 .../en/16_New_file_testing/test_copy.mdx      |  36 -----
 5 files changed, 62 insertions(+), 152 deletions(-)
 delete mode 100644 src/content/reference/en/16_New_file_testing/test.mdx
 delete mode 100644 src/content/reference/en/16_New_file_testing/test_copy.mdx

diff --git a/.github/actions/translation-tracker/README.md b/.github/actions/translation-tracker/README.md
index 53805e6499..2385e729d1 100644
--- a/.github/actions/translation-tracker/README.md
+++ b/.github/actions/translation-tracker/README.md
@@ -1,11 +1,12 @@
 # p5.js Translation Tracker
 
-Automatically tracks translation status for p5.js website examples, creates GitHub issues for outdated translations, and shows banners on the website.
+Automatically tracks translation status, creates GitHub issues for outdated translations, generates stub files for missing translations, and powers outdated-translation banners on the website.
 
 ## Features
 
-- Detects outdated/missing translations using Git commit comparison (currently focused on Examples content)
+- Detects outdated/missing translations using Git commit comparison
 - Creates GitHub issues with diff snippets and action checklists
+- **Week 2:** Generates translation stub files and opens **one PR per language**
 - Shows localized banners on outdated translation pages
 - Supports Spanish, Hindi, Korean, and Chinese Simplified
 
@@ -15,104 +16,85 @@ Automatically tracks translation status for p5.js website examples, creates GitH
 .github/actions/translation-tracker/
 ├── index.js           # Main tracker logic
 ├── package.json       # Dependencies
-├── test-local.js      # Local testing
+├── test-local.js      # Local issue-tracking test
+├── test-stubs.js      # Local stub dry-run (writes to stub-preview/)
+└── stub-preview/      # Dry-run output (gitignored)
 
-src/layouts/ExampleLayout.astro              # Banner integration
-src/components/OutdatedTranslationBanner/    # Banner component
-public/translation-status/examples.json      # Generated status (build artifact)
+.github/workflows/
+├── translation-sync.yml   # Issues + manifests on English changes
+└── translation-stubs.yml  # Stub PRs for missing reference pages
 ```
 
 ## Usage
 
-### Local Testing
+### Issue tracking (local)
+
 ```bash
 cd .github/actions/translation-tracker && npm install
 node test-local.js
 ```
 
-### Scan All Files (File-based)
-```bash
-node .github/actions/translation-tracker/index.js
-```
+### Stub generation (local dry run — recommended)
+
+Writes stubs under `stub-preview/` only (does **not** modify `src/content/`):
 
-### Scan All Files (GitHub API + Create Issues)
 ```bash
-GITHUB_TOKEN=your_token GITHUB_REPOSITORY=owner/repo node .github/actions/translation-tracker/index.js
+cd .github/actions/translation-tracker && npm install
+npm run test:stubs
 ```
 
-### GitHub Actions Workflow
-Create `.github/workflows/translation-sync.yml`:
-
-```yaml
-name: Translation Sync Tracker
-
-on:
-  push:
-    branches: [main, week2]
-    paths: ['src/content/examples/en/**']
-  workflow_dispatch:
-
-jobs:
-  track-translation-changes:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 2
-          
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '18'
-          
-      - name: Install dependencies
-        run: npm ci
-        
-      - name: Install translation tracker dependencies
-        run: cd .github/actions/translation-tracker && npm install
-        
-      - name: Run translation tracker
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: node .github/actions/translation-tracker/index.js
+Preview path example:
+`stub-preview/src/content/reference/es/p5/foo.mdx`
+
+### Stub generation (open PR on your fork)
+
+```bash
+# From repository root — missing files from latest commit only (all languages by default)
+GENERATE_STUBS=true \
+  GITHUB_TOKEN=your_token GITHUB_REPOSITORY=youruser/p5.js-website \
+  node .github/actions/translation-tracker/index.js
+
+# Single language or full scan (STUB_MAX_FILES is global across all languages)
+GENERATE_STUBS=true STUB_FULL_SCAN=true STUB_MAX_FILES=10 STUB_LANGUAGES=es,hi \
+  GITHUB_TOKEN=your_token GITHUB_REPOSITORY=youruser/p5.js-website \
+  node .github/actions/translation-tracker/index.js
 ```
 
-## Environment Variables
+**Fork:** Settings → Actions → Workflow permissions → **Read and write**.
 
-- `GITHUB_TOKEN` - Required for GitHub API and issue creation
-- `GITHUB_REPOSITORY` - Format: `owner/repo` (auto-detected in Actions)
+### GitHub Actions
 
-## What It Does
+| Workflow | Trigger | What it does |
+|----------|---------|----------------|
+| `translation-sync.yml` | Push to `examples/en`, `tutorials/en` | Issues + manifests |
+| `translation-stubs.yml` | Push to `reference/en`, or manual dispatch | Stub PRs (default: es, hi, ko, zh-Hans) |
 
-1. **Scans** English example files for changes
-2. **Compares** with translation files using Git commits
-3. **Creates** GitHub issues for outdated translations with:
-   - Diff snippets showing what changed
-   - Links to files and comparisons
-   - Action checklist for translators
-   - Proper labels (`needs translation`, `lang-es`, etc.)
-4. **Generates** manifest file for website banner system
-5. **Shows** localized banners on outdated translation pages
+Manual stub run: Actions → **Translation Stub Generator** → Run workflow → optional full scan.
 
-## Sample Output
+## Environment Variables
 
-```
-📝 Checking 61 English example file(s)
+| Variable | Purpose |
+|----------|---------|
+| `GITHUB_TOKEN` | API access (issues, PRs) |
+| `GITHUB_REPOSITORY` | `owner/repo` (default: `processing/p5.js-website`) |
+| `GENERATE_STUBS` | `true` = stub mode instead of issue tracking |
+| `STUB_LANGUAGES` | Comma-separated (default: `es`, `hi`, `ko`, `zh-Hans`) |
+| `STUB_CONTENT_TYPES` | Comma-separated (default: `reference`) |
+| `STUB_FULL_SCAN` | `true` = all English files, not just latest commit |
+| `STUB_DRY_RUN` | `true` = write to `stub-preview/`, no PR |
+| `STUB_MAX_FILES` | Max stubs per run, total across all languages (default: `50`) |
+| `STUB_OUTPUT_DIR` | Custom dry-run output directory |
 
-📊 Translation Status Summary:
-   🔄 Outdated: 48
-   ❌ Missing: 0
-   ✅ Up-to-date: 196
+## What stubs contain
 
-🎫 GitHub issues created: 12
-   - Issue #36: Spanish, Hindi, Korean, Chinese Simplified need updates
-   - URL: https://github.com/owner/repo/issues/36
+For each English file with **no** translation yet:
 
-🗂️ Wrote translation manifest: public/translation-status/examples.json
-```
+1. Essential English frontmatter (`title`, `description`, etc. — not full API params)
+2. `needsTranslation: true`
+3. Short HTML comment + placeholder body
+4. One PR per language with all stubs grouped (never auto-merged)
 
 ## Dependencies
 
-- `@actions/core`, `@actions/github`, `@octokit/rest`
-- Node.js built-ins: `fs`, `path`, `child_process`
\ No newline at end of file
+- `@octokit/rest`, `js-yaml`
+- Node.js built-ins: `fs`, `path`, `child_process`
diff --git a/.github/actions/translation-tracker/index.js b/.github/actions/translation-tracker/index.js
index 812c4c9ba3..a088f645c7 100644
--- a/.github/actions/translation-tracker/index.js
+++ b/.github/actions/translation-tracker/index.js
@@ -943,7 +943,7 @@ async function checkTranslationStatus(changedFiles, githubTracker = null, create
  * Week 2: generate stub files and open one PR per language.
  */
 async function runStubGeneration(githubTracker, options = {}) {
-  const languages = parseEnvList(process.env.STUB_LANGUAGES, ['es']);
+  const languages = parseEnvList(process.env.STUB_LANGUAGES, SUPPORTED_LANGUAGES);
   const contentTypes = parseEnvList(process.env.STUB_CONTENT_TYPES, ['reference']);
   const fullScan = options.fullScan ?? process.env.STUB_FULL_SCAN === 'true';
   const dryRun = process.env.STUB_DRY_RUN === 'true';
diff --git a/.github/workflows/translation-stubs.yml b/.github/workflows/translation-stubs.yml
index c75dd7d2fc..290e3cc930 100644
--- a/.github/workflows/translation-stubs.yml
+++ b/.github/workflows/translation-stubs.yml
@@ -17,9 +17,9 @@ on:
           - 'false'
           - 'true'
       languages:
-        description: 'Comma-separated language codes (default: es)'
+        description: 'Comma-separated language codes (default: all supported)'
         required: false
-        default: 'es'
+        default: 'es,hi,ko,zh-Hans'
 
 permissions:
   contents: write
@@ -47,7 +47,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GENERATE_STUBS: 'true'
-          STUB_LANGUAGES: ${{ github.event.inputs.languages || 'es' }}
+          STUB_LANGUAGES: ${{ github.event.inputs.languages || 'es,hi,ko,zh-Hans' }}
           STUB_CONTENT_TYPES: reference
           STUB_FULL_SCAN: ${{ github.event.inputs.full_scan || 'false' }}
         run: node .github/actions/translation-tracker/index.js
\ No newline at end of file
diff --git a/src/content/reference/en/16_New_file_testing/test.mdx b/src/content/reference/en/16_New_file_testing/test.mdx
deleted file mode 100644
index 8f387301de..0000000000
--- a/src/content/reference/en/16_New_file_testing/test.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
-featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
-title: Non-Orthogonal Reflection
-oneLineDescription: Simulate a ball bouncing on a slanted surface.
-
-remix:
-  - description: Based on
-    attribution:
-      - name: Processing example by Ira Greenberg
-        URL: https://processing.org/examples/reflection1.html
-  - description: Ported by
-    attribution:
-      - name: David Blitz
-  - description: Revised by
-    attribution:
-      - name: Darren Kessner
-        URL: https://github.com/dkessner
-    code:
-      - label: 2023 code
-        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
-  - collectivelyAttributedSince: 2024
----
-
-This example demonstrates a ball bouncing on a slanted
-surface, implemented using vector calculations for reflection.
-
-The code makes extensive use of the 
-<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
-class, including the 
-<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
-and the vector methods
-<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
-and
-<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
-for the vector calculations.
\ No newline at end of file
diff --git a/src/content/reference/en/16_New_file_testing/test_copy.mdx b/src/content/reference/en/16_New_file_testing/test_copy.mdx
deleted file mode 100644
index 8f387301de..0000000000
--- a/src/content/reference/en/16_New_file_testing/test_copy.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
-featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
-title: Non-Orthogonal Reflection
-oneLineDescription: Simulate a ball bouncing on a slanted surface.
-
-remix:
-  - description: Based on
-    attribution:
-      - name: Processing example by Ira Greenberg
-        URL: https://processing.org/examples/reflection1.html
-  - description: Ported by
-    attribution:
-      - name: David Blitz
-  - description: Revised by
-    attribution:
-      - name: Darren Kessner
-        URL: https://github.com/dkessner
-    code:
-      - label: 2023 code
-        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
-  - collectivelyAttributedSince: 2024
----
-
-This example demonstrates a ball bouncing on a slanted
-surface, implemented using vector calculations for reflection.
-
-The code makes extensive use of the 
-<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
-class, including the 
-<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
-and the vector methods
-<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
-and
-<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
-for the vector calculations.
\ No newline at end of file

From a3f1c4b0a4261d0057763bb12735daa8e57994fd Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:23:31 +0545
Subject: [PATCH 11/16] test

---
 .../reference/en/16_New_file_testing/hi.mdx   | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/content/reference/en/16_New_file_testing/hi.mdx

diff --git a/src/content/reference/en/16_New_file_testing/hi.mdx b/src/content/reference/en/16_New_file_testing/hi.mdx
new file mode 100644
index 0000000000..8f387301de
--- /dev/null
+++ b/src/content/reference/en/16_New_file_testing/hi.mdx
@@ -0,0 +1,36 @@
+---
+featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
+featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
+title: Non-Orthogonal Reflection
+oneLineDescription: Simulate a ball bouncing on a slanted surface.
+
+remix:
+  - description: Based on
+    attribution:
+      - name: Processing example by Ira Greenberg
+        URL: https://processing.org/examples/reflection1.html
+  - description: Ported by
+    attribution:
+      - name: David Blitz
+  - description: Revised by
+    attribution:
+      - name: Darren Kessner
+        URL: https://github.com/dkessner
+    code:
+      - label: 2023 code
+        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
+  - collectivelyAttributedSince: 2024
+---
+
+This example demonstrates a ball bouncing on a slanted
+surface, implemented using vector calculations for reflection.
+
+The code makes extensive use of the 
+<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
+class, including the 
+<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
+and the vector methods
+<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
+and
+<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
+for the vector calculations.
\ No newline at end of file

From a0d29dde19e30af1fa022165dbe11b0465e575b8 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:32:42 +0545
Subject: [PATCH 12/16] remove the testing file and organize the code in
 index.js by creating multiple files.

---
 .../actions/translation-tracker/constants.js  |   18 +
 .../translation-tracker/github-tracker.js     |  440 +++++++
 .github/actions/translation-tracker/index.js  | 1104 +----------------
 .../translation-tracker/package-lock.json     |   31 +-
 .github/actions/translation-tracker/utils.js  |  239 ++++
 .../actions/translation-tracker/workflows.js  |  345 ++++++
 .../reference/en/16_New_file_testing/hi.mdx   |   36 -
 7 files changed, 1103 insertions(+), 1110 deletions(-)
 create mode 100644 .github/actions/translation-tracker/constants.js
 create mode 100644 .github/actions/translation-tracker/github-tracker.js
 create mode 100644 .github/actions/translation-tracker/utils.js
 create mode 100644 .github/actions/translation-tracker/workflows.js
 delete mode 100644 src/content/reference/en/16_New_file_testing/hi.mdx

diff --git a/.github/actions/translation-tracker/constants.js b/.github/actions/translation-tracker/constants.js
new file mode 100644
index 0000000000..d014077c45
--- /dev/null
+++ b/.github/actions/translation-tracker/constants.js
@@ -0,0 +1,18 @@
+const SUPPORTED_LANGUAGES = ['es', 'hi', 'ko', 'zh-Hans'];
+const CONTENT_TYPES = ['examples', 'reference', 'tutorials', 'text-detail', 'events', 'libraries'];
+
+/** Frontmatter fields copied into stubs (English values). Avoids duplicating params/examples. */
+const STUB_FRONTMATTER_KEYS = {
+  reference: ['title', 'module', 'submodule', 'file', 'description'],
+  examples: ['title', 'oneLineDescription', 'featuredImage', 'featuredImageAlt'],
+  tutorials: ['title', 'description'],
+  'text-detail': ['title', 'description'],
+  events: ['title', 'description'],
+  libraries: ['title', 'description'],
+};
+
+module.exports = {
+  SUPPORTED_LANGUAGES,
+  CONTENT_TYPES,
+  STUB_FRONTMATTER_KEYS,
+};
diff --git a/.github/actions/translation-tracker/github-tracker.js b/.github/actions/translation-tracker/github-tracker.js
new file mode 100644
index 0000000000..330f0b7f53
--- /dev/null
+++ b/.github/actions/translation-tracker/github-tracker.js
@@ -0,0 +1,440 @@
+const { execSync } = require('child_process');
+const path = require('path');
+const { Octokit } = require('@octokit/rest');
+const { getStewardsForLanguage, getLanguageDisplayName, loadStewardsConfig } = require('./utils');
+
+class GitHubCommitTracker {
+  constructor(token, owner, repo) {
+    this.octokit = new Octokit({ auth: token });
+    this.owner = owner;
+    this.repo = repo;
+    this.currentBranch = this.detectCurrentBranch();
+    this.stewardsConfig = null;
+  }
+
+  static async create(token, owner, repo) {
+    const instance = new GitHubCommitTracker(token, owner, repo);
+    instance.stewardsConfig = await loadStewardsConfig();
+    return instance;
+  }
+
+  detectCurrentBranch() {
+    try {
+      if (process.env.GITHUB_HEAD_REF) {
+        return process.env.GITHUB_HEAD_REF;
+      }
+
+      if (process.env.GITHUB_REF_NAME) {
+        return process.env.GITHUB_REF_NAME;
+      }
+
+      try {
+        const branch = execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf8' }).trim();
+        if (branch && branch !== 'HEAD') {
+          return branch;
+        }
+      } catch (gitError) {
+        // Silent fallback
+      }
+
+      return 'main';
+    } catch (error) {
+      return 'main';
+    }
+  }
+
+  async getLastCommit(filePath) {
+    try {
+      const { data } = await this.octokit.rest.repos.listCommits({
+        owner: this.owner,
+        repo: this.repo,
+        sha: this.currentBranch,
+        path: filePath,
+        per_page: 1,
+      });
+
+      if (data.length > 0) {
+        return {
+          sha: data[0].sha,
+          date: new Date(data[0].commit.committer.date),
+          message: data[0].commit.message,
+          author: data[0].commit.author.name,
+          url: data[0].html_url,
+        };
+      }
+
+      return null;
+    } catch (error) {
+      console.log(
+        `⚠️  Primary commit lookup failed for ${filePath} on branch '${this.currentBranch}': ${error.message}`
+      );
+
+      if (this.currentBranch !== 'main') {
+        try {
+          const { data } = await this.octokit.rest.repos.listCommits({
+            owner: this.owner,
+            repo: this.repo,
+            sha: 'main',
+            path: filePath,
+            per_page: 1,
+          });
+
+          if (data.length > 0) {
+            return {
+              sha: data[0].sha,
+              date: new Date(data[0].commit.committer.date),
+              message: data[0].commit.message,
+              author: data[0].commit.author.name,
+              url: data[0].html_url,
+            };
+          }
+        } catch (fallbackError) {
+          console.log(`⚠️  Fallback to main branch also failed for ${filePath}: ${fallbackError.message}`);
+        }
+      }
+
+      console.log(`❌ Could not get commit info for ${filePath} from any branch`);
+      return null;
+    }
+  }
+
+  async getRecentDiffForFile(filePath) {
+    try {
+      const { data: commits } = await this.octokit.rest.repos.listCommits({
+        owner: this.owner,
+        repo: this.repo,
+        sha: this.currentBranch,
+        path: filePath,
+        per_page: 2,
+      });
+
+      if (!commits || commits.length === 0) {
+        return null;
+      }
+
+      const headSha = commits[0].sha;
+      let baseSha = commits.length > 1 ? commits[1].sha : null;
+
+      if (!baseSha) {
+        try {
+          const { data: headCommit } = await this.octokit.rest.repos.getCommit({
+            owner: this.owner,
+            repo: this.repo,
+            ref: headSha,
+          });
+          baseSha = headCommit.parents && headCommit.parents.length > 0 ? headCommit.parents[0].sha : null;
+        } catch (parentErr) {
+          console.log(`⚠️  Could not resolve base commit for diff of ${filePath}: ${parentErr.message}`);
+        }
+      }
+
+      if (!baseSha) {
+        return {
+          baseSha: null,
+          headSha,
+          compareUrl: `https://github.com/${this.owner}/${this.repo}/commit/${headSha}`,
+          patchSnippet: null,
+          isTruncated: false,
+        };
+      }
+
+      const { data: compare } = await this.octokit.rest.repos.compareCommits({
+        owner: this.owner,
+        repo: this.repo,
+        base: baseSha,
+        head: headSha,
+      });
+
+      const changedFile = (compare.files || []).find((f) => f.filename === filePath);
+      const patch = changedFile && changedFile.patch ? changedFile.patch : null;
+
+      let patchSnippet = null;
+      let isTruncated = false;
+      if (patch) {
+        const lines = patch.split('\n');
+        const maxLines = 50;
+        if (lines.length > maxLines) {
+          patchSnippet = lines.slice(0, maxLines).join('\n');
+          isTruncated = true;
+        } else {
+          patchSnippet = patch;
+        }
+      }
+
+      return {
+        baseSha,
+        headSha,
+        compareUrl: `https://github.com/${this.owner}/${this.repo}/compare/${baseSha}...${headSha}`,
+        patchSnippet,
+        isTruncated,
+      };
+    } catch (error) {
+      console.log(`⚠️  Failed to compute diff for ${filePath} on branch '${this.currentBranch}': ${error.message}`);
+      return {
+        baseSha: null,
+        headSha: null,
+        compareUrl: `https://github.com/${this.owner}/${this.repo}/blob/${this.currentBranch}/${filePath}`,
+        patchSnippet: null,
+        isTruncated: false,
+      };
+    }
+  }
+
+  async createMultiLanguageTranslationIssue(fileTranslations) {
+    const englishFile = fileTranslations.englishFile;
+    const issueTitle = `🌍 Update translations for ${path.basename(englishFile)}`;
+    const englishDiff = await this.getRecentDiffForFile(englishFile);
+    const issueBody = this.formatMultiLanguageIssueBody(fileTranslations, englishDiff);
+
+    const labels = ['needs translation', 'help wanted'];
+    const affectedLanguages = [
+      ...fileTranslations.outdatedLanguages.map((l) => l.language),
+      ...fileTranslations.missingLanguages.map((l) => l.language),
+    ];
+
+    const uniqueLanguages = [...new Set(affectedLanguages)];
+    uniqueLanguages.forEach((lang) => {
+      labels.push(`lang-${lang}`);
+    });
+
+    let assignees = [];
+    uniqueLanguages.forEach((lang) => {
+      const stewards = getStewardsForLanguage(this.stewardsConfig, lang);
+      assignees.push(...stewards);
+    });
+    assignees = [...new Set(assignees.map((a) => a.replace('@', '')))];
+
+    try {
+      const createParams = {
+        owner: this.owner,
+        repo: this.repo,
+        title: issueTitle,
+        body: issueBody,
+        labels,
+      };
+
+      if (assignees.length > 0) {
+        createParams.assignees = assignees;
+      }
+
+      const { data } = await this.octokit.rest.issues.create(createParams);
+      return data;
+    } catch (error) {
+      if (error.message.includes('assignees') && assignees.length > 0) {
+        try {
+          const { data } = await this.octokit.rest.issues.create({
+            owner: this.owner,
+            repo: this.repo,
+            title: issueTitle,
+            body: issueBody,
+            labels,
+          });
+          console.log(`⚠️  Issue created but stewards could not be assigned (not collaborators)`);
+          return data;
+        } catch (retryError) {
+          console.error(`❌ Error creating issue on retry:`, retryError.message);
+          return null;
+        }
+      }
+      console.error(`❌ Error creating multi-language issue:`, error.message);
+      return null;
+    }
+  }
+
+  formatMultiLanguageIssueBody(fileTranslations, englishDiff) {
+    const englishFile = fileTranslations.englishFile;
+    const outdatedLanguages = fileTranslations.outdatedLanguages;
+    const missingLanguages = fileTranslations.missingLanguages;
+    const englishCommit = fileTranslations.englishCommit;
+
+    let body = `## 🌍 Translation Update Needed
+
+**File**: \`${englishFile}\`
+**Branch**: \`${this.currentBranch}\`
+
+### 📅 Timeline
+- **Latest English update**: ${englishCommit.date.toLocaleDateString()} by ${englishCommit.author}
+
+`;
+
+    if (outdatedLanguages.length > 0) {
+      body += `### 🔄 Outdated Translations\n\n`;
+      outdatedLanguages.forEach((lang) => {
+        const translationPath = lang.translationPath;
+        const stewards = getStewardsForLanguage(this.stewardsConfig, lang.language);
+        const stewardsText = stewards.length > 0 ? ` (cc ${stewards.join(', ')})` : '';
+        body += `- **${this.getLanguageDisplayName(lang.language)}**: Last updated ${lang.commitInfo.translation.date.toLocaleDateString()} by ${lang.commitInfo.translation.author}${stewardsText}\n`;
+        body += `  - [📝 View file](https://github.com/${this.owner}/${this.repo}/blob/${this.currentBranch}/${translationPath})\n\n`;
+      });
+    }
+
+    if (missingLanguages.length > 0) {
+      body += `### ❌ Missing Translations\n\n`;
+      missingLanguages.forEach((lang) => {
+        const translationPath = lang.translationPath;
+        const stewards = getStewardsForLanguage(this.stewardsConfig, lang.language);
+        const stewardsText = stewards.length > 0 ? ` (cc ${stewards.join(', ')})` : '';
+        body += `- **${this.getLanguageDisplayName(lang.language)}**: Translation file does not exist${stewardsText}\n`;
+        body += `  - Expected location: \`${translationPath}\`\n\n`;
+      });
+    }
+
+    if (englishDiff && (englishDiff.compareUrl || englishDiff.patchSnippet)) {
+      body += `### 🧩 Recent English Diff\n\n`;
+      if (englishDiff.compareUrl) {
+        body += `- [🔍 View full compare](${englishDiff.compareUrl})\n\n`;
+      }
+      if (englishDiff.patchSnippet) {
+        body += `<details>\n<summary>Show patch snippet</summary>\n\n`;
+        body += `\`\`\`diff\n${englishDiff.patchSnippet}\n\`\`\`\n\n`;
+        if (englishDiff.isTruncated) {
+          body += `_(Patch snippet truncated. Use the compare link above for the full diff.)_\n\n`;
+        }
+        body += `</details>\n\n`;
+      } else {
+        body += `_(Couldn't generate preview of the differences for this change. Use the compare link above to see the full diff.)_\n\n`;
+      }
+    }
+
+    body += `### 🔗 Quick Links
+- [📄 Current English file](https://github.com/${this.owner}/${this.repo}/blob/${this.currentBranch}/${englishFile})
+
+### ✅ Action Checklist
+
+**For translators / contributors:**
+
+- [ ] Review the recent English file changes and the current translations
+- [ ] Confirm if translation already reflects the update — close the issue if so  
+- [ ] Update the translation files accordingly
+- [ ] Maintain structure, code blocks, and formatting
+- [ ] Ensure translation is accurate and culturally appropriate
+
+### 📝 Summary of English File Changes
+**Last commit**: [${englishCommit.message}](${englishCommit.url})
+
+${outdatedLanguages.length > 0 || missingLanguages.length > 0 ? `**Change Type**: English file was updated. ${outdatedLanguages.length > 0 ? `${outdatedLanguages.map((l) => this.getLanguageDisplayName(l.language)).join(', ')} translation${outdatedLanguages.length > 1 ? 's' : ''} may be outdated.` : ''} ${missingLanguages.length > 0 ? `${missingLanguages.map((l) => this.getLanguageDisplayName(l.language)).join(', ')} translation${missingLanguages.length > 1 ? 's are' : ' is'} missing.` : ''}` : ''}
+
+---
+ℹ️ **Need help?** See our [Contributor Guidelines](https://p5js.org/contribute/contributor_guidelines/)
+
+🤖 *This issue was auto-generated by the p5.js Translation Tracker*`;
+    return body;
+  }
+
+  getLanguageDisplayName(langCode) {
+    return getLanguageDisplayName(langCode);
+  }
+
+  async createBranchWithFiles(branchName, commitMessage, fileChanges) {
+    const baseBranch = this.currentBranch || 'main';
+
+    const { data: ref } = await this.octokit.rest.git.getRef({
+      owner: this.owner,
+      repo: this.repo,
+      ref: `heads/${baseBranch}`,
+    });
+    const baseSha = ref.object.sha;
+
+    const { data: baseCommit } = await this.octokit.rest.git.getCommit({
+      owner: this.owner,
+      repo: this.repo,
+      commit_sha: baseSha,
+    });
+
+    const treeItems = await Promise.all(
+      fileChanges.map(async ({ path: filePath, content }) => {
+        const { data: blob } = await this.octokit.rest.git.createBlob({
+          owner: this.owner,
+          repo: this.repo,
+          content: Buffer.from(content, 'utf8').toString('base64'),
+          encoding: 'base64',
+        });
+        return { path: filePath, mode: '100644', type: 'blob', sha: blob.sha };
+      })
+    );
+
+    const { data: tree } = await this.octokit.rest.git.createTree({
+      owner: this.owner,
+      repo: this.repo,
+      base_tree: baseCommit.tree.sha,
+      tree: treeItems,
+    });
+
+    const { data: commit } = await this.octokit.rest.git.createCommit({
+      owner: this.owner,
+      repo: this.repo,
+      message: commitMessage,
+      tree: tree.sha,
+      parents: [baseSha],
+    });
+
+    await this.octokit.rest.git.createRef({
+      owner: this.owner,
+      repo: this.repo,
+      ref: `refs/heads/${branchName}`,
+      sha: commit.sha,
+    });
+
+    return { branchName, commitSha: commit.sha };
+  }
+
+  async createStubPullRequest(language, stubs) {
+    const dateStr = new Date().toISOString().slice(0, 10).replace(/-/g, '');
+    const branchName = `translation-stubs/${language}-${dateStr}-${Date.now()}`;
+    const langName = this.getLanguageDisplayName(language);
+    const commitMessage = `chore(i18n): add ${language} translation stubs for ${stubs.length} page(s)`;
+
+    const fileChanges = stubs.map((stub) => ({
+      path: stub.translationPath,
+      content: stub.content,
+    }));
+
+    try {
+      await this.createBranchWithFiles(branchName, commitMessage, fileChanges);
+
+      const stewards = getStewardsForLanguage(this.stewardsConfig, language);
+      const stewardsText = stewards.length > 0 ? `\n\ncc ${stewards.join(' ')}` : '';
+      const fileList = stubs
+        .map((stub) => `- \`${stub.translationPath}\` (from \`${stub.englishPath}\`)`)
+        .join('\n');
+
+      const { data: pr } = await this.octokit.rest.pulls.create({
+        owner: this.owner,
+        repo: this.repo,
+        title: `chore(i18n): add ${langName} translation stubs (${stubs.length})`,
+        head: branchName,
+        base: this.currentBranch || 'main',
+        body: `## Translation stub files
+
+This PR adds placeholder files for content that exists in English but has no ${langName} translation yet.
+
+Each stub:
+- copies English frontmatter
+- sets \`needsTranslation: true\`
+- includes a short placeholder body for translators to replace
+
+### Files (${stubs.length})
+
+${fileList}
+
+### Next steps for translators
+
+- [ ] Translate each file's body and frontmatter fields
+- [ ] Remove or set \`needsTranslation: false\` when complete
+- [ ] Keep code blocks, links, and structure aligned with the English source
+
+---
+🤖 *Auto-generated by the p5.js Translation Tracker*${stewardsText}`,
+      });
+
+      console.log(`\n🔀 Stub PR created for ${langName}: #${pr.number}`);
+      console.log(`   URL: ${pr.html_url}`);
+      return pr;
+    } catch (error) {
+      console.error(`❌ Failed to create stub PR for ${language}:`, error.message);
+      return null;
+    }
+  }
+}
+
+module.exports = { GitHubCommitTracker };
diff --git a/.github/actions/translation-tracker/index.js b/.github/actions/translation-tracker/index.js
index a088f645c7..080e1301ac 100644
--- a/.github/actions/translation-tracker/index.js
+++ b/.github/actions/translation-tracker/index.js
@@ -1,1053 +1,22 @@
-const { execSync } = require('child_process');
 const fs = require('fs');
 const path = require('path');
-const https = require('https');
-const { Octokit } = require('@octokit/rest');
-const yaml = require('js-yaml');
-
-const SUPPORTED_LANGUAGES = ['es', 'hi', 'ko', 'zh-Hans'];
-const CONTENT_TYPES = ['examples', 'reference', 'tutorials', 'text-detail', 'events', 'libraries'];
-
-function getTranslationPath(englishFilePath, language) {
-  // Ensure we have a valid English path
-  if (!englishFilePath.includes('/en/')) {
-    throw new Error(`Invalid English file path: ${englishFilePath}. Must contain '/en/'`);
-  }
-  
-  // Split path into parts and replace 'en' directory with target language
-  const pathParts = englishFilePath.split('/');
-  const enIndex = pathParts.findIndex(part => part === 'en');
-  
-  if (enIndex === -1) {
-    throw new Error(`Could not find 'en' directory in path: ${englishFilePath}`);
-  }
-  
-  // Create new path with language replacement
-  const translationParts = [...pathParts];
-  translationParts[enIndex] = language;
-  
-  return translationParts.join('/');
-}
-
-function getSlugFromEnglishPath(englishFilePath, contentType) {
-  const prefix = `src/content/${contentType}/en/`;
-  if (!englishFilePath.startsWith(prefix)) return null;
-  let relative = englishFilePath.substring(prefix.length);
-  
-  if (relative.endsWith('/description.mdx')) {
-    relative = relative.slice(0, -'/description.mdx'.length);
-  } else if (relative.endsWith('.mdx')) {
-    relative = relative.slice(0, -'.mdx'.length);
-  } else if (relative.endsWith('.yaml')) {
-    relative = relative.slice(0, -'.yaml'.length);
-  }
-  return relative;
-}
-
-function parseEnvList(envValue, defaultList) {
-  if (!envValue || envValue.trim() === '') {
-    return defaultList;
-  }
-  return envValue.split(',').map((item) => item.trim()).filter(Boolean);
-}
-
-/**
- * Find English content files that have no translation file yet.
- * Used for stub-file generation (Week 2).
- */
-function findMissingTranslations(contentTypes, languages, options = {}) {
-  const { fullScan = false, testFiles = null } = options;
-  const missing = [];
-
-  for (const contentType of contentTypes) {
-    let englishFiles;
-    if (testFiles) {
-      englishFiles = testFiles.filter(
-        (file) =>
-          file.startsWith(`src/content/${contentType}/en/`) &&
-          (file.endsWith('.mdx') || file.endsWith('.yaml'))
-      );
-    } else if (fullScan) {
-      englishFiles = getAllEnglishContentFiles(contentType);
-    } else if (process.env.GITHUB_ACTIONS) {
-      englishFiles = getChangedFiles(null, contentType);
-    } else {
-      englishFiles = getAllEnglishContentFiles(contentType);
-    }
-
-    for (const englishFile of englishFiles) {
-      for (const language of languages) {
-        const translationPath = getTranslationPath(englishFile, language);
-        if (!fileExists(translationPath)) {
-          missing.push({ englishFile, language, translationPath, contentType });
-        }
-      }
-    }
-  }
-
-  missing.sort((a, b) => a.translationPath.localeCompare(b.translationPath));
-  return missing;
-}
-
-/** Frontmatter fields copied into stubs (English values). Avoids duplicating params/examples. */
-const STUB_FRONTMATTER_KEYS = {
-  reference: ['title', 'module', 'submodule', 'file', 'description'],
-  examples: ['title', 'oneLineDescription', 'featuredImage', 'featuredImageAlt'],
-  tutorials: ['title', 'description'],
-  'text-detail': ['title', 'description'],
-  events: ['title', 'description'],
-  libraries: ['title', 'description'],
-};
-
-function pickStubFrontmatter(frontmatter, contentType) {
-  const keys = STUB_FRONTMATTER_KEYS[contentType] || ['title', 'description'];
-  const picked = { needsTranslation: true };
-  for (const key of keys) {
-    if (frontmatter[key] !== undefined) {
-      picked[key] = frontmatter[key];
-    }
-  }
-  return picked;
-}
-
-function parseFrontmatter(raw, filePath) {
-  const frontmatterMatch = raw.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
-  if (!frontmatterMatch) {
-    throw new Error(`Could not find frontmatter in ${filePath}`);
-  }
-
-  return yaml.load(frontmatterMatch[1]) || {};
-}
-
-function stringifyMdx(frontmatter, body) {
-  const frontmatterText = yaml.dump(frontmatter, {
-    lineWidth: 100,
-    noRefs: true,
-    sortKeys: false,
-  });
-
-  return `---\n${frontmatterText}---\n${body}`;
-}
-
-/**
- * Build a placeholder translation file from an English source.
- * Copies essential frontmatter (in English), sets needsTranslation: true, minimal body.
- */
-function generateStubFromEnglish(englishPath, language, contentType = 'reference') {
-  const raw = fs.readFileSync(englishPath, 'utf8');
-  const frontmatter = parseFrontmatter(raw, englishPath);
-  const translationPath = getTranslationPath(englishPath, language);
-
-  const stubFrontmatter = pickStubFrontmatter(frontmatter, contentType);
-
-  const stubComment = `<!--
-  Auto-generated translation stub (${language}).
-  Translate from the English source and remove needsTranslation when done.
-  English source: ${englishPath}
--->`;
-
-  const stubBody = `${stubComment}
-
-<!-- Translation needed. Replace this placeholder with the translated content. -->
-`;
-
-  const content = stringifyMdx(stubFrontmatter, stubBody);
-
-  return { translationPath, content, englishPath };
-}
-
-/** Where dry-run stubs are written locally (never touches src/content by default). */
-function getStubWritePath(translationPath, dryRun) {
-  if (!dryRun) {
-    return translationPath;
-  }
-  const outputRoot =
-    process.env.STUB_OUTPUT_DIR ||
-    path.join(process.cwd(), '.github/actions/translation-tracker/stub-preview');
-  return path.join(outputRoot, translationPath);
-}
-
-async function loadStewardsConfig() {
-  const STEWARDS_URL = 'https://raw.githubusercontent.com/processing/p5.js/main/stewards.yml';
-  
-  return new Promise((resolve, reject) => {
-    https.get(STEWARDS_URL, (res) => {
-      let data = '';
-      
-      res.on('data', (chunk) => {
-        data += chunk;
-      });
-      
-      res.on('end', () => {
-        try {
-          const config = yaml.load(data);
-          console.log('Successfully loaded stewards config from p5.js repository');
-          resolve(config);
-        } catch (error) {
-          console.log(`Could not parse stewards config: ${error.message}`);
-          resolve(null);
-        }
-      });
-    }).on('error', (error) => {
-      console.log(` Could not load stewards config from remote: ${error.message}`);
-      resolve(null);
-    });
-  });
-}
-
-function getStewardsForLanguage(stewardsConfig, language) {
-  if (!stewardsConfig) return [];
-  
-  // Map website language codes to stewards.yml language codes
-  const languageMap = {
-    'zh-Hans': 'zh', // Simplified Chinese
-    'hi': 'hi',
-    'ko': 'ko',
-    'es': 'es'
-  };
-  
-  const stewardsLangCode = languageMap[language] || language;
-  const stewards = [];
-  
-  for (const [username, areas] of Object.entries(stewardsConfig)) {
-    if (!Array.isArray(areas)) continue;
-    
-    // Check if this steward has i18n area with the target language
-    for (const area of areas) {
-      if (typeof area === 'object' && area.i18n) {
-        const languages = area.i18n;
-        if (Array.isArray(languages) && languages.includes(stewardsLangCode)) {
-          stewards.push(`@${username}`);
-          break; 
-        }
-      }
-    }
-  }
-  
-  return stewards;
-}
-
-class GitHubCommitTracker {
-  constructor(token, owner, repo) {
-    this.octokit = new Octokit({ auth: token });
-    this.owner = owner;
-    this.repo = repo;
-    this.currentBranch = this.detectCurrentBranch();
-    this.stewardsConfig = null;
-  }
-
-  
-  static async create(token, owner, repo) {
-    const instance = new GitHubCommitTracker(token, owner, repo);
-    instance.stewardsConfig = await loadStewardsConfig();
-    return instance;
-  }
-
-  /**
-   * Detect the current git branch
-   */
-  detectCurrentBranch() {
-    try {
-      // GitHub Actions environment
-      if (process.env.GITHUB_HEAD_REF) {
-        return process.env.GITHUB_HEAD_REF; // For pull requests
-      }
-      
-      if (process.env.GITHUB_REF_NAME) {
-        return process.env.GITHUB_REF_NAME;
-      }
-      
-      // Git command fallback
-      try {
-        const branch = execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf8' }).trim();
-        if (branch && branch !== 'HEAD') {
-          return branch;
-        }
-      } catch (gitError) {
-        // Silent fallback
-      }
-      
-      // Default fallback
-      return 'main';
-      
-    } catch (error) {
-      return 'main';
-    }
-  }
-
-  /**
-   * Get the last commit for a specific file using GitHub API
-   */
-  async getLastCommit(filePath) {
-    try {
-      const { data } = await this.octokit.rest.repos.listCommits({
-        owner: this.owner,
-        repo: this.repo,
-        sha: this.currentBranch,
-        path: filePath,
-        per_page: 1
-      });
-
-      if (data.length > 0) {
-        return {
-          sha: data[0].sha,
-          date: new Date(data[0].commit.committer.date),
-          message: data[0].commit.message,
-          author: data[0].commit.author.name,
-          url: data[0].html_url
-        };
-      }
-      
-      return null;
-    } catch (error) {
-      console.log(`⚠️  Primary commit lookup failed for ${filePath} on branch '${this.currentBranch}': ${error.message}`);
-      
-      // Fallback to main branch if current branch fails
-      if (this.currentBranch !== 'main') {
-        try {
-          const { data } = await this.octokit.rest.repos.listCommits({
-            owner: this.owner,
-            repo: this.repo,
-            sha: 'main',
-            path: filePath,
-            per_page: 1
-          });
-          
-          if (data.length > 0) {
-            return {
-              sha: data[0].sha,
-              date: new Date(data[0].commit.committer.date),
-              message: data[0].commit.message,
-              author: data[0].commit.author.name,
-              url: data[0].html_url
-            };
-          }
-        } catch (fallbackError) {
-          console.log(`⚠️  Fallback to main branch also failed for ${filePath}: ${fallbackError.message}`);
-        }
-      }
-      
-      console.log(`❌ Could not get commit info for ${filePath} from any branch`);
-      return null;
-    }
-  }
-
-  /**
-   * Get a recent diff for a file (head vs previous commit) and return a short patch snippet
-   */
-  async getRecentDiffForFile(filePath) {
-    try {
-      // Get latest two commits for this file on current branch
-      const { data: commits } = await this.octokit.rest.repos.listCommits({
-        owner: this.owner,
-        repo: this.repo,
-        sha: this.currentBranch,
-        path: filePath,
-        per_page: 2,
-      });
-
-      if (!commits || commits.length === 0) {
-        return null;
-      }
-
-      const headSha = commits[0].sha;
-      let baseSha = commits.length > 1 ? commits[1].sha : null;
-
-      // If only one commit is found for the file (new file), use the parent of head
-      if (!baseSha) {
-        try {
-          const { data: headCommit } = await this.octokit.rest.repos.getCommit({
-            owner: this.owner,
-            repo: this.repo,
-            ref: headSha,
-          });
-          baseSha = headCommit.parents && headCommit.parents.length > 0 ? headCommit.parents[0].sha : null;
-        } catch (parentErr) {
-          console.log(`⚠️  Could not resolve base commit for diff of ${filePath}: ${parentErr.message}`);
-        }
-      }
-
-      if (!baseSha) {
-        return {
-          baseSha: null,
-          headSha,
-          compareUrl: `https://github.com/${this.owner}/${this.repo}/commit/${headSha}`,
-          patchSnippet: null,
-          isTruncated: false,
-        };
-      }
-
-      // Compare the two commits and extract the file patch
-      const { data: compare } = await this.octokit.rest.repos.compareCommits({
-        owner: this.owner,
-        repo: this.repo,
-        base: baseSha,
-        head: headSha,
-      });
-
-      const changedFile = (compare.files || []).find((f) => f.filename === filePath);
-      const patch = changedFile && changedFile.patch ? changedFile.patch : null;
-
-      let patchSnippet = null;
-      let isTruncated = false;
-      if (patch) {
-        const lines = patch.split('\n');
-        const maxLines = 50;
-        if (lines.length > maxLines) {
-          patchSnippet = lines.slice(0, maxLines).join('\n');
-          isTruncated = true;
-        } else {
-          patchSnippet = patch;
-        }
-      }
-
-      return {
-        baseSha,
-        headSha,
-        compareUrl: `https://github.com/${this.owner}/${this.repo}/compare/${baseSha}...${headSha}`,
-        patchSnippet,
-        isTruncated,
-      };
-    } catch (error) {
-      console.log(`⚠️  Failed to compute diff for ${filePath} on branch '${this.currentBranch}': ${error.message}`);
-      // Fallback to at least provide a compare link to branch head
-      return {
-        baseSha: null,
-        headSha: null,
-        compareUrl: `https://github.com/${this.owner}/${this.repo}/blob/${this.currentBranch}/${filePath}`,
-        patchSnippet: null,
-        isTruncated: false,
-      };
-    }
-  }
-
-  async createMultiLanguageTranslationIssue(fileTranslations) {
-    const englishFile = fileTranslations.englishFile;
-    const issueTitle = `🌍 Update translations for ${path.basename(englishFile)}`;
-    // Fetch recent English diff (best-effort)
-    const englishDiff = await this.getRecentDiffForFile(englishFile);
-    const issueBody = this.formatMultiLanguageIssueBody(fileTranslations, englishDiff);
-    
-    // Create labels: "needs translation" + specific language labels
-    const labels = ['needs translation', 'help wanted'];
-    const affectedLanguages = [
-      ...fileTranslations.outdatedLanguages.map(l => l.language),
-      ...fileTranslations.missingLanguages.map(l => l.language)
-    ];
-    
-    // Add specific language labels (remove duplicates)
-    const uniqueLanguages = [...new Set(affectedLanguages)];
-    uniqueLanguages.forEach(lang => {
-      labels.push(`lang-${lang}`);
-    });
-    
-    let assignees = [];
-    uniqueLanguages.forEach(lang => {
-      const stewards = getStewardsForLanguage(this.stewardsConfig, lang);
-      assignees.push(...stewards);
-    });
-    assignees = [...new Set(assignees.map(a => a.replace('@', '')))];
-    
-    try {
-      const createParams = {
-        owner: this.owner,
-        repo: this.repo,
-        title: issueTitle,
-        body: issueBody,
-        labels: labels
-      };
-      
-      if (assignees.length > 0) {
-        createParams.assignees = assignees;
-      }
-      
-      const { data } = await this.octokit.rest.issues.create(createParams);
-
-      return data;
-    } catch (error) {
-      // If assignees fail, try again without assignees
-      if (error.message.includes('assignees') && assignees.length > 0) {
-        try {
-          const { data } = await this.octokit.rest.issues.create({
-            owner: this.owner,
-            repo: this.repo,
-            title: issueTitle,
-            body: issueBody,
-            labels: labels
-          });
-          console.log(`⚠️  Issue created but stewards could not be assigned (not collaborators)`);
-          return data;
-        } catch (retryError) {
-          console.error(`❌ Error creating issue on retry:`, retryError.message);
-          return null;
-        }
-      }
-      console.error(`❌ Error creating multi-language issue:`, error.message);
-      return null;
-    }
-  }
-
-  /**
-   * Format the issue body for multi-language updates
-   */
-  formatMultiLanguageIssueBody(fileTranslations, englishDiff) {
-    const englishFile = fileTranslations.englishFile;
-    const outdatedLanguages = fileTranslations.outdatedLanguages;
-    const missingLanguages = fileTranslations.missingLanguages;
-    const englishCommit = fileTranslations.englishCommit;
-
-    let body = `## 🌍 Translation Update Needed
-
-**File**: \`${englishFile}\`
-**Branch**: \`${this.currentBranch}\`
-
-### 📅 Timeline
-- **Latest English update**: ${englishCommit.date.toLocaleDateString()} by ${englishCommit.author}
-
-`;
-
-    // Outdated translations section
-    if (outdatedLanguages.length > 0) {
-      body += `### 🔄 Outdated Translations\n\n`;
-      outdatedLanguages.forEach(lang => {
-        const translationPath = lang.translationPath;
-        const stewards = getStewardsForLanguage(this.stewardsConfig, lang.language);
-        const stewardsText = stewards.length > 0 ? ` (cc ${stewards.join(', ')})` : '';
-        body += `- **${this.getLanguageDisplayName(lang.language)}**: Last updated ${lang.commitInfo.translation.date.toLocaleDateString()} by ${lang.commitInfo.translation.author}${stewardsText}\n`;
-        body += `  - [📝 View file](https://github.com/${this.owner}/${this.repo}/blob/${this.currentBranch}/${translationPath})\n\n`;
-      });
-    }
-
-    // Missing translations section
-    if (missingLanguages.length > 0) {
-      body += `### ❌ Missing Translations\n\n`;
-      missingLanguages.forEach(lang => {
-        const translationPath = lang.translationPath;
-        const stewards = getStewardsForLanguage(this.stewardsConfig, lang.language);
-        const stewardsText = stewards.length > 0 ? ` (cc ${stewards.join(', ')})` : '';
-        body += `- **${this.getLanguageDisplayName(lang.language)}**: Translation file does not exist${stewardsText}\n`;
-        body += `  - Expected location: \`${translationPath}\`\n\n`;
-      });
-    }
-
-    // English diff. It shows the actual content changes in the English file.
-    if (englishDiff && (englishDiff.compareUrl || englishDiff.patchSnippet)) {
-      body += `### 🧩 Recent English Diff\n\n`;
-      if (englishDiff.compareUrl) {
-        body += `- [🔍 View full compare](${englishDiff.compareUrl})\n\n`;
-      }
-      if (englishDiff.patchSnippet) {
-        body += `<details>\n<summary>Show patch snippet</summary>\n\n`;
-        body += `\`\`\`diff\n${englishDiff.patchSnippet}\n\`\`\`\n\n`;
-        if (englishDiff.isTruncated) {
-          body += `_(Patch snippet truncated. Use the compare link above for the full diff.)_\n\n`;
-        }
-        body += `</details>\n\n`;
-      } else {
-        body += `_(Couldn't generate preview of the differences for this change. Use the compare link above to see the full diff.)_\n\n`;
-      }
-    }
-
-    body += `### 🔗 Quick Links
-- [📄 Current English file](https://github.com/${this.owner}/${this.repo}/blob/${this.currentBranch}/${englishFile})
-
-### ✅ Action Checklist
-
-**For translators / contributors:**
-
-- [ ] Review the recent English file changes and the current translations
-- [ ] Confirm if translation already reflects the update — close the issue if so  
-- [ ] Update the translation files accordingly
-- [ ] Maintain structure, code blocks, and formatting
-- [ ] Ensure translation is accurate and culturally appropriate
-
-### 📝 Summary of English File Changes
-**Last commit**: [${englishCommit.message}](${englishCommit.url})
-
-${outdatedLanguages.length > 0 || missingLanguages.length > 0 ? `**Change Type**: English file was updated. ${outdatedLanguages.length > 0 ? `${outdatedLanguages.map(l => this.getLanguageDisplayName(l.language)).join(', ')} translation${outdatedLanguages.length > 1 ? 's' : ''} may be outdated.` : ''} ${missingLanguages.length > 0 ? `${missingLanguages.map(l => this.getLanguageDisplayName(l.language)).join(', ')} translation${missingLanguages.length > 1 ? 's are' : ' is'} missing.` : ''}` : ''}
-
----
-ℹ️ **Need help?** See our [Contributor Guidelines](https://p5js.org/contribute/contributor_guidelines/)
-
-🤖 *This issue was auto-generated by the p5.js Translation Tracker*`;
-    return body;
-  }
-
-  /**
-   * Get display name for language code
-   */
-  getLanguageDisplayName(langCode) {
-    const languages = {
-      'es': 'Spanish (Español)',
-      'hi': 'Hindi (हिन्दी)',
-      'ko': 'Korean (한국어)',
-      'zh-Hans': 'Chinese Simplified (简体中文)'
-    };
-    return languages[langCode] || langCode;
-  }
-
-  /**
-   * Create a branch with one commit containing multiple new files (for stub PRs).
-   */
-  async createBranchWithFiles(branchName, commitMessage, fileChanges) {
-    const baseBranch = this.currentBranch || 'main';
-
-    const { data: ref } = await this.octokit.rest.git.getRef({
-      owner: this.owner,
-      repo: this.repo,
-      ref: `heads/${baseBranch}`,
-    });
-    const baseSha = ref.object.sha;
-
-    const { data: baseCommit } = await this.octokit.rest.git.getCommit({
-      owner: this.owner,
-      repo: this.repo,
-      commit_sha: baseSha,
-    });
-
-    const treeItems = await Promise.all(
-      fileChanges.map(async ({ path: filePath, content }) => {
-        const { data: blob } = await this.octokit.rest.git.createBlob({
-          owner: this.owner,
-          repo: this.repo,
-          content: Buffer.from(content, 'utf8').toString('base64'),
-          encoding: 'base64',
-        });
-        return { path: filePath, mode: '100644', type: 'blob', sha: blob.sha };
-      })
-    );
-
-    const { data: tree } = await this.octokit.rest.git.createTree({
-      owner: this.owner,
-      repo: this.repo,
-      base_tree: baseCommit.tree.sha,
-      tree: treeItems,
-    });
-
-    const { data: commit } = await this.octokit.rest.git.createCommit({
-      owner: this.owner,
-      repo: this.repo,
-      message: commitMessage,
-      tree: tree.sha,
-      parents: [baseSha],
-    });
-
-    await this.octokit.rest.git.createRef({
-      owner: this.owner,
-      repo: this.repo,
-      ref: `refs/heads/${branchName}`,
-      sha: commit.sha,
-    });
-
-    return { branchName, commitSha: commit.sha };
-  }
-
-  /**
-   * Open one PR per language with all stub files for that language.
-   */
-  async createStubPullRequest(language, stubs) {
-    const dateStr = new Date().toISOString().slice(0, 10).replace(/-/g, '');
-    const branchName = `translation-stubs/${language}-${dateStr}-${Date.now()}`;
-    const langName = this.getLanguageDisplayName(language);
-    const commitMessage = `chore(i18n): add ${language} translation stubs for ${stubs.length} page(s)`;
-
-    const fileChanges = stubs.map((stub) => ({
-      path: stub.translationPath,
-      content: stub.content,
-    }));
-
-    try {
-      await this.createBranchWithFiles(branchName, commitMessage, fileChanges);
-
-      const stewards = getStewardsForLanguage(this.stewardsConfig, language);
-      const stewardsText = stewards.length > 0 ? `\n\ncc ${stewards.join(' ')}` : '';
-      const fileList = stubs.map((stub) => `- \`${stub.translationPath}\` (from \`${stub.englishPath}\`)`).join('\n');
-
-      const { data: pr } = await this.octokit.rest.pulls.create({
-        owner: this.owner,
-        repo: this.repo,
-        title: `chore(i18n): add ${langName} translation stubs (${stubs.length})`,
-        head: branchName,
-        base: this.currentBranch || 'main',
-        body: `## Translation stub files
-
-This PR adds placeholder files for content that exists in English but has no ${langName} translation yet.
-
-Each stub:
-- copies English frontmatter
-- sets \`needsTranslation: true\`
-- includes a short placeholder body for translators to replace
-
-### Files (${stubs.length})
-
-${fileList}
-
-### Next steps for translators
-
-- [ ] Translate each file's body and frontmatter fields
-- [ ] Remove or set \`needsTranslation: false\` when complete
-- [ ] Keep code blocks, links, and structure aligned with the English source
-
----
-🤖 *Auto-generated by the p5.js Translation Tracker*${stewardsText}`,
-      });
-
-      console.log(`\n🔀 Stub PR created for ${langName}: #${pr.number}`);
-      console.log(`   URL: ${pr.html_url}`);
-      return pr;
-    } catch (error) {
-      console.error(`❌ Failed to create stub PR for ${language}:`, error.message);
-      return null;
-    }
-  }
-}
-
-/**
- * Get changed files from git or test files (generalized for different content types)
- */
-function getChangedFiles(testFiles = null, contentType = 'examples') {
-  // Allow passing test files for local development (Week 1 feature)
-  if (testFiles) {
-    console.log('🧪 Using provided test files for local testing');
-    return testFiles.filter(file => 
-      file.startsWith(`src/content/${contentType}/en`) && (file.endsWith('.mdx') || file.endsWith('.yaml'))
-    );
-  }
-
-  try {
-    // Different git commands for different event types
-    const gitCommand = process.env.GITHUB_EVENT_NAME === 'pull_request' 
-      ? 'git diff --name-only origin/main...HEAD'  // Compare with base branch for PRs
-      : 'git diff --name-only HEAD~1 HEAD';       // Compare with previous commit for pushes
-    
-    const changedFilesOutput = execSync(gitCommand, { encoding: 'utf8' });
-    const allChangedFiles = changedFilesOutput.trim().split('\n').filter(file => file.length > 0);
-    
-    const changedContentFiles = allChangedFiles.filter(file => 
-      file.startsWith(`src/content/${contentType}/en`) && (file.endsWith('.mdx') || file.endsWith('.yaml'))
-    );
-    
-    return changedContentFiles;
-  } catch (error) {
-    console.error('❌ Error getting changed files:', error.message);
-    return [];
-  }
-}
-
-/**
- * Scan all English files in a content directory (generalized for examples, tutorials, text-detail)
- */
-function getAllEnglishContentFiles(contentType = 'examples') {
-  const contentPath = `src/content/${contentType}/en`;
-  const allFiles = [];
-  
-  try {
-    if (!fs.existsSync(contentPath)) {
-      console.log(`❌ Content path does not exist: ${contentPath}`);
-      return [];
-    }
-    
-    const scanDirectory = (dir) => {
-      const items = fs.readdirSync(dir);
-      items.forEach(item => {
-        const itemPath = path.join(dir, item);
-        if (fs.statSync(itemPath).isDirectory()) {
-          scanDirectory(itemPath);
-        } else if (item.endsWith('.mdx') || item.endsWith('.yaml')) {
-          allFiles.push(itemPath);
-        }
-      });
-    };
-    
-    scanDirectory(contentPath);
-    console.log(`📊 Found ${allFiles.length} English ${contentType} files to check`);
-    return allFiles;
-  } catch (error) {
-    console.error(`❌ Error scanning English ${contentType} files:`, error.message);
-    return [];
-  }
-}
-
-function fileExists(filePath) {
-  try {
-    return fs.existsSync(filePath);
-  } catch (error) {
-    return false;
-  }
-}
-
-
-function getFileModTime(filePath) {
-  try {
-    return fs.statSync(filePath).mtime;
-  } catch (error) {
-    console.log(`⚠️  Could not get file timestamp for ${filePath}: ${error.message}`);
-    return null;
-  }
-}
-
-
-async function checkTranslationStatus(changedFiles, githubTracker = null, createIssues = false) {
-  const translationStatus = {
-    needsUpdate: [],
-    missing: [],
-    upToDate: [],
-    issuesCreated: [],
-    fileTranslationMap: new Map()
-  };
-  
-  // Group translation issues by file to create single issues per file
-  const fileTranslationMap = translationStatus.fileTranslationMap;
-  
-  for (const englishFile of changedFiles) {
-    
-    let englishCommit = null;
-    if (githubTracker) {
-      englishCommit = await githubTracker.getLastCommit(englishFile);
-      if (!englishCommit) {
-        console.log(`⚠️ Skipping ${englishFile} - could not retrieve commit data`);
-        continue; 
-      }
-    }
-
-    const fileTranslations = {
-      englishFile,
-      outdatedLanguages: [],
-      missingLanguages: [],
-      upToDateLanguages: [],
-      englishCommit
-    };
-    
-    for (const language of SUPPORTED_LANGUAGES) {
-      const translationPath = getTranslationPath(englishFile, language);
-      const exists = fileExists(translationPath);
-      
-      if (!exists) {
-        const missingItem = {
-          englishFile,
-          language,
-          translationPath,
-          status: 'missing'
-        };
-        translationStatus.missing.push(missingItem);
-        fileTranslations.missingLanguages.push(missingItem);
-        continue;
-      }
-
-      
-      if (githubTracker) {
-        const translationCommit = await githubTracker.getLastCommit(translationPath);
-
-        if (!translationCommit) {
-          const missingItem = {
-            englishFile,
-            language,
-            translationPath,
-            status: 'missing'
-          };
-          translationStatus.missing.push(missingItem);
-          fileTranslations.missingLanguages.push(missingItem);
-          continue;
-        }
-
-        const isOutdated = englishCommit.date > translationCommit.date;
-        
-        if (isOutdated) {
-          const statusItem = {
-            englishFile,
-            language,
-            translationPath,
-            status: 'outdated',
-            commitInfo: {
-              english: englishCommit,
-              translation: translationCommit
-            }
-          };
-          
-          translationStatus.needsUpdate.push(statusItem);
-          fileTranslations.outdatedLanguages.push(statusItem);
-        } else {
-          const upToDateItem = {
-            englishFile,
-            language,
-            translationPath,
-            status: 'up-to-date'
-          };
-          translationStatus.upToDate.push(upToDateItem);
-          fileTranslations.upToDateLanguages.push(upToDateItem);
-        }
-      } else {
-        // Fallback to file modification time comparison
-        const englishModTime = getFileModTime(englishFile);
-        if (!englishModTime) {
-          console.log(`  ⚠️ Could not get modification time for English file`);
-          continue;
-        }
-        
-        const translationModTime = getFileModTime(translationPath);
-        const isOutdated = translationModTime < englishModTime;
-        
-        if (isOutdated) {
-          const statusItem = {
-            englishFile,
-            language,
-            translationPath,
-            status: 'outdated',
-            englishModTime,
-            translationModTime
-          };
-          translationStatus.needsUpdate.push(statusItem);
-          fileTranslations.outdatedLanguages.push(statusItem);
-        } else {
-          const upToDateItem = {
-            englishFile,
-            language,
-            translationPath,
-            status: 'up-to-date'
-          };
-          translationStatus.upToDate.push(upToDateItem);
-          fileTranslations.upToDateLanguages.push(upToDateItem);
-        }
-      }
-    }
-    
-    // Store file translations for potential issue creation
-    if (fileTranslations.outdatedLanguages.length > 0 || fileTranslations.missingLanguages.length > 0) {
-      fileTranslationMap.set(englishFile, fileTranslations);
-    }
-  }
-  
-  // Create single issues per file (covering all affected languages)
-  if (createIssues && githubTracker) {
-    for (const [englishFile, fileTranslations] of fileTranslationMap) {
-      const issue = await githubTracker.createMultiLanguageTranslationIssue(fileTranslations);
-      if (issue) {
-        const issueItem = {
-          englishFile,
-          affectedLanguages: [
-            ...fileTranslations.outdatedLanguages.map(l => l.language),
-            ...fileTranslations.missingLanguages.map(l => l.language)
-          ],
-          issueNumber: issue.number,
-          issueUrl: issue.html_url
-        };
-        translationStatus.issuesCreated.push(issueItem);
-      }
-    }
-  }
-  
-  return translationStatus;
-}
-
-/**
- * Week 2: generate stub files and open one PR per language.
- */
-async function runStubGeneration(githubTracker, options = {}) {
-  const languages = parseEnvList(process.env.STUB_LANGUAGES, SUPPORTED_LANGUAGES);
-  const contentTypes = parseEnvList(process.env.STUB_CONTENT_TYPES, ['reference']);
-  const fullScan = options.fullScan ?? process.env.STUB_FULL_SCAN === 'true';
-  const dryRun = process.env.STUB_DRY_RUN === 'true';
-  const maxFiles = parseInt(process.env.STUB_MAX_FILES || '50', 10);
-
-  console.log(`\n📦 Stub generation mode`);
-  console.log(`   Languages: ${languages.join(', ')}`);
-  console.log(`   Content types: ${contentTypes.join(', ')}`);
-  console.log(`   Scan: ${fullScan ? 'all English files' : 'changed files only'}`);
-
-  const missing = findMissingTranslations(contentTypes, languages, {
-    fullScan,
-    testFiles: options.testFiles || null,
-  });
-
-  if (missing.length === 0) {
-    console.log('\n✅ No missing translation files found for stub generation.');
-    return { prsCreated: [], stubsWritten: 0 };
-  }
-
-  console.log(`\n❌ Found ${missing.length} missing translation file(s):`);
-  missing.forEach((item) => {
-    console.log(`   - ${item.englishFile} → ${item.language}`);
-    console.log(`     Expected: ${item.translationPath}`);
-  });
-
-  const limited = missing.slice(0, maxFiles);
-  if (limited.length < missing.length) {
-    console.log(`\n⚠️  Limiting to ${maxFiles} stub(s) (STUB_MAX_FILES). Re-run to process more.`);
-  }
-
-  const byLanguage = new Map();
-  for (const item of limited) {
-    if (!byLanguage.has(item.language)) {
-      byLanguage.set(item.language, []);
-    }
-    byLanguage.get(item.language).push(item);
-  }
-
-  const prsCreated = [];
-  let stubsWritten = 0;
-
-  for (const [language, items] of byLanguage) {
-    const langName = githubTracker
-      ? githubTracker.getLanguageDisplayName(language)
-      : language;
-
-    console.log(`\n📝 Generating ${items.length} stub(s) for ${langName}:`);
-
-    const stubs = items.map((item) => {
-      const stub = generateStubFromEnglish(item.englishFile, language, item.contentType);
-      console.log(`   📄 ${item.englishFile} → ${stub.translationPath}`);
-      return stub;
-    });
-
-    if (dryRun || !githubTracker) {
-      const previewRoot =
-        process.env.STUB_OUTPUT_DIR ||
-        path.join(process.cwd(), '.github/actions/translation-tracker/stub-preview');
-      for (const stub of stubs) {
-        const writePath = getStubWritePath(stub.translationPath, true);
-        const dir = path.dirname(writePath);
-        if (!fs.existsSync(dir)) {
-          fs.mkdirSync(dir, { recursive: true });
-        }
-        fs.writeFileSync(writePath, stub.content, 'utf8');
-        stubsWritten += 1;
-      }
-      console.log(`\n🧪 Dry run: wrote ${stubs.length} stub file(s) under ${previewRoot}`);
-      continue;
-    }
-
-    const pr = await githubTracker.createStubPullRequest(language, stubs);
-    if (pr) {
-      prsCreated.push({
-        language,
-        prNumber: pr.number,
-        prUrl: pr.html_url,
-        fileCount: stubs.length,
-      });
-      stubsWritten += stubs.length;
-    }
-  }
-
-  if (prsCreated.length > 0) {
-    console.log(`\n🔀 Stub PRs created: ${prsCreated.length}`);
-    prsCreated.forEach((pr) => {
-      console.log(`   - ${pr.language}: PR #${pr.prNumber} (${pr.fileCount} file(s))`);
-      console.log(`     URL: ${pr.prUrl}`);
-    });
-  } else if (!dryRun && stubsWritten === 0 && limited.length > 0) {
-    console.log(`\n💡 Stubs were not written. Check GITHUB_TOKEN permissions (contents + pull-requests write).`);
-  }
-
-  return { prsCreated, stubsWritten };
-}
-
+const { SUPPORTED_LANGUAGES, CONTENT_TYPES } = require('./constants');
+const { getChangedFiles, getAllEnglishContentFiles, getSlugFromEnglishPath } = require('./utils');
+const { GitHubCommitTracker } = require('./github-tracker');
+const {
+  checkTranslationStatus,
+  runStubGeneration,
+  findMissingTranslations,
+  generateStubFromEnglish,
+  pickStubFrontmatter,
+} = require('./workflows');
 
 async function main(testFiles = null, options = {}) {
   const hasToken = !!process.env.GITHUB_TOKEN;
-  const isGitHubAction = !!process.env.GITHUB_ACTIONS; // Detect if running in GitHub Actions
+  const isGitHubAction = !!process.env.GITHUB_ACTIONS;
   const isProduction = hasToken && !testFiles;
   const generateStubsMode = process.env.GENERATE_STUBS === 'true';
-  
+
   if (generateStubsMode) {
     console.log(`📦 Stub generation: ${testFiles ? 'test files' : isGitHubAction ? 'changed files' : 'full scan'}`);
   } else if (testFiles) {
@@ -1058,7 +27,6 @@ async function main(testFiles = null, options = {}) {
     console.log(`🔍 Manual run: Scanning all files`);
   }
 
-  // Initialize GitHub tracker if token is available
   let githubTracker = null;
   if (hasToken) {
     try {
@@ -1070,7 +38,6 @@ async function main(testFiles = null, options = {}) {
     }
   }
 
-  // Week 2: stub-file PR generation (separate mode from issue tracking)
   if (generateStubsMode) {
     const dryRun = process.env.STUB_DRY_RUN === 'true';
     if (!githubTracker && !dryRun) {
@@ -1079,9 +46,7 @@ async function main(testFiles = null, options = {}) {
       return;
     }
 
-    const fullScan =
-      process.env.STUB_FULL_SCAN === 'true' ||
-      (!isGitHubAction && !testFiles);
+    const fullScan = process.env.STUB_FULL_SCAN === 'true' || (!isGitHubAction && !testFiles);
 
     await runStubGeneration(githubTracker, { fullScan, testFiles });
     return;
@@ -1099,33 +64,29 @@ async function main(testFiles = null, options = {}) {
       console.log(`📊 Scanning all English ${contentType} files...`);
       filesToCheck = getAllEnglishContentFiles(contentType);
     }
-    
+
     if (filesToCheck.length === 0) {
       continue;
     }
-    
+
     console.log(`\n📝 Checking ${filesToCheck.length} English ${contentType} file(s):`);
-    filesToCheck.forEach(file => console.log(`   - ${file}`));
+    filesToCheck.forEach((file) => console.log(`   - ${file}`));
 
     const createIssues = isProduction && githubTracker !== null;
-    const translationStatus = await checkTranslationStatus(
-      filesToCheck, 
-      githubTracker, 
-      createIssues
-    );
-    
+    const translationStatus = await checkTranslationStatus(filesToCheck, githubTracker, createIssues);
+
     allTranslationStatus.push({ contentType, translationStatus });
 
     const { needsUpdate, missing, upToDate, issuesCreated } = translationStatus;
-    
+
     console.log(`\n📊 Translation Status Summary for ${contentType}:`);
     console.log(`   🔄 Outdated: ${needsUpdate.length}`);
     console.log(`   ❌ Missing: ${missing.length}`);
     console.log(`   ✅ Up-to-date: ${upToDate.length}`);
-    
+
     if (needsUpdate.length > 0) {
       console.log(`\n🔄 Files needing translation updates:`);
-      needsUpdate.forEach(item => {
+      needsUpdate.forEach((item) => {
         const langName = githubTracker ? githubTracker.getLanguageDisplayName(item.language) : item.language;
         if (githubTracker && item.commitInfo) {
           console.log(`   - ${item.englishFile} → ${langName}`);
@@ -1140,21 +101,21 @@ async function main(testFiles = null, options = {}) {
         }
       });
     }
-    
+
     if (missing.length > 0) {
       console.log(`\n❌ Missing translation files:`);
-      missing.forEach(item => {
+      missing.forEach((item) => {
         const langName = githubTracker ? githubTracker.getLanguageDisplayName(item.language) : item.language;
         console.log(`   - ${item.englishFile} → ${langName}`);
         console.log(`     Expected: ${item.translationPath}`);
       });
     }
-    
+
     if (issuesCreated.length > 0) {
       console.log(`\n🎫 GitHub issues created: ${issuesCreated.length}`);
-      issuesCreated.forEach(issue => {
+      issuesCreated.forEach((issue) => {
         console.log(`   - Issue #${issue.issueNumber}: ${issue.englishFile}`);
-        console.log(`     Languages: ${issue.affectedLanguages.map(lang => githubTracker.getLanguageDisplayName(lang)).join(', ')}`);
+        console.log(`     Languages: ${issue.affectedLanguages.map((lang) => githubTracker.getLanguageDisplayName(lang)).join(', ')}`);
         console.log(`     URL: ${issue.issueUrl}`);
       });
     } else if (needsUpdate.length > 0 || missing.length > 0) {
@@ -1162,12 +123,11 @@ async function main(testFiles = null, options = {}) {
         console.log(`\n💡 Run with GITHUB_TOKEN to create GitHub issues`);
       }
     }
-    
+
     if (needsUpdate.length === 0 && missing.length === 0) {
       console.log(`\n✅ All ${contentType} translations are up to date!`);
     }
 
-    // Write manifest JSON for the site to consume
     try {
       const manifestDir = path.join(process.cwd(), 'public', 'translation-status');
       const manifestPath = path.join(manifestDir, `${contentType}.json`);
@@ -1178,9 +138,9 @@ async function main(testFiles = null, options = {}) {
       for (const [englishFile, fileTranslations] of translationStatus.fileTranslationMap) {
         const slug = getSlugFromEnglishPath(englishFile, contentType);
         if (!slug) continue;
-        const outdated = fileTranslations.outdatedLanguages.map(l => l.language);
-        const missingLangs = fileTranslations.missingLanguages.map(l => l.language);
-        const upToDateLangs = fileTranslations.upToDateLanguages.map(l => l.language);
+        const outdated = fileTranslations.outdatedLanguages.map((l) => l.language);
+        const missingLangs = fileTranslations.missingLanguages.map((l) => l.language);
+        const upToDateLangs = fileTranslations.upToDateLanguages.map((l) => l.language);
         content[slug] = {
           englishFile,
           outdated,
@@ -1202,7 +162,6 @@ async function main(testFiles = null, options = {}) {
   }
 }
 
-// Export for testing (simplified)
 module.exports = {
   main,
   getChangedFiles,
@@ -1214,10 +173,9 @@ module.exports = {
   runStubGeneration,
   GitHubCommitTracker,
   SUPPORTED_LANGUAGES,
-  CONTENT_TYPES
+  CONTENT_TYPES,
 };
 
-// Run if called directly
 if (require.main === module) {
   main();
 }
diff --git a/.github/actions/translation-tracker/package-lock.json b/.github/actions/translation-tracker/package-lock.json
index c99f32cf66..2784e337f7 100644
--- a/.github/actions/translation-tracker/package-lock.json
+++ b/.github/actions/translation-tracker/package-lock.json
@@ -11,7 +11,8 @@
       "dependencies": {
         "@actions/core": "^1.10.0",
         "@actions/github": "^5.1.1",
-        "@octokit/rest": "^19.0.5"
+        "@octokit/rest": "^19.0.5",
+        "js-yaml": "^4.1.0"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -339,6 +340,12 @@
         "@octokit/openapi-types": "^12.11.0"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/before-after-hook": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
@@ -357,6 +364,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/js-yaml": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
diff --git a/.github/actions/translation-tracker/utils.js b/.github/actions/translation-tracker/utils.js
new file mode 100644
index 0000000000..e5b5f53897
--- /dev/null
+++ b/.github/actions/translation-tracker/utils.js
@@ -0,0 +1,239 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const yaml = require('js-yaml');
+
+function getTranslationPath(englishFilePath, language) {
+  if (!englishFilePath.includes('/en/')) {
+    throw new Error(`Invalid English file path: ${englishFilePath}. Must contain '/en/'`);
+  }
+
+  const pathParts = englishFilePath.split('/');
+  const enIndex = pathParts.findIndex((part) => part === 'en');
+
+  if (enIndex === -1) {
+    throw new Error(`Could not find 'en' directory in path: ${englishFilePath}`);
+  }
+
+  const translationParts = [...pathParts];
+  translationParts[enIndex] = language;
+
+  return translationParts.join('/');
+}
+
+function getSlugFromEnglishPath(englishFilePath, contentType) {
+  const prefix = `src/content/${contentType}/en/`;
+  if (!englishFilePath.startsWith(prefix)) return null;
+  let relative = englishFilePath.substring(prefix.length);
+
+  if (relative.endsWith('/description.mdx')) {
+    relative = relative.slice(0, -'/description.mdx'.length);
+  } else if (relative.endsWith('.mdx')) {
+    relative = relative.slice(0, -'.mdx'.length);
+  } else if (relative.endsWith('.yaml')) {
+    relative = relative.slice(0, -'.yaml'.length);
+  }
+  return relative;
+}
+
+function parseEnvList(envValue, defaultList) {
+  if (!envValue || envValue.trim() === '') {
+    return defaultList;
+  }
+  return envValue.split(',').map((item) => item.trim()).filter(Boolean);
+}
+
+function fileExists(filePath) {
+  try {
+    return fs.existsSync(filePath);
+  } catch (error) {
+    return false;
+  }
+}
+
+function getFileModTime(filePath) {
+  try {
+    return fs.statSync(filePath).mtime;
+  } catch (error) {
+    console.log(`⚠️  Could not get file timestamp for ${filePath}: ${error.message}`);
+    return null;
+  }
+}
+
+function parseFrontmatter(raw, filePath) {
+  const frontmatterMatch = raw.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
+  if (!frontmatterMatch) {
+    throw new Error(`Could not find frontmatter in ${filePath}`);
+  }
+
+  return yaml.load(frontmatterMatch[1]) || {};
+}
+
+function stringifyMdx(frontmatter, body) {
+  const frontmatterText = yaml.dump(frontmatter, {
+    lineWidth: 100,
+    noRefs: true,
+    sortKeys: false,
+  });
+
+  return `---\n${frontmatterText}---\n${body}`;
+}
+
+/** Where dry-run stubs are written locally (never touches src/content by default). */
+function getStubWritePath(translationPath, dryRun) {
+  if (!dryRun) {
+    return translationPath;
+  }
+  const outputRoot =
+    process.env.STUB_OUTPUT_DIR ||
+    path.join(process.cwd(), '.github/actions/translation-tracker/stub-preview');
+  return path.join(outputRoot, translationPath);
+}
+
+function getChangedFiles(testFiles = null, contentType = 'examples') {
+  if (testFiles) {
+    console.log('🧪 Using provided test files for local testing');
+    return testFiles.filter(
+      (file) =>
+        file.startsWith(`src/content/${contentType}/en`) &&
+        (file.endsWith('.mdx') || file.endsWith('.yaml'))
+    );
+  }
+
+  try {
+    const gitCommand =
+      process.env.GITHUB_EVENT_NAME === 'pull_request'
+        ? 'git diff --name-only origin/main...HEAD'
+        : 'git diff --name-only HEAD~1 HEAD';
+
+    const changedFilesOutput = execSync(gitCommand, { encoding: 'utf8' });
+    const allChangedFiles = changedFilesOutput.trim().split('\n').filter((file) => file.length > 0);
+
+    return allChangedFiles.filter(
+      (file) =>
+        file.startsWith(`src/content/${contentType}/en`) &&
+        (file.endsWith('.mdx') || file.endsWith('.yaml'))
+    );
+  } catch (error) {
+    console.error('❌ Error getting changed files:', error.message);
+    return [];
+  }
+}
+
+function getAllEnglishContentFiles(contentType = 'examples') {
+  const contentPath = `src/content/${contentType}/en`;
+  const allFiles = [];
+
+  try {
+    if (!fs.existsSync(contentPath)) {
+      console.log(`❌ Content path does not exist: ${contentPath}`);
+      return [];
+    }
+
+    const scanDirectory = (dir) => {
+      const items = fs.readdirSync(dir);
+      items.forEach((item) => {
+        const itemPath = path.join(dir, item);
+        if (fs.statSync(itemPath).isDirectory()) {
+          scanDirectory(itemPath);
+        } else if (item.endsWith('.mdx') || item.endsWith('.yaml')) {
+          allFiles.push(itemPath);
+        }
+      });
+    };
+
+    scanDirectory(contentPath);
+    console.log(`📊 Found ${allFiles.length} English ${contentType} files to check`);
+    return allFiles;
+  } catch (error) {
+    console.error(`❌ Error scanning English ${contentType} files:`, error.message);
+    return [];
+  }
+}
+
+async function loadStewardsConfig() {
+  const STEWARDS_URL = 'https://raw.githubusercontent.com/processing/p5.js/main/stewards.yml';
+
+  return new Promise((resolve) => {
+    https
+      .get(STEWARDS_URL, (res) => {
+        let data = '';
+
+        res.on('data', (chunk) => {
+          data += chunk;
+        });
+
+        res.on('end', () => {
+          try {
+            const config = yaml.load(data);
+            console.log('Successfully loaded stewards config from p5.js repository');
+            resolve(config);
+          } catch (error) {
+            console.log(`Could not parse stewards config: ${error.message}`);
+            resolve(null);
+          }
+        });
+      })
+      .on('error', (error) => {
+        console.log(` Could not load stewards config from remote: ${error.message}`);
+        resolve(null);
+      });
+  });
+}
+
+function getStewardsForLanguage(stewardsConfig, language) {
+  if (!stewardsConfig) return [];
+
+  const languageMap = {
+    'zh-Hans': 'zh',
+    hi: 'hi',
+    ko: 'ko',
+    es: 'es',
+  };
+
+  const stewardsLangCode = languageMap[language] || language;
+  const stewards = [];
+
+  for (const [username, areas] of Object.entries(stewardsConfig)) {
+    if (!Array.isArray(areas)) continue;
+
+    for (const area of areas) {
+      if (typeof area === 'object' && area.i18n) {
+        const languages = area.i18n;
+        if (Array.isArray(languages) && languages.includes(stewardsLangCode)) {
+          stewards.push(`@${username}`);
+          break;
+        }
+      }
+    }
+  }
+
+  return stewards;
+}
+
+function getLanguageDisplayName(langCode) {
+  const languages = {
+    es: 'Spanish (Español)',
+    hi: 'Hindi (हिन्दी)',
+    ko: 'Korean (한국어)',
+    'zh-Hans': 'Chinese Simplified (简体中文)',
+  };
+  return languages[langCode] || langCode;
+}
+
+module.exports = {
+  getTranslationPath,
+  getSlugFromEnglishPath,
+  parseEnvList,
+  fileExists,
+  getFileModTime,
+  parseFrontmatter,
+  stringifyMdx,
+  getStubWritePath,
+  getChangedFiles,
+  getAllEnglishContentFiles,
+  loadStewardsConfig,
+  getStewardsForLanguage,
+  getLanguageDisplayName,
+};
diff --git a/.github/actions/translation-tracker/workflows.js b/.github/actions/translation-tracker/workflows.js
new file mode 100644
index 0000000000..43f8d6efc8
--- /dev/null
+++ b/.github/actions/translation-tracker/workflows.js
@@ -0,0 +1,345 @@
+const fs = require('fs');
+const path = require('path');
+const { SUPPORTED_LANGUAGES, STUB_FRONTMATTER_KEYS } = require('./constants');
+const {
+  getTranslationPath,
+  parseEnvList,
+  fileExists,
+  getFileModTime,
+  parseFrontmatter,
+  stringifyMdx,
+  getStubWritePath,
+  getChangedFiles,
+  getAllEnglishContentFiles,
+  getLanguageDisplayName,
+} = require('./utils');
+
+/**
+ * Find English content files that have no translation file yet.
+ * Used for stub-file generation (Week 2).
+ */
+function findMissingTranslations(contentTypes, languages, options = {}) {
+  const { fullScan = false, testFiles = null } = options;
+  const missing = [];
+
+  for (const contentType of contentTypes) {
+    let englishFiles;
+    if (testFiles) {
+      englishFiles = testFiles.filter(
+        (file) =>
+          file.startsWith(`src/content/${contentType}/en/`) &&
+          (file.endsWith('.mdx') || file.endsWith('.yaml'))
+      );
+    } else if (fullScan) {
+      englishFiles = getAllEnglishContentFiles(contentType);
+    } else if (process.env.GITHUB_ACTIONS) {
+      englishFiles = getChangedFiles(null, contentType);
+    } else {
+      englishFiles = getAllEnglishContentFiles(contentType);
+    }
+
+    for (const englishFile of englishFiles) {
+      for (const language of languages) {
+        const translationPath = getTranslationPath(englishFile, language);
+        if (!fileExists(translationPath)) {
+          missing.push({ englishFile, language, translationPath, contentType });
+        }
+      }
+    }
+  }
+
+  missing.sort((a, b) => a.translationPath.localeCompare(b.translationPath));
+  return missing;
+}
+
+function pickStubFrontmatter(frontmatter, contentType) {
+  const keys = STUB_FRONTMATTER_KEYS[contentType] || ['title', 'description'];
+  const picked = { needsTranslation: true };
+  for (const key of keys) {
+    if (frontmatter[key] !== undefined) {
+      picked[key] = frontmatter[key];
+    }
+  }
+  return picked;
+}
+
+/**
+ * Build a placeholder translation file from an English source.
+ * Copies essential frontmatter (in English), sets needsTranslation: true, minimal body.
+ */
+function generateStubFromEnglish(englishPath, language, contentType = 'reference') {
+  const raw = fs.readFileSync(englishPath, 'utf8');
+  const frontmatter = parseFrontmatter(raw, englishPath);
+  const translationPath = getTranslationPath(englishPath, language);
+
+  const stubFrontmatter = pickStubFrontmatter(frontmatter, contentType);
+
+  const stubComment = `<!--
+  Auto-generated translation stub (${language}).
+  Translate from the English source and remove needsTranslation when done.
+  English source: ${englishPath}
+-->`;
+
+  const stubBody = `${stubComment}
+
+<!-- Translation needed. Replace this placeholder with the translated content. -->
+`;
+
+  const content = stringifyMdx(stubFrontmatter, stubBody);
+
+  return { translationPath, content, englishPath };
+}
+
+async function checkTranslationStatus(changedFiles, githubTracker = null, createIssues = false) {
+  const translationStatus = {
+    needsUpdate: [],
+    missing: [],
+    upToDate: [],
+    issuesCreated: [],
+    fileTranslationMap: new Map(),
+  };
+
+  const fileTranslationMap = translationStatus.fileTranslationMap;
+
+  for (const englishFile of changedFiles) {
+    let englishCommit = null;
+    if (githubTracker) {
+      englishCommit = await githubTracker.getLastCommit(englishFile);
+      if (!englishCommit) {
+        console.log(`⚠️ Skipping ${englishFile} - could not retrieve commit data`);
+        continue;
+      }
+    }
+
+    const fileTranslations = {
+      englishFile,
+      outdatedLanguages: [],
+      missingLanguages: [],
+      upToDateLanguages: [],
+      englishCommit,
+    };
+
+    for (const language of SUPPORTED_LANGUAGES) {
+      const translationPath = getTranslationPath(englishFile, language);
+      const exists = fileExists(translationPath);
+
+      if (!exists) {
+        const missingItem = {
+          englishFile,
+          language,
+          translationPath,
+          status: 'missing',
+        };
+        translationStatus.missing.push(missingItem);
+        fileTranslations.missingLanguages.push(missingItem);
+        continue;
+      }
+
+      if (githubTracker) {
+        const translationCommit = await githubTracker.getLastCommit(translationPath);
+
+        if (!translationCommit) {
+          const missingItem = {
+            englishFile,
+            language,
+            translationPath,
+            status: 'missing',
+          };
+          translationStatus.missing.push(missingItem);
+          fileTranslations.missingLanguages.push(missingItem);
+          continue;
+        }
+
+        const isOutdated = englishCommit.date > translationCommit.date;
+
+        if (isOutdated) {
+          const statusItem = {
+            englishFile,
+            language,
+            translationPath,
+            status: 'outdated',
+            commitInfo: {
+              english: englishCommit,
+              translation: translationCommit,
+            },
+          };
+
+          translationStatus.needsUpdate.push(statusItem);
+          fileTranslations.outdatedLanguages.push(statusItem);
+        } else {
+          const upToDateItem = {
+            englishFile,
+            language,
+            translationPath,
+            status: 'up-to-date',
+          };
+          translationStatus.upToDate.push(upToDateItem);
+          fileTranslations.upToDateLanguages.push(upToDateItem);
+        }
+      } else {
+        const englishModTime = getFileModTime(englishFile);
+        if (!englishModTime) {
+          console.log(`  ⚠️ Could not get modification time for English file`);
+          continue;
+        }
+
+        const translationModTime = getFileModTime(translationPath);
+        const isOutdated = translationModTime < englishModTime;
+
+        if (isOutdated) {
+          const statusItem = {
+            englishFile,
+            language,
+            translationPath,
+            status: 'outdated',
+            englishModTime,
+            translationModTime,
+          };
+          translationStatus.needsUpdate.push(statusItem);
+          fileTranslations.outdatedLanguages.push(statusItem);
+        } else {
+          const upToDateItem = {
+            englishFile,
+            language,
+            translationPath,
+            status: 'up-to-date',
+          };
+          translationStatus.upToDate.push(upToDateItem);
+          fileTranslations.upToDateLanguages.push(upToDateItem);
+        }
+      }
+    }
+
+    if (fileTranslations.outdatedLanguages.length > 0 || fileTranslations.missingLanguages.length > 0) {
+      fileTranslationMap.set(englishFile, fileTranslations);
+    }
+  }
+
+  if (createIssues && githubTracker) {
+    for (const [, fileTranslations] of fileTranslationMap) {
+      const issue = await githubTracker.createMultiLanguageTranslationIssue(fileTranslations);
+      if (issue) {
+        const issueItem = {
+          englishFile: fileTranslations.englishFile,
+          affectedLanguages: [
+            ...fileTranslations.outdatedLanguages.map((l) => l.language),
+            ...fileTranslations.missingLanguages.map((l) => l.language),
+          ],
+          issueNumber: issue.number,
+          issueUrl: issue.html_url,
+        };
+        translationStatus.issuesCreated.push(issueItem);
+      }
+    }
+  }
+
+  return translationStatus;
+}
+
+/**
+ * Week 2: generate stub files and open one PR per language.
+ */
+async function runStubGeneration(githubTracker, options = {}) {
+  const languages = parseEnvList(process.env.STUB_LANGUAGES, SUPPORTED_LANGUAGES);
+  const contentTypes = parseEnvList(process.env.STUB_CONTENT_TYPES, ['reference']);
+  const fullScan = options.fullScan ?? process.env.STUB_FULL_SCAN === 'true';
+  const dryRun = process.env.STUB_DRY_RUN === 'true';
+  const maxFiles = parseInt(process.env.STUB_MAX_FILES || '50', 10);
+
+  console.log(`\n📦 Stub generation mode`);
+  console.log(`   Languages: ${languages.join(', ')}`);
+  console.log(`   Content types: ${contentTypes.join(', ')}`);
+  console.log(`   Scan: ${fullScan ? 'all English files' : 'changed files only'}`);
+
+  const missing = findMissingTranslations(contentTypes, languages, {
+    fullScan,
+    testFiles: options.testFiles || null,
+  });
+
+  if (missing.length === 0) {
+    console.log('\n✅ No missing translation files found for stub generation.');
+    return { prsCreated: [], stubsWritten: 0 };
+  }
+
+  console.log(`\n❌ Found ${missing.length} missing translation file(s):`);
+  missing.forEach((item) => {
+    console.log(`   - ${item.englishFile} → ${item.language}`);
+    console.log(`     Expected: ${item.translationPath}`);
+  });
+
+  const limited = missing.slice(0, maxFiles);
+  if (limited.length < missing.length) {
+    console.log(`\n⚠️  Limiting to ${maxFiles} stub(s) (STUB_MAX_FILES). Re-run to process more.`);
+  }
+
+  const byLanguage = new Map();
+  for (const item of limited) {
+    if (!byLanguage.has(item.language)) {
+      byLanguage.set(item.language, []);
+    }
+    byLanguage.get(item.language).push(item);
+  }
+
+  const prsCreated = [];
+  let stubsWritten = 0;
+
+  for (const [language, items] of byLanguage) {
+    const langName = githubTracker ? githubTracker.getLanguageDisplayName(language) : getLanguageDisplayName(language);
+
+    console.log(`\n📝 Generating ${items.length} stub(s) for ${langName}:`);
+
+    const stubs = items.map((item) => {
+      const stub = generateStubFromEnglish(item.englishFile, language, item.contentType);
+      console.log(`   📄 ${item.englishFile} → ${stub.translationPath}`);
+      return stub;
+    });
+
+    if (dryRun || !githubTracker) {
+      const previewRoot =
+        process.env.STUB_OUTPUT_DIR ||
+        path.join(process.cwd(), '.github/actions/translation-tracker/stub-preview');
+      for (const stub of stubs) {
+        const writePath = getStubWritePath(stub.translationPath, true);
+        const dir = path.dirname(writePath);
+        if (!fs.existsSync(dir)) {
+          fs.mkdirSync(dir, { recursive: true });
+        }
+        fs.writeFileSync(writePath, stub.content, 'utf8');
+        stubsWritten += 1;
+      }
+      console.log(`\n🧪 Dry run: wrote ${stubs.length} stub file(s) under ${previewRoot}`);
+      continue;
+    }
+
+    const pr = await githubTracker.createStubPullRequest(language, stubs);
+    if (pr) {
+      prsCreated.push({
+        language,
+        prNumber: pr.number,
+        prUrl: pr.html_url,
+        fileCount: stubs.length,
+      });
+      stubsWritten += stubs.length;
+    }
+  }
+
+  if (prsCreated.length > 0) {
+    console.log(`\n🔀 Stub PRs created: ${prsCreated.length}`);
+    prsCreated.forEach((pr) => {
+      console.log(`   - ${pr.language}: PR #${pr.prNumber} (${pr.fileCount} file(s))`);
+      console.log(`     URL: ${pr.prUrl}`);
+    });
+  } else if (!dryRun && stubsWritten === 0 && limited.length > 0) {
+    console.log(`\n💡 Stubs were not written. Check GITHUB_TOKEN permissions (contents + pull-requests write).`);
+  }
+
+  return { prsCreated, stubsWritten };
+}
+
+module.exports = {
+  findMissingTranslations,
+  pickStubFrontmatter,
+  generateStubFromEnglish,
+  checkTranslationStatus,
+  runStubGeneration,
+};
diff --git a/src/content/reference/en/16_New_file_testing/hi.mdx b/src/content/reference/en/16_New_file_testing/hi.mdx
deleted file mode 100644
index 8f387301de..0000000000
--- a/src/content/reference/en/16_New_file_testing/hi.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-featuredImage: "../../../images/featured/15_Math_And_Physics-00_Non_Orthogonal_Reflection-thumbnail.png"
-featuredImageAlt: A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
-title: Non-Orthogonal Reflection
-oneLineDescription: Simulate a ball bouncing on a slanted surface.
-
-remix:
-  - description: Based on
-    attribution:
-      - name: Processing example by Ira Greenberg
-        URL: https://processing.org/examples/reflection1.html
-  - description: Ported by
-    attribution:
-      - name: David Blitz
-  - description: Revised by
-    attribution:
-      - name: Darren Kessner
-        URL: https://github.com/dkessner
-    code:
-      - label: 2023 code
-        URL: https://github.com/processing/p5.js-example/tree/main/examples/15_Math_And_Physics/00_Non_Orthogonal_Reflection
-  - collectivelyAttributedSince: 2024
----
-
-This example demonstrates a ball bouncing on a slanted
-surface, implemented using vector calculations for reflection.
-
-The code makes extensive use of the 
-<a href="https://p5js.org/reference/p5/p5.Vector">p5.Vector</a>
-class, including the 
-<a href="https://p5js.org/reference/p5/createVector">createVector()</a> function to create new vectors,
-and the vector methods
-<a href="https://p5js.org/reference/p5.Vector/add">add()</a>
-and
-<a href="https://p5js.org/reference/p5.Vector/dot">dot()</a>
-for the vector calculations.
\ No newline at end of file

From 1d3a309bd3225bf9f9d8a67ab3dd888d6baee6f5 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:33:32 +0545
Subject: [PATCH 13/16] test by changing files

---
 src/content/reference/en/p5 copy/abs.mdx      |  61 ++
 .../reference/en/p5 copy/accelerationX.mdx    |  37 +
 .../reference/en/p5 copy/accelerationY.mdx    |  37 +
 .../reference/en/p5 copy/accelerationZ.mdx    |  37 +
 src/content/reference/en/p5 copy/acos.mdx     |  86 ++
 src/content/reference/en/p5 copy/alpha.mdx    | 120 +++
 .../reference/en/p5 copy/ambientLight.mdx     | 241 ++++++
 .../reference/en/p5 copy/ambientMaterial.mdx  | 269 ++++++
 .../reference/en/p5 copy/angleMode.mdx        | 219 +++++
 src/content/reference/en/p5 copy/append.mdx   |  48 ++
 .../reference/en/p5 copy/applyMatrix.mdx      | 347 ++++++++
 src/content/reference/en/p5 copy/arc.mdx      | 274 ++++++
 .../reference/en/p5 copy/arrayCopy.mdx        |  95 +++
 src/content/reference/en/p5 copy/asin.mdx     |  86 ++
 src/content/reference/en/p5 copy/atan.mdx     |  86 ++
 src/content/reference/en/p5 copy/atan2.mdx    | 106 +++
 .../reference/en/p5 copy/background.mdx       | 336 ++++++++
 .../reference/en/p5 copy/baseColorShader.mdx  | 178 ++++
 .../en/p5 copy/baseMaterialShader.mdx         | 418 +++++++++
 .../reference/en/p5 copy/baseNormalShader.mdx | 211 +++++
 .../reference/en/p5 copy/baseStrokeShader.mdx | 356 ++++++++
 .../reference/en/p5 copy/beginClip.mdx        | 208 +++++
 .../reference/en/p5 copy/beginContour.mdx     | 134 +++
 .../reference/en/p5 copy/beginGeometry.mdx    | 281 +++++++
 .../reference/en/p5 copy/beginShape.mdx       | 449 ++++++++++
 src/content/reference/en/p5 copy/bezier.mdx   | 273 ++++++
 .../reference/en/p5 copy/bezierDetail.mdx     | 121 +++
 .../reference/en/p5 copy/bezierPoint.mdx      | 162 ++++
 .../reference/en/p5 copy/bezierTangent.mdx    | 155 ++++
 .../reference/en/p5 copy/bezierVertex.mdx     | 337 ++++++++
 src/content/reference/en/p5 copy/blend.mdx    | 214 +++++
 .../reference/en/p5 copy/blendMode.mdx        | 541 ++++++++++++
 src/content/reference/en/p5 copy/blue.mdx     | 158 ++++
 src/content/reference/en/p5 copy/boolean.mdx  | 157 ++++
 src/content/reference/en/p5 copy/box.mdx      | 186 ++++
 .../reference/en/p5 copy/brightness.mdx       | 168 ++++
 .../reference/en/p5 copy/buildGeometry.mdx    | 263 ++++++
 src/content/reference/en/p5 copy/byte.mdx     | 180 ++++
 src/content/reference/en/p5 copy/camera.mdx   | 200 +++++
 src/content/reference/en/p5 copy/ceil.mdx     |  65 ++
 src/content/reference/en/p5 copy/changed.mdx  |  87 ++
 src/content/reference/en/p5 copy/char.mdx     | 152 ++++
 src/content/reference/en/p5 copy/circle.mdx   |  77 ++
 src/content/reference/en/p5 copy/class.mdx    |  19 +
 src/content/reference/en/p5 copy/clear.mdx    | 108 +++
 .../reference/en/p5 copy/clearDepth.mdx       | 113 +++
 .../reference/en/p5 copy/clearStorage.mdx     |  81 ++
 src/content/reference/en/p5 copy/clip.mdx     | 225 +++++
 src/content/reference/en/p5 copy/color.mdx    | 349 ++++++++
 .../reference/en/p5 copy/colorMode.mdx        | 271 ++++++
 src/content/reference/en/p5 copy/concat.mdx   |  54 ++
 src/content/reference/en/p5 copy/cone.mdx     | 265 ++++++
 src/content/reference/en/p5 copy/console.mdx  |  99 +++
 .../reference/en/p5 copy/constants/ADD.mdx    |  18 +
 .../reference/en/p5 copy/constants/ALT.mdx    |  18 +
 .../reference/en/p5 copy/constants/ARROW.mdx  |  18 +
 .../reference/en/p5 copy/constants/AUTO.mdx   |  25 +
 .../reference/en/p5 copy/constants/AXES.mdx   |  18 +
 .../en/p5 copy/constants/BACKSPACE.mdx        |  18 +
 .../en/p5 copy/constants/BASELINE.mdx         |  18 +
 .../reference/en/p5 copy/constants/BEVEL.mdx  |  18 +
 .../reference/en/p5 copy/constants/BEZIER.mdx |  18 +
 .../reference/en/p5 copy/constants/BLEND.mdx  |  18 +
 .../reference/en/p5 copy/constants/BLUR.mdx   |  18 +
 .../reference/en/p5 copy/constants/BOLD.mdx   |  18 +
 .../en/p5 copy/constants/BOLDITALIC.mdx       |  18 +
 .../reference/en/p5 copy/constants/BOTTOM.mdx |  18 +
 .../reference/en/p5 copy/constants/BURN.mdx   |  18 +
 .../reference/en/p5 copy/constants/CENTER.mdx |  18 +
 .../reference/en/p5 copy/constants/CHAR.mdx   |  18 +
 .../reference/en/p5 copy/constants/CHORD.mdx  |  18 +
 .../reference/en/p5 copy/constants/CLAMP.mdx  |  18 +
 .../reference/en/p5 copy/constants/CLOSE.mdx  |  18 +
 .../en/p5 copy/constants/CONTAIN.mdx          |  18 +
 .../en/p5 copy/constants/CONTROL.mdx          |  18 +
 .../reference/en/p5 copy/constants/CORNER.mdx |  18 +
 .../en/p5 copy/constants/CORNERS.mdx          |  18 +
 .../reference/en/p5 copy/constants/COVER.mdx  |  18 +
 .../reference/en/p5 copy/constants/CROSS.mdx  |  18 +
 .../reference/en/p5 copy/constants/CURVE.mdx  |  18 +
 .../en/p5 copy/constants/DARKEST.mdx          |  18 +
 .../en/p5 copy/constants/DEGREES.mdx          |  59 ++
 .../reference/en/p5 copy/constants/DELETE.mdx |  18 +
 .../en/p5 copy/constants/DIFFERENCE.mdx       |  18 +
 .../reference/en/p5 copy/constants/DILATE.mdx |  18 +
 .../reference/en/p5 copy/constants/DODGE.mdx  |  18 +
 .../en/p5 copy/constants/DOWN_ARROW.mdx       |  18 +
 .../reference/en/p5 copy/constants/ENTER.mdx  |  18 +
 .../reference/en/p5 copy/constants/ERODE.mdx  |  18 +
 .../reference/en/p5 copy/constants/ESCAPE.mdx |  18 +
 .../en/p5 copy/constants/EXCLUSION.mdx        |  18 +
 .../en/p5 copy/constants/FALLBACK.mdx         |  18 +
 .../reference/en/p5 copy/constants/FILL.mdx   |  18 +
 .../reference/en/p5 copy/constants/FLAT.mdx   |  18 +
 .../reference/en/p5 copy/constants/FLOAT.mdx  |  18 +
 .../reference/en/p5 copy/constants/GRAY.mdx   |  18 +
 .../reference/en/p5 copy/constants/GRID.mdx   |  18 +
 .../en/p5 copy/constants/HALF_FLOAT.mdx       |  18 +
 .../en/p5 copy/constants/HALF_PI.mdx          | 109 +++
 .../reference/en/p5 copy/constants/HAND.mdx   |  18 +
 .../en/p5 copy/constants/HARD_LIGHT.mdx       |  18 +
 .../reference/en/p5 copy/constants/HSB.mdx    |  24 +
 .../reference/en/p5 copy/constants/HSL.mdx    |  18 +
 .../reference/en/p5 copy/constants/IMAGE.mdx  |  18 +
 .../en/p5 copy/constants/IMMEDIATE.mdx        |  18 +
 .../reference/en/p5 copy/constants/INVERT.mdx |  18 +
 .../reference/en/p5 copy/constants/ITALIC.mdx |  18 +
 .../reference/en/p5 copy/constants/LABEL.mdx  |  18 +
 .../en/p5 copy/constants/LANDSCAPE.mdx        |  18 +
 .../reference/en/p5 copy/constants/LEFT.mdx   |  18 +
 .../en/p5 copy/constants/LEFT_ARROW.mdx       |  18 +
 .../en/p5 copy/constants/LIGHTEST.mdx         |  18 +
 .../reference/en/p5 copy/constants/LINEAR.mdx |  18 +
 .../reference/en/p5 copy/constants/LINES.mdx  |  18 +
 .../en/p5 copy/constants/LINE_LOOP.mdx        |  18 +
 .../en/p5 copy/constants/LINE_STRIP.mdx       |  18 +
 .../reference/en/p5 copy/constants/MIRROR.mdx |  18 +
 .../reference/en/p5 copy/constants/MITER.mdx  |  18 +
 .../reference/en/p5 copy/constants/MOVE.mdx   |  18 +
 .../en/p5 copy/constants/MULTIPLY.mdx         |  18 +
 .../en/p5 copy/constants/NEAREST.mdx          |  18 +
 .../reference/en/p5 copy/constants/NORMAL.mdx |  18 +
 .../reference/en/p5 copy/constants/OPAQUE.mdx |  18 +
 .../reference/en/p5 copy/constants/OPEN.mdx   |  18 +
 .../reference/en/p5 copy/constants/OPTION.mdx |  18 +
 .../en/p5 copy/constants/OVERLAY.mdx          |  18 +
 .../reference/en/p5 copy/constants/P2D.mdx    |  19 +
 .../reference/en/p5 copy/constants/PI.mdx     | 108 +++
 .../reference/en/p5 copy/constants/PIE.mdx    |  18 +
 .../reference/en/p5 copy/constants/POINTS.mdx |  18 +
 .../en/p5 copy/constants/PORTRAIT.mdx         |  18 +
 .../en/p5 copy/constants/POSTERIZE.mdx        |  18 +
 .../en/p5 copy/constants/PROJECT.mdx          |  18 +
 .../en/p5 copy/constants/QUADRATIC.mdx        |  18 +
 .../reference/en/p5 copy/constants/QUADS.mdx  |  18 +
 .../en/p5 copy/constants/QUAD_STRIP.mdx       |  18 +
 .../en/p5 copy/constants/QUARTER_PI.mdx       | 109 +++
 .../en/p5 copy/constants/RADIANS.mdx          |  66 ++
 .../reference/en/p5 copy/constants/RADIUS.mdx |  18 +
 .../reference/en/p5 copy/constants/REMOVE.mdx |  18 +
 .../reference/en/p5 copy/constants/REPEAT.mdx |  18 +
 .../en/p5 copy/constants/REPLACE.mdx          |  18 +
 .../reference/en/p5 copy/constants/RETURN.mdx |  18 +
 .../reference/en/p5 copy/constants/RGB.mdx    |  18 +
 .../reference/en/p5 copy/constants/RGBA.mdx   |  18 +
 .../reference/en/p5 copy/constants/RIGHT.mdx  |  18 +
 .../en/p5 copy/constants/RIGHT_ARROW.mdx      |  18 +
 .../reference/en/p5 copy/constants/ROUND.mdx  |  18 +
 .../reference/en/p5 copy/constants/SCREEN.mdx |  18 +
 .../reference/en/p5 copy/constants/SHIFT.mdx  |  18 +
 .../reference/en/p5 copy/constants/SMOOTH.mdx |  18 +
 .../en/p5 copy/constants/SOFT_LIGHT.mdx       |  18 +
 .../reference/en/p5 copy/constants/SQUARE.mdx |  18 +
 .../reference/en/p5 copy/constants/STROKE.mdx |  18 +
 .../en/p5 copy/constants/SUBTRACT.mdx         |  18 +
 .../reference/en/p5 copy/constants/TAB.mdx    |  18 +
 .../reference/en/p5 copy/constants/TAU.mdx    | 114 +++
 .../reference/en/p5 copy/constants/TESS.mdx   |  18 +
 .../reference/en/p5 copy/constants/TEXT.mdx   |  18 +
 .../en/p5 copy/constants/TEXTURE.mdx          |  18 +
 .../en/p5 copy/constants/THRESHOLD.mdx        |  18 +
 .../reference/en/p5 copy/constants/TOP.mdx    |  18 +
 .../en/p5 copy/constants/TRIANGLES.mdx        |  18 +
 .../en/p5 copy/constants/TRIANGLE_FAN.mdx     |  18 +
 .../en/p5 copy/constants/TRIANGLE_STRIP.mdx   |  18 +
 .../reference/en/p5 copy/constants/TWO_PI.mdx | 114 +++
 .../en/p5 copy/constants/UNSIGNED_BYTE.mdx    |  18 +
 .../en/p5 copy/constants/UNSIGNED_INT.mdx     |  18 +
 .../en/p5 copy/constants/UP_ARROW.mdx         |  18 +
 .../en/p5 copy/constants/VERSION.mdx          |  19 +
 .../reference/en/p5 copy/constants/WAIT.mdx   |  18 +
 .../reference/en/p5 copy/constants/WEBGL.mdx  |  91 ++
 .../reference/en/p5 copy/constants/WEBGL2.mdx |  21 +
 .../reference/en/p5 copy/constants/WORD.mdx   |  18 +
 .../reference/en/p5 copy/constrain.mdx        |  86 ++
 src/content/reference/en/p5 copy/copy.mdx     | 144 ++++
 src/content/reference/en/p5 copy/cos.mdx      | 107 +++
 src/content/reference/en/p5 copy/createA.mdx  |  93 ++
 .../reference/en/p5 copy/createAudio.mdx      |  83 ++
 .../reference/en/p5 copy/createButton.mdx     | 109 +++
 .../reference/en/p5 copy/createCamera.mdx     |  99 +++
 .../reference/en/p5 copy/createCanvas.mdx     | 191 +++++
 .../reference/en/p5 copy/createCapture.mdx    | 189 +++++
 .../reference/en/p5 copy/createCheckbox.mdx   | 131 +++
 .../en/p5 copy/createColorPicker.mdx          | 101 +++
 .../reference/en/p5 copy/createConvolver.mdx  |  78 ++
 .../reference/en/p5 copy/createDiv.mdx        |  72 ++
 .../reference/en/p5 copy/createElement.mdx    |  78 ++
 .../reference/en/p5 copy/createFileInput.mdx  | 138 +++
 .../en/p5 copy/createFilterShader.mdx         | 148 ++++
 .../en/p5 copy/createFramebuffer.mdx          | 208 +++++
 .../reference/en/p5 copy/createGraphics.mdx   | 191 +++++
 .../reference/en/p5 copy/createImage.mdx      | 172 ++++
 .../reference/en/p5 copy/createImg.mdx        | 115 +++
 .../reference/en/p5 copy/createInput.mdx      | 118 +++
 .../reference/en/p5 copy/createModel.mdx      | 193 +++++
 .../reference/en/p5 copy/createNumberDict.mdx |  57 ++
 src/content/reference/en/p5 copy/createP.mdx  |  54 ++
 .../reference/en/p5 copy/createRadio.mdx      | 223 +++++
 .../reference/en/p5 copy/createSelect.mdx     | 235 ++++++
 .../reference/en/p5 copy/createShader.mdx     | 438 ++++++++++
 .../reference/en/p5 copy/createSlider.mdx     | 162 ++++
 .../reference/en/p5 copy/createSpan.mdx       |  93 ++
 .../reference/en/p5 copy/createStringDict.mdx |  56 ++
 .../reference/en/p5 copy/createVector.mdx     | 133 +++
 .../reference/en/p5 copy/createVideo.mdx      | 135 +++
 .../reference/en/p5 copy/createWriter.mdx     | 146 ++++
 src/content/reference/en/p5 copy/cursor.mdx   | 139 +++
 src/content/reference/en/p5 copy/curve.mdx    | 272 ++++++
 .../reference/en/p5 copy/curveDetail.mdx      | 117 +++
 .../reference/en/p5 copy/curvePoint.mdx       | 160 ++++
 .../reference/en/p5 copy/curveTangent.mdx     | 153 ++++
 .../reference/en/p5 copy/curveTightness.mdx   |  77 ++
 .../reference/en/p5 copy/curveVertex.mdx      | 407 +++++++++
 src/content/reference/en/p5 copy/cylinder.mdx | 282 +++++++
 src/content/reference/en/p5 copy/day.mdx      |  47 ++
 .../reference/en/p5 copy/debugMode.mdx        | 362 ++++++++
 src/content/reference/en/p5 copy/degrees.mdx  |  53 ++
 .../reference/en/p5 copy/deltaTime.mdx        |  68 ++
 src/content/reference/en/p5 copy/describe.mdx | 137 +++
 .../reference/en/p5 copy/describeElement.mdx  | 127 +++
 .../reference/en/p5 copy/deviceMoved.mdx      |  49 ++
 .../en/p5 copy/deviceOrientation.mdx          |  22 +
 .../reference/en/p5 copy/deviceShaken.mdx     |  50 ++
 .../reference/en/p5 copy/deviceTurned.mdx     |  80 ++
 .../reference/en/p5 copy/directionalLight.mdx | 277 ++++++
 .../en/p5 copy/disableFriendlyErrors.mdx      |  55 ++
 .../reference/en/p5 copy/displayDensity.mdx   |  55 ++
 .../reference/en/p5 copy/displayHeight.mdx    |  47 ++
 .../reference/en/p5 copy/displayWidth.mdx     |  47 ++
 src/content/reference/en/p5 copy/dist.mdx     | 121 +++
 .../reference/en/p5 copy/doubleClicked.mdx    | 157 ++++
 src/content/reference/en/p5 copy/draw.mdx     | 129 +++
 .../reference/en/p5 copy/drawingContext.mdx   |  78 ++
 src/content/reference/en/p5 copy/ellipse.mdx  | 164 ++++
 .../reference/en/p5 copy/ellipseMode.mdx      | 113 +++
 .../reference/en/p5 copy/ellipsoid.mdx        | 233 +++++
 .../reference/en/p5 copy/emissiveMaterial.mdx | 140 ++++
 src/content/reference/en/p5 copy/endClip.mdx  |  43 +
 .../reference/en/p5 copy/endContour.mdx       | 133 +++
 .../reference/en/p5 copy/endGeometry.mdx      | 285 +++++++
 src/content/reference/en/p5 copy/endShape.mdx | 256 ++++++
 src/content/reference/en/p5 copy/erase.mdx    | 123 +++
 .../reference/en/p5 copy/exitPointerLock.mdx  |  82 ++
 src/content/reference/en/p5 copy/exp.mdx      |  83 ++
 src/content/reference/en/p5 copy/fill.mdx     | 312 +++++++
 src/content/reference/en/p5 copy/filter.mdx   | 330 ++++++++
 src/content/reference/en/p5 copy/float.mdx    | 116 +++
 src/content/reference/en/p5 copy/floor.mdx    |  57 ++
 src/content/reference/en/p5 copy/focused.mdx  |  50 ++
 src/content/reference/en/p5 copy/for.mdx      | 290 +++++++
 src/content/reference/en/p5 copy/fract.mdx    |  55 ++
 .../reference/en/p5 copy/frameCount.mdx       |  73 ++
 .../reference/en/p5 copy/frameRate.mdx        | 107 +++
 .../reference/en/p5 copy/freeGeometry.mdx     | 152 ++++
 .../reference/en/p5 copy/freqToMidi.mdx       |  29 +
 src/content/reference/en/p5 copy/frustum.mdx  | 175 ++++
 .../reference/en/p5 copy/fullscreen.mdx       |  63 ++
 src/content/reference/en/p5 copy/function.mdx |  19 +
 src/content/reference/en/p5 copy/get.mdx      | 178 ++++
 .../reference/en/p5 copy/getAudioContext.mdx  |  56 ++
 src/content/reference/en/p5 copy/getItem.mdx  | 151 ++++
 .../reference/en/p5 copy/getOutputVolume.mdx  |  25 +
 .../en/p5 copy/getTargetFrameRate.mdx         |  48 ++
 src/content/reference/en/p5 copy/getURL.mdx   |  46 +
 .../reference/en/p5 copy/getURLParams.mdx     |  59 ++
 .../reference/en/p5 copy/getURLPath.mdx       |  58 ++
 src/content/reference/en/p5 copy/green.mdx    | 159 ++++
 .../reference/en/p5 copy/gridOutput.mdx       | 189 +++++
 src/content/reference/en/p5 copy/height.mdx   |  87 ++
 src/content/reference/en/p5 copy/hex.mdx      | 166 ++++
 src/content/reference/en/p5 copy/hour.mdx     |  47 ++
 src/content/reference/en/p5 copy/httpDo.mdx   | 150 ++++
 src/content/reference/en/p5 copy/httpGet.mdx  | 140 ++++
 src/content/reference/en/p5 copy/httpPost.mdx | 165 ++++
 src/content/reference/en/p5 copy/hue.mdx      | 145 ++++
 src/content/reference/en/p5 copy/if.mdx       | 268 ++++++
 src/content/reference/en/p5 copy/image.mdx    | 327 ++++++++
 .../reference/en/p5 copy/imageLight.mdx       |  86 ++
 .../reference/en/p5 copy/imageMode.mdx        | 129 +++
 src/content/reference/en/p5 copy/input.mdx    |  88 ++
 src/content/reference/en/p5 copy/int.mdx      | 169 ++++
 .../reference/en/p5 copy/isLooping.mdx        |  65 ++
 src/content/reference/en/p5 copy/join.mdx     |  70 ++
 src/content/reference/en/p5 copy/key.mdx      | 106 +++
 src/content/reference/en/p5 copy/keyCode.mdx  | 128 +++
 .../reference/en/p5 copy/keyIsDown.mdx        | 142 ++++
 .../reference/en/p5 copy/keyIsPressed.mdx     | 105 +++
 .../reference/en/p5 copy/keyPressed.mdx       | 192 +++++
 .../reference/en/p5 copy/keyReleased.mdx      | 188 +++++
 src/content/reference/en/p5 copy/keyTyped.mdx | 170 ++++
 src/content/reference/en/p5 copy/lerp.mdx     | 122 +++
 .../reference/en/p5 copy/lerpColor.mdx        |  96 +++
 src/content/reference/en/p5 copy/let.mdx      |  91 ++
 .../reference/en/p5 copy/lightFalloff.mdx     | 100 +++
 .../reference/en/p5 copy/lightness.mdx        | 168 ++++
 src/content/reference/en/p5 copy/lights.mdx   |  88 ++
 src/content/reference/en/p5 copy/line.mdx     | 194 +++++
 .../reference/en/p5 copy/linePerspective.mdx  | 164 ++++
 .../reference/en/p5 copy/loadBytes.mdx        |  56 ++
 src/content/reference/en/p5 copy/loadFont.mdx | 171 ++++
 .../reference/en/p5 copy/loadImage.mdx        | 137 +++
 src/content/reference/en/p5 copy/loadJSON.mdx | 288 +++++++
 .../reference/en/p5 copy/loadModel.mdx        | 469 +++++++++++
 .../reference/en/p5 copy/loadPixels.mdx       |  61 ++
 .../reference/en/p5 copy/loadShader.mdx       | 172 ++++
 .../reference/en/p5 copy/loadSound.mdx        |  78 ++
 .../reference/en/p5 copy/loadStrings.mdx      | 188 +++++
 .../reference/en/p5 copy/loadTable.mdx        | 124 +++
 src/content/reference/en/p5 copy/loadXML.mdx  | 220 +++++
 src/content/reference/en/p5 copy/log.mdx      |  79 ++
 src/content/reference/en/p5 copy/loop.mdx     | 111 +++
 src/content/reference/en/p5 copy/mag.mdx      |  84 ++
 src/content/reference/en/p5 copy/map.mdx      | 119 +++
 src/content/reference/en/p5 copy/match.mdx    |  91 ++
 src/content/reference/en/p5 copy/matchAll.mdx | 107 +++
 src/content/reference/en/p5 copy/max.mdx      | 104 +++
 .../reference/en/p5 copy/metalness.mdx        | 142 ++++
 .../reference/en/p5 copy/midiToFreq.mdx       |  66 ++
 src/content/reference/en/p5 copy/millis.mdx   | 147 ++++
 src/content/reference/en/p5 copy/min.mdx      | 104 +++
 src/content/reference/en/p5 copy/minute.mdx   |  47 ++
 src/content/reference/en/p5 copy/model.mdx    | 155 ++++
 src/content/reference/en/p5 copy/month.mdx    |  47 ++
 .../reference/en/p5 copy/mouseButton.mdx      |  87 ++
 .../reference/en/p5 copy/mouseClicked.mdx     | 196 +++++
 .../reference/en/p5 copy/mouseDragged.mdx     | 130 +++
 .../reference/en/p5 copy/mouseIsPressed.mdx   |  73 ++
 .../reference/en/p5 copy/mouseMoved.mdx       | 118 +++
 .../reference/en/p5 copy/mousePressed.mdx     | 193 +++++
 .../reference/en/p5 copy/mouseReleased.mdx    | 195 +++++
 .../reference/en/p5 copy/mouseWheel.mdx       | 162 ++++
 src/content/reference/en/p5 copy/mouseX.mdx   | 124 +++
 src/content/reference/en/p5 copy/mouseY.mdx   | 124 +++
 src/content/reference/en/p5 copy/movedX.mdx   |  78 ++
 src/content/reference/en/p5 copy/movedY.mdx   |  78 ++
 src/content/reference/en/p5 copy/nf.mdx       | 159 ++++
 src/content/reference/en/p5 copy/nfc.mdx      | 153 ++++
 src/content/reference/en/p5 copy/nfp.mdx      | 188 +++++
 src/content/reference/en/p5 copy/nfs.mdx      | 176 ++++
 src/content/reference/en/p5 copy/noCanvas.mdx |  36 +
 src/content/reference/en/p5 copy/noCursor.mdx |  38 +
 .../reference/en/p5 copy/noDebugMode.mdx      |  54 ++
 src/content/reference/en/p5 copy/noErase.mdx  |  55 ++
 src/content/reference/en/p5 copy/noFill.mdx   |  73 ++
 src/content/reference/en/p5 copy/noLights.mdx |  79 ++
 src/content/reference/en/p5 copy/noLoop.mdx   | 139 +++
 src/content/reference/en/p5 copy/noSmooth.mdx |  92 ++
 src/content/reference/en/p5 copy/noStroke.mdx |  71 ++
 src/content/reference/en/p5 copy/noTint.mdx   |  51 ++
 src/content/reference/en/p5 copy/noise.mdx    | 282 +++++++
 .../reference/en/p5 copy/noiseDetail.mdx      | 100 +++
 .../reference/en/p5 copy/noiseSeed.mdx        |  68 ++
 src/content/reference/en/p5 copy/norm.mdx     |  69 ++
 src/content/reference/en/p5 copy/normal.mdx   | 250 ++++++
 .../reference/en/p5 copy/normalMaterial.mdx   |  55 ++
 .../reference/en/p5 copy/orbitControl.mdx     | 203 +++++
 src/content/reference/en/p5 copy/ortho.mdx    | 168 ++++
 .../reference/en/p5 copy/outputVolume.mdx     |  51 ++
 .../reference/en/p5 copy/p5.Camera.mdx        | 659 +++++++++++++++
 src/content/reference/en/p5 copy/p5.Color.mdx | 116 +++
 .../reference/en/p5 copy/p5.Element.mdx       | 545 ++++++++++++
 src/content/reference/en/p5 copy/p5.File.mdx  | 153 ++++
 src/content/reference/en/p5 copy/p5.Font.mdx  | 146 ++++
 .../reference/en/p5 copy/p5.Framebuffer.mdx   | 443 ++++++++++
 .../reference/en/p5 copy/p5.Geometry.mdx      | 793 ++++++++++++++++++
 .../reference/en/p5 copy/p5.Graphics.mdx      | 261 ++++++
 src/content/reference/en/p5 copy/p5.Image.mdx | 519 ++++++++++++
 .../reference/en/p5 copy/p5.MediaElement.mdx  | 258 ++++++
 .../reference/en/p5 copy/p5.NumberDict.mdx    |  63 ++
 .../reference/en/p5 copy/p5.PrintWriter.mdx   |  35 +
 .../reference/en/p5 copy/p5.Renderer.mdx      |  34 +
 .../reference/en/p5 copy/p5.Shader.mdx        | 433 ++++++++++
 .../reference/en/p5 copy/p5.StringDict.mdx    |  15 +
 src/content/reference/en/p5 copy/p5.Table.mdx | 213 +++++
 .../reference/en/p5 copy/p5.TableRow.mdx      |  66 ++
 .../reference/en/p5 copy/p5.TypedDict.mdx     |  66 ++
 .../reference/en/p5 copy/p5.Vector.mdx        | 673 +++++++++++++++
 src/content/reference/en/p5 copy/p5.XML.mdx   | 321 +++++++
 src/content/reference/en/p5 copy/p5.mdx       |  51 ++
 .../reference/en/p5 copy/pAccelerationX.mdx   |  21 +
 .../reference/en/p5 copy/pAccelerationY.mdx   |  21 +
 .../reference/en/p5 copy/pAccelerationZ.mdx   |  21 +
 .../reference/en/p5 copy/pRotationX.mdx       |  63 ++
 .../reference/en/p5 copy/pRotationY.mdx       |  62 ++
 .../reference/en/p5 copy/pRotationZ.mdx       |  58 ++
 .../reference/en/p5 copy/paletteLerp.mdx      |  66 ++
 src/content/reference/en/p5 copy/panorama.mdx |  76 ++
 .../reference/en/p5 copy/perspective.mdx      | 194 +++++
 .../reference/en/p5 copy/pixelDensity.mdx     |  90 ++
 src/content/reference/en/p5 copy/pixels.mdx   | 173 ++++
 src/content/reference/en/p5 copy/plane.mdx    | 152 ++++
 src/content/reference/en/p5 copy/pmouseX.mdx  |  88 ++
 src/content/reference/en/p5 copy/pmouseY.mdx  |  88 ++
 src/content/reference/en/p5 copy/point.mdx    | 229 +++++
 .../reference/en/p5 copy/pointLight.mdx       | 329 ++++++++
 src/content/reference/en/p5 copy/pop.mdx      |  20 +
 src/content/reference/en/p5 copy/pow.mdx      |  67 ++
 src/content/reference/en/p5 copy/preload.mdx  |  70 ++
 src/content/reference/en/p5 copy/print.mdx    |  55 ++
 src/content/reference/en/p5 copy/push.mdx     |  20 +
 .../reference/en/p5 copy/pwinMouseX.mdx       |  99 +++
 .../reference/en/p5 copy/pwinMouseY.mdx       |  99 +++
 src/content/reference/en/p5 copy/quad.mdx     | 233 +++++
 .../reference/en/p5 copy/quadraticVertex.mdx  | 303 +++++++
 src/content/reference/en/p5 copy/radians.mdx  |  53 ++
 src/content/reference/en/p5 copy/random.mdx   |  48 ++
 .../reference/en/p5 copy/randomGaussian.mdx   | 104 +++
 .../reference/en/p5 copy/randomSeed.mdx       |  71 ++
 src/content/reference/en/p5 copy/rect.mdx     | 209 +++++
 src/content/reference/en/p5 copy/rectMode.mdx | 142 ++++
 src/content/reference/en/p5 copy/red.mdx      | 158 ++++
 src/content/reference/en/p5 copy/redraw.mdx   | 117 +++
 src/content/reference/en/p5 copy/remove.mdx   |  57 ++
 .../reference/en/p5 copy/removeElements.mdx   |  85 ++
 .../reference/en/p5 copy/removeItem.mdx       |  97 +++
 .../en/p5 copy/requestPointerLock.mdx         |  85 ++
 .../reference/en/p5 copy/resetMatrix.mdx      |  52 ++
 .../reference/en/p5 copy/resetShader.mdx      |  95 +++
 .../reference/en/p5 copy/resizeCanvas.mdx     | 133 +++
 src/content/reference/en/p5 copy/reverse.mdx  |  43 +
 src/content/reference/en/p5 copy/rotate.mdx   | 226 +++++
 src/content/reference/en/p5 copy/rotateX.mdx  | 161 ++++
 src/content/reference/en/p5 copy/rotateY.mdx  | 161 ++++
 src/content/reference/en/p5 copy/rotateZ.mdx  | 161 ++++
 .../reference/en/p5 copy/rotationX.mdx        |  45 +
 .../reference/en/p5 copy/rotationY.mdx        |  45 +
 .../reference/en/p5 copy/rotationZ.mdx        |  47 ++
 src/content/reference/en/p5 copy/round.mdx    |  88 ++
 .../reference/en/p5 copy/sampleRate.mdx       |  26 +
 .../reference/en/p5 copy/saturation.mdx       | 201 +++++
 src/content/reference/en/p5 copy/save.mdx     | 140 ++++
 .../reference/en/p5 copy/saveCanvas.mdx       | 166 ++++
 .../reference/en/p5 copy/saveFrames.mdx       | 175 ++++
 src/content/reference/en/p5 copy/saveGif.mdx  | 119 +++
 src/content/reference/en/p5 copy/saveJSON.mdx | 170 ++++
 .../reference/en/p5 copy/saveSound.mdx        |  35 +
 .../reference/en/p5 copy/saveStrings.mdx      | 185 ++++
 .../reference/en/p5 copy/saveTable.mdx        |  70 ++
 src/content/reference/en/p5 copy/scale.mdx    | 231 +++++
 src/content/reference/en/p5 copy/second.mdx   |  47 ++
 src/content/reference/en/p5 copy/select.mdx   | 113 +++
 .../reference/en/p5 copy/selectAll.mdx        | 121 +++
 src/content/reference/en/p5 copy/set.mdx      | 157 ++++
 .../reference/en/p5 copy/setAttributes.mdx    | 163 ++++
 src/content/reference/en/p5 copy/setBPM.mdx   |  29 +
 .../reference/en/p5 copy/setCamera.mdx        |  81 ++
 .../reference/en/p5 copy/setMoveThreshold.mdx |  59 ++
 .../en/p5 copy/setShakeThreshold.mdx          |  59 ++
 src/content/reference/en/p5 copy/setup.mdx    | 111 +++
 src/content/reference/en/p5 copy/shader.mdx   | 244 ++++++
 src/content/reference/en/p5 copy/shearX.mdx   | 105 +++
 src/content/reference/en/p5 copy/shearY.mdx   | 105 +++
 .../reference/en/p5 copy/shininess.mdx        |  86 ++
 src/content/reference/en/p5 copy/shorten.mdx  |  44 +
 src/content/reference/en/p5 copy/shuffle.mdx  | 132 +++
 src/content/reference/en/p5 copy/sin.mdx      | 107 +++
 src/content/reference/en/p5 copy/smooth.mdx   |  94 +++
 src/content/reference/en/p5 copy/sort.mdx     |  63 ++
 .../reference/en/p5 copy/soundFormats.mdx     |  51 ++
 src/content/reference/en/p5 copy/soundOut.mdx |  26 +
 .../reference/en/p5 copy/specularColor.mdx    | 308 +++++++
 .../reference/en/p5 copy/specularMaterial.mdx | 311 +++++++
 src/content/reference/en/p5 copy/sphere.mdx   | 165 ++++
 src/content/reference/en/p5 copy/splice.mdx   |  58 ++
 src/content/reference/en/p5 copy/split.mdx    |  87 ++
 .../reference/en/p5 copy/splitTokens.mdx      | 180 ++++
 .../reference/en/p5 copy/spotLight.mdx        | 398 +++++++++
 src/content/reference/en/p5 copy/sq.mdx       |  83 ++
 src/content/reference/en/p5 copy/sqrt.mdx     |  84 ++
 src/content/reference/en/p5 copy/square.mdx   | 163 ++++
 .../reference/en/p5 copy/storeItem.mdx        | 149 ++++
 src/content/reference/en/p5 copy/str.mdx      | 135 +++
 src/content/reference/en/p5 copy/stroke.mdx   | 311 +++++++
 .../reference/en/p5 copy/strokeCap.mdx        |  67 ++
 .../reference/en/p5 copy/strokeJoin.mdx       | 114 +++
 .../reference/en/p5 copy/strokeWeight.mdx     |  77 ++
 src/content/reference/en/p5 copy/subset.mdx   |  59 ++
 src/content/reference/en/p5 copy/tan.mdx      |  66 ++
 src/content/reference/en/p5 copy/text.mdx     |  96 +++
 .../reference/en/p5 copy/textAlign.mdx        | 135 +++
 .../reference/en/p5 copy/textAscent.mdx       |  71 ++
 .../reference/en/p5 copy/textDescent.mdx      |  71 ++
 src/content/reference/en/p5 copy/textFont.mdx | 127 +++
 .../reference/en/p5 copy/textLeading.mdx      |  63 ++
 .../reference/en/p5 copy/textOutput.mdx       | 186 ++++
 src/content/reference/en/p5 copy/textSize.mdx |  65 ++
 .../reference/en/p5 copy/textStyle.mdx        |  79 ++
 .../reference/en/p5 copy/textWidth.mdx        |  83 ++
 src/content/reference/en/p5 copy/textWrap.mdx | 111 +++
 src/content/reference/en/p5 copy/texture.mdx  | 207 +++++
 .../reference/en/p5 copy/textureMode.mdx      | 254 ++++++
 .../reference/en/p5 copy/textureWrap.mdx      | 370 ++++++++
 src/content/reference/en/p5 copy/tint.mdx     | 201 +++++
 src/content/reference/en/p5 copy/torus.mdx    | 200 +++++
 .../reference/en/p5 copy/touchEnded.mdx       | 196 +++++
 .../reference/en/p5 copy/touchMoved.mdx       | 198 +++++
 .../reference/en/p5 copy/touchStarted.mdx     | 197 +++++
 src/content/reference/en/p5 copy/touches.mdx  | 102 +++
 .../reference/en/p5 copy/translate.mdx        | 241 ++++++
 src/content/reference/en/p5 copy/triangle.mdx | 104 +++
 src/content/reference/en/p5 copy/trim.mdx     | 113 +++
 src/content/reference/en/p5 copy/turnAxis.mdx |  54 ++
 .../reference/en/p5 copy/types/Array.mdx      | 269 ++++++
 .../reference/en/p5 copy/types/Boolean.mdx    | 273 ++++++
 .../reference/en/p5 copy/types/Number.mdx     | 201 +++++
 .../reference/en/p5 copy/types/Object.mdx     |  91 ++
 .../reference/en/p5 copy/types/String.mdx     | 153 ++++
 src/content/reference/en/p5 copy/unchar.mdx   | 114 +++
 src/content/reference/en/p5 copy/unhex.mdx    | 121 +++
 .../reference/en/p5 copy/updatePixels.mdx     |  94 +++
 .../reference/en/p5 copy/userStartAudio.mdx   |  99 +++
 src/content/reference/en/p5 copy/vertex.mdx   | 242 ++++++
 .../reference/en/p5 copy/webglVersion.mdx     | 105 +++
 src/content/reference/en/p5 copy/while.mdx    | 161 ++++
 src/content/reference/en/p5 copy/width.mdx    |  87 ++
 .../reference/en/p5 copy/winMouseX.mdx        |  61 ++
 .../reference/en/p5 copy/winMouseY.mdx        |  61 ++
 .../reference/en/p5 copy/windowHeight.mdx     |  43 +
 .../reference/en/p5 copy/windowResized.mdx    |  64 ++
 .../reference/en/p5 copy/windowWidth.mdx      |  43 +
 src/content/reference/en/p5 copy/year.mdx     |  47 ++
 522 files changed, 60135 insertions(+)
 create mode 100644 src/content/reference/en/p5 copy/abs.mdx
 create mode 100644 src/content/reference/en/p5 copy/accelerationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/accelerationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/accelerationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/acos.mdx
 create mode 100644 src/content/reference/en/p5 copy/alpha.mdx
 create mode 100644 src/content/reference/en/p5 copy/ambientLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/ambientMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/angleMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/append.mdx
 create mode 100644 src/content/reference/en/p5 copy/applyMatrix.mdx
 create mode 100644 src/content/reference/en/p5 copy/arc.mdx
 create mode 100644 src/content/reference/en/p5 copy/arrayCopy.mdx
 create mode 100644 src/content/reference/en/p5 copy/asin.mdx
 create mode 100644 src/content/reference/en/p5 copy/atan.mdx
 create mode 100644 src/content/reference/en/p5 copy/atan2.mdx
 create mode 100644 src/content/reference/en/p5 copy/background.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseColorShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseMaterialShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseNormalShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseStrokeShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginClip.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginContour.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginShape.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezier.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierDetail.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierPoint.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierTangent.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierVertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/blend.mdx
 create mode 100644 src/content/reference/en/p5 copy/blendMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/blue.mdx
 create mode 100644 src/content/reference/en/p5 copy/boolean.mdx
 create mode 100644 src/content/reference/en/p5 copy/box.mdx
 create mode 100644 src/content/reference/en/p5 copy/brightness.mdx
 create mode 100644 src/content/reference/en/p5 copy/buildGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/byte.mdx
 create mode 100644 src/content/reference/en/p5 copy/camera.mdx
 create mode 100644 src/content/reference/en/p5 copy/ceil.mdx
 create mode 100644 src/content/reference/en/p5 copy/changed.mdx
 create mode 100644 src/content/reference/en/p5 copy/char.mdx
 create mode 100644 src/content/reference/en/p5 copy/circle.mdx
 create mode 100644 src/content/reference/en/p5 copy/class.mdx
 create mode 100644 src/content/reference/en/p5 copy/clear.mdx
 create mode 100644 src/content/reference/en/p5 copy/clearDepth.mdx
 create mode 100644 src/content/reference/en/p5 copy/clearStorage.mdx
 create mode 100644 src/content/reference/en/p5 copy/clip.mdx
 create mode 100644 src/content/reference/en/p5 copy/color.mdx
 create mode 100644 src/content/reference/en/p5 copy/colorMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/concat.mdx
 create mode 100644 src/content/reference/en/p5 copy/cone.mdx
 create mode 100644 src/content/reference/en/p5 copy/console.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ADD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ALT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/AUTO.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/AXES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BASELINE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BEVEL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BEZIER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BLEND.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BLUR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BOLD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BOTTOM.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BURN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CENTER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CHAR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CHORD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CLAMP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CLOSE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CONTAIN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CONTROL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CORNER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CORNERS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/COVER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CROSS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CURVE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DARKEST.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DEGREES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DELETE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DILATE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DODGE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ENTER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ERODE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ESCAPE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FALLBACK.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FILL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FLAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FLOAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/GRAY.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/GRID.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HALF_PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HAND.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HSB.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HSL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/IMAGE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/INVERT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ITALIC.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LABEL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LEFT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINEAR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MIRROR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MITER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MOVE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/NEAREST.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/NORMAL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OPAQUE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OPEN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OPTION.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OVERLAY.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/P2D.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PIE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/POINTS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PROJECT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUADS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RADIANS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RADIUS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/REMOVE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/REPEAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/REPLACE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RETURN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RGB.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RGBA.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RIGHT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ROUND.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SCREEN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SHIFT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SMOOTH.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SQUARE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/STROKE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TAB.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TAU.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TESS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TEXT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TEXTURE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TOP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TWO_PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/VERSION.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WAIT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WEBGL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WEBGL2.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WORD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constrain.mdx
 create mode 100644 src/content/reference/en/p5 copy/copy.mdx
 create mode 100644 src/content/reference/en/p5 copy/cos.mdx
 create mode 100644 src/content/reference/en/p5 copy/createA.mdx
 create mode 100644 src/content/reference/en/p5 copy/createAudio.mdx
 create mode 100644 src/content/reference/en/p5 copy/createButton.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCamera.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCapture.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCheckbox.mdx
 create mode 100644 src/content/reference/en/p5 copy/createColorPicker.mdx
 create mode 100644 src/content/reference/en/p5 copy/createConvolver.mdx
 create mode 100644 src/content/reference/en/p5 copy/createDiv.mdx
 create mode 100644 src/content/reference/en/p5 copy/createElement.mdx
 create mode 100644 src/content/reference/en/p5 copy/createFileInput.mdx
 create mode 100644 src/content/reference/en/p5 copy/createFilterShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/createFramebuffer.mdx
 create mode 100644 src/content/reference/en/p5 copy/createGraphics.mdx
 create mode 100644 src/content/reference/en/p5 copy/createImage.mdx
 create mode 100644 src/content/reference/en/p5 copy/createImg.mdx
 create mode 100644 src/content/reference/en/p5 copy/createInput.mdx
 create mode 100644 src/content/reference/en/p5 copy/createModel.mdx
 create mode 100644 src/content/reference/en/p5 copy/createNumberDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/createP.mdx
 create mode 100644 src/content/reference/en/p5 copy/createRadio.mdx
 create mode 100644 src/content/reference/en/p5 copy/createSelect.mdx
 create mode 100644 src/content/reference/en/p5 copy/createShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/createSlider.mdx
 create mode 100644 src/content/reference/en/p5 copy/createSpan.mdx
 create mode 100644 src/content/reference/en/p5 copy/createStringDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/createVector.mdx
 create mode 100644 src/content/reference/en/p5 copy/createVideo.mdx
 create mode 100644 src/content/reference/en/p5 copy/createWriter.mdx
 create mode 100644 src/content/reference/en/p5 copy/cursor.mdx
 create mode 100644 src/content/reference/en/p5 copy/curve.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveDetail.mdx
 create mode 100644 src/content/reference/en/p5 copy/curvePoint.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveTangent.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveTightness.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveVertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/cylinder.mdx
 create mode 100644 src/content/reference/en/p5 copy/day.mdx
 create mode 100644 src/content/reference/en/p5 copy/debugMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/degrees.mdx
 create mode 100644 src/content/reference/en/p5 copy/deltaTime.mdx
 create mode 100644 src/content/reference/en/p5 copy/describe.mdx
 create mode 100644 src/content/reference/en/p5 copy/describeElement.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceMoved.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceOrientation.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceShaken.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceTurned.mdx
 create mode 100644 src/content/reference/en/p5 copy/directionalLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
 create mode 100644 src/content/reference/en/p5 copy/displayDensity.mdx
 create mode 100644 src/content/reference/en/p5 copy/displayHeight.mdx
 create mode 100644 src/content/reference/en/p5 copy/displayWidth.mdx
 create mode 100644 src/content/reference/en/p5 copy/dist.mdx
 create mode 100644 src/content/reference/en/p5 copy/doubleClicked.mdx
 create mode 100644 src/content/reference/en/p5 copy/draw.mdx
 create mode 100644 src/content/reference/en/p5 copy/drawingContext.mdx
 create mode 100644 src/content/reference/en/p5 copy/ellipse.mdx
 create mode 100644 src/content/reference/en/p5 copy/ellipseMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/ellipsoid.mdx
 create mode 100644 src/content/reference/en/p5 copy/emissiveMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/endClip.mdx
 create mode 100644 src/content/reference/en/p5 copy/endContour.mdx
 create mode 100644 src/content/reference/en/p5 copy/endGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/endShape.mdx
 create mode 100644 src/content/reference/en/p5 copy/erase.mdx
 create mode 100644 src/content/reference/en/p5 copy/exitPointerLock.mdx
 create mode 100644 src/content/reference/en/p5 copy/exp.mdx
 create mode 100644 src/content/reference/en/p5 copy/fill.mdx
 create mode 100644 src/content/reference/en/p5 copy/filter.mdx
 create mode 100644 src/content/reference/en/p5 copy/float.mdx
 create mode 100644 src/content/reference/en/p5 copy/floor.mdx
 create mode 100644 src/content/reference/en/p5 copy/focused.mdx
 create mode 100644 src/content/reference/en/p5 copy/for.mdx
 create mode 100644 src/content/reference/en/p5 copy/fract.mdx
 create mode 100644 src/content/reference/en/p5 copy/frameCount.mdx
 create mode 100644 src/content/reference/en/p5 copy/frameRate.mdx
 create mode 100644 src/content/reference/en/p5 copy/freeGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/freqToMidi.mdx
 create mode 100644 src/content/reference/en/p5 copy/frustum.mdx
 create mode 100644 src/content/reference/en/p5 copy/fullscreen.mdx
 create mode 100644 src/content/reference/en/p5 copy/function.mdx
 create mode 100644 src/content/reference/en/p5 copy/get.mdx
 create mode 100644 src/content/reference/en/p5 copy/getAudioContext.mdx
 create mode 100644 src/content/reference/en/p5 copy/getItem.mdx
 create mode 100644 src/content/reference/en/p5 copy/getOutputVolume.mdx
 create mode 100644 src/content/reference/en/p5 copy/getTargetFrameRate.mdx
 create mode 100644 src/content/reference/en/p5 copy/getURL.mdx
 create mode 100644 src/content/reference/en/p5 copy/getURLParams.mdx
 create mode 100644 src/content/reference/en/p5 copy/getURLPath.mdx
 create mode 100644 src/content/reference/en/p5 copy/green.mdx
 create mode 100644 src/content/reference/en/p5 copy/gridOutput.mdx
 create mode 100644 src/content/reference/en/p5 copy/height.mdx
 create mode 100644 src/content/reference/en/p5 copy/hex.mdx
 create mode 100644 src/content/reference/en/p5 copy/hour.mdx
 create mode 100644 src/content/reference/en/p5 copy/httpDo.mdx
 create mode 100644 src/content/reference/en/p5 copy/httpGet.mdx
 create mode 100644 src/content/reference/en/p5 copy/httpPost.mdx
 create mode 100644 src/content/reference/en/p5 copy/hue.mdx
 create mode 100644 src/content/reference/en/p5 copy/if.mdx
 create mode 100644 src/content/reference/en/p5 copy/image.mdx
 create mode 100644 src/content/reference/en/p5 copy/imageLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/imageMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/input.mdx
 create mode 100644 src/content/reference/en/p5 copy/int.mdx
 create mode 100644 src/content/reference/en/p5 copy/isLooping.mdx
 create mode 100644 src/content/reference/en/p5 copy/join.mdx
 create mode 100644 src/content/reference/en/p5 copy/key.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyCode.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyIsDown.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyIsPressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyPressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyReleased.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyTyped.mdx
 create mode 100644 src/content/reference/en/p5 copy/lerp.mdx
 create mode 100644 src/content/reference/en/p5 copy/lerpColor.mdx
 create mode 100644 src/content/reference/en/p5 copy/let.mdx
 create mode 100644 src/content/reference/en/p5 copy/lightFalloff.mdx
 create mode 100644 src/content/reference/en/p5 copy/lightness.mdx
 create mode 100644 src/content/reference/en/p5 copy/lights.mdx
 create mode 100644 src/content/reference/en/p5 copy/line.mdx
 create mode 100644 src/content/reference/en/p5 copy/linePerspective.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadBytes.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadFont.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadImage.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadJSON.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadModel.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadPixels.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadSound.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadStrings.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadTable.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadXML.mdx
 create mode 100644 src/content/reference/en/p5 copy/log.mdx
 create mode 100644 src/content/reference/en/p5 copy/loop.mdx
 create mode 100644 src/content/reference/en/p5 copy/mag.mdx
 create mode 100644 src/content/reference/en/p5 copy/map.mdx
 create mode 100644 src/content/reference/en/p5 copy/match.mdx
 create mode 100644 src/content/reference/en/p5 copy/matchAll.mdx
 create mode 100644 src/content/reference/en/p5 copy/max.mdx
 create mode 100644 src/content/reference/en/p5 copy/metalness.mdx
 create mode 100644 src/content/reference/en/p5 copy/midiToFreq.mdx
 create mode 100644 src/content/reference/en/p5 copy/millis.mdx
 create mode 100644 src/content/reference/en/p5 copy/min.mdx
 create mode 100644 src/content/reference/en/p5 copy/minute.mdx
 create mode 100644 src/content/reference/en/p5 copy/model.mdx
 create mode 100644 src/content/reference/en/p5 copy/month.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseButton.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseClicked.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseDragged.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseIsPressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseMoved.mdx
 create mode 100644 src/content/reference/en/p5 copy/mousePressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseReleased.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseWheel.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/movedX.mdx
 create mode 100644 src/content/reference/en/p5 copy/movedY.mdx
 create mode 100644 src/content/reference/en/p5 copy/nf.mdx
 create mode 100644 src/content/reference/en/p5 copy/nfc.mdx
 create mode 100644 src/content/reference/en/p5 copy/nfp.mdx
 create mode 100644 src/content/reference/en/p5 copy/nfs.mdx
 create mode 100644 src/content/reference/en/p5 copy/noCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/noCursor.mdx
 create mode 100644 src/content/reference/en/p5 copy/noDebugMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/noErase.mdx
 create mode 100644 src/content/reference/en/p5 copy/noFill.mdx
 create mode 100644 src/content/reference/en/p5 copy/noLights.mdx
 create mode 100644 src/content/reference/en/p5 copy/noLoop.mdx
 create mode 100644 src/content/reference/en/p5 copy/noSmooth.mdx
 create mode 100644 src/content/reference/en/p5 copy/noStroke.mdx
 create mode 100644 src/content/reference/en/p5 copy/noTint.mdx
 create mode 100644 src/content/reference/en/p5 copy/noise.mdx
 create mode 100644 src/content/reference/en/p5 copy/noiseDetail.mdx
 create mode 100644 src/content/reference/en/p5 copy/noiseSeed.mdx
 create mode 100644 src/content/reference/en/p5 copy/norm.mdx
 create mode 100644 src/content/reference/en/p5 copy/normal.mdx
 create mode 100644 src/content/reference/en/p5 copy/normalMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/orbitControl.mdx
 create mode 100644 src/content/reference/en/p5 copy/ortho.mdx
 create mode 100644 src/content/reference/en/p5 copy/outputVolume.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Camera.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Color.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Element.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.File.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Font.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Framebuffer.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Geometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Graphics.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Image.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.MediaElement.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.NumberDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.PrintWriter.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Renderer.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Shader.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.StringDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Table.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.TableRow.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.TypedDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Vector.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.XML.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.mdx
 create mode 100644 src/content/reference/en/p5 copy/pAccelerationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pAccelerationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/pAccelerationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/pRotationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pRotationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/pRotationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/paletteLerp.mdx
 create mode 100644 src/content/reference/en/p5 copy/panorama.mdx
 create mode 100644 src/content/reference/en/p5 copy/perspective.mdx
 create mode 100644 src/content/reference/en/p5 copy/pixelDensity.mdx
 create mode 100644 src/content/reference/en/p5 copy/pixels.mdx
 create mode 100644 src/content/reference/en/p5 copy/plane.mdx
 create mode 100644 src/content/reference/en/p5 copy/pmouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pmouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/point.mdx
 create mode 100644 src/content/reference/en/p5 copy/pointLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/pop.mdx
 create mode 100644 src/content/reference/en/p5 copy/pow.mdx
 create mode 100644 src/content/reference/en/p5 copy/preload.mdx
 create mode 100644 src/content/reference/en/p5 copy/print.mdx
 create mode 100644 src/content/reference/en/p5 copy/push.mdx
 create mode 100644 src/content/reference/en/p5 copy/pwinMouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pwinMouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/quad.mdx
 create mode 100644 src/content/reference/en/p5 copy/quadraticVertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/radians.mdx
 create mode 100644 src/content/reference/en/p5 copy/random.mdx
 create mode 100644 src/content/reference/en/p5 copy/randomGaussian.mdx
 create mode 100644 src/content/reference/en/p5 copy/randomSeed.mdx
 create mode 100644 src/content/reference/en/p5 copy/rect.mdx
 create mode 100644 src/content/reference/en/p5 copy/rectMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/red.mdx
 create mode 100644 src/content/reference/en/p5 copy/redraw.mdx
 create mode 100644 src/content/reference/en/p5 copy/remove.mdx
 create mode 100644 src/content/reference/en/p5 copy/removeElements.mdx
 create mode 100644 src/content/reference/en/p5 copy/removeItem.mdx
 create mode 100644 src/content/reference/en/p5 copy/requestPointerLock.mdx
 create mode 100644 src/content/reference/en/p5 copy/resetMatrix.mdx
 create mode 100644 src/content/reference/en/p5 copy/resetShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/resizeCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/reverse.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotate.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotateX.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotateY.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotateZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/round.mdx
 create mode 100644 src/content/reference/en/p5 copy/sampleRate.mdx
 create mode 100644 src/content/reference/en/p5 copy/saturation.mdx
 create mode 100644 src/content/reference/en/p5 copy/save.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveFrames.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveGif.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveJSON.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveSound.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveStrings.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveTable.mdx
 create mode 100644 src/content/reference/en/p5 copy/scale.mdx
 create mode 100644 src/content/reference/en/p5 copy/second.mdx
 create mode 100644 src/content/reference/en/p5 copy/select.mdx
 create mode 100644 src/content/reference/en/p5 copy/selectAll.mdx
 create mode 100644 src/content/reference/en/p5 copy/set.mdx
 create mode 100644 src/content/reference/en/p5 copy/setAttributes.mdx
 create mode 100644 src/content/reference/en/p5 copy/setBPM.mdx
 create mode 100644 src/content/reference/en/p5 copy/setCamera.mdx
 create mode 100644 src/content/reference/en/p5 copy/setMoveThreshold.mdx
 create mode 100644 src/content/reference/en/p5 copy/setShakeThreshold.mdx
 create mode 100644 src/content/reference/en/p5 copy/setup.mdx
 create mode 100644 src/content/reference/en/p5 copy/shader.mdx
 create mode 100644 src/content/reference/en/p5 copy/shearX.mdx
 create mode 100644 src/content/reference/en/p5 copy/shearY.mdx
 create mode 100644 src/content/reference/en/p5 copy/shininess.mdx
 create mode 100644 src/content/reference/en/p5 copy/shorten.mdx
 create mode 100644 src/content/reference/en/p5 copy/shuffle.mdx
 create mode 100644 src/content/reference/en/p5 copy/sin.mdx
 create mode 100644 src/content/reference/en/p5 copy/smooth.mdx
 create mode 100644 src/content/reference/en/p5 copy/sort.mdx
 create mode 100644 src/content/reference/en/p5 copy/soundFormats.mdx
 create mode 100644 src/content/reference/en/p5 copy/soundOut.mdx
 create mode 100644 src/content/reference/en/p5 copy/specularColor.mdx
 create mode 100644 src/content/reference/en/p5 copy/specularMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/sphere.mdx
 create mode 100644 src/content/reference/en/p5 copy/splice.mdx
 create mode 100644 src/content/reference/en/p5 copy/split.mdx
 create mode 100644 src/content/reference/en/p5 copy/splitTokens.mdx
 create mode 100644 src/content/reference/en/p5 copy/spotLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/sq.mdx
 create mode 100644 src/content/reference/en/p5 copy/sqrt.mdx
 create mode 100644 src/content/reference/en/p5 copy/square.mdx
 create mode 100644 src/content/reference/en/p5 copy/storeItem.mdx
 create mode 100644 src/content/reference/en/p5 copy/str.mdx
 create mode 100644 src/content/reference/en/p5 copy/stroke.mdx
 create mode 100644 src/content/reference/en/p5 copy/strokeCap.mdx
 create mode 100644 src/content/reference/en/p5 copy/strokeJoin.mdx
 create mode 100644 src/content/reference/en/p5 copy/strokeWeight.mdx
 create mode 100644 src/content/reference/en/p5 copy/subset.mdx
 create mode 100644 src/content/reference/en/p5 copy/tan.mdx
 create mode 100644 src/content/reference/en/p5 copy/text.mdx
 create mode 100644 src/content/reference/en/p5 copy/textAlign.mdx
 create mode 100644 src/content/reference/en/p5 copy/textAscent.mdx
 create mode 100644 src/content/reference/en/p5 copy/textDescent.mdx
 create mode 100644 src/content/reference/en/p5 copy/textFont.mdx
 create mode 100644 src/content/reference/en/p5 copy/textLeading.mdx
 create mode 100644 src/content/reference/en/p5 copy/textOutput.mdx
 create mode 100644 src/content/reference/en/p5 copy/textSize.mdx
 create mode 100644 src/content/reference/en/p5 copy/textStyle.mdx
 create mode 100644 src/content/reference/en/p5 copy/textWidth.mdx
 create mode 100644 src/content/reference/en/p5 copy/textWrap.mdx
 create mode 100644 src/content/reference/en/p5 copy/texture.mdx
 create mode 100644 src/content/reference/en/p5 copy/textureMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/textureWrap.mdx
 create mode 100644 src/content/reference/en/p5 copy/tint.mdx
 create mode 100644 src/content/reference/en/p5 copy/torus.mdx
 create mode 100644 src/content/reference/en/p5 copy/touchEnded.mdx
 create mode 100644 src/content/reference/en/p5 copy/touchMoved.mdx
 create mode 100644 src/content/reference/en/p5 copy/touchStarted.mdx
 create mode 100644 src/content/reference/en/p5 copy/touches.mdx
 create mode 100644 src/content/reference/en/p5 copy/translate.mdx
 create mode 100644 src/content/reference/en/p5 copy/triangle.mdx
 create mode 100644 src/content/reference/en/p5 copy/trim.mdx
 create mode 100644 src/content/reference/en/p5 copy/turnAxis.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Array.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Boolean.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Number.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Object.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/String.mdx
 create mode 100644 src/content/reference/en/p5 copy/unchar.mdx
 create mode 100644 src/content/reference/en/p5 copy/unhex.mdx
 create mode 100644 src/content/reference/en/p5 copy/updatePixels.mdx
 create mode 100644 src/content/reference/en/p5 copy/userStartAudio.mdx
 create mode 100644 src/content/reference/en/p5 copy/vertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/webglVersion.mdx
 create mode 100644 src/content/reference/en/p5 copy/while.mdx
 create mode 100644 src/content/reference/en/p5 copy/width.mdx
 create mode 100644 src/content/reference/en/p5 copy/winMouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/winMouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/windowHeight.mdx
 create mode 100644 src/content/reference/en/p5 copy/windowResized.mdx
 create mode 100644 src/content/reference/en/p5 copy/windowWidth.mdx
 create mode 100644 src/content/reference/en/p5 copy/year.mdx

diff --git a/src/content/reference/en/p5 copy/abs.mdx b/src/content/reference/en/p5 copy/abs.mdx
new file mode 100644
index 0000000000..1bdb6895ff
--- /dev/null
+++ b/src/content/reference/en/p5 copy/abs.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L10
+title: abs
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the absolute value of a number.</p>
+
+  <p>A number's absolute value is its distance from zero on the number line.
+
+  -5 and 5 are both five units away from zero, so calling <code>abs(-5)</code>
+  and
+
+  <code>abs(5)</code> both return 5. The absolute value of a number is always
+  positive.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Divide the canvas.
+      line(50, 0, 50, 100);
+
+      // Calculate the mouse's distance from the middle.
+      let h = abs(mouseX - 50);
+
+      // Draw a rectangle based on the mouse's distance
+      // from the middle.
+      rect(0, 100 - h, 100, h);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to compute.</p>
+    type: Number
+return:
+  description: absolute value of given number.
+  type: Number
+chainable: false
+---
+
+
+# abs
diff --git a/src/content/reference/en/p5 copy/accelerationX.mdx b/src/content/reference/en/p5 copy/accelerationX.mdx
new file mode 100644
index 0000000000..6a47fc46ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/accelerationX.mdx	
@@ -0,0 +1,37 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L23
+title: accelerationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationX always contains the acceleration of the
+
+  device along the x axis. Value is represented as meters per second
+  squared.</p>
+line: 23
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationX);
+      describe('Magnitude of device acceleration is displayed as ellipse size.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# accelerationX
diff --git a/src/content/reference/en/p5 copy/accelerationY.mdx b/src/content/reference/en/p5 copy/accelerationY.mdx
new file mode 100644
index 0000000000..bf5f54e39b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/accelerationY.mdx	
@@ -0,0 +1,37 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L45
+title: accelerationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationY always contains the acceleration of the
+
+  device along the y axis. Value is represented as meters per second
+  squared.</p>
+line: 45
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationY);
+      describe('Magnitude of device acceleration is displayed as ellipse size');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# accelerationY
diff --git a/src/content/reference/en/p5 copy/accelerationZ.mdx b/src/content/reference/en/p5 copy/accelerationZ.mdx
new file mode 100644
index 0000000000..11e5cbb53e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/accelerationZ.mdx	
@@ -0,0 +1,37 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L67
+title: accelerationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationZ always contains the acceleration of the
+
+  device along the z axis. Value is represented as meters per second
+  squared.</p>
+line: 67
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationZ);
+      describe('Magnitude of device acceleration is displayed as ellipse size');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# accelerationZ
diff --git a/src/content/reference/en/p5 copy/acos.mdx b/src/content/reference/en/p5 copy/acos.mdx
new file mode 100644
index 0000000000..c9ed943f5e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/acos.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L18
+title: acos
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the arc cosine of a number.</p>
+
+  <p><code>acos()</code> is the inverse of <a
+  href="/reference/p5/cos/">cos()</a>. It expects
+
+  arguments in the range -1 to 1. By default, <code>acos()</code> returns values
+  in the
+
+  range 0 to π (about 3.14). If the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
+  then values are
+
+  returned in the range 0 to 180.</p>
+line: 18
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate cos() and acos() values.
+      let a = PI;
+      let c = cos(a);
+      let ac = acos(c);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(c, 3)}`, 35, 50);
+      text(`${round(ac, 3)}`, 35, 75);
+
+      describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate cos() and acos() values.
+      let a = PI + QUARTER_PI;
+      let c = cos(a);
+      let ac = acos(c);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(c, 3)}`, 35, 50);
+      text(`${round(ac, 3)}`, 35, 75);
+
+      describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>value whose arc cosine is to be returned.</p>
+    type: Number
+return:
+  description: arc cosine of the given value.
+  type: Number
+chainable: false
+---
+
+
+# acos
diff --git a/src/content/reference/en/p5 copy/alpha.mdx b/src/content/reference/en/p5 copy/alpha.mdx
new file mode 100644
index 0000000000..c1a87aa78d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/alpha.mdx	
@@ -0,0 +1,120 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L16
+title: alpha
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the alpha (transparency) value of a color.</p>
+
+  <p><code>alpha()</code> extracts the alpha value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+line: 16
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let c = color(0, 126, 255, 102);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'alphaValue' to 102.
+      let alphaValue = alpha(c);
+
+      // Draw the right rectangle.
+      fill(alphaValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [0, 126, 255, 102];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'alphaValue' to 102.
+      let alphaValue = alpha(c);
+
+      // Draw the left rectangle.
+      fill(alphaValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgba(0, 126, 255, 0.4)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'alphaValue' to 102.
+      let alphaValue = alpha(c);
+
+      // Draw the right rectangle.
+      fill(alphaValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the alpha value.
+  type: Number
+chainable: false
+---
+
+
+# alpha
diff --git a/src/content/reference/en/p5 copy/ambientLight.mdx b/src/content/reference/en/p5 copy/ambientLight.mdx
new file mode 100644
index 0000000000..09f9159592
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ambientLight.mdx	
@@ -0,0 +1,241 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L10
+title: ambientLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines from all directions.</p>
+
+  <p>Ambient light does not come from one direction. Instead, 3D shapes are
+
+  lit evenly from all sides. Ambient lights are almost always used in
+
+  combination with other types of lights.</p>
+
+  <p>There are three ways to call <code>ambientLight()</code> with optional
+  parameters to
+
+  set the light’s color.</p>
+
+  <p>The first way to call <code>ambientLight()</code> has two parameters,
+  <code>gray</code> and
+
+  <code>alpha</code>. <code>alpha</code> is optional. Grayscale and alpha values
+  between 0 and 255
+
+  can be passed to set the ambient light’s color, as in
+  <code>ambientLight(50)</code> or
+
+  <code>ambientLight(50, 30)</code>.</p>
+
+  <p>The second way to call <code>ambientLight()</code> has one parameter,
+  color. A
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  values, or a
+
+  CSS color string, as in <code>ambientLight('magenta')</code>, can be passed to
+  set the
+
+  ambient light’s color.</p>
+
+  <p>The third way to call <code>ambientLight()</code> has four parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
+  HSBA, or HSLA values can be
+
+  passed to set the ambient light’s colors, as in <code>ambientLight(255, 0,
+  0)</code>
+
+  or <code>ambientLight(255, 0, 0, 30)</code>. Color values will be interpreted
+  using
+
+  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to turn on the light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the light.
+      if (isLit === true) {
+        // Use a grayscale value of 80.
+        ambientLight(80);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the ambient light when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A faded magenta sphere drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      // Use a p5.Color object.
+      let c = color('orchid');
+      ambientLight(c);
+
+      // Draw the sphere.
+      sphere();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A faded magenta sphere drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      // Use a CSS color string.
+      ambientLight('#DA70D6');
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A faded magenta sphere drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      // Use RGB values
+      ambientLight(218, 112, 214);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 10
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha (transparency) value in the current
+                                          <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 164
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 and 255.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 171
+    params:
+      - name: value
+        description: |
+          <p>color as a CSS string.</p>
+        type: String
+    chainable: 1
+  - line: 177
+    params:
+      - name: values
+        description: |
+          <p>color as an array of RGBA, HSBA, or HSLA
+                                          values.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 184
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# ambientLight
diff --git a/src/content/reference/en/p5 copy/ambientMaterial.mdx b/src/content/reference/en/p5 copy/ambientMaterial.mdx
new file mode 100644
index 0000000000..8b96f24260
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ambientMaterial.mdx	
@@ -0,0 +1,269 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2416
+title: ambientMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the ambient color of shapes’ surface material.</p>
+
+  <p>The <code>ambientMaterial()</code> color sets the components of the
+
+  <a href="/reference/p5/ambientLight/">ambientLight()</a> color that shapes
+  will
+
+  reflect. For example, calling <code>ambientMaterial(255, 255, 0)</code> would
+  cause a
+
+  shape to reflect red and green light, but not blue light.</p>
+
+  <p><code>ambientMaterial()</code> can be called three ways with different
+  parameters to
+
+  set the material’s color.</p>
+
+  <p>The first way to call <code>ambientMaterial()</code> has one parameter,
+  <code>gray</code>.
+
+  Grayscale values between 0 and 255, as in <code>ambientMaterial(50)</code>,
+  can be
+
+  passed to set the material’s color. Higher grayscale values make shapes
+
+  appear brighter.</p>
+
+  <p>The second way to call <code>ambientMaterial()</code> has one parameter,
+  <code>color</code>. A
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  values, or a
+
+  CSS color string, as in <code>ambientMaterial('magenta')</code>, can be passed
+  to set
+
+  the material’s color.</p>
+
+  <p>The third way to call <code>ambientMaterial()</code> has three parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  and <code>v3</code>. RGB, HSB, or HSL values, as in <code>ambientMaterial(255,
+  0, 0)</code>, can
+
+  be passed to set the material’s colors. Color values will be interpreted
+
+  using the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+
+  <p>Note: <code>ambientMaterial()</code> can only be used in WebGL mode.</p>
+line: 2416
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A magenta cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A purple cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a dark gray ambient material.
+      ambientMaterial(150);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a yellow ambient material using RGB values.
+      ambientMaterial(255, 255, 0);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a yellow ambient material using a p5.Color object.
+      let c = color(255, 255, 0);
+      ambientMaterial(c);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a yellow ambient material using a color string.
+      ambientMaterial('yellow');
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A yellow cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white ambient light.
+      ambientLight(255, 255, 255);
+
+      // Add a yellow ambient material using a color string.
+      ambientMaterial('yellow');
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2416
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the
+                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the
+                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+    chainable: 1
+  - line: 2621
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 (black) and 255 (white).</p>
+        type: Number
+    chainable: 1
+  - line: 2627
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                     an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+    chainable: 1
+chainable: true
+---
+
+
+# ambientMaterial
diff --git a/src/content/reference/en/p5 copy/angleMode.mdx b/src/content/reference/en/p5 copy/angleMode.mdx
new file mode 100644
index 0000000000..3401a563cd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/angleMode.mdx	
@@ -0,0 +1,219 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L557
+title: angleMode
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Changes the unit system used to measure angles.</p>
+
+  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
+
+  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
+
+  <p>Functions such as <a href="/reference/p5/rotate/">rotate()</a> and
+
+  <a href="/reference/p5/sin/">sin()</a> expect angles measured radians by
+  default.
+
+  Calling <code>angleMode(DEGREES)</code> switches to degrees. Calling
+
+  <code>angleMode(RADIANS)</code> switches back to radians.</p>
+
+  <p>Calling <code>angleMode()</code> with no arguments returns current angle
+  mode, which
+
+  is either <code>RADIANS</code> or <code>DEGREES</code>.</p>
+line: 557
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Rotate 1/8 turn.
+      rotate(QUARTER_PI);
+
+      // Draw a line.
+      line(0, 0, 80, 0);
+
+      describe('A diagonal line radiating from the top-left corner of a square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Rotate 1/8 turn.
+      rotate(45);
+
+      // Draw a line.
+      line(0, 0, 80, 0);
+
+      describe('A diagonal line radiating from the top-left corner of a square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Calculate the angle to rotate.
+      let angle = TWO_PI / 7;
+
+      // Move the origin to the center.
+      translate(50, 50);
+
+      // Style the flower.
+      noStroke();
+      fill(255, 50);
+
+      // Draw the flower.
+      for (let i = 0; i < 7; i += 1) {
+        ellipse(0, 0, 80, 20);
+        rotate(angle);
+      }
+
+      describe('A translucent white flower on a dark background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Calculate the angle to rotate.
+      let angle = 360 / 7;
+
+      // Move the origin to the center.
+      translate(50, 50);
+
+      // Style the flower.
+      noStroke();
+      fill(255, 50);
+
+      // Draw the flower.
+      for (let i = 0; i < 7; i += 1) {
+        ellipse(0, 0, 80, 20);
+        rotate(angle);
+      }
+
+      describe('A translucent white flower on a dark background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white ball on a string oscillates left and right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.05) + 50;
+      let y = 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white ball on a string oscillates left and right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 2.86) + 50;
+      let y = 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the upper line.
+      rotate(PI / 6);
+      line(0, 0, 80, 0);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Draw the lower line.
+      rotate(30);
+      line(0, 0, 80, 0);
+
+      describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 557
+    params:
+      - name: mode
+        description: |
+          <p>either RADIANS or DEGREES.</p>
+        type: Constant
+  - line: 743
+    params: []
+    return:
+      description: mode either RADIANS or DEGREES
+      type: Constant
+chainable: false
+---
+
+
+# angleMode
diff --git a/src/content/reference/en/p5 copy/append.mdx b/src/content/reference/en/p5 copy/append.mdx
new file mode 100644
index 0000000000..4e0bbeb5eb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/append.mdx	
@@ -0,0 +1,48 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L10
+title: append
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Adds a value to the end of an array. Extends the length of
+  the array by one. Maps to Array.push().</p>
+line: 10
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">array.push(value)</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    function setup() {
+      let myArray = ['Mango', 'Apple', 'Papaya'];
+      print(myArray); // ['Mango', 'Apple', 'Papaya']
+
+      append(myArray, 'Peach');
+      print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+    }
+    </code></div>
+class: p5
+params:
+  - name: array
+    description: |
+      <p>Array to append</p>
+    type: Array
+  - name: value
+    description: |
+      <p>to be added to the Array</p>
+    type: Any
+return:
+  description: the array that was appended to
+  type: Array
+chainable: false
+---
+
+
+# append
diff --git a/src/content/reference/en/p5 copy/applyMatrix.mdx b/src/content/reference/en/p5 copy/applyMatrix.mdx
new file mode 100644
index 0000000000..b105ed75da
--- /dev/null
+++ b/src/content/reference/en/p5 copy/applyMatrix.mdx	
@@ -0,0 +1,347 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L11
+title: applyMatrix
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Applies a transformation matrix to the coordinate system.</p>
+
+  <p>Transformations such as
+
+  <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and
+
+  <a href="/reference/p5/scale/">scale()</a>
+
+  use matrix-vector multiplication behind the scenes. A table of numbers,
+
+  called a matrix, encodes each transformation. The values in the matrix
+
+  then multiply each point on the canvas, which is represented by a vector.</p>
+
+  <p><code>applyMatrix()</code> allows for many transformations to be applied at
+  once. See
+
+  <a href="https://en.wikipedia.org/wiki/Transformation_matrix/"
+  target="_blank">Wikipedia</a>
+
+  and <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web/"
+  target="_blank">MDN</a>
+
+  for more details about transformations.</p>
+
+  <p>There are two ways to call <code>applyMatrix()</code> in two and three
+  dimensions.</p>
+
+  <p>In 2D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
+  <code>d</code>, <code>e</code>, and <code>f</code>, correspond to
+
+  elements in the following transformation matrix:</p>
+
+  <blockquote>
+
+  <p><img style="max-width: 150px" src="/assets/transformation-matrix.png"
+  alt="The transformation matrix used when applyMatrix is called in 2D
+  mode."/></p>
+
+  </blockquote>
+
+  <p>The numbers can be passed individually, as in
+
+  <code>applyMatrix(2, 0, 0, 0, 2, 0)</code>. They can also be passed in an
+  array, as in
+
+  <code>applyMatrix([2, 0, 0, 0, 2, 0])</code>.</p>
+
+  <p>In 3D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
+  <code>d</code>, <code>e</code>, <code>f</code>, <code>g</code>,
+  <code>h</code>, <code>i</code>,
+
+  <code>j</code>, <code>k</code>, <code>l</code>, <code>m</code>,
+  <code>n</code>, <code>o</code>, and <code>p</code> correspond to elements in
+  the
+
+  following transformation matrix:</p>
+
+  <p><img style="max-width: 300px" src="/assets/transformation-matrix-4-4.png"
+  alt="The transformation matrix used when applyMatrix is called in 3D
+  mode."/></p>
+
+  <p>The numbers can be passed individually, as in
+
+  <code>applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)</code>. They
+  can
+
+  also be passed in an array, as in
+
+  <code>applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0,
+  1])</code>.</p>
+
+  <p>By default, transformations accumulate. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>applyMatrix()</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't
+
+  cause shapes to transform continuously.</p>
+line: 11
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      applyMatrix(1, 0, 0, 1, 50, 50);
+
+      // Draw the circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      let m = [1, 0, 0, 1, 50, 50];
+      applyMatrix(m);
+
+      // Draw the circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn.
+      let angle = QUARTER_PI;
+      let ca = cos(angle);
+      let sa = sin(angle);
+      applyMatrix(ca, sa, -sa, ca, 0, 0);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Scale the coordinate system by a factor of 0.5.
+      applyMatrix(0.5, 0, 0, 0.5, 0, 0);
+
+      // Draw a square at (30, 20).
+      // It appears at (15, 10) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the shear factor.
+      let angle = QUARTER_PI;
+      let shearFactor = 1 / tan(HALF_PI - angle);
+
+      // Shear the coordinate system along the x-axis.
+      applyMatrix(1, 0, shearFactor, 1, 0, 0);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      let ca = cos(angle);
+      let sa = sin(angle);
+      applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 11
+    params:
+      - name: arr
+        description: >
+          <p>an array containing the elements of the transformation matrix. Its
+          length should be either 6 (2D) or 16 (3D).</p>
+        type: Array
+    chainable: 1
+  - line: 206
+    params:
+      - name: a
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: b
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: c
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: d
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: e
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: f
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+    chainable: 1
+  - line: 216
+    params:
+      - name: a
+        description: ''
+        type: Number
+      - name: b
+        description: ''
+        type: Number
+      - name: c
+        description: ''
+        type: Number
+      - name: d
+        description: ''
+        type: Number
+      - name: e
+        description: ''
+        type: Number
+      - name: f
+        description: ''
+        type: Number
+      - name: g
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: i
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: j
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: k
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: l
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: m
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: 'n'
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: o
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: p
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# applyMatrix
diff --git a/src/content/reference/en/p5 copy/arc.mdx b/src/content/reference/en/p5 copy/arc.mdx
new file mode 100644
index 0000000000..ee50708815
--- /dev/null
+++ b/src/content/reference/en/p5 copy/arc.mdx	
@@ -0,0 +1,274 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L102
+title: arc
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws an arc.</p>
+
+  <p>An arc is a section of an ellipse defined by the <code>x</code>,
+  <code>y</code>, <code>w</code>, and
+
+  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
+  of the arc's center. <code>w</code> and
+
+  <code>h</code> set the arc's width and height. See
+
+  <a href="/reference/p5/ellipse/">ellipse()</a> and
+
+  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for more details.</p>
+
+  <p>The fifth and sixth parameters, <code>start</code> and <code>stop</code>,
+  set the angles
+
+  between which to draw the arc. Arcs are always drawn clockwise from
+
+  <code>start</code> to <code>stop</code>. The fifth and sixth parameters, start
+  and stop, set the
+
+  angles between which to draw the arc. By default, angles are given in radians,
+  but if angleMode
+
+  (DEGREES) is set, the function interprets the values in degrees.</p>
+
+  <p>The seventh parameter, <code>mode</code>, is optional. It determines the
+  arc's fill
+
+  style. The fill modes are a semi-circle (<code>OPEN</code>), a closed
+  semi-circle
+
+  (<code>CHORD</code>), or a closed pie segment (<code>PIE</code>).</p>
+
+  <p>The eighth parameter, <code>detail</code>, is also optional. It determines
+  how many
+
+  vertices are used to draw the arc in WebGL mode. The default value is 25.</p>
+line: 102
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      arc(50, 50, 80, 80, 0, PI + HALF_PI);
+
+      describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      arc(50, 50, 80, 40, 0, PI + HALF_PI);
+
+      describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Bottom-right.
+      arc(50, 55, 50, 50, 0, HALF_PI);
+
+      noFill();
+
+      // Bottom-left.
+      arc(50, 55, 60, 60, HALF_PI, PI);
+
+      // Top-left.
+      arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+
+      // Top-right.
+      arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+
+      describe(
+        'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Default fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+
+      describe('A white circle with the top-right third missing. The bottom is outlined in black.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // OPEN fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+
+      describe(
+        'A white circle missing a section from the top-right. The bottom is outlined in black.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // CHORD fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+
+      describe('A white circle with a black outline missing a section from the top-right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // PIE fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+
+      describe('A white circle with a black outline. The top-right third is missing.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // PIE fill mode.
+      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);
+
+      describe('A white circle with a black outline. The top-right third is missing.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // PIE fill mode with 5 vertices.
+      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);
+
+      describe('A white circle with a black outline. The top-right third is missing.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A yellow circle on a black background. The circle opens and closes its mouth.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the arc.
+      noStroke();
+      fill(255, 255, 0);
+
+      // Update start and stop angles.
+      let biteSize = PI / 16;
+      let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
+      let endAngle = TWO_PI - startAngle;
+
+      // Draw the arc.
+      arc(50, 50, 80, 80, startAngle, endAngle, PIE);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the arc's ellipse.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the arc's ellipse.</p>
+    type: Number
+  - name: w
+    description: |
+      <p>width of the arc's ellipse by default.</p>
+    type: Number
+  - name: h
+    description: |
+      <p>height of the arc's ellipse by default.</p>
+    type: Number
+  - name: start
+    description: |
+      <p>angle to start the arc, specified in radians.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>angle to stop the arc, specified in radians.</p>
+    type: Number
+  - name: mode
+    description: |
+      <p>optional parameter to determine the way of drawing
+                              the arc. either CHORD, PIE, or OPEN.</p>
+    type: Constant
+    optional: true
+  - name: detail
+    description: |
+      <p>optional parameter for WebGL mode only. This is to
+                              specify the number of vertices that makes up the
+                              perimeter of the arc. Default value is 25. Won't
+                              draw a stroke for a detail of more than 50.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# arc
diff --git a/src/content/reference/en/p5 copy/arrayCopy.mdx b/src/content/reference/en/p5 copy/arrayCopy.mdx
new file mode 100644
index 0000000000..2d149d1ed3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/arrayCopy.mdx	
@@ -0,0 +1,95 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L35
+title: arrayCopy
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: >
+  <p>Copies an array (or part of an array) to another array. The src array is
+
+  copied to the dst array, beginning at the position specified by
+
+  srcPosition and into the position specified by dstPosition. The number of
+
+  elements to copy is determined by length. Note that copying values
+
+  overwrites existing values in the destination array. To append values
+
+  instead of overwriting them, use <a
+  href="/reference/p5/concat/">concat()</a>.</p>
+
+  <p>The simplified version with only two arguments, arrayCopy(src, dst),
+
+  copies an entire array to another of the same size. It is equivalent to
+
+  arrayCopy(src, 0, dst, 0, src.length).</p>
+
+  <p>Using this function is far more efficient for copying array data than
+
+  iterating through a for() loop and copying each element individually.</p>
+line: 35
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">arr1.copyWithin(arr2)</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    let src = ['A', 'B', 'C'];
+    let dst = [1, 2, 3];
+    let srcPosition = 1;
+    let dstPosition = 0;
+    let length = 2;
+
+    print(src); // ['A', 'B', 'C']
+    print(dst); // [ 1 ,  2 ,  3 ]
+
+    arrayCopy(src, srcPosition, dst, dstPosition, length);
+    print(dst); // ['B', 'C', 3]
+    </code></div>
+class: p5
+overloads:
+  - line: 35
+    params:
+      - name: src
+        description: |
+          <p>the source Array</p>
+        type: Array
+      - name: srcPosition
+        description: |
+          <p>starting position in the source Array</p>
+        type: Integer
+      - name: dst
+        description: |
+          <p>the destination Array</p>
+        type: Array
+      - name: dstPosition
+        description: |
+          <p>starting position in the destination Array</p>
+        type: Integer
+      - name: length
+        description: |
+          <p>number of Array elements to be copied</p>
+        type: Integer
+  - line: 73
+    params:
+      - name: src
+        description: ''
+        type: Array
+      - name: dst
+        description: ''
+        type: Array
+      - name: length
+        description: ''
+        type: Integer
+        optional: true
+chainable: false
+---
+
+
+# arrayCopy
diff --git a/src/content/reference/en/p5 copy/asin.mdx b/src/content/reference/en/p5 copy/asin.mdx
new file mode 100644
index 0000000000..78518c0050
--- /dev/null
+++ b/src/content/reference/en/p5 copy/asin.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L80
+title: asin
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the arc sine of a number.</p>
+
+  <p><code>asin()</code> is the inverse of <a
+  href="/reference/p5/sin/">sin()</a>. It expects input
+
+  values in the range of -1 to 1. By default, <code>asin()</code> returns values
+  in the
+
+  range -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If
+
+  the <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>
+  then values are
+
+  returned in the range -90 to 90.</p>
+line: 80
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate sin() and asin() values.
+      let a = PI / 3;
+      let s = sin(a);
+      let as = asin(s);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(s, 3)}`, 35, 50);
+      text(`${round(as, 3)}`, 35, 75);
+
+      describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate sin() and asin() values.
+      let a = PI + PI / 3;
+      let s = sin(a);
+      let as = asin(s);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(s, 3)}`, 35, 50);
+      text(`${round(as, 3)}`, 35, 75);
+
+      describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>value whose arc sine is to be returned.</p>
+    type: Number
+return:
+  description: arc sine of the given value.
+  type: Number
+chainable: false
+---
+
+
+# asin
diff --git a/src/content/reference/en/p5 copy/atan.mdx b/src/content/reference/en/p5 copy/atan.mdx
new file mode 100644
index 0000000000..86b3874bb0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/atan.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L142
+title: atan
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the arc tangent of a number.</p>
+
+  <p><code>atan()</code> is the inverse of <a
+  href="/reference/p5/tan/">tan()</a>. It expects input
+
+  values in the range of -Infinity to Infinity. By default, <code>atan()</code>
+  returns
+
+  values in the range -π ÷ 2 (about -1.57) to π ÷ 2
+
+  (about 1.57). If the <a href="/reference/p5/angleMode/">angleMode()</a> is
+  <code>DEGREES</code>
+
+  then values are returned in the range -90 to 90.</p>
+line: 142
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate tan() and atan() values.
+      let a = PI / 3;
+      let t = tan(a);
+      let at = atan(t);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(t, 3)}`, 35, 50);
+      text(`${round(at, 3)}`, 35, 75);
+
+      describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate tan() and atan() values.
+      let a = PI + PI / 3;
+      let t = tan(a);
+      let at = atan(t);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(t, 3)}`, 35, 50);
+      text(`${round(at, 3)}`, 35, 75);
+
+      describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>value whose arc tangent is to be returned.</p>
+    type: Number
+return:
+  description: arc tangent of the given value.
+  type: Number
+chainable: false
+---
+
+
+# atan
diff --git a/src/content/reference/en/p5 copy/atan2.mdx b/src/content/reference/en/p5 copy/atan2.mdx
new file mode 100644
index 0000000000..200b49516b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/atan2.mdx	
@@ -0,0 +1,106 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L204
+title: atan2
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the angle formed by a point, the origin, and the positive
+
+  x-axis.</p>
+
+  <p><code>atan2()</code> is most often used for orienting geometry to the
+  mouse's
+
+  position, as in <code>atan2(mouseY, mouseX)</code>. The first parameter is the
+  point's
+
+  y-coordinate and the second parameter is its x-coordinate.</p>
+
+  <p>By default, <code>atan2()</code> returns values in the range
+
+  -π (about -3.14) to π (3.14). If the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
+  then values are
+
+  returned in the range -180 to 180.</p>
+line: 204
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle at the top-left of the canvas rotates with mouse movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the angle between the mouse
+      // and the origin.
+      let a = atan2(mouseY, mouseX);
+
+      // Rotate.
+      rotate(a);
+
+      // Draw the shape.
+      rect(0, 0, 60, 10);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle at the center of the canvas rotates with mouse movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Get the mouse's coordinates relative to the origin.
+      let x = mouseX - 50;
+      let y = mouseY - 50;
+
+      // Calculate the angle between the mouse and the origin.
+      let a = atan2(y, x);
+
+      // Rotate.
+      rotate(a);
+
+      // Draw the shape.
+      rect(-30, -5, 60, 10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the point.</p>
+    type: Number
+  - name: x
+    description: |
+      <p>x-coordinate of the point.</p>
+    type: Number
+return:
+  description: arc tangent of the given point.
+  type: Number
+chainable: false
+---
+
+
+# atan2
diff --git a/src/content/reference/en/p5 copy/background.mdx b/src/content/reference/en/p5 copy/background.mdx
new file mode 100644
index 0000000000..6250c60339
--- /dev/null
+++ b/src/content/reference/en/p5 copy/background.mdx	
@@ -0,0 +1,336 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L414
+title: background
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Sets the color used for the background of the canvas.</p>
+
+  <p>By default, the background is transparent. <code>background()</code> is
+  typically used
+
+  within <a href="/reference/p5/draw/">draw()</a> to clear the display window at
+  the
+
+  beginning of each frame. It can also be used inside
+
+  <a href="/reference/p5/setup/">setup()</a> to set the background on the first
+  frame
+
+  of animation.</p>
+
+  <p>The version of <code>background()</code> with one parameter interprets the
+  value one
+
+  of four ways. If the parameter is a <code>Number</code>, it's interpreted as a
+  grayscale
+
+  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
+  color string.
+
+  RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the
+
+  parameter is a <a href="/reference/p5/p5.Color">p5.Color</a> object, it will
+  be used as
+
+  the background color. If the parameter is a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object, it will be used as the
+  background
+
+  image.</p>
+
+  <p>The version of <code>background()</code> with two parameters interprets the
+  first one
+
+  as a grayscale value. The second parameter sets the alpha (transparency)
+
+  value.</p>
+
+  <p>The version of <code>background()</code> with three parameters interprets
+  them as RGB,
+
+  HSB, or HSL colors, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. By default, colors are
+  specified
+
+  in RGB values. Calling <code>background(255, 204, 0)</code> sets the
+  background a bright
+
+  yellow color.</p>
+
+  <p>The version of <code>background()</code> with four parameters interprets
+  them as RGBA,
+
+  HSBA, or HSLA colors, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter sets
+  the alpha
+
+  (transparency) value.</p>
+line: 414
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A grayscale value.
+      background(51);
+
+      describe('A canvas with a dark charcoal gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A grayscale value and an alpha value.
+      background(51, 0.4);
+      describe('A canvas with a transparent gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // R, G & B values.
+      background(255, 204, 0);
+
+      describe('A canvas with a yellow background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // R, G, B, and Alpha values.
+      background(255, 0, 0, 128);
+
+      describe('A canvas with a semi-transparent red background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // H, S & B values.
+      background(255, 204, 100);
+
+      describe('A canvas with a royal blue background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A CSS named color.
+      background('red');
+
+      describe('A canvas with a red background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Three-digit hex RGB notation.
+      background('#fae');
+
+      describe('A canvas with a pink background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Six-digit hex RGB notation.
+      background('#222222');
+
+      describe('A canvas with a black background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Integer RGB notation.
+      background('rgb(0, 255, 0)');
+
+      describe('A canvas with a bright green background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Integer RGBA notation.
+      background('rgba(0, 255, 0, 0.25)');
+
+      describe('A canvas with a transparent green background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Percentage RGB notation.
+      background('rgb(100%, 0%, 10%)');
+
+      describe('A canvas with a red background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Percentage RGBA notation.
+      background('rgba(100%, 0%, 100%, 0.5)');
+
+      describe('A canvas with a transparent purple background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A p5.Color object.
+      let c = color(0, 0, 255);
+      background(c);
+
+      describe('A canvas with a blue background.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 414
+    params:
+      - name: color
+        description: >
+          <p>any value created by the <a href="#/p5/color">color()</a>
+          function</p>
+        type: p5.Color
+    chainable: 1
+  - line: 626
+    params:
+      - name: colorstring
+        description: |
+          <p>color string, possible formats include: integer
+                                  rgb() or rgba(), percentage rgb() or rgba(),
+                                  3-digit hex, 6-digit hex.</p>
+        type: String
+      - name: a
+        description: |
+          <p>opacity of the background relative to current
+                                      color range (default is 0-255).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 636
+    params:
+      - name: gray
+        description: |
+          <p>specifies a value between white and black.</p>
+        type: Number
+      - name: a
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 643
+    params:
+      - name: v1
+        description: >
+          <p>red value if color mode is RGB, or hue value if color mode is
+          HSB.</p>
+        type: Number
+      - name: v2
+        description: >
+          <p>green value if color mode is RGB, or saturation value if color mode
+          is HSB.</p>
+        type: Number
+      - name: v3
+        description: >
+          <p>blue value if color mode is RGB, or brightness value if color mode
+          is HSB.</p>
+        type: Number
+      - name: a
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 652
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 659
+    params:
+      - name: image
+        description: |
+          <p>image created with <a href="#/p5/loadImage">loadImage()</a>
+                                      or <a href="#/p5/createImage">createImage()</a>,
+                                      to set as background.
+                                      (must be same size as the sketch window).</p>
+        type: p5.Image
+      - name: a
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# background
diff --git a/src/content/reference/en/p5 copy/baseColorShader.mdx b/src/content/reference/en/p5 copy/baseColorShader.mdx
new file mode 100644
index 0000000000..a608e4d5ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseColorShader.mdx	
@@ -0,0 +1,178 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1292
+title: baseColorShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the shader used when no lights or materials are applied.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseColorShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <thead>
+
+  <tr>
+
+  <th>Hook</th>
+
+  <th>Description</th>
+
+  </tr>
+
+  </thead>
+
+  <tbody><tr>
+
+  <td><code>void beforeVertex</code></td>
+
+  <td>Called at the start of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalPosition</code></td>
+
+  <td>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldPosition</code></td>
+
+  <td>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalNormal</code></td>
+
+  <td>Update the normal before transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldNormal</code></td>
+
+  <td>Update the normal after transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec2 getUV</code></td>
+
+  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
+  return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getVertexColor</code></td>
+
+  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterVertex</code></td>
+
+  <td>Called at the end of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void beforeFragment</code></td>
+
+  <td>Called at the start of the fragment shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getFinalColor</code></td>
+
+  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterFragment</code></td>
+
+  <td>Called at the end of the fragment shader.</td>
+
+  </tr>
+
+  </tbody></table>
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseColorShader().inspectHooks()</code> to see all the possible
+  hooks and
+
+  their default implementations.</p>
+line: 1292
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseColorShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      noStroke();
+      fill('red');
+      circle(0, 0, 50);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The color shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseColorShader
diff --git a/src/content/reference/en/p5 copy/baseMaterialShader.mdx b/src/content/reference/en/p5 copy/baseMaterialShader.mdx
new file mode 100644
index 0000000000..d41248d1aa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseMaterialShader.mdx	
@@ -0,0 +1,418 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L886
+title: baseMaterialShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the default shader used with lights, materials,
+
+  and textures.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseMaterialShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <tr><th>Hook</th><th>Description</th></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getLocalPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getWorldPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getLocalNormal</code></p>
+
+  </td><td>
+
+
+  <p>Update the normal before transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getWorldNormal</code></p>
+
+  </td><td>
+
+
+  <p>Update the normal after transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec2 getUV</code></p>
+
+  </td><td>
+
+
+  <p>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
+  return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getVertexColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the fragment shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>Inputs getPixelInputs</code></p>
+
+  </td><td>
+
+
+  <p>Update the per-pixel inputs of the material. It takes in an
+  <code>Inputs</code> struct, which includes:</p>
+
+  <ul>
+
+  <li><code>vec3 normal</code>, the direction pointing out of the surface</li>
+
+  <li><code>vec2 texCoord</code>, a vector where <code>x</code> and
+  <code>y</code> are between 0 and 1 describing the spot on a texture the pixel
+  is mapped to, as a fraction of the texture size</li>
+
+  <li><code>vec3 ambientLight</code>, the ambient light color on the vertex</li>
+
+  <li><code>vec4 color</code>, the base material color of the pixel</li>
+
+  <li><code>vec3 ambientMaterial</code>, the color of the pixel when affected by
+  ambient light</li>
+
+  <li><code>vec3 specularMaterial</code>, the color of the pixel when reflecting
+  specular highlights</li>
+
+  <li><code>vec3 emissiveMaterial</code>, the light color emitted by the
+  pixel</li>
+
+  <li><code>float shininess</code>, a number representing how sharp specular
+  reflections should be, from 1 to infinity</li>
+
+  <li><code>float metalness</code>, a number representing how mirrorlike the
+  material should be, between 0 and 1
+
+  The struct can be modified and returned.</li></ul></td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 combineColors</code></p>
+
+  </td><td>
+
+
+  <p>Take in a <code>ColorComponents</code> struct containing all the different
+  components of light, and combining them into
+
+  a single final color. The struct contains:</p>
+
+  <ul>
+
+  <li><code>vec3 baseColor</code>, the base color of the pixel</li>
+
+  <li><code>float opacity</code>, the opacity between 0 and 1 that it should be
+  drawn at</li>
+
+  <li><code>vec3 ambientColor</code>, the color of the pixel when affected by
+  ambient light</li>
+
+  <li><code>vec3 specularColor</code>, the color of the pixel when affected by
+  specular reflections</li>
+
+  <li><code>vec3 diffuse</code>, the amount of diffused light hitting the
+  pixel</li>
+
+  <li><code>vec3 ambient</code>, the amount of ambient light hitting the
+  pixel</li>
+
+  <li><code>vec3 specular</code>, the amount of specular reflection hitting the
+  pixel</li>
+
+  <li><code>vec3 emissive</code>, the amount of light emitted by the pixel</li>
+
+  </ul>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getFinalColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the fragment shader.</p>
+
+  </td></tr>
+
+  </table>
+
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseMaterialShader().inspectHooks()</code> to see all the
+  possible hooks and
+
+  their default implementations.</p>
+line: 886
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20.0 * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      lights();
+      noStroke();
+      fill('red');
+      sphere(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        declarations: 'vec3 myNormal;',
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          myNormal = inputs.normal;
+          return inputs;
+        }`,
+        'vec4 getFinalColor': `(vec4 color) {
+          return mix(
+            vec4(1.0, 1.0, 1.0, 1.0),
+            color,
+            abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))
+          );
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      rotateY(millis() * 0.001);
+      shader(myShader);
+      lights();
+      noStroke();
+      fill('red');
+      torus(30);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+    let environment;
+
+    function preload() {
+      environment = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          float factor =
+            sin(
+              inputs.texCoord.x * ${TWO_PI} +
+              inputs.texCoord.y * ${TWO_PI}
+            ) * 0.4 + 0.5;
+          inputs.shininess = mix(1., 100., factor);
+          inputs.metalness = factor;
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      panorama(environment);
+      ambientLight(100);
+      imageLight(environment);
+      rotateY(millis() * 0.001);
+      shader(myShader);
+      noStroke();
+      fill(255);
+      specularMaterial(150);
+      sphere(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          vec3 newNormal = inputs.normal;
+          // Simple bump mapping: adjust the normal based on position
+          newNormal.x += 0.2 * sin(
+              sin(
+                inputs.texCoord.y * ${TWO_PI} * 10.0 +
+                inputs.texCoord.x * ${TWO_PI} * 25.0
+              )
+            );
+          newNormal.y += 0.2 * sin(
+            sin(
+                inputs.texCoord.x * ${TWO_PI} * 10.0 +
+                inputs.texCoord.y * ${TWO_PI} * 25.0
+              )
+          );
+          inputs.normal = normalize(newNormal);
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      ambientLight(150);
+      pointLight(
+        255, 255, 255,
+        100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)
+      );
+      noStroke();
+      fill('red');
+      shininess(200);
+      specularMaterial(255);
+      sphere(50);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The material shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseMaterialShader
diff --git a/src/content/reference/en/p5 copy/baseNormalShader.mdx b/src/content/reference/en/p5 copy/baseNormalShader.mdx
new file mode 100644
index 0000000000..4eac6e9109
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseNormalShader.mdx	
@@ -0,0 +1,211 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1197
+title: baseNormalShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the shader used by <a
+  href="/reference/p5/normalMaterial/"><code>normalMaterial()</code></a>.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseNormalShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <thead>
+
+  <tr>
+
+  <th>Hook</th>
+
+  <th>Description</th>
+
+  </tr>
+
+  </thead>
+
+  <tbody><tr>
+
+  <td><code>void beforeVertex</code></td>
+
+  <td>Called at the start of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalPosition</code></td>
+
+  <td>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldPosition</code></td>
+
+  <td>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalNormal</code></td>
+
+  <td>Update the normal before transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldNormal</code></td>
+
+  <td>Update the normal after transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec2 getUV</code></td>
+
+  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
+  return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getVertexColor</code></td>
+
+  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterVertex</code></td>
+
+  <td>Called at the end of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void beforeFragment</code></td>
+
+  <td>Called at the start of the fragment shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getFinalColor</code></td>
+
+  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterFragment</code></td>
+
+  <td>Called at the end of the fragment shader.</td>
+
+  </tr>
+
+  </tbody></table>
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseNormalShader().inspectHooks()</code> to see all the possible
+  hooks and
+
+  their default implementations.</p>
+line: 1197
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseNormalShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      noStroke();
+      sphere(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseNormalShader().modify({
+        'vec3 getWorldNormal': '(vec3 normal) { return abs(normal); }',
+        'vec4 getFinalColor': `(vec4 color) {
+          // Map the r, g, and b values of the old normal to new colors
+          // instead of just red, green, and blue:
+          vec3 newColor =
+            color.r * vec3(89.0, 240.0, 232.0) / 255.0 +
+            color.g * vec3(240.0, 237.0, 89.0) / 255.0 +
+            color.b * vec3(205.0, 55.0, 222.0) / 255.0;
+          newColor = newColor / (color.r + color.g + color.b);
+          return vec4(newColor, 1.0) * color.a;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      noStroke();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.015);
+      box(100);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The `normalMaterial` shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseNormalShader
diff --git a/src/content/reference/en/p5 copy/baseStrokeShader.mdx b/src/content/reference/en/p5 copy/baseStrokeShader.mdx
new file mode 100644
index 0000000000..f2bfb42be5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseStrokeShader.mdx	
@@ -0,0 +1,356 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1355
+title: baseStrokeShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the shader used when drawing the strokes of shapes.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseStrokeShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <tr><th>Hook</th><th>Description</th></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getLocalPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getWorldPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>float getStrokeWeight</code></p>
+
+  </td><td>
+
+
+  <p>Update the stroke weight. It takes in <code>float weight</code> and pust
+  return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec2 getLineCenter</code></p>
+
+  </td><td>
+
+
+  <p>Update the center of the line. It takes in <code>vec2 center</code> and
+  must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec2 getLinePosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of each vertex on the edge of the line. It takes in
+  <code>vec2 position</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getVertexColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the fragment shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>Inputs getPixelInputs</code></p>
+
+  </td><td>
+
+
+  <p>Update the inputs to the shader. It takes in a struct <code>Inputs
+  inputs</code>, which includes:</p>
+
+  <ul>
+
+  <li><code>vec4 color</code>, the color of the stroke</li>
+
+  <li><code>vec2 tangent</code>, the direction of the stroke in screen
+  space</li>
+
+  <li><code>vec2 center</code>, the coordinate of the center of the stroke in
+  screen space p5.js pixels</li>
+
+  <li><code>vec2 position</code>, the coordinate of the current pixel in screen
+  space p5.js pixels</li>
+
+  <li><code>float strokeWeight</code>, the thickness of the stroke in p5.js
+  pixels</li>
+
+  </ul>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>bool shouldDiscard</code></p>
+
+  </td><td>
+
+
+  <p>Caps and joins are made by discarded pixels in the fragment shader to carve
+  away unwanted areas. Use this to change this logic. It takes in a <code>bool
+  willDiscard</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getFinalColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the fragment shader.</p>
+
+  </td></tr>
+
+  </table>
+
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseStrokeShader().inspectHooks()</code> to see all the possible
+  hooks and
+
+  their default implementations.</p>
+line: 1355
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseStrokeShader().modify({
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          float opacity = 1.0 - smoothstep(
+            0.0,
+            15.0,
+            length(inputs.position - inputs.center)
+          );
+          inputs.color *= opacity;
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      strokeWeight(30);
+      line(
+        -width/3,
+        sin(millis()*0.001) * height/4,
+        width/3,
+        sin(millis()*0.001 + 1) * height/4
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseStrokeShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        declarations: 'vec3 myPosition;',
+        'vec3 getWorldPosition': `(vec3 pos) {
+          myPosition = pos;
+          return pos;
+        }`,
+        'float getStrokeWeight': `(float w) {
+          // Add a somewhat random offset to the weight
+          // that varies based on position and time
+          float scale = 0.8 + 0.2*sin(10.0 * sin(
+            floor(time/250.) +
+            myPosition.x*0.01 +
+            myPosition.y*0.01
+          ));
+          return w * scale;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      myShader.setUniform('time', millis());
+      strokeWeight(10);
+      beginShape();
+      for (let i = 0; i <= 50; i++) {
+        let r = map(i, 0, 50, 0, width/3);
+        let x = r*cos(i*0.2);
+        let y = r*sin(i*0.2);
+        vertex(x, y);
+      }
+      endShape();
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseStrokeShader().modify({
+        'float random': `(vec2 p) {
+          vec3 p3  = fract(vec3(p.xyx) * .1031);
+          p3 += dot(p3, p3.yzx + 33.33);
+          return fract((p3.x + p3.y) * p3.z);
+        }`,
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          // Replace alpha in the color with dithering by
+          // randomly setting pixel colors to 0 based on opacity
+          float a = inputs.color.a;
+          inputs.color.a = 1.0;
+          inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      strokeWeight(10);
+      beginShape();
+      for (let i = 0; i <= 50; i++) {
+        stroke(
+          0,
+          255
+            * map(i, 0, 20, 0, 1, true)
+            * map(i, 30, 50, 1, 0, true)
+        );
+        vertex(
+          map(i, 0, 50, -1, 1) * width/3,
+          50 * sin(i/10 + frameCount/100)
+        );
+      }
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The stroke shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseStrokeShader
diff --git a/src/content/reference/en/p5 copy/beginClip.mdx b/src/content/reference/en/p5 copy/beginClip.mdx
new file mode 100644
index 0000000000..ebad022a68
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginClip.mdx	
@@ -0,0 +1,208 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L13
+title: beginClip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Starts defining a shape that will mask any shapes drawn afterward.</p>
+
+  <p>Any shapes drawn between <code>beginClip()</code> and
+
+  <a href="/reference/p5/endClip/">endClip()</a> will add to the mask shape. The
+  mask
+
+  will apply to anything drawn after <a
+  href="/reference/p5/endClip/">endClip()</a>.</p>
+
+  <p>The parameter, <code>options</code>, is optional. If an object with an
+  <code>invert</code>
+
+  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
+  used to
+
+  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
+  holes
+
+  in shapes that are masked. <code>invert</code> is <code>false</code> by
+  default.</p>
+
+  <p>Masks can be contained between the
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions.
+
+  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
+
+  <p>Masks can also be defined in a callback function that's passed to
+
+  <a href="/reference/p5/clip/">clip()</a>.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white triangle and circle on a gray background.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an inverted mask.
+      beginClip({ invert: true });
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      noStroke();
+
+      // Draw a masked shape.
+      push();
+      // Create a mask.
+      beginClip();
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw an inverted masked shape.
+      push();
+      // Create an inverted mask.
+      beginClip({ invert: true });
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored fuchsia.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+      endClip();
+
+      // Draw a backing shape.
+      noStroke();
+      fill('fuchsia');
+      plane(100);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+      endClip();
+
+      // Draw a backing shape.
+      noStroke();
+      beginShape(QUAD_STRIP);
+      fill(0, 255, 255);
+      vertex(-width / 2, -height / 2);
+      vertex(width / 2, -height / 2);
+      fill(100, 0, 100);
+      vertex(-width / 2, height / 2);
+      vertex(width / 2, height / 2);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: options
+    description: |
+      <p>an object containing clip settings.</p>
+    type: Object
+    optional: true
+chainable: false
+---
+
+
+# beginClip
diff --git a/src/content/reference/en/p5 copy/beginContour.mdx b/src/content/reference/en/p5 copy/beginContour.mdx
new file mode 100644
index 0000000000..5ecd6d1437
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginContour.mdx	
@@ -0,0 +1,134 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L20
+title: beginContour
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Begins creating a hole within a flat shape.</p>
+
+  <p>The <code>beginContour()</code> and <a
+  href="/reference/p5/endContour/">endContour()</a>
+
+  functions allow for creating negative space within custom shapes that are
+
+  flat. <code>beginContour()</code> begins adding vertices to a negative space
+  and
+
+  <a href="/reference/p5/endContour/">endContour()</a> stops adding them.
+
+  <code>beginContour()</code> and <a
+  href="/reference/p5/endContour/">endContour()</a> must be
+
+  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a>.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and <a
+  href="/reference/p5/scale/">scale()</a>
+
+  don't work between <code>beginContour()</code> and
+
+  <a href="/reference/p5/endContour/">endContour()</a>. It's also not possible
+  to use
+
+  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
+
+  <a href="/reference/p5/rect/">rect()</a>, between <code>beginContour()</code>
+  and
+
+  <a href="/reference/p5/endContour/">endContour()</a>.</p>
+
+  <p>Note: The vertices that define a negative space must "wind" in the opposite
+
+  direction from the outer shape. First, draw vertices for the outer shape
+
+  clockwise order. Then, draw vertices for the negative space in
+
+  counter-clockwise order.</p>
+line: 20
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(10, 10);
+      vertex(90, 10);
+      vertex(90, 90);
+      vertex(10, 90);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(30, 30);
+      vertex(30, 70);
+      vertex(70, 70);
+      vertex(70, 30);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(-40, -40);
+      vertex(40, -40);
+      vertex(40, 40);
+      vertex(-40, 40);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(-20, -20);
+      vertex(-20, 20);
+      vertex(20, 20);
+      vertex(20, -20);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# beginContour
diff --git a/src/content/reference/en/p5 copy/beginGeometry.mdx b/src/content/reference/en/p5 copy/beginGeometry.mdx
new file mode 100644
index 0000000000..3fdf211bd3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginGeometry.mdx	
@@ -0,0 +1,281 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L13
+title: beginGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Begins adding shapes to a new
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
+
+  <p>The <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>
+
+  functions help with creating complex 3D shapes from simpler ones such as
+
+  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
+  begins adding shapes
+
+  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
+
+  <p><code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a> can help
+
+  to make sketches more performant. For example, if a complex 3D shape
+
+  doesn’t change while a sketch runs, then it can be created with
+
+  <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>.
+
+  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
+  then
+
+  drawing it will run faster than repeatedly drawing the individual pieces.</p>
+
+  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
+  way to
+
+  build 3D shapes.</p>
+
+  <p>Note: <code>beginGeometry()</code> can only be used in WebGL mode.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add a cone.
+      cone();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      createArrow();
+
+      describe('A white arrow drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let blueArrow;
+    let redArrow;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the arrows.
+      redArrow = createArrow('red');
+      blueArrow = createArrow('blue');
+
+      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the red arrow.
+      model(redArrow);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the blue arrow.
+      model(blueArrow);
+    }
+
+    function createArrow(fillColor) {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      fill(fillColor);
+
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = createParticles();
+    }
+
+    function createParticles() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# beginGeometry
diff --git a/src/content/reference/en/p5 copy/beginShape.mdx b/src/content/reference/en/p5 copy/beginShape.mdx
new file mode 100644
index 0000000000..d8642333db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginShape.mdx	
@@ -0,0 +1,449 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L129
+title: beginShape
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Begins adding vertices to a custom shape.</p>
+
+  <p>The <code>beginShape()</code> and <a
+  href="/reference/p5/endShape/">endShape()</a> functions
+
+  allow for creating custom shapes in 2D or 3D. <code>beginShape()</code> begins
+  adding
+
+  vertices to a custom shape and <a
+  href="/reference/p5/endShape/">endShape()</a> stops
+
+  adding them.</p>
+
+  <p>The parameter, <code>kind</code>, sets the kind of shape to make. By
+  default, any
+
+  irregular polygon can be drawn. The available modes for kind are:</p>
+
+  <ul>
+
+  <li><code>POINTS</code> to draw a series of points.</li>
+
+  <li><code>LINES</code> to draw a series of unconnected line segments.</li>
+
+  <li><code>TRIANGLES</code> to draw a series of separate triangles.</li>
+
+  <li><code>TRIANGLE_FAN</code> to draw a series of connected triangles sharing
+  the first vertex in a fan-like fashion.</li>
+
+  <li><code>TRIANGLE_STRIP</code> to draw a series of connected triangles in
+  strip fashion.</li>
+
+  <li><code>QUADS</code> to draw a series of separate quadrilaterals
+  (quads).</li>
+
+  <li><code>QUAD_STRIP</code> to draw quad strip using adjacent edges to form
+  the next quad.</li>
+
+  <li><code>TESS</code> to create a filling curve by explicit tessellation
+  (WebGL only).</li>
+
+  </ul>
+
+  <p>After calling <code>beginShape()</code>, shapes can be built by calling
+
+  <a href="/reference/p5/vertex/">vertex()</a>,
+
+  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
+
+  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
+
+  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
+
+  <a href="/reference/p5/endShape/">endShape()</a> will stop adding vertices to
+  the
+
+  shape. Each shape will be outlined with the current stroke color and filled
+
+  with the current fill color.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and
+
+  <a href="/reference/p5/scale/">scale()</a> don't work between
+  <code>beginShape()</code> and
+
+  <a href="/reference/p5/endShape/">endShape()</a>. It's also not possible to
+  use
+
+  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
+
+  <a href="/reference/p5/rect/">rect()</a>, between <code>beginShape()</code>
+  and
+
+  <a href="/reference/p5/endShape/">endShape()</a>.</p>
+line: 129
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Only draw the vertices (points).
+      beginShape(POINTS);
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Four black dots that form a square are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Only draw lines between alternating pairs of vertices.
+      beginShape(LINES);
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Two horizontal black lines on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Three black lines form a sideways U shape on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      // Connect the first and last vertices.
+      endShape(CLOSE);
+
+      describe('A black outline of a square drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of triangles.
+      beginShape(TRIANGLES);
+
+      // Left triangle.
+      vertex(30, 75);
+      vertex(40, 20);
+      vertex(50, 75);
+
+      // Right triangle.
+      vertex(60, 20);
+      vertex(70, 75);
+      vertex(80, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Two white triangles drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of triangles.
+      beginShape(TRIANGLE_STRIP);
+
+      // Add vertices.
+      vertex(30, 75);
+      vertex(40, 20);
+      vertex(50, 75);
+      vertex(60, 20);
+      vertex(70, 75);
+      vertex(80, 20);
+      vertex(90, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Five white triangles that are interleaved drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of triangles that share their first vertex.
+      beginShape(TRIANGLE_FAN);
+
+      // Add vertices.
+      vertex(57.5, 50);
+      vertex(57.5, 15);
+      vertex(92, 50);
+      vertex(57.5, 85);
+      vertex(22, 50);
+      vertex(57.5, 15);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Four white triangles form a square are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(QUADS);
+
+      // Left rectangle.
+      vertex(30, 20);
+      vertex(30, 75);
+      vertex(50, 75);
+      vertex(50, 20);
+
+      // Right rectangle.
+      vertex(65, 20);
+      vertex(65, 75);
+      vertex(85, 75);
+      vertex(85, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Two white rectangles drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(QUAD_STRIP);
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(30, 75);
+      vertex(50, 20);
+      vertex(50, 75);
+      vertex(65, 20);
+      vertex(65, 75);
+      vertex(85, 20);
+      vertex(85, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Three white rectangles that share edges are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(TESS);
+
+      // Add the vertices.
+      vertex(-30, -30, 0);
+      vertex(30, -30, 0);
+      vertex(30, -10, 0);
+      vertex(-10, -10, 0);
+      vertex(-10, 10, 0);
+      vertex(30, 10, 0);
+      vertex(30, 30, 0);
+      vertex(-30, 30, 0);
+
+      // Stop drawing the shape.
+      // Connect the first and last vertices.
+      endShape(CLOSE);
+
+      describe('A blocky C shape drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag with the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A blocky C shape drawn in red, blue, and green on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(TESS);
+
+      // Add the vertices.
+      fill('red');
+      stroke('red');
+      vertex(-30, -30, 0);
+      vertex(30, -30, 0);
+      vertex(30, -10, 0);
+      fill('green');
+      stroke('green');
+      vertex(-10, -10, 0);
+      vertex(-10, 10, 0);
+      vertex(30, 10, 0);
+      fill('blue');
+      stroke('blue');
+      vertex(30, 30, 0);
+      vertex(-30, 30, 0);
+
+      // Stop drawing the shape.
+      // Connect the first and last vertices.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: kind
+    description: |
+      <p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+                                     TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.</p>
+    type: Constant
+    optional: true
+chainable: true
+---
+
+
+# beginShape
diff --git a/src/content/reference/en/p5 copy/bezier.mdx b/src/content/reference/en/p5 copy/bezier.mdx
new file mode 100644
index 0000000000..50c15330b7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezier.mdx	
@@ -0,0 +1,273 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L13
+title: bezier
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Draws a Bézier curve.</p>
+
+  <p>Bézier curves can form shapes and curves that slope gently. They're defined
+
+  by two anchor points and two control points. Bézier curves provide more
+
+  control than the spline curves created with the
+
+  <a href="/reference/p5/curve/">curve()</a> function.</p>
+
+  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
+  first anchor point. The
+
+  first anchor point is where the curve starts.</p>
+
+  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
+  <code>x3</code>, and <code>y3</code>, set the two control
+
+  points. The control points "pull" the curve towards them.</p>
+
+  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
+  the last anchor
+
+  point. The last anchor point is where the curve ends.</p>
+
+  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>bezier()</code> has twelve arguments because each point has x-, y-,
+
+  and z-coordinates.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(85, 20);
+      point(15, 80);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(10, 10);
+      point(90, 90);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(85, 20, 10, 10, 90, 90, 15, 80);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(85, 20, 10, 10);
+      line(15, 80, 90, 90);
+
+      describe(
+        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the top-left corner
+    // and drag to change the curve's shape.
+
+    let x2 = 10;
+    let y2 = 10;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(85, 20);
+      point(15, 80);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x2, y2);
+      point(90, 90);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(85, 20, x2, y2, 90, 90, 15, 80);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(85, 20, x2, y2);
+      line(15, 80, 90, 90);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x2, y2) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x2 = mouseX;
+        y2 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background('skyblue');
+
+      // Draw the red balloon.
+      fill('red');
+      bezier(50, 60, 5, 15, 95, 15, 50, 60);
+
+      // Draw the balloon string.
+      line(50, 60, 50, 80);
+
+      describe('A red balloon in a blue sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');
+    }
+
+    function draw() {
+      background('skyblue');
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the red balloon.
+      fill('red');
+      bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);
+
+      // Draw the balloon string.
+      line(0, 0, 0, 0, 20, 0);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 13
+    params:
+      - name: x1
+        description: |
+          <p>x-coordinate of the first anchor point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>y-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>x-coordinate of the first control point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the second control point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>x-coordinate of the second anchor point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>y-coordinate of the second anchor point.</p>
+        type: Number
+    chainable: 1
+  - line: 191
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>z-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>z-coordinate of the second anchor point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# bezier
diff --git a/src/content/reference/en/p5 copy/bezierDetail.mdx b/src/content/reference/en/p5 copy/bezierDetail.mdx
new file mode 100644
index 0000000000..b4f895a3fc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierDetail.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L221
+title: bezierDetail
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Sets the number of segments used to draw Bézier curves in WebGL mode.</p>
+
+  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+
+  more flat segments makes shapes appear smoother.</p>
+
+  <p>The parameter, <code>detail</code>, is the number of segments to use while
+  drawing a
+
+  Bézier curve. For example, calling <code>bezierDetail(5)</code> will use 5
+  segments to
+
+  draw curves with the <a href="/reference/p5/bezier/">bezier()</a> function. By
+
+  default,<code>detail</code> is 20.</p>
+
+  <p>Note: <code>bezierDetail()</code> has no effect in 2D mode.</p>
+line: 221
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Draw the original curve.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(85, 20);
+      point(15, 80);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(10, 10);
+      point(90, 90);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(85, 20, 10, 10, 90, 90, 15, 80);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(85, 20, 10, 10);
+      line(15, 80, 90, 90);
+
+      describe(
+        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Draw the curve with less detail.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Set the curveDetail() to 5.
+      bezierDetail(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(35, -30, 0);
+      point(-35, 30, 0);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(-40, -40, 0);
+      point(40, 40, 0);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(35, -30, -40, -40);
+      line(-35, 30, 40, 40);
+
+      describe(
+        'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: detail
+    description: |
+      <p>number of segments to use. Defaults to 20.</p>
+    type: Number
+chainable: true
+---
+
+
+# bezierDetail
diff --git a/src/content/reference/en/p5 copy/bezierPoint.mdx b/src/content/reference/en/p5 copy/bezierPoint.mdx
new file mode 100644
index 0000000000..a42c171121
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierPoint.mdx	
@@ -0,0 +1,162 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L324
+title: bezierPoint
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a Bézier curve using interpolation.</p>
+
+  <p><code>bezierPoint()</code> calculates coordinates along a Bézier curve
+  using the
+
+  anchor and control points. It expects points in the same order as the
+
+  <a href="/reference/p5/bezier/">bezier()</a> function.
+  <code>bezierPoint()</code> works one axis
+
+  at a time. Passing the anchor and control points' x-coordinates will
+
+  calculate the x-coordinate of a point on the curve. Passing the anchor and
+
+  control points' y-coordinates will calculate the y-coordinate of a point on
+
+  the curve.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  control points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 324
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 85;
+      let x2 = 10;
+      let x3 = 90;
+      let x4 = 15;
+      let y1 = 20;
+      let y2 = 10;
+      let y3 = 90;
+      let y4 = 80;
+
+      // Style the curve.
+      noFill();
+
+      // Draw the curve.
+      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw circles along the curve's path.
+      fill(255);
+
+      // Top-right.
+      let x = bezierPoint(x1, x2, x3, x4, 0);
+      let y = bezierPoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Center.
+      x = bezierPoint(x1, x2, x3, x4, 0.5);
+      y = bezierPoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Bottom-left.
+      x = bezierPoint(x1, x2, x3, x4, 1);
+      y = bezierPoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 85;
+      let x2 = 10;
+      let x3 = 90;
+      let x4 = 15;
+      let y1 = 20;
+      let y2 = 10;
+      let y3 = 90;
+      let y4 = 80;
+
+      // Draw the curve.
+      noFill();
+      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Calculate the circle's coordinates.
+      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+      let x = bezierPoint(x1, x2, x3, x4, t);
+      let y = bezierPoint(y1, y2, y3, y4, t);
+
+      // Draw the circle.
+      fill(255);
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of the point on the curve.
+  type: Number
+chainable: false
+---
+
+
+# bezierPoint
diff --git a/src/content/reference/en/p5 copy/bezierTangent.mdx b/src/content/reference/en/p5 copy/bezierTangent.mdx
new file mode 100644
index 0000000000..8fb0edfaa8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierTangent.mdx	
@@ -0,0 +1,155 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L450
+title: bezierTangent
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a line that's tangent to a Bézier curve.</p>
+
+  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
+
+  the curve's slope at the point where it intersects.</p>
+
+  <p><code>bezierTangent()</code> calculates coordinates along a tangent line
+  using the
+
+  Bézier curve's anchor and control points. It expects points in the same
+
+  order as the <a href="/reference/p5/bezier/">bezier()</a> function.
+  <code>bezierTangent()</code>
+
+  works one axis at a time. Passing the anchor and control points'
+
+  x-coordinates will calculate the x-coordinate of a point on the tangent
+
+  line. Passing the anchor and control points' y-coordinates will calculate
+
+  the y-coordinate of a point on the tangent line.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  control points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 450
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 85;
+      let x2 = 10;
+      let x3 = 90;
+      let x4 = 15;
+      let y1 = 20;
+      let y2 = 10;
+      let y3 = 90;
+      let y4 = 80;
+
+      // Style the curve.
+      noFill();
+
+      // Draw the curve.
+      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw tangents along the curve's path.
+      fill(255);
+
+      // Top-right circle.
+      stroke(0);
+      let x = bezierPoint(x1, x2, x3, x4, 0);
+      let y = bezierPoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Top-right tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);
+      let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Center circle.
+      stroke(0);
+      x = bezierPoint(x1, x2, x3, x4, 0.5);
+      y = bezierPoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Center tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);
+      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Bottom-left circle.
+      stroke(0);
+      x = bezierPoint(x1, x2, x3, x4, 1);
+      y = bezierPoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      // Bottom-left tangent.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);
+      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      describe(
+        'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of a point on the tangent line.
+  type: Number
+chainable: false
+---
+
+
+# bezierTangent
diff --git a/src/content/reference/en/p5 copy/bezierVertex.mdx b/src/content/reference/en/p5 copy/bezierVertex.mdx
new file mode 100644
index 0000000000..f4b5fb57cb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierVertex.mdx	
@@ -0,0 +1,337 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L543
+title: bezierVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a Bézier curve segment to a custom shape.</p>
+
+  <p><code>bezierVertex()</code> adds a curved segment to custom shapes. The
+  Bézier curves
+
+  it creates are defined like those made by the
+
+  <a href="/reference/p5/bezier/">bezier()</a> function.
+  <code>bezierVertex()</code> must be
+
+  called between the
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
+  uses
+
+  the previous vertex as the first anchor point, so there must be at least
+
+  one call to <a href="/reference/p5/vertex/">vertex()</a> before
+  <code>bezierVertex()</code> can
+
+  be used.</p>
+
+  <p>The first four parameters, <code>x2</code>, <code>y2</code>,
+  <code>x3</code>, and <code>y3</code>, set the curve’s two
+
+  control points. The control points "pull" the curve towards them.</p>
+
+  <p>The fifth and sixth parameters, <code>x4</code>, and <code>y4</code>, set
+  the last anchor point.
+
+  The last anchor point is where the curve ends.</p>
+
+  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
+  and
+
+  z-coordinates.</p>
+
+  <p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to
+
+  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 543
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertex.
+      bezierVertex(80, 0, 80, 75, 30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A black C curve on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(30, 20);
+      point(30, 75);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(80, 0);
+      point(80, 75);
+
+      // Style the shape.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertex.
+      bezierVertex(80, 0, 80, 75, 30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(30, 20, 80, 0);
+      line(30, 75, 80, 75);
+
+      describe(
+        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the top-right corner
+    // and drag to change the curve's shape.
+
+    let x2 = 80;
+    let y2 = 0;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(30, 20);
+      point(30, 75);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x2, y2);
+      point(80, 75);
+
+      // Style the shape.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertex.
+      bezierVertex(x2, y2, 80, 75, 30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(30, 20, x2, y2);
+      line(30, 75, 80, 75);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x2, y2) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x2 = mouseX;
+        y2 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertices.
+      bezierVertex(80, 0, 80, 75, 30, 75);
+      bezierVertex(50, 80, 60, 25, 30, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A crescent moon shape drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');
+    }
+
+    function draw() {
+      background('midnightblue');
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the moons.
+      noStroke();
+      fill('lemonchiffon');
+
+      // Draw the first moon.
+      beginShape();
+      vertex(-20, -30, 0);
+      bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);
+      bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);
+      endShape();
+
+      // Draw the second moon.
+      beginShape();
+      vertex(-20, -30, -20);
+      bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);
+      bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 543
+    params:
+      - name: x2
+        description: |
+          <p>x-coordinate of the first control point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the second control point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>x-coordinate of the anchor point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>y-coordinate of the anchor point.</p>
+        type: Number
+    chainable: 1
+  - line: 792
+    params:
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>z-coordinate of the anchor point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# bezierVertex
diff --git a/src/content/reference/en/p5 copy/blend.mdx b/src/content/reference/en/p5 copy/blend.mdx
new file mode 100644
index 0000000000..53e9a94dc9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/blend.mdx	
@@ -0,0 +1,214 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L148
+title: blend
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Copies a region of pixels from one image to another.</p>
+
+  <p>The first parameter, <code>srcImage</code>, is the
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
+
+  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+  <code>sw</code>, and <code>sh</code> determine the region
+
+  to blend from the source image. <code>(sx, sy)</code> is the top-left corner
+  of the
+
+  region. <code>sw</code> and <code>sh</code> are the regions width and
+  height.</p>
+
+  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+  <code>dw</code>, and <code>dh</code> determine the region
+
+  of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of
+  the
+
+  region. <code>dw</code> and <code>dh</code> are the regions width and
+  height.</p>
+
+  <p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend
+  the images'
+
+  colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
+  <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
+
+  <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
+  <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
+
+  <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
+  <code>ADD</code>, or <code>NORMAL</code></p>
+line: 148
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    // Load the images.
+    function preload() {
+      img0 = loadImage('/assets/rockies.jpg');
+      img1 = loadImage('/assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img0);
+
+      // Display the bricks.
+      image(img1, 0, 0);
+
+      // Display the bricks faded into the landscape.
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    // Load the images.
+    function preload() {
+      img0 = loadImage('/assets/rockies.jpg');
+      img1 = loadImage('/assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img0);
+
+      // Display the bricks.
+      image(img1, 0, 0);
+
+      // Display the bricks partially transparent.
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    // Load the images.
+    function preload() {
+      img0 = loadImage('/assets/rockies.jpg');
+      img1 = loadImage('/assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img0);
+
+      // Display the bricks.
+      image(img1, 0, 0);
+
+      // Display the bricks washed out into the landscape.
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 148
+    params:
+      - name: srcImage
+        description: |
+          <p>source image.</p>
+        type: p5.Image
+      - name: sx
+        description: |
+          <p>x-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sy
+        description: |
+          <p>y-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sw
+        description: |
+          <p>source image width.</p>
+        type: Integer
+      - name: sh
+        description: |
+          <p>source image height.</p>
+        type: Integer
+      - name: dx
+        description: |
+          <p>x-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dy
+        description: |
+          <p>y-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dw
+        description: |
+          <p>destination image width.</p>
+        type: Integer
+      - name: dh
+        description: |
+          <p>destination image height.</p>
+        type: Integer
+      - name: blendMode
+        description: |
+          <p>the blend mode. either
+              BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+              MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+              SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
+        type: Constant
+  - line: 267
+    params:
+      - name: sx
+        description: ''
+        type: Integer
+      - name: sy
+        description: ''
+        type: Integer
+      - name: sw
+        description: ''
+        type: Integer
+      - name: sh
+        description: ''
+        type: Integer
+      - name: dx
+        description: ''
+        type: Integer
+      - name: dy
+        description: ''
+        type: Integer
+      - name: dw
+        description: ''
+        type: Integer
+      - name: dh
+        description: ''
+        type: Integer
+      - name: blendMode
+        description: ''
+        type: Constant
+chainable: false
+---
+
+
+# blend
diff --git a/src/content/reference/en/p5 copy/blendMode.mdx b/src/content/reference/en/p5 copy/blendMode.mdx
new file mode 100644
index 0000000000..8f6365b78d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/blendMode.mdx	
@@ -0,0 +1,541 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L720
+title: blendMode
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Sets the way colors blend when added to the canvas.</p>
+
+  <p>By default, drawing with a solid color paints over the current pixel values
+
+  on the canvas. <code>blendMode()</code> offers many options for blending
+  colors.</p>
+
+  <p>Shapes, images, and text can be used as sources for drawing to the canvas.
+
+  A source pixel changes the color of the canvas pixel where it's drawn. The
+
+  final color results from blending the source pixel's color with the canvas
+
+  pixel's color. RGB color values from the source and canvas pixels are
+
+  compared, added, subtracted, multiplied, and divided to create different
+
+  effects. Red values with red values, greens with greens, and blues with
+
+  blues.</p>
+
+  <p>The parameter, <code>mode</code>, sets the blend mode. For example, calling
+
+  <code>blendMode(ADD)</code> sets the blend mode to <code>ADD</code>. The
+  following blend modes
+
+  are available in both 2D and WebGL mode:</p>
+
+  <ul>
+
+  <li><code>BLEND</code>: color values from the source overwrite the canvas.
+  This is the default mode.</li>
+
+  <li><code>ADD</code>: color values from the source are added to values from
+  the canvas.</li>
+
+  <li><code>DARKEST</code>: keeps the darkest color value.</li>
+
+  <li><code>LIGHTEST</code>: keeps the lightest color value.</li>
+
+  <li><code>EXCLUSION</code>: similar to <code>DIFFERENCE</code> but with less
+  contrast.</li>
+
+  <li><code>MULTIPLY</code>: color values from the source are multiplied with
+  values from the canvas. The result is always darker.</li>
+
+  <li><code>SCREEN</code>: all color values are inverted, then multiplied, then
+  inverted again. The result is always lighter. (Opposite of
+  <code>MULTIPLY</code>)</li>
+
+  <li><code>REPLACE</code>: the last source drawn completely replaces the rest
+  of the canvas.</li>
+
+  <li><code>REMOVE</code>: overlapping pixels are removed by making them
+  completely transparent.</li>
+
+  </ul>
+
+  <p>The following blend modes are only available in 2D mode:</p>
+
+  <ul>
+
+  <li><code>DIFFERENCE</code>: color values from the source are subtracted from
+  the values from the canvas. If the difference is a negative number, it's made
+  positive.</li>
+
+  <li><code>OVERLAY</code>: combines <code>MULTIPLY</code> and
+  <code>SCREEN</code>. Dark values in the canvas get darker and light values get
+  lighter.</li>
+
+  <li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code> and
+  <code>SCREEN</code>. Dark values in the source get darker and light values get
+  lighter.</li>
+
+  <li><code>SOFT_LIGHT</code>: a softer version of <code>HARD_LIGHT</code>.</li>
+
+  <li><code>DODGE</code>: lightens light tones and increases contrast. Divides
+  the canvas color values by the inverted color values from the source.</li>
+
+  <li><code>BURN</code>: darkens dark tones and increases contrast. Divides the
+  source color values by the inverted color values from the canvas, then inverts
+  the result.</li>
+
+  </ul>
+
+  <p>The following blend modes are only available in WebGL mode:</p>
+
+  <ul>
+
+  <li><code>SUBTRACT</code>: RGB values from the source are subtracted from the
+  values from the canvas. If the difference is a negative number, it's made
+  positive. Alpha (transparency) values from the source and canvas are
+  added.</li>
+
+  </ul>
+line: 720
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Use the default blend mode.
+      blendMode(BLEND);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A Sky Blue line and a Deep Rose line form an X on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(HARD_LIGHT);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(ADD);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(DARKEST);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(BURN);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(LIGHTEST);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(EXCLUSION);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(MULTIPLY);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(SCREEN);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(REPLACE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A diagonal deep rose line.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(REMOVE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('The silhouette of an X is missing from a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(DIFFERENCE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(OVERLAY);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(SOFT_LIGHT);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(DODGE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas with WEBGL mode.
+      createCanvas(100, 100, WEBGL);
+
+      // Set the background color.
+      background(180);
+
+      // Set the blend mode to SUBTRACT.
+      blendMode(SUBTRACT);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the blue line.
+      stroke('#1a85ff');
+      line(-25, -25, 25, 25);
+
+      // Draw the red line.
+      stroke('#d41159');
+      line(25, -25, -25, 25);
+
+      describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>blend mode to set.
+                     either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
+                     EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+                     SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT</p>
+    type: Constant
+chainable: false
+---
+
+
+# blendMode
diff --git a/src/content/reference/en/p5 copy/blue.mdx b/src/content/reference/en/p5 copy/blue.mdx
new file mode 100644
index 0000000000..d3e05aae37
--- /dev/null
+++ b/src/content/reference/en/p5 copy/blue.mdx	
@@ -0,0 +1,158 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L117
+title: blue
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the blue value of a color.</p>
+
+  <p><code>blue()</code> extracts the blue value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>blue()</code> returns a color's blue value in the range 0
+
+  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  RGB, it
+
+  returns the blue value in the given range.</p>
+line: 117
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(175, 100, 220);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 220.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [175, 100, 220];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 220.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgb(175, 100, 220)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 220.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(69, 39, 86);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 86.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the blue value.
+  type: Number
+chainable: false
+---
+
+
+# blue
diff --git a/src/content/reference/en/p5 copy/boolean.mdx b/src/content/reference/en/p5 copy/boolean.mdx
new file mode 100644
index 0000000000..8eab48af5f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/boolean.mdx	
@@ -0,0 +1,157 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L341
+title: boolean
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>String</code> or <code>Number</code> to a
+  <code>Boolean</code>.</p>
+
+  <p><code>boolean()</code> converts values to <code>true</code> or
+  <code>false</code>.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a string, then
+
+  <code>boolean('true')</code> will return <code>true</code> and every other
+  string value will
+
+  return <code>false</code>. If <code>n</code> is a number, then
+  <code>boolean(0)</code> will return <code>false</code>
+
+  and every other numeric value will return <code>true</code>. If an array is
+  passed, as
+
+  <code>in boolean([0, 1, 'true', 'blue'])</code>, then an array of Boolean
+  values will
+
+  be returned.</p>
+line: 341
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 0;
+
+      // Convert the number to a Boolean value.
+      let converted = boolean(original);
+
+      // Style the circle based on the converted value.
+      if (converted === true) {
+        fill('blue');
+      } else {
+        fill('red');
+      }
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A red circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = 'true';
+
+      // Convert the string to a Boolean value.
+      let converted = boolean(original);
+
+      // Style the circle based on the converted value.
+      if (converted === true) {
+        fill('blue');
+      } else {
+        fill('red');
+      }
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A blue circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of values.
+      let original = [0, 'hi', 123, 'true'];
+
+      // Convert the array to a Boolean values.
+      let converted = boolean(original);
+
+      // Iterate over the array of converted Boolean values.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Style the circle based on the converted value.
+        if (converted[i] === true) {
+          fill('blue');
+        } else {
+          fill('red');
+        }
+
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 20;
+
+        // Draw the circle.
+        circle(x, 50, 15);
+      }
+
+      describe(
+        'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted Boolean value.
+  type: Boolean
+overloads:
+  - line: 341
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Boolean|Number
+    return:
+      description: converted Boolean value.
+      type: Boolean
+  - line: 451
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted Boolean values.
+      type: 'Boolean[]'
+chainable: false
+---
+
+
+# boolean
diff --git a/src/content/reference/en/p5 copy/box.mdx b/src/content/reference/en/p5 copy/box.mdx
new file mode 100644
index 0000000000..a4f5282947
--- /dev/null
+++ b/src/content/reference/en/p5 copy/box.mdx	
@@ -0,0 +1,186 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1009
+title: box
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a box (rectangular prism).</p>
+
+  <p>A box is a 3D shape with six faces. Each face makes a 90˚ with four
+
+  neighboring faces.</p>
+
+  <p>The first parameter, <code>width</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>box(20)</code>, it sets the box’s width and height. By default,
+  <code>width</code> is 50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>box(20, 30)</code>, it sets the box’s height. By default,
+  <code>height</code> is set
+
+  to the box’s <code>width</code>.</p>
+
+  <p>The third parameter, <code>depth</code>, is also optional. If a
+  <code>Number</code> is passed, as
+
+  in <code>box(20, 30, 40)</code>, it sets the box’s depth. By default,
+  <code>depth</code> is set
+
+  to the box’s <code>height</code>.</p>
+
+  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>box(20, 30, 40, 5)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the x-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailX</code> is 1.</p>
+
+  <p>The fifth parameter, <code>detailY</code>, is also optional. If a number is
+  passed, as
+
+  in <code>box(20, 30, 40, 5, 7)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailY</code> is 1.</p>
+
+  <p>Note: <code>box()</code> can only be used in WebGL mode.</p>
+line: 1009
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      // Set its width and height to 30.
+      box(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      // Set its width to 30 and height to 50.
+      box(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      // Set its width to 30, height to 50, and depth to 10.
+      box(30, 50, 10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width of the box.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the box.</p>
+    type: Number
+    optional: true
+  - name: depth
+    description: |
+      <p>depth of the box.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# box
diff --git a/src/content/reference/en/p5 copy/brightness.mdx b/src/content/reference/en/p5 copy/brightness.mdx
new file mode 100644
index 0000000000..2860cbf226
--- /dev/null
+++ b/src/content/reference/en/p5 copy/brightness.mdx	
@@ -0,0 +1,168 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L253
+title: brightness
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the brightness value of a color.</p>
+
+  <p><code>brightness()</code> extracts the HSB brightness value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>brightness()</code> returns a color's HSB brightness in
+  the range 0
+
+  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  HSB, it
+
+  returns the brightness value in the given range.</p>
+line: 253
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a p5.Color object.
+      let c = color(0, 50, 100);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 100.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a color array.
+      let c = [0, 50, 100];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 100.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 100.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color with values in the range 0-255.
+      colorMode(HSB, 255);
+
+      // Create a p5.Color object.
+      let c = color(0, 127, 255);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 255.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the brightness value.
+  type: Number
+chainable: false
+---
+
+
+# brightness
diff --git a/src/content/reference/en/p5 copy/buildGeometry.mdx b/src/content/reference/en/p5 copy/buildGeometry.mdx
new file mode 100644
index 0000000000..ef58d7b650
--- /dev/null
+++ b/src/content/reference/en/p5 copy/buildGeometry.mdx	
@@ -0,0 +1,263 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L520
+title: buildGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Creates a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object
+  from
+
+  simpler 3D shapes.</p>
+
+  <p><code>buildGeometry()</code> helps with creating complex 3D shapes from
+  simpler ones
+
+  such as <a href="/reference/p5/sphere/">sphere()</a>. It can help to make
+  sketches
+
+  more performant. For example, if a complex 3D shape doesn’t change while a
+
+  sketch runs, then it can be created with <code>buildGeometry()</code>.
+  Creating a
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and then
+  drawing it
+
+  will run faster than repeatedly drawing the individual pieces.</p>
+
+  <p>The parameter, <code>callback</code>, is a function with the drawing
+  instructions for
+
+  the new <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object. It will be
+  called
+
+  once to create the new 3D shape.</p>
+
+  <p>See <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a> for another way to
+  build 3D
+
+  shapes.</p>
+
+  <p>Note: <code>buildGeometry()</code> can only be used in WebGL mode.</p>
+line: 520
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createShape);
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    // Create p5.Geometry object from a single cone.
+    function createShape() {
+      cone();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the arrow.
+      shape = buildGeometry(createArrow);
+
+      describe('A white arrow drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrow.
+      noStroke();
+
+      // Draw the arrow.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createArrow);
+
+      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the p5.Geometry object again.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+
+      describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = buildGeometry(createParticles);
+    }
+
+    function createParticles() {
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: callback
+    description: |
+      <p>function that draws the shape.</p>
+    type: Function
+return:
+  description: new 3D shape.
+  type: p5.Geometry
+chainable: false
+---
+
+
+# buildGeometry
diff --git a/src/content/reference/en/p5 copy/byte.mdx b/src/content/reference/en/p5 copy/byte.mdx
new file mode 100644
index 0000000000..0a6f3234a4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/byte.mdx	
@@ -0,0 +1,180 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L468
+title: byte
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Boolean</code>, <code>String</code>, or
+  <code>Number</code> to its byte value.</p>
+
+  <p><code>byte()</code> converts a value to an integer (whole number) between
+  -128 and
+
+  127. Values greater than 127 wrap around while negative values are
+
+  unchanged. For example, 128 becomes -128 and -129 remains the same.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a Boolean, as in
+
+  <code>byte(false)</code> or <code>byte(true)</code>, the number 0
+  (<code>false</code>) or 1 (<code>true</code>) will be
+
+  returned. If <code>n</code> is a string or number, as in
+  <code>byte('256')</code> or <code>byte(256)</code>,
+
+  then the byte value will be returned. Decimal values are ignored. If an
+
+  array is passed, as in <code>byte([true, 123, '456'])</code>, then an array of
+  byte
+
+  values will be returned.</p>
+
+  <p>Note: If a value can't be converted to a number, as in
+  <code>byte('giraffe')</code>,
+
+  then the value <code>NaN</code> (not a number) will be returned.</p>
+line: 468
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a Boolean variable.
+      let original = true;
+
+      // Convert the Boolean to its byte value.
+      let converted = byte(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "true : 1" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '256';
+
+      // Convert the string to its byte value.
+      let converted = byte(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "256 : 0" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 256;
+
+      // Convert the number to its byte value.
+      let converted = byte(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "256 : 0" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of values.
+      let original = [false, '64', 383];
+
+      // Convert the array elements to their byte values.
+      let converted = byte(original);
+
+      // Iterate over the converted array elements.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Style the circle.
+        fill(converted[i]);
+
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 25;
+
+        // Draw the circle.
+        circle(x, 50, 20);
+      }
+
+      describe(
+        'Three gray circles on a gray background. The circles get lighter from left to right.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted byte value.
+  type: Number
+overloads:
+  - line: 468
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Boolean|Number
+    return:
+      description: converted byte value.
+      type: Number
+  - line: 598
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted byte values.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# byte
diff --git a/src/content/reference/en/p5 copy/camera.mdx b/src/content/reference/en/p5 copy/camera.mdx
new file mode 100644
index 0000000000..55f983385e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/camera.mdx	
@@ -0,0 +1,200 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L13
+title: camera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets the position and orientation of the current camera in a 3D sketch.</p>
+
+  <p><code>camera()</code> allows objects to be viewed from different angles. It
+  has nine
+
+  parameters that are all optional.</p>
+
+  <p>The first three parameters, <code>x</code>, <code>y</code>, and
+  <code>z</code>, are the coordinates of the
+
+  camera’s position. For example, calling <code>camera(0, 0, 0)</code> places
+  the camera
+
+  at the origin <code>(0, 0, 0)</code>. By default, the camera is placed at
+
+  <code>(0, 0, 800)</code>.</p>
+
+  <p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and
+  <code>centerZ</code> are the
+
+  coordinates of the point where the camera faces. For example, calling
+
+  <code>camera(0, 0, 0, 10, 20, 30)</code> places the camera at the origin
+  <code>(0, 0, 0)</code>
+
+  and points it at <code>(10, 20, 30)</code>. By default, the camera points at
+  the
+
+  origin <code>(0, 0, 0)</code>.</p>
+
+  <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
+  <code>upZ</code> are the components of
+
+  the "up" vector. The "up" vector orients the camera’s y-axis. For example,
+
+  calling <code>camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera
+  at the
+
+  origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
+  sets the "up" vector
+
+  to <code>(0, -1, 0)</code> which is like holding it upside-down. By default,
+  the "up"
+
+  vector is <code>(0, 1, 0)</code>.</p>
+
+  <p>Note: <code>camera()</code> can only be used in WebGL mode.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Move the camera to the top-right.
+      camera(200, -400, 800);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube apperas to sway left and right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the camera's x-coordinate.
+      let x = 400 * cos(frameCount * 0.01);
+
+      // Orbit the camera around the box.
+      camera(x, -400, 800);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Adjust the range sliders to change the camera's position.
+
+    let xSlider;
+    let ySlider;
+    let zSlider;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create slider objects to set the camera's coordinates.
+      xSlider = createSlider(-400, 400, 400);
+      xSlider.position(0, 100);
+      xSlider.size(100);
+      ySlider = createSlider(-400, 400, -200);
+      ySlider.position(0, 120);
+      ySlider.size(100);
+      zSlider = createSlider(0, 1600, 800);
+      zSlider.position(0, 140);
+      zSlider.size(100);
+
+      describe(
+        'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Get the camera's coordinates from the sliders.
+      let x = xSlider.value();
+      let y = ySlider.value();
+      let z = zSlider.value();
+
+      // Move the camera.
+      camera(x, y, z);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the camera. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the camera. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z-coordinate of the camera. Defaults to 800.</p>
+    type: Number
+    optional: true
+  - name: centerX
+    description: |
+      <p>x-coordinate of the point the camera faces. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: centerY
+    description: |
+      <p>y-coordinate of the point the camera faces. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: centerZ
+    description: |
+      <p>z-coordinate of the point the camera faces. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: upX
+    description: |
+      <p>x-component of the camera’s "up" vector. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: upY
+    description: |
+      <p>y-component of the camera’s "up" vector. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: upZ
+    description: |
+      <p>z-component of the camera’s "up" vector. Defaults to 0.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# camera
diff --git a/src/content/reference/en/p5 copy/ceil.mdx b/src/content/reference/en/p5 copy/ceil.mdx
new file mode 100644
index 0000000000..45c17468bf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ceil.mdx	
@@ -0,0 +1,65 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L48
+title: ceil
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the closest integer value that is greater than or equal to a
+
+  number.</p>
+
+  <p>For example, calling <code>ceil(9.03)</code> and <code>ceil(9.97)</code>
+  both return the value
+
+  10.</p>
+line: 48
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values from 0 to 1.
+      colorMode(RGB, 1);
+
+      noStroke();
+
+      // Draw the left rectangle.
+      let r = 0.3;
+      fill(r, 0, 0);
+      rect(0, 0, 50, 100);
+
+      // Round r up to 1.
+      r = ceil(r);
+
+      // Draw the right rectangle.
+      fill(r, 0, 0);
+      rect(50, 0, 50, 100);
+
+      describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to round up.</p>
+    type: Number
+return:
+  description: rounded up number.
+  type: Integer
+chainable: false
+---
+
+
+# ceil
diff --git a/src/content/reference/en/p5 copy/changed.mdx b/src/content/reference/en/p5 copy/changed.mdx
new file mode 100644
index 0000000000..45289630e9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/changed.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L330
+title: changed
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Calls a function when the element changes.</p>
+  <p>Calling <code>myElement.changed(false)</code> disables the function.</p>
+line: 330
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let dropdown;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a dropdown menu and add a few color options.
+      dropdown = createSelect();
+      dropdown.position(0, 0);
+      dropdown.option('red');
+      dropdown.option('green');
+      dropdown.option('blue');
+
+      // Call paintBackground() when the color option changes.
+      dropdown.changed(paintBackground);
+
+      describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');
+    }
+
+    // Paint the background with the selected color.
+    function paintBackground() {
+      let c = dropdown.value();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a checkbox and place it beneath the canvas.
+      checkbox = createCheckbox(' circle');
+      checkbox.position(0, 100);
+
+      // Call repaint() when the checkbox changes.
+      checkbox.changed(repaint);
+
+      describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.');
+    }
+
+    // Paint the background gray and determine whether to draw a circle.
+    function repaint() {
+      background(200);
+      if (checkbox.checked() === true) {
+        circle(50, 50, 30);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the element changes.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+chainable: true
+---
+
+
+# changed
diff --git a/src/content/reference/en/p5 copy/char.mdx b/src/content/reference/en/p5 copy/char.mdx
new file mode 100644
index 0000000000..e01e22a9f7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/char.mdx	
@@ -0,0 +1,152 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L612
+title: char
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Number</code> or <code>String</code> to a single-character
+  <code>String</code>.</p>
+
+  <p><code>char()</code> converts numbers to their single-character string
+  representations.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If a number is
+  passed, as in
+
+  <code>char(65)</code>, the corresponding single-character string is returned.
+  If a
+
+  string is passed, as in <code>char('65')</code>, the string is converted to an
+  integer
+
+  (whole number) and the corresponding single-character string is returned.
+
+  If an array is passed, as in <code>char([65, 66, 67])</code>, an array of
+
+  single-character strings is returned.</p>
+
+  <p>See <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode/"
+  target="_blank">MDN</a>
+
+  for more information about conversions.</p>
+line: 612
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 65;
+
+      // Convert the number to a char.
+      let converted = char(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "65 : A" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '65';
+
+      // Convert the string to a char.
+      let converted = char(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "65 : A" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = ['65', 66, '67'];
+
+      // Convert the string to a char.
+      let converted = char(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Iterate over elements of the converted array.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${original[i]} : ${converted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "65 : A", "66 : B", and "67 : C" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted single-character string.
+  type: String
+overloads:
+  - line: 612
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Number
+    return:
+      description: converted single-character string.
+      type: String
+  - line: 716
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted single-character strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# char
diff --git a/src/content/reference/en/p5 copy/circle.mdx b/src/content/reference/en/p5 copy/circle.mdx
new file mode 100644
index 0000000000..46069bea74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/circle.mdx	
@@ -0,0 +1,77 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L488
+title: circle
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a circle.</p>
+
+  <p>A circle is a round shape defined by the <code>x</code>, <code>y</code>,
+  and <code>d</code> parameters.
+
+  <code>x</code> and <code>y</code> set the location of its center.
+  <code>d</code> sets its width and height (diameter).
+
+  Every point on the circle's edge is the same distance, <code>0.5 * d</code>,
+  from its center.
+
+  <code>0.5 * d</code> (half the diameter) is the circle's radius.
+
+  See <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to
+  set its position.</p>
+line: 488
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      circle(50, 50, 25);
+
+      describe('A white circle with black outline in the middle of a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      circle(0, 0, 25);
+
+      describe('A white circle with black outline in the middle of a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the center of the circle.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the center of the circle.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>diameter of the circle.</p>
+    type: Number
+chainable: true
+---
+
+
+# circle
diff --git a/src/content/reference/en/p5 copy/class.mdx b/src/content/reference/en/p5 copy/class.mdx
new file mode 100644
index 0000000000..94b64b75c2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/class.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1329
+title: class
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);\n</code></pre>\n<p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n</code></pre>\n<p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n  constructor(x, y, size) {\n    // This code runs once when an instance is created.\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    // This code runs once when myFrog.show() is called.\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    // This code runs once when myFrog.hop() is called.\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n}\n</code></pre>\n<p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();\n</code></pre>\n"
+line: 1329
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variable a new Frog object.\n  fifi = new Frog(50, 50, 20);\n\n  describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frog.\n  fifi.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n\n  // Move the frogs.\n  frog1.hop();\n  frog2.hop();\n\n  // Wrap around if they've hopped off the edge.\n  frog1.checkEdges();\n  frog2.checkEdges();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Add Frog objects to the array.\n  for (let i = 0; i < 5; i += 1) {\n    // Calculate random coordinates and size.\n    let x = random(0, 100);\n    let y = random(0, 100);\n    let s = random(2, 20);\n\n    // Create a new Frog object.\n    let frog = new Frog(x, y, s);\n\n    // Add the Frog to the array.\n    frogs.push(frog);\n  }\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe(\n    'Five frog faces on a blue background. The frogs hop around randomly.'\n  );\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  for (let frog of frogs) {\n    // Show the frog.\n    frog.show();\n\n    // Move the frog.\n    frog.hop();\n\n    // Wrap around if they've hopped off the edge.\n    frog.checkEdges();\n  }\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# class
diff --git a/src/content/reference/en/p5 copy/clear.mdx b/src/content/reference/en/p5 copy/clear.mdx
new file mode 100644
index 0000000000..a096184afc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clear.mdx	
@@ -0,0 +1,108 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L673
+title: clear
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Clears the pixels on the canvas.</p>
+
+  <p><code>clear()</code> makes every pixel 100% transparent. Calling
+  <code>clear()</code> doesn't
+
+  clear objects created by <code>createX()</code> functions such as
+
+  <a href="/reference/p5/createGraphics/">createGraphics()</a>,
+
+  <a href="/reference/p5/createVideo/">createVideo()</a>, and
+
+  <a href="/reference/p5/createImg/">createImg()</a>. These objects will remain
+
+  unchanged after calling <code>clear()</code> and can be redrawn.</p>
+
+  <p>In WebGL mode, this function can clear the screen to a specific color. It
+
+  interprets four numeric parameters as normalized RGBA color values. It also
+
+  clears the depth buffer. If you are not using the WebGL renderer, these
+
+  parameters will have no effect.</p>
+line: 673
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');
+    }
+
+    function draw() {
+      circle(mouseX, mouseY, 20);
+    }
+
+    function mousePressed() {
+      clear();
+      background(200);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      pg = createGraphics(60, 60);
+      pg.background(200);
+      pg.noStroke();
+      pg.circle(pg.width / 2, pg.height / 2, 15);
+      image(pg, 20, 20);
+
+      describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
+    }
+
+    function mousePressed() {
+      clear();
+      image(pg, 20, 20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: r
+    description: |
+      <p>normalized red value.</p>
+    type: Number
+    optional: true
+  - name: g
+    description: |
+      <p>normalized green value.</p>
+    type: Number
+    optional: true
+  - name: b
+    description: |
+      <p>normalized blue value.</p>
+    type: Number
+    optional: true
+  - name: a
+    description: |
+      <p>normalized alpha value.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# clear
diff --git a/src/content/reference/en/p5 copy/clearDepth.mdx b/src/content/reference/en/p5 copy/clearDepth.mdx
new file mode 100644
index 0000000000..25425d1920
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clearDepth.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L635
+title: clearDepth
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Clears the depth buffer in WebGL mode.</p>
+
+  <p><code>clearDepth()</code> clears information about how far objects are from
+  the camera
+
+  in 3D space. This information is stored in an object called the
+
+  <em>depth buffer</em>. Clearing the depth buffer ensures new objects aren't
+  drawn
+
+  behind old ones. Doing so can be useful for feedback effects in which the
+
+  previous frame serves as the background for the current frame.</p>
+
+  <p>The parameter, <code>depth</code>, is optional. If a number is passed, as
+  in
+
+  <code>clearDepth(0.5)</code>, it determines the range of objects to clear from
+  the
+
+  depth buffer. 0 doesn't clear any depth information, 0.5 clears depth
+
+  information halfway between the near and far clipping planes, and 1 clears
+
+  depth information all the way to the far clipping plane. By default,
+
+  <code>depth</code> is 1.</p>
+
+  <p>Note: <code>clearDepth()</code> can only be used in WebGL mode.</p>
+line: 635
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let previous;
+    let current;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Framebuffer objects.
+      previous = createFramebuffer({ format: FLOAT });
+      current = createFramebuffer({ format: FLOAT });
+
+      describe(
+        'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'
+      );
+    }
+
+    function draw() {
+      // Swap the previous p5.Framebuffer and the
+      // current one so it can be used as a texture.
+      [previous, current] = [current, previous];
+
+      // Start drawing to the current p5.Framebuffer.
+      current.begin();
+
+      // Paint the background.
+      background(255);
+
+      // Draw the previous p5.Framebuffer.
+      // Clear the depth buffer so the previous
+      // frame doesn't block the current one.
+      push();
+      tint(255, 250);
+      image(previous, -50, -50);
+      clearDepth();
+      pop();
+
+      // Draw the box on top of the previous frame.
+      push();
+      let x = 25 * sin(frameCount * 0.01);
+      let y = 25 * sin(frameCount * 0.02);
+      translate(x, y, 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      normalMaterial();
+      box(12);
+      pop();
+
+      // Stop drawing to the current p5.Framebuffer.
+      current.end();
+
+      // Display the current p5.Framebuffer.
+      image(current, -50, -50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: depth
+    description: |
+      <p>amount of the depth buffer to clear between 0
+                              (none) and 1 (far clipping plane). Defaults to 1.</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# clearDepth
diff --git a/src/content/reference/en/p5 copy/clearStorage.mdx b/src/content/reference/en/p5 copy/clearStorage.mdx
new file mode 100644
index 0000000000..d2c89e63bf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clearStorage.mdx	
@@ -0,0 +1,81 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L313
+title: clearStorage
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Removes all items in the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs. Calling <code>clearStorage()</code> removes all data from
+  <code>localStorage</code>.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 313
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to clear localStorage.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe(
+        'The text "Feist: 1234" written in black on a gray background. The text "null: null" appears when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+
+    // Clear localStorage when the user double-clicks.
+    function doubleClicked() {
+      clearStorage();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# clearStorage
diff --git a/src/content/reference/en/p5 copy/clip.mdx b/src/content/reference/en/p5 copy/clip.mdx
new file mode 100644
index 0000000000..ae72687f03
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clip.mdx	
@@ -0,0 +1,225 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L222
+title: clip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Defines a shape that will mask any shapes drawn afterward.</p>
+
+  <p>The first parameter, <code>callback</code>, is a function that defines the
+  mask.
+
+  Any shapes drawn in  <code>callback</code> will add to the mask shape. The
+  mask
+
+  will apply to anything drawn after <code>clip()</code> is called.</p>
+
+  <p>The second parameter, <code>options</code>, is optional. If an object with
+  an <code>invert</code>
+
+  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
+  used to
+
+  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
+  holes
+
+  in shapes that are masked. <code>invert</code> is <code>false</code> by
+  default.</p>
+
+  <p>Masks can be contained between the
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions.
+
+  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
+
+  <p>Masks can also be defined with <a
+  href="/reference/p5/beginClip/">beginClip()</a>
+
+  and <a href="/reference/p5/endClip/">endClip()</a>.</p>
+line: 222
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white triangle and circle on a gray background.');
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an inverted mask.
+      clip(mask, { invert: true });
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      noStroke();
+
+      // Draw a masked shape.
+      push();
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw an inverted masked shape.
+      push();
+      // Create an inverted mask.
+      clip(mask, { invert: true });
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored fuchsia.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      noStroke();
+      fill('fuchsia');
+      plane(100);
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      noStroke();
+      beginShape(QUAD_STRIP);
+      fill(0, 255, 255);
+      vertex(-width / 2, -height / 2);
+      vertex(width / 2, -height / 2);
+      fill(100, 0, 100);
+      vertex(-width / 2, height / 2);
+      vertex(width / 2, height / 2);
+      endShape();
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: callback
+    description: |
+      <p>a function that draws the mask shape.</p>
+    type: Function
+  - name: options
+    description: |
+      <p>an object containing clip settings.</p>
+    type: Object
+    optional: true
+chainable: false
+---
+
+
+# clip
diff --git a/src/content/reference/en/p5 copy/color.mdx b/src/content/reference/en/p5 copy/color.mdx
new file mode 100644
index 0000000000..ad2bdbd8da
--- /dev/null
+++ b/src/content/reference/en/p5 copy/color.mdx	
@@ -0,0 +1,349 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L398
+title: color
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Creates a <a href="/reference/p5/p5.Color">p5.Color</a> object.</p>
+
+  <p>By default, the parameters are interpreted as RGB values. Calling
+
+  <code>color(255, 204, 0)</code> will return a bright yellow color. The way
+  these
+
+  parameters are interpreted may be changed with the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
+
+  <p>The version of <code>color()</code> with one parameter interprets the value
+  one of two
+
+  ways. If the parameter is a number, it's interpreted as a grayscale value.
+
+  If the parameter is a string, it's interpreted as a CSS color string.</p>
+
+  <p>The version of <code>color()</code> with two parameters interprets the
+  first one as a
+
+  grayscale value. The second parameter sets the alpha (transparency) value.</p>
+
+  <p>The version of <code>color()</code> with three parameters interprets them
+  as RGB, HSB,
+
+  or HSL colors, depending on the current <code>colorMode()</code>.</p>
+
+  <p>The version of <code>color()</code> with four parameters interprets them as
+  RGBA, HSBA,
+
+  or HSLA colors, depending on the current <code>colorMode()</code>. The last
+  parameter
+
+  sets the alpha (transparency) value.</p>
+line: 398
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(255, 204, 0);
+
+      // Draw the square.
+      fill(c);
+      noStroke();
+      square(30, 20, 55);
+
+      describe('A yellow square on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c1 = color(255, 204, 0);
+
+      // Draw the left circle.
+      fill(c1);
+      noStroke();
+      circle(25, 25, 80);
+
+      // Create a p5.Color object using a grayscale value.
+      let c2 = color(65);
+
+      // Draw the right circle.
+      fill(c2);
+      circle(75, 75, 80);
+
+      describe(
+        'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a named color.
+      let c = color('magenta');
+
+      // Draw the square.
+      fill(c);
+      noStroke();
+      square(20, 20, 60);
+
+      describe('A magenta square on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a hex color code.
+      let c1 = color('#0f0');
+
+      // Draw the left rectangle.
+      fill(c1);
+      noStroke();
+      rect(0, 10, 45, 80);
+
+      // Create a p5.Color object using a hex color code.
+      let c2 = color('#00ff00');
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two bright green rectangles on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a RGB color string.
+      let c1 = color('rgb(0, 0, 255)');
+
+      // Draw the top-left square.
+      fill(c1);
+      square(10, 10, 35);
+
+      // Create a p5.Color object using a RGB color string.
+      let c2 = color('rgb(0%, 0%, 100%)');
+
+      // Draw the top-right square.
+      fill(c2);
+      square(55, 10, 35);
+
+      // Create a p5.Color object using a RGBA color string.
+      let c3 = color('rgba(0, 0, 255, 1)');
+
+      // Draw the bottom-left square.
+      fill(c3);
+      square(10, 55, 35);
+
+      // Create a p5.Color object using a RGBA color string.
+      let c4 = color('rgba(0%, 0%, 100%, 1)');
+
+      // Draw the bottom-right square.
+      fill(c4);
+      square(55, 55, 35);
+
+      describe('Four blue squares in the corners of a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a HSL color string.
+      let c1 = color('hsl(160, 100%, 50%)');
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c1);
+      rect(0, 10, 45, 80);
+
+      // Create a p5.Color object using a HSLA color string.
+      let c2 = color('hsla(160, 100%, 50%, 0.5)');
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a HSB color string.
+      let c1 = color('hsb(160, 100%, 50%)');
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c1);
+      rect(0, 10, 45, 80);
+
+      // Create a p5.Color object using a HSBA color string.
+      let c2 = color('hsba(160, 100%, 50%, 0.5)');
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c1 = color(50, 55, 100);
+
+      // Draw the left rectangle.
+      fill(c1);
+      rect(0, 10, 45, 80);
+
+      // Switch the color mode to HSB.
+      colorMode(HSB, 100);
+
+      // Create a p5.Color object using HSB values.
+      let c2 = color(50, 55, 100);
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: resulting color.
+  type: p5.Color
+overloads:
+  - line: 398
+    params:
+      - name: gray
+        description: |
+          <p>number specifying value between white and black.</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha value relative to current color range
+                                          (default is 0-255).</p>
+        type: Number
+        optional: true
+    return:
+      description: resulting color.
+      type: p5.Color
+  - line: 652
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value relative to
+                                          the current color range.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value
+                                          relative to the current color range.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue or brightness value
+                                          relative to the current color range.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    return:
+      description: ''
+      type: p5.Color
+  - line: 664
+    params:
+      - name: value
+        description: |
+          <p>a color string.</p>
+        type: String
+    return:
+      description: ''
+      type: p5.Color
+  - line: 670
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue,
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    return:
+      description: ''
+      type: p5.Color
+  - line: 677
+    params:
+      - name: color
+        description: ''
+        type: p5.Color
+    return:
+      description: ''
+      type: p5.Color
+chainable: false
+---
+
+
+# color
diff --git a/src/content/reference/en/p5 copy/colorMode.mdx b/src/content/reference/en/p5 copy/colorMode.mdx
new file mode 100644
index 0000000000..b4aca3c9ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/colorMode.mdx	
@@ -0,0 +1,271 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L751
+title: colorMode
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Changes the way color values are interpreted.</p>
+
+  <p>By default, the <code>Number</code> parameters for <a
+  href="/reference/p5/fill/">fill()</a>,
+
+  <a href="/reference/p5/stroke/">stroke()</a>,
+
+  <a href="/reference/p5/background/">background()</a>, and
+
+  <a href="/reference/p5/color/">color()</a> are defined by values between 0 and
+  255
+
+  using the RGB color model. This is equivalent to calling
+
+  <code>colorMode(RGB, 255)</code>. Pure red is <code>color(255, 0, 0)</code> in
+  this model.</p>
+
+  <p>Calling <code>colorMode(RGB, 100)</code> sets colors to use RGB color
+  values
+
+  between 0 and 100. Pure red is <code>color(100, 0, 0)</code> in this
+  model.</p>
+
+  <p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes
+  to HSB or HSL system
+
+  instead of RGB. Pure red is <code>color(0, 100, 100)</code> in HSB and
+
+  <code>color(0, 100, 50)</code> in HSL.</p>
+
+  <p><a href="/reference/p5/p5.Color">p5.Color</a> objects remember the mode
+  that they were
+
+  created in. Changing modes doesn't affect their appearance.</p>
+line: 751
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Fill with pure red.
+      fill(255, 0, 0);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Fill with pure red.
+      fill(100, 0, 0);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Fill with pure red.
+      fill(0, 100, 100);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Fill with pure red.
+      fill(0, 100, 50);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      for (let x = 0; x < 100; x += 1) {
+        for (let y = 0; y < 100; y += 1) {
+          stroke(x, y, 0);
+          point(x, y);
+        }
+      }
+
+      describe(
+        'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use HSB color with values in the range 0-100.
+      colorMode(HSB, 100);
+
+      for (let x = 0; x < 100; x += 1) {
+        for (let y = 0; y < 100; y += 1) {
+          stroke(x, y, 100);
+          point(x, y);
+        }
+      }
+
+      describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let myColor = color(180, 175, 230);
+      background(myColor);
+
+      // Use RGB color with values in the range 0-1.
+      colorMode(RGB, 1);
+
+      // Get the red, green, and blue color components.
+      let redValue = red(myColor);
+      let greenValue = green(myColor);
+      let blueValue = blue(myColor);
+
+      // Round the color components for display.
+      redValue = round(redValue, 2);
+      greenValue = round(greenValue, 2);
+      blueValue = round(blueValue, 2);
+
+      // Display the color components.
+      text(`Red: ${redValue}`, 10, 10, 80, 80);
+      text(`Green: ${greenValue}`, 10, 40, 80, 80);
+      text(`Blue: ${blueValue}`, 10, 70, 80, 80);
+
+      describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Use RGB color with alpha values in the range 0-1.
+      colorMode(RGB, 255, 255, 255, 1);
+
+      noFill();
+      strokeWeight(4);
+      stroke(255, 0, 10, 0.3);
+      circle(40, 40, 50);
+      circle(50, 60, 50);
+
+      describe('Two overlapping translucent pink circle outlines.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 751
+    params:
+      - name: mode
+        description: |
+          <p>either RGB, HSB or HSL, corresponding to
+                                   Red/Green/Blue and Hue/Saturation/Brightness
+                                   (or Lightness).</p>
+        type: Constant
+      - name: max
+        description: |
+          <p>range for all values.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 956
+    params:
+      - name: mode
+        description: ''
+        type: Constant
+      - name: max1
+        description: |
+          <p>range for the red or hue depending on the
+                                       current color mode.</p>
+        type: Number
+      - name: max2
+        description: |
+          <p>range for the green or saturation depending
+                                       on the current color mode.</p>
+        type: Number
+      - name: max3
+        description: |
+          <p>range for the blue or brightness/lightness
+                                       depending on the current color mode.</p>
+        type: Number
+      - name: maxA
+        description: |
+          <p>range for the alpha.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# colorMode
diff --git a/src/content/reference/en/p5 copy/concat.mdx b/src/content/reference/en/p5 copy/concat.mdx
new file mode 100644
index 0000000000..1e83bf84c0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/concat.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L112
+title: concat
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Concatenates two arrays, maps to Array.concat(). Does not modify the
+  input arrays.</p>
+line: 112
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat">arr1.concat(arr2)</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let arr1 = ['A', 'B', 'C'];
+      let arr2 = [1, 2, 3];
+
+      print(arr1); // ['A','B','C']
+      print(arr2); // [1,2,3]
+
+      let arr3 = concat(arr1, arr2);
+
+      print(arr1); // ['A','B','C']
+      print(arr2); // [1, 2, 3]
+      print(arr3); // ['A','B','C', 1, 2, 3]
+    }
+    </code></div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>first Array to concatenate</p>
+    type: Array
+  - name: b
+    description: |
+      <p>second Array to concatenate</p>
+    type: Array
+return:
+  description: concatenated array
+  type: Array
+chainable: false
+---
+
+
+# concat
diff --git a/src/content/reference/en/p5 copy/cone.mdx b/src/content/reference/en/p5 copy/cone.mdx
new file mode 100644
index 0000000000..ff0756d0a5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cone.mdx	
@@ -0,0 +1,265 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1730
+title: cone
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a cone.</p>
+
+  <p>A cone is a 3D shape with triangular faces that connect a flat bottom to a
+
+  single point. Cones with few faces look like pyramids. Cones with many
+
+  faces have smooth surfaces.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>cone(20)</code>, it sets the radius of the cone’s base. By default,
+  <code>radius</code> is
+
+  50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cone(20, 30)</code>, it sets the cone’s height. By default,
+  <code>height</code> is
+
+  set to the cone’s <code>radius</code>.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cone(20, 30, 5)</code>, it sets the number of edges used to form
+  the
+
+  cone's base. Using more edges makes the base look more like a circle. By
+
+  default, <code>detailX</code> is 24.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cone(20, 30, 5, 7)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis connecting the base to the tip. All 3D shapes are made
+
+  by connecting triangles to form their surfaces. By default,
+  <code>detailY</code> is 1.</p>
+
+  <p>The fifth parameter, <code>cap</code>, is also optional. If a
+  <code>false</code> is passed, as
+
+  in <code>cone(20, 30, 5, 7, false)</code> the cone’s base won’t be drawn. By
+  default,
+
+  <code>cap</code> is <code>true</code>.</p>
+
+  <p>Note: <code>cone()</code> can only be used in WebGL mode.</p>
+line: 1730
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      cone();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius and height to 30.
+      cone(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      cone(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 5.
+      cone(30, 50, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white pyramid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 5.
+      cone(30, 50, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 2.
+      cone(30, 50, 24, 2);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background. Its base is missing.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 1.
+      // Don't draw its base.
+      cone(30, 50, 24, 1, false);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the cone's base. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the cone. Defaults to the value of <code>radius</code>.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of edges used to draw the base. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
+    type: Integer
+    optional: true
+  - name: cap
+    description: |
+      <p>whether to draw the cone's base.  Defaults to <code>true</code>.</p>
+    type: Boolean
+    optional: true
+chainable: true
+---
+
+
+# cone
diff --git a/src/content/reference/en/p5 copy/console.mdx b/src/content/reference/en/p5 copy/console.mdx
new file mode 100644
index 0000000000..411b08357e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/console.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1988
+title: console
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Prints a message to the web browser's console.</p>
+
+  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/console/"
+  target="_blank">console</a>
+
+  object is helpful for printing messages while debugging. For example, it's
+
+  common to add a <code>console.log()</code> statement while studying how a
+  section of
+
+  code works:</p>
+
+  <pre><code class="language-js">if (isPlaying === true) {
+    // Add a console.log() statement to make sure this block of code runs.
+    console.log('Got here!');
+
+    // Game logic.
+  }
+
+  </code></pre>
+
+  <p><code>console.error()</code> is helpful for tracking errors because it
+  prints
+
+  formatted messages. For example, it's common to encounter errors when
+
+  loading media assets:</p>
+
+  <pre><code class="language-js">// Logs an error message with special
+  formatting.
+
+  function handleFailure(error) {
+    console.error('Oops!', error);
+  }
+
+
+  // Try to load an image and call handleError() if it fails.
+
+  loadImage('https://example.com/cat.jpg', handleImage, handleError);
+
+  </code></pre>
+line: 1988
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Prints "Hello!" to the console.
+      console.log('Hello!');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Try to load an image from a fake URL.
+      // Call handleError() if the image fails to load.
+      loadImage('https://example.com/cat.jpg', handleImage, handleError);
+    }
+
+    // Displays the image.
+    function handleImage(img) {
+      image(img, 0, 0);
+
+      describe('A cat on a gray background.');
+    }
+
+    // Prints the error.
+    function handleError(error) {
+      console.error('Oops!', error);
+
+      describe('A gray square.');
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# console
diff --git a/src/content/reference/en/p5 copy/constants/ADD.mdx b/src/content/reference/en/p5 copy/constants/ADD.mdx
new file mode 100644
index 0000000000..9148f688e9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ADD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L905
+title: ADD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 905
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ADD
diff --git a/src/content/reference/en/p5 copy/constants/ALT.mdx b/src/content/reference/en/p5 copy/constants/ALT.mdx
new file mode 100644
index 0000000000..a039e3919b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ALT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L820
+title: ALT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 820
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# ALT
diff --git a/src/content/reference/en/p5 copy/constants/ARROW.mdx b/src/content/reference/en/p5 copy/constants/ARROW.mdx
new file mode 100644
index 0000000000..d2a0e065a1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L55
+title: ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 55
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ARROW
diff --git a/src/content/reference/en/p5 copy/constants/AUTO.mdx b/src/content/reference/en/p5 copy/constants/AUTO.mdx
new file mode 100644
index 0000000000..185fb15902
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/AUTO.mdx	
@@ -0,0 +1,25 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L810
+title: AUTO
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>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 <a href="/reference/p5.Element/size/">size</a> function as
+  AUTO, at a time.</p>
+line: 810
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# AUTO
diff --git a/src/content/reference/en/p5 copy/constants/AXES.mdx b/src/content/reference/en/p5 copy/constants/AXES.mdx
new file mode 100644
index 0000000000..c6f60b6b89
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/AXES.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1171
+title: AXES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1171
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# AXES
diff --git a/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx b/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
new file mode 100644
index 0000000000..ee299ffcff
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L826
+title: BACKSPACE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 826
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# BACKSPACE
diff --git a/src/content/reference/en/p5 copy/constants/BASELINE.mdx b/src/content/reference/en/p5 copy/constants/BASELINE.mdx
new file mode 100644
index 0000000000..200aa201ec
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BASELINE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L675
+title: BASELINE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 675
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BASELINE
diff --git a/src/content/reference/en/p5 copy/constants/BEVEL.mdx b/src/content/reference/en/p5 copy/constants/BEVEL.mdx
new file mode 100644
index 0000000000..a4af3693f7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BEVEL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L777
+title: BEVEL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 777
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BEVEL
diff --git a/src/content/reference/en/p5 copy/constants/BEZIER.mdx b/src/content/reference/en/p5 copy/constants/BEZIER.mdx
new file mode 100644
index 0000000000..b2993b2c33
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BEZIER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1073
+title: BEZIER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1073
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BEZIER
diff --git a/src/content/reference/en/p5 copy/constants/BLEND.mdx b/src/content/reference/en/p5 copy/constants/BLEND.mdx
new file mode 100644
index 0000000000..bf367f05eb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BLEND.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L893
+title: BLEND
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 893
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BLEND
diff --git a/src/content/reference/en/p5 copy/constants/BLUR.mdx b/src/content/reference/en/p5 copy/constants/BLUR.mdx
new file mode 100644
index 0000000000..5580994e74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BLUR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1019
+title: BLUR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1019
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BLUR
diff --git a/src/content/reference/en/p5 copy/constants/BOLD.mdx b/src/content/reference/en/p5 copy/constants/BOLD.mdx
new file mode 100644
index 0000000000..6069c955e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BOLD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1036
+title: BOLD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1036
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BOLD
diff --git a/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx b/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
new file mode 100644
index 0000000000..2967579a9c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1041
+title: BOLDITALIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1041
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BOLDITALIC
diff --git a/src/content/reference/en/p5 copy/constants/BOTTOM.mdx b/src/content/reference/en/p5 copy/constants/BOTTOM.mdx
new file mode 100644
index 0000000000..b01ded11ea
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BOTTOM.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L670
+title: BOTTOM
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 670
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BOTTOM
diff --git a/src/content/reference/en/p5 copy/constants/BURN.mdx b/src/content/reference/en/p5 copy/constants/BURN.mdx
new file mode 100644
index 0000000000..7ba3764dac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BURN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L976
+title: BURN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 976
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BURN
diff --git a/src/content/reference/en/p5 copy/constants/CENTER.mdx b/src/content/reference/en/p5 copy/constants/CENTER.mdx
new file mode 100644
index 0000000000..cab0205cef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CENTER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L660
+title: CENTER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 660
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CENTER
diff --git a/src/content/reference/en/p5 copy/constants/CHAR.mdx b/src/content/reference/en/p5 copy/constants/CHAR.mdx
new file mode 100644
index 0000000000..564855787a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CHAR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1046
+title: CHAR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1046
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CHAR
diff --git a/src/content/reference/en/p5 copy/constants/CHORD.mdx b/src/content/reference/en/p5 copy/constants/CHORD.mdx
new file mode 100644
index 0000000000..40896bb3a1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CHORD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L750
+title: CHORD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 750
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CHORD
diff --git a/src/content/reference/en/p5 copy/constants/CLAMP.mdx b/src/content/reference/en/p5 copy/constants/CLAMP.mdx
new file mode 100644
index 0000000000..977b02599d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CLAMP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1126
+title: CLAMP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1126
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CLAMP
diff --git a/src/content/reference/en/p5 copy/constants/CLOSE.mdx b/src/content/reference/en/p5 copy/constants/CLOSE.mdx
new file mode 100644
index 0000000000..34bc946fe5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CLOSE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L740
+title: CLOSE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 740
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CLOSE
diff --git a/src/content/reference/en/p5 copy/constants/CONTAIN.mdx b/src/content/reference/en/p5 copy/constants/CONTAIN.mdx
new file mode 100644
index 0000000000..59d56be350
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CONTAIN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1188
+title: CONTAIN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1188
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CONTAIN
diff --git a/src/content/reference/en/p5 copy/constants/CONTROL.mdx b/src/content/reference/en/p5 copy/constants/CONTROL.mdx
new file mode 100644
index 0000000000..d620bb502d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CONTROL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L831
+title: CONTROL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 831
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# CONTROL
diff --git a/src/content/reference/en/p5 copy/constants/CORNER.mdx b/src/content/reference/en/p5 copy/constants/CORNER.mdx
new file mode 100644
index 0000000000..e8b5eced3e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CORNER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L635
+title: CORNER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 635
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CORNER
diff --git a/src/content/reference/en/p5 copy/constants/CORNERS.mdx b/src/content/reference/en/p5 copy/constants/CORNERS.mdx
new file mode 100644
index 0000000000..85e4226b1e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CORNERS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L640
+title: CORNERS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 640
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CORNERS
diff --git a/src/content/reference/en/p5 copy/constants/COVER.mdx b/src/content/reference/en/p5 copy/constants/COVER.mdx
new file mode 100644
index 0000000000..3714b4bec3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/COVER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1194
+title: COVER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1194
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# COVER
diff --git a/src/content/reference/en/p5 copy/constants/CROSS.mdx b/src/content/reference/en/p5 copy/constants/CROSS.mdx
new file mode 100644
index 0000000000..eba1238e34
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CROSS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L60
+title: CROSS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 60
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CROSS
diff --git a/src/content/reference/en/p5 copy/constants/CURVE.mdx b/src/content/reference/en/p5 copy/constants/CURVE.mdx
new file mode 100644
index 0000000000..3e46bf2151
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CURVE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1078
+title: CURVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1078
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CURVE
diff --git a/src/content/reference/en/p5 copy/constants/DARKEST.mdx b/src/content/reference/en/p5 copy/constants/DARKEST.mdx
new file mode 100644
index 0000000000..b86d06dec4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DARKEST.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L913
+title: DARKEST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 913
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DARKEST
diff --git a/src/content/reference/en/p5 copy/constants/DEGREES.mdx b/src/content/reference/en/p5 copy/constants/DEGREES.mdx
new file mode 100644
index 0000000000..c259f456ad
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DEGREES.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L547
+title: DEGREES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>String</code> constant that's used to set the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
+  and
+
+  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
+  radians.
+
+  Calling <code>angleMode(DEGREES)</code> ensures that angles are measured in
+  units of
+
+  degrees.</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
+line: 547
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a red arc from 0 to HALF_PI radians.
+      fill(255, 0, 0);
+      arc(50, 50, 80, 80, 0, HALF_PI);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Draw a blue arc from 90˚ to 180˚.
+      fill(0, 0, 255);
+      arc(50, 50, 80, 80, 90, 180);
+
+      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# DEGREES
diff --git a/src/content/reference/en/p5 copy/constants/DELETE.mdx b/src/content/reference/en/p5 copy/constants/DELETE.mdx
new file mode 100644
index 0000000000..3bef8a3983
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DELETE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L836
+title: DELETE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 836
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# DELETE
diff --git a/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx b/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
new file mode 100644
index 0000000000..27d7e0880c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L924
+title: DIFFERENCE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 924
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DIFFERENCE
diff --git a/src/content/reference/en/p5 copy/constants/DILATE.mdx b/src/content/reference/en/p5 copy/constants/DILATE.mdx
new file mode 100644
index 0000000000..5eca5b06dd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DILATE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1009
+title: DILATE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1009
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DILATE
diff --git a/src/content/reference/en/p5 copy/constants/DODGE.mdx b/src/content/reference/en/p5 copy/constants/DODGE.mdx
new file mode 100644
index 0000000000..ba1594bfe4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DODGE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L970
+title: DODGE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 970
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DODGE
diff --git a/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx b/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
new file mode 100644
index 0000000000..c1d80ae679
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L841
+title: DOWN_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 841
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# DOWN\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ENTER.mdx b/src/content/reference/en/p5 copy/constants/ENTER.mdx
new file mode 100644
index 0000000000..0ded2aec7f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ENTER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L846
+title: ENTER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 846
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# ENTER
diff --git a/src/content/reference/en/p5 copy/constants/ERODE.mdx b/src/content/reference/en/p5 copy/constants/ERODE.mdx
new file mode 100644
index 0000000000..9dba021043
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ERODE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1014
+title: ERODE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1014
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ERODE
diff --git a/src/content/reference/en/p5 copy/constants/ESCAPE.mdx b/src/content/reference/en/p5 copy/constants/ESCAPE.mdx
new file mode 100644
index 0000000000..53256ed7ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ESCAPE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L851
+title: ESCAPE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 851
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# ESCAPE
diff --git a/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx b/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
new file mode 100644
index 0000000000..61c3572125
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L934
+title: EXCLUSION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 934
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# EXCLUSION
diff --git a/src/content/reference/en/p5 copy/constants/FALLBACK.mdx b/src/content/reference/en/p5 copy/constants/FALLBACK.mdx
new file mode 100644
index 0000000000..6c9f4ec37c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FALLBACK.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1182
+title: FALLBACK
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1182
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FALLBACK
diff --git a/src/content/reference/en/p5 copy/constants/FILL.mdx b/src/content/reference/en/p5 copy/constants/FILL.mdx
new file mode 100644
index 0000000000..9e2ca1ce96
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FILL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1090
+title: FILL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1090
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FILL
diff --git a/src/content/reference/en/p5 copy/constants/FLAT.mdx b/src/content/reference/en/p5 copy/constants/FLAT.mdx
new file mode 100644
index 0000000000..50d8b95b1e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FLAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1138
+title: FLAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1138
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FLAT
diff --git a/src/content/reference/en/p5 copy/constants/FLOAT.mdx b/src/content/reference/en/p5 copy/constants/FLOAT.mdx
new file mode 100644
index 0000000000..b063ffc631
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FLOAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1212
+title: FLOAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1212
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/GRAY.mdx b/src/content/reference/en/p5 copy/constants/GRAY.mdx
new file mode 100644
index 0000000000..ca8a56d090
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/GRAY.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L989
+title: GRAY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 989
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# GRAY
diff --git a/src/content/reference/en/p5 copy/constants/GRID.mdx b/src/content/reference/en/p5 copy/constants/GRID.mdx
new file mode 100644
index 0000000000..683bbf43f9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/GRID.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1165
+title: GRID
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1165
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# GRID
diff --git a/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx b/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
new file mode 100644
index 0000000000..a70c409626
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1218
+title: HALF_FLOAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1218
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HALF\_FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/HALF_PI.mdx b/src/content/reference/en/p5 copy/constants/HALF_PI.mdx
new file mode 100644
index 0000000000..212458ee9e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HALF_PI.mdx	
@@ -0,0 +1,109 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L88
+title: HALF_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 1.5708.</p>
+
+  <p><code>HALF_PI</code> is half the value of the mathematical constant π. It's
+  useful for
+
+  many tasks that involve rotation and oscillation. For example, calling
+
+  <code>rotate(HALF_PI)</code> rotates the coordinate system
+  <code>HALF_PI</code> radians, which is
+
+  a quarter turn (90˚).</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 88
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to HALF_PI.
+      arc(50, 50, 80, 80, 0, HALF_PI);
+
+      describe('The bottom-right quarter of a circle drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a quarter turn.
+      rotate(HALF_PI);
+
+      // Draw the same line, rotated.
+      line(0, 0, 40, 0);
+
+      describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator.
+      fill(0, 0, 255);
+      circle(x2, 0, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# HALF\_PI
diff --git a/src/content/reference/en/p5 copy/constants/HAND.mdx b/src/content/reference/en/p5 copy/constants/HAND.mdx
new file mode 100644
index 0000000000..0bd864fb59
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HAND.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L65
+title: HAND
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 65
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HAND
diff --git a/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
new file mode 100644
index 0000000000..9f3f9742fc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L960
+title: HARD_LIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 960
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HARD\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/HSB.mdx b/src/content/reference/en/p5 copy/constants/HSB.mdx
new file mode 100644
index 0000000000..d921d5405e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HSB.mdx	
@@ -0,0 +1,24 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L794
+title: HSB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>HSB (hue, saturation, brightness) is a type of color model.
+
+  You can learn more about it at
+
+  <a
+  href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">HSB</a>.</p>
+line: 794
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HSB
diff --git a/src/content/reference/en/p5 copy/constants/HSL.mdx b/src/content/reference/en/p5 copy/constants/HSL.mdx
new file mode 100644
index 0000000000..aa660c2da5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HSL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L803
+title: HSL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 803
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HSL
diff --git a/src/content/reference/en/p5 copy/constants/IMAGE.mdx b/src/content/reference/en/p5 copy/constants/IMAGE.mdx
new file mode 100644
index 0000000000..479af890bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/IMAGE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1108
+title: IMAGE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1108
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# IMAGE
diff --git a/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx b/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
new file mode 100644
index 0000000000..52b38ee8b5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1100
+title: IMMEDIATE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1100
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# IMMEDIATE
diff --git a/src/content/reference/en/p5 copy/constants/INVERT.mdx b/src/content/reference/en/p5 copy/constants/INVERT.mdx
new file mode 100644
index 0000000000..9c383dd4d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/INVERT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L999
+title: INVERT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 999
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# INVERT
diff --git a/src/content/reference/en/p5 copy/constants/ITALIC.mdx b/src/content/reference/en/p5 copy/constants/ITALIC.mdx
new file mode 100644
index 0000000000..d0a9a1f2e5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ITALIC.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1031
+title: ITALIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1031
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ITALIC
diff --git a/src/content/reference/en/p5 copy/constants/LABEL.mdx b/src/content/reference/en/p5 copy/constants/LABEL.mdx
new file mode 100644
index 0000000000..92786b3feb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LABEL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1177
+title: LABEL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1177
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LABEL
diff --git a/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx b/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
new file mode 100644
index 0000000000..c1709051cd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1150
+title: LANDSCAPE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1150
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LANDSCAPE
diff --git a/src/content/reference/en/p5 copy/constants/LEFT.mdx b/src/content/reference/en/p5 copy/constants/LEFT.mdx
new file mode 100644
index 0000000000..6e48fe2d99
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LEFT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L655
+title: LEFT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 655
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LEFT
diff --git a/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
new file mode 100644
index 0000000000..8628e56688
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L856
+title: LEFT_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 856
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LEFT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx b/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
new file mode 100644
index 0000000000..bd15662468
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L918
+title: LIGHTEST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 918
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LIGHTEST
diff --git a/src/content/reference/en/p5 copy/constants/LINEAR.mdx b/src/content/reference/en/p5 copy/constants/LINEAR.mdx
new file mode 100644
index 0000000000..e56c663585
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINEAR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1063
+title: LINEAR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1063
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LINEAR
diff --git a/src/content/reference/en/p5 copy/constants/LINES.mdx b/src/content/reference/en/p5 copy/constants/LINES.mdx
new file mode 100644
index 0000000000..9d7d5d2abc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINES.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L687
+title: LINES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 687
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LINES
diff --git a/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx b/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
new file mode 100644
index 0000000000..2a566fa4c7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L699
+title: LINE_LOOP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 699
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LINE\_LOOP
diff --git a/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
new file mode 100644
index 0000000000..816e857d01
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L693
+title: LINE_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 693
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LINE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/MIRROR.mdx b/src/content/reference/en/p5 copy/constants/MIRROR.mdx
new file mode 100644
index 0000000000..9b2bcd7146
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MIRROR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1131
+title: MIRROR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1131
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MIRROR
diff --git a/src/content/reference/en/p5 copy/constants/MITER.mdx b/src/content/reference/en/p5 copy/constants/MITER.mdx
new file mode 100644
index 0000000000..533039ecc8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MITER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L782
+title: MITER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 782
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MITER
diff --git a/src/content/reference/en/p5 copy/constants/MOVE.mdx b/src/content/reference/en/p5 copy/constants/MOVE.mdx
new file mode 100644
index 0000000000..aea9bf8a71
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MOVE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L70
+title: MOVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 70
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MOVE
diff --git a/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx b/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
new file mode 100644
index 0000000000..ce343b4bf2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L939
+title: MULTIPLY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 939
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MULTIPLY
diff --git a/src/content/reference/en/p5 copy/constants/NEAREST.mdx b/src/content/reference/en/p5 copy/constants/NEAREST.mdx
new file mode 100644
index 0000000000..9fba7e46cf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/NEAREST.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1116
+title: NEAREST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1116
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# NEAREST
diff --git a/src/content/reference/en/p5 copy/constants/NORMAL.mdx b/src/content/reference/en/p5 copy/constants/NORMAL.mdx
new file mode 100644
index 0000000000..2c49e02fbf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/NORMAL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1026
+title: NORMAL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1026
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# NORMAL
diff --git a/src/content/reference/en/p5 copy/constants/OPAQUE.mdx b/src/content/reference/en/p5 copy/constants/OPAQUE.mdx
new file mode 100644
index 0000000000..9ddf599dd1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OPAQUE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L994
+title: OPAQUE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 994
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# OPAQUE
diff --git a/src/content/reference/en/p5 copy/constants/OPEN.mdx b/src/content/reference/en/p5 copy/constants/OPEN.mdx
new file mode 100644
index 0000000000..29011d1e69
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OPEN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L745
+title: OPEN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 745
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# OPEN
diff --git a/src/content/reference/en/p5 copy/constants/OPTION.mdx b/src/content/reference/en/p5 copy/constants/OPTION.mdx
new file mode 100644
index 0000000000..8ea0e625db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OPTION.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L861
+title: OPTION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 861
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# OPTION
diff --git a/src/content/reference/en/p5 copy/constants/OVERLAY.mdx b/src/content/reference/en/p5 copy/constants/OVERLAY.mdx
new file mode 100644
index 0000000000..ccb03411bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OVERLAY.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L955
+title: OVERLAY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 955
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# OVERLAY
diff --git a/src/content/reference/en/p5 copy/constants/P2D.mdx b/src/content/reference/en/p5 copy/constants/P2D.mdx
new file mode 100644
index 0000000000..83f09b1d9c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/P2D.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L18
+title: P2D
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>The default, two-dimensional renderer.</p>
+line: 18
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# P2D
diff --git a/src/content/reference/en/p5 copy/constants/PI.mdx b/src/content/reference/en/p5 copy/constants/PI.mdx
new file mode 100644
index 0000000000..bddf509592
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PI.mdx	
@@ -0,0 +1,108 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L178
+title: PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 3.1416.</p>
+
+  <p><code>PI</code> is the mathematical constant π. It's useful for many tasks
+  that
+
+  involve rotation and oscillation. For example, calling <code>rotate(PI)</code>
+  rotates
+
+  the coordinate system <code>PI</code> radians, which is a half turn
+  (180˚).</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 178
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to PI.
+      arc(50, 50, 80, 80, 0, PI);
+
+      describe('The bottom half of a circle drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a half turn.
+      rotate(PI);
+
+      // Draw the same line, rotated.
+      line(0, 0, 40, 0);
+
+      describe('A horizontal black line on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator.
+      fill(0, 0, 255);
+      circle(x2, 0, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# PI
diff --git a/src/content/reference/en/p5 copy/constants/PIE.mdx b/src/content/reference/en/p5 copy/constants/PIE.mdx
new file mode 100644
index 0000000000..7be0810e6e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PIE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L755
+title: PIE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 755
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# PIE
diff --git a/src/content/reference/en/p5 copy/constants/POINTS.mdx b/src/content/reference/en/p5 copy/constants/POINTS.mdx
new file mode 100644
index 0000000000..8dea326a14
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/POINTS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L681
+title: POINTS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 681
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# POINTS
diff --git a/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx b/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
new file mode 100644
index 0000000000..492546578c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1155
+title: PORTRAIT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1155
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# PORTRAIT
diff --git a/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx b/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
new file mode 100644
index 0000000000..198c365591
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1004
+title: POSTERIZE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1004
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# POSTERIZE
diff --git a/src/content/reference/en/p5 copy/constants/PROJECT.mdx b/src/content/reference/en/p5 copy/constants/PROJECT.mdx
new file mode 100644
index 0000000000..ce6f7dbaac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PROJECT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L760
+title: PROJECT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 760
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# PROJECT
diff --git a/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx b/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
new file mode 100644
index 0000000000..49e8d2cc19
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1068
+title: QUADRATIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1068
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# QUADRATIC
diff --git a/src/content/reference/en/p5 copy/constants/QUADS.mdx b/src/content/reference/en/p5 copy/constants/QUADS.mdx
new file mode 100644
index 0000000000..c67a193a4f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUADS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L723
+title: QUADS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 723
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# QUADS
diff --git a/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx b/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
new file mode 100644
index 0000000000..c1ce9d4291
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L728
+title: QUAD_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 728
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# QUAD\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx b/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
new file mode 100644
index 0000000000..5f4cc24bc1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx	
@@ -0,0 +1,109 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L267
+title: QUARTER_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 0.7854.</p>
+
+  <p><code>QUARTER_PI</code> is one-fourth the value of the mathematical
+  constant π. It's
+
+  useful for many tasks that involve rotation and oscillation. For example,
+
+  calling <code>rotate(QUARTER_PI)</code> rotates the coordinate system
+  <code>QUARTER_PI</code>
+
+  radians, which is an eighth of a turn (45˚).</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 267
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to QUARTER_PI.
+      arc(50, 50, 80, 80, 0, QUARTER_PI);
+
+      describe('A one-eighth slice of a circle drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate an eighth turn.
+      rotate(QUARTER_PI);
+
+      // Draw the same line, rotated.
+      line(0, 0, 40, 0);
+
+      describe('Two black lines that form a "V" opening towards the bottom-right corner of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator.
+      fill(0, 0, 255);
+      circle(x2, 0, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# QUARTER\_PI
diff --git a/src/content/reference/en/p5 copy/constants/RADIANS.mdx b/src/content/reference/en/p5 copy/constants/RADIANS.mdx
new file mode 100644
index 0000000000..856db37b9f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RADIANS.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L587
+title: RADIANS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>String</code> constant that's used to set the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
+  and
+
+  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
+  radians.
+
+  Calling <code>angleMode(RADIANS)</code> ensures that angles are measured in
+  units of
+
+  radians. Doing so can be useful if the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a> has been set to
+
+  <a href="/reference/p5/DEGREES/">DEGREES</a>.</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
+line: 587
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Draw a red arc from 0˚ to 90˚.
+      fill(255, 0, 0);
+      arc(50, 50, 80, 80, 0, 90);
+
+      // Use radians.
+      angleMode(RADIANS);
+
+      // Draw a blue arc from HALF_PI to PI.
+      fill(0, 0, 255);
+      arc(50, 50, 80, 80, HALF_PI, PI);
+
+      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# RADIANS
diff --git a/src/content/reference/en/p5 copy/constants/RADIUS.mdx b/src/content/reference/en/p5 copy/constants/RADIUS.mdx
new file mode 100644
index 0000000000..95f1dcdeef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RADIUS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L645
+title: RADIUS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 645
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RADIUS
diff --git a/src/content/reference/en/p5 copy/constants/REMOVE.mdx b/src/content/reference/en/p5 copy/constants/REMOVE.mdx
new file mode 100644
index 0000000000..c2daffc564
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/REMOVE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L899
+title: REMOVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 899
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# REMOVE
diff --git a/src/content/reference/en/p5 copy/constants/REPEAT.mdx b/src/content/reference/en/p5 copy/constants/REPEAT.mdx
new file mode 100644
index 0000000000..c9e75c8bec
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/REPEAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1121
+title: REPEAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1121
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# REPEAT
diff --git a/src/content/reference/en/p5 copy/constants/REPLACE.mdx b/src/content/reference/en/p5 copy/constants/REPLACE.mdx
new file mode 100644
index 0000000000..8a04f06130
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/REPLACE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L949
+title: REPLACE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 949
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# REPLACE
diff --git a/src/content/reference/en/p5 copy/constants/RETURN.mdx b/src/content/reference/en/p5 copy/constants/RETURN.mdx
new file mode 100644
index 0000000000..3069efc256
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RETURN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L866
+title: RETURN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 866
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# RETURN
diff --git a/src/content/reference/en/p5 copy/constants/RGB.mdx b/src/content/reference/en/p5 copy/constants/RGB.mdx
new file mode 100644
index 0000000000..b0ae826064
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RGB.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L789
+title: RGB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 789
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RGB
diff --git a/src/content/reference/en/p5 copy/constants/RGBA.mdx b/src/content/reference/en/p5 copy/constants/RGBA.mdx
new file mode 100644
index 0000000000..256949cfd1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RGBA.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1224
+title: RGBA
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1224
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RGBA
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT.mdx b/src/content/reference/en/p5 copy/constants/RIGHT.mdx
new file mode 100644
index 0000000000..e9f69e8a80
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RIGHT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L650
+title: RIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 650
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RIGHT
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
new file mode 100644
index 0000000000..731ab29fb5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L871
+title: RIGHT_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 871
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# RIGHT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ROUND.mdx b/src/content/reference/en/p5 copy/constants/ROUND.mdx
new file mode 100644
index 0000000000..50426d2636
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ROUND.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L772
+title: ROUND
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 772
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ROUND
diff --git a/src/content/reference/en/p5 copy/constants/SCREEN.mdx b/src/content/reference/en/p5 copy/constants/SCREEN.mdx
new file mode 100644
index 0000000000..65f2e6192d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SCREEN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L944
+title: SCREEN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 944
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SCREEN
diff --git a/src/content/reference/en/p5 copy/constants/SHIFT.mdx b/src/content/reference/en/p5 copy/constants/SHIFT.mdx
new file mode 100644
index 0000000000..e48b091ab3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SHIFT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L876
+title: SHIFT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 876
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# SHIFT
diff --git a/src/content/reference/en/p5 copy/constants/SMOOTH.mdx b/src/content/reference/en/p5 copy/constants/SMOOTH.mdx
new file mode 100644
index 0000000000..816be1029b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SMOOTH.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1143
+title: SMOOTH
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1143
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SMOOTH
diff --git a/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
new file mode 100644
index 0000000000..846e6fe72b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L965
+title: SOFT_LIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 965
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SOFT\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/SQUARE.mdx b/src/content/reference/en/p5 copy/constants/SQUARE.mdx
new file mode 100644
index 0000000000..7b5da139d7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SQUARE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L766
+title: SQUARE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 766
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SQUARE
diff --git a/src/content/reference/en/p5 copy/constants/STROKE.mdx b/src/content/reference/en/p5 copy/constants/STROKE.mdx
new file mode 100644
index 0000000000..16cfa32e5e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/STROKE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1085
+title: STROKE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1085
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# STROKE
diff --git a/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx b/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
new file mode 100644
index 0000000000..2bd6d94fe9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L929
+title: SUBTRACT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 929
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SUBTRACT
diff --git a/src/content/reference/en/p5 copy/constants/TAB.mdx b/src/content/reference/en/p5 copy/constants/TAB.mdx
new file mode 100644
index 0000000000..cf89117ae4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TAB.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L881
+title: TAB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 881
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TAB
diff --git a/src/content/reference/en/p5 copy/constants/TAU.mdx b/src/content/reference/en/p5 copy/constants/TAU.mdx
new file mode 100644
index 0000000000..a553339913
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TAU.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L357
+title: TAU
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
+
+  <p><code>TAU</code> is twice the value of the mathematical constant π. It's
+  useful for
+
+  many tasks that involve rotation and oscillation. For example, calling
+
+  <code>rotate(TAU)</code> rotates the coordinate system <code>TAU</code>
+  radians, which is one
+
+  full turn (360˚). <code>TAU</code> and <code>TWO_PI</code> are equal.</p>
+
+  <p>Note: <code>TAU</code> radians equals 360˚, <code>PI</code> radians equals
+  180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 357
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to TAU.
+      arc(50, 50, 80, 80, 0, TAU);
+
+      describe('A white circle drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a full turn.
+      rotate(TAU);
+
+      // Style the second line.
+      strokeWeight(5);
+
+      // Draw the same line, shorter and rotated.
+      line(0, 0, 20, 0);
+
+      describe(
+        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle with a blue center oscillates from left to right on a gray background.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + TAU);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator, smaller.
+      fill(0, 0, 255);
+      circle(x2, 0, 10);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# TAU
diff --git a/src/content/reference/en/p5 copy/constants/TESS.mdx b/src/content/reference/en/p5 copy/constants/TESS.mdx
new file mode 100644
index 0000000000..e6f853e8ab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TESS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L734
+title: TESS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 734
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TESS
diff --git a/src/content/reference/en/p5 copy/constants/TEXT.mdx b/src/content/reference/en/p5 copy/constants/TEXT.mdx
new file mode 100644
index 0000000000..157a90001a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TEXT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L75
+title: TEXT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 75
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TEXT
diff --git a/src/content/reference/en/p5 copy/constants/TEXTURE.mdx b/src/content/reference/en/p5 copy/constants/TEXTURE.mdx
new file mode 100644
index 0000000000..8ada92f376
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TEXTURE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1095
+title: TEXTURE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1095
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TEXTURE
diff --git a/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx b/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
new file mode 100644
index 0000000000..f12e6ea336
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L984
+title: THRESHOLD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 984
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# THRESHOLD
diff --git a/src/content/reference/en/p5 copy/constants/TOP.mdx b/src/content/reference/en/p5 copy/constants/TOP.mdx
new file mode 100644
index 0000000000..a91b5f4824
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TOP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L665
+title: TOP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 665
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TOP
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
new file mode 100644
index 0000000000..ec281d033e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L705
+title: TRIANGLES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 705
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TRIANGLES
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
new file mode 100644
index 0000000000..bcd5d5f5a1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L711
+title: TRIANGLE_FAN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 711
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TRIANGLE\_FAN
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
new file mode 100644
index 0000000000..fefe226e17
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L717
+title: TRIANGLE_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 717
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TRIANGLE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/TWO_PI.mdx b/src/content/reference/en/p5 copy/constants/TWO_PI.mdx
new file mode 100644
index 0000000000..ed62a10b0f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TWO_PI.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L452
+title: TWO_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
+
+  <p><code>TWO_PI</code> is twice the value of the mathematical constant π. It's
+  useful for
+
+  many tasks that involve rotation and oscillation. For example, calling
+
+  <code>rotate(TWO_PI)</code> rotates the coordinate system <code>TWO_PI</code>
+  radians, which is
+
+  one full turn (360˚). <code>TWO_PI</code> and <code>TAU</code> are equal.</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 452
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to TWO_PI.
+      arc(50, 50, 80, 80, 0, TWO_PI);
+
+      describe('A white circle drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a full turn.
+      rotate(TWO_PI);
+
+      // Style the second line.
+      strokeWeight(5);
+
+      // Draw the same line, shorter and rotated.
+      line(0, 0, 20, 0);
+
+      describe(
+        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle with a blue center oscillates from left to right on a gray background.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator, smaller.
+      fill(0, 0, 255);
+      circle(x2, 0, 10);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# TWO\_PI
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
new file mode 100644
index 0000000000..00acfe29c0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1200
+title: UNSIGNED_BYTE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1200
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# UNSIGNED\_BYTE
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
new file mode 100644
index 0000000000..f060682a13
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1206
+title: UNSIGNED_INT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1206
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# UNSIGNED\_INT
diff --git a/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx b/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
new file mode 100644
index 0000000000..e0e0326aa6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L886
+title: UP_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 886
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# UP\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/VERSION.mdx b/src/content/reference/en/p5 copy/constants/VERSION.mdx
new file mode 100644
index 0000000000..f9f62fca55
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/VERSION.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L9
+title: VERSION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>Version of this p5.js.</p>
+line: 9
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# VERSION
diff --git a/src/content/reference/en/p5 copy/constants/WAIT.mdx b/src/content/reference/en/p5 copy/constants/WAIT.mdx
new file mode 100644
index 0000000000..833f77ee4f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WAIT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L80
+title: WAIT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 80
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WAIT
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL.mdx b/src/content/reference/en/p5 copy/constants/WEBGL.mdx
new file mode 100644
index 0000000000..2919ec489c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WEBGL.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L24
+title: WEBGL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>One of the two render modes in p5.js, used for computationally intensive
+  tasks like 3D rendering and shaders.</p>
+
+  <p><code>WEBGL</code> differs from the default <a
+  href="/reference/p5/P2D/"><code>P2D</code></a> renderer in the following
+  ways:</p>
+
+  <ul>
+
+  <li><strong>Coordinate System</strong> - When drawing in <code>WEBGL</code>
+  mode, the origin point (0,0,0) is located at the center of the screen, not the
+  top-left corner. See <a
+  href="https://p5js.org/tutorials/coordinates-and-transformations/">the
+  tutorial page about coordinates and transformations</a>.</li>
+
+  <li><strong>3D Shapes</strong> - <code>WEBGL</code> mode can be used to draw
+  3-dimensional shapes like <a href="/reference/p5/box/">box()</a>, <a
+  href="/reference/p5/sphere/">sphere()</a>, <a
+  href="/reference/p5/cone/">cone()</a>, and <a
+  href="https://p5js.org/reference/#3D%20Primitives/">more</a>. See <a
+  href="https://p5js.org/tutorials/custom-geometry/">the tutorial page about
+  custom geometry</a> to make more complex objects.</li>
+
+  <li><strong>Shape Detail</strong> - When drawing in <code>WEBGL</code> mode,
+  you can specify how smooth curves should be drawn by using a
+  <code>detail</code> parameter. See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#3d-primitives-shapes">the
+  wiki section about shapes</a> for a more information and an example.</li>
+
+  <li><strong>Textures</strong> - A texture is like a skin that wraps onto a
+  shape. See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#textures">the
+  wiki section about textures</a> for examples of mapping images onto surfaces
+  with textures.</li>
+
+  <li><strong>Materials and Lighting</strong> - <code>WEBGL</code> offers
+  different types of lights like <a
+  href="/reference/p5/ambientLight/">ambientLight()</a> to place around a scene.
+  Materials like <a
+  href="/reference/p5/specularMaterial/">specularMaterial()</a> reflect the
+  lighting to convey shape and depth. See <a
+  href="https://p5js.org/tutorials/lights-camera-materials/">the tutorial page
+  for styling and appearance</a> to experiment with different combinations.</li>
+
+  <li><strong>Camera</strong> - The viewport of a <code>WEBGL</code> sketch can
+  be adjusted by changing camera attributes. See <a
+  href="https://p5js.org/tutorials/lights-camera-materials#camera-and-view">the
+  tutorial page section about cameras</a> for an explanation of camera
+  controls.</li>
+
+  <li><strong>Text</strong> - <code>WEBGL</code> requires opentype/truetype font
+  files to be preloaded using <a href="/reference/p5/loadFont/">loadFont()</a>.
+  See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#text">the
+  wiki section about text</a> for details, along with a workaround.</li>
+
+  <li><strong>Shaders</strong> - Shaders are hardware accelerated programs that
+  can be used for a variety of effects and graphics. See the <a
+  href="https://p5js.org/tutorials/intro-to-shaders/">introduction to
+  shaders</a> to get started with shaders in p5.js.</li>
+
+  <li><strong>Graphics Acceleration</strong> - <code>WEBGL</code> mode uses the
+  graphics card instead of the CPU, so it may help boost the performance of your
+  sketch (example: drawing more shapes on the screen at once).</li>
+
+  </ul>
+
+  <p>To learn more about WEBGL mode, check out <a
+  href="https://p5js.org/tutorials/#webgl">all the interactive WEBGL
+  tutorials</a> in the "Tutorials" section of this website, or read the wiki
+  article <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/">"Getting
+  started with WebGL in p5"</a>.</p>
+line: 24
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WEBGL
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL2.mdx b/src/content/reference/en/p5 copy/constants/WEBGL2.mdx
new file mode 100644
index 0000000000..68c6ca83fa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WEBGL2.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L45
+title: WEBGL2
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
+  which can be used to determine what capabilities the rendering environment
+  has.</p>
+line: 45
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WEBGL2
diff --git a/src/content/reference/en/p5 copy/constants/WORD.mdx b/src/content/reference/en/p5 copy/constants/WORD.mdx
new file mode 100644
index 0000000000..03f13b4874
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WORD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1051
+title: WORD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1051
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WORD
diff --git a/src/content/reference/en/p5 copy/constrain.mdx b/src/content/reference/en/p5 copy/constrain.mdx
new file mode 100644
index 0000000000..d869ce2e74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constrain.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L91
+title: constrain
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Constrains a number between a minimum and maximum value.</p>
+line: 91
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      let x = constrain(mouseX, 33, 67);
+      let y = 50;
+
+      strokeWeight(5);
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set boundaries and draw them.
+      let leftWall = 25;
+      let rightWall = 75;
+      line(leftWall, 0, leftWall, 100);
+      line(rightWall, 0, rightWall, 100);
+
+      // Draw a circle that follows the mouse freely.
+      fill(255);
+      circle(mouseX, 33, 9);
+
+      // Draw a circle that's constrained.
+      let xc = constrain(mouseX, leftWall, rightWall);
+      fill(0);
+      circle(xc, 67, 9);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to constrain.</p>
+    type: Number
+  - name: low
+    description: |
+      <p>minimum limit.</p>
+    type: Number
+  - name: high
+    description: |
+      <p>maximum limit.</p>
+    type: Number
+return:
+  description: constrained number.
+  type: Number
+chainable: false
+---
+
+
+# constrain
diff --git a/src/content/reference/en/p5 copy/copy.mdx b/src/content/reference/en/p5 copy/copy.mdx
new file mode 100644
index 0000000000..059df56434
--- /dev/null
+++ b/src/content/reference/en/p5 copy/copy.mdx	
@@ -0,0 +1,144 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L288
+title: copy
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Copies pixels from a source image to a region of the canvas.</p>
+
+  <p>The first parameter, <code>srcImage</code>, is the
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend. The source
+  image can be
+
+  the canvas itself or a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object. <code>copy()</code> will
+  scale pixels from
+
+  the source region if it isn't the same size as the destination region.</p>
+
+  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+  <code>sw</code>, and <code>sh</code> determine the region
+
+  to copy from the source image. <code>(sx, sy)</code> is the top-left corner of
+  the
+
+  region. <code>sw</code> and <code>sh</code> are the region's width and
+  height.</p>
+
+  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+  <code>dw</code>, and <code>dh</code> determine the region
+
+  of the canvas to copy into. <code>(dx, dy)</code> is the top-left corner of
+  the
+
+  region. <code>dw</code> and <code>dh</code> are the region's width and
+  height.</p>
+line: 288
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img);
+
+      // Copy a region of pixels to another spot.
+      copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+
+      // Outline the copied region.
+      stroke(255);
+      noFill();
+      square(7, 22, 10);
+
+      describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 288
+    params:
+      - name: srcImage
+        description: |
+          <p>source image.</p>
+        type: p5.Image|p5.Element
+      - name: sx
+        description: |
+          <p>x-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sy
+        description: |
+          <p>y-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sw
+        description: |
+          <p>source image width.</p>
+        type: Integer
+      - name: sh
+        description: |
+          <p>source image height.</p>
+        type: Integer
+      - name: dx
+        description: |
+          <p>x-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dy
+        description: |
+          <p>y-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dw
+        description: |
+          <p>destination image width.</p>
+        type: Integer
+      - name: dh
+        description: |
+          <p>destination image height.</p>
+        type: Integer
+  - line: 345
+    params:
+      - name: sx
+        description: ''
+        type: Integer
+      - name: sy
+        description: ''
+        type: Integer
+      - name: sw
+        description: ''
+        type: Integer
+      - name: sh
+        description: ''
+        type: Integer
+      - name: dx
+        description: ''
+        type: Integer
+      - name: dy
+        description: ''
+        type: Integer
+      - name: dw
+        description: ''
+        type: Integer
+      - name: dh
+        description: ''
+        type: Integer
+chainable: false
+---
+
+
+# copy
diff --git a/src/content/reference/en/p5 copy/cos.mdx b/src/content/reference/en/p5 copy/cos.mdx
new file mode 100644
index 0000000000..cd6468fc4f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cos.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L281
+title: cos
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the cosine of an angle.</p>
+
+  <p><code>cos()</code> is useful for many geometric tasks in creative coding.
+  The values
+
+  returned oscillate between -1 and 1 as the input angle increases.
+  <code>cos()</code>
+
+  calculates the cosine of an angle, using radians by default, or according to
+
+  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+  DEGREES).</p>
+line: 281
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white ball on a string oscillates left and right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.05) + 50;
+      let y = 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form a wave pattern.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 30 * cos(x * 0.1) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form an infinity symbol.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.1) + 50;
+      let y = 10 * sin(frameCount * 0.2) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>the angle, in radians by default, or according to
+
+      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+      DEGREES).</p>
+    type: Number
+return:
+  description: cosine of the angle.
+  type: Number
+chainable: false
+---
+
+
+# cos
diff --git a/src/content/reference/en/p5 copy/createA.mdx b/src/content/reference/en/p5 copy/createA.mdx
new file mode 100644
index 0000000000..669ce45a27
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createA.mdx	
@@ -0,0 +1,93 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L724
+title: createA
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code><a></a></code> element that links to another web page.</p>
+
+  <p>The first parmeter, <code>href</code>, is a string that sets the URL of the
+  linked
+
+  page.</p>
+
+  <p>The second parameter, <code>html</code>, is a string that sets the inner
+  HTML of the
+
+  link. It's common to use text, images, or buttons as links.</p>
+
+  <p>The third parameter, <code>target</code>, is optional. It's a string that
+  tells the
+
+  web browser where to open the link. By default, links open in the current
+
+  browser tab. Passing <code>'_blank'</code> will cause the link to open in a
+  new
+
+  browser tab. MDN describes a few
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"
+  target="_blank">other options</a>.</p>
+line: 724
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an anchor element that links to p5js.org.
+      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.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an anchor tag that links to p5js.org.
+      // Open the link in a new tab.
+      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.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: href
+    description: |
+      <p>URL of linked page.</p>
+    type: String
+  - name: html
+    description: |
+      <p>inner HTML of link element to display.</p>
+    type: String
+  - name: target
+    description: |
+      <p>target where the new link should open,
+                                  either <code>'_blank'</code>, <code>'_self'</code>, <code>'_parent'</code>, or <code>'_top'</code>.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createA
diff --git a/src/content/reference/en/p5 copy/createAudio.mdx b/src/content/reference/en/p5 copy/createAudio.mdx
new file mode 100644
index 0000000000..24b3bce36b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createAudio.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2213
+title: createAudio
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a hidden <code><audio></code> element for simple audio
+  playback.</p>
+
+  <p><code>createAudio()</code> returns a new
+
+  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object.</p>
+
+  <p>The first parameter, <code>src</code>, is the path the video. If a single
+  string is
+
+  passed, as in <code>'/assets/video.mp4'</code>, a single video is loaded. An
+  array
+
+  of strings can be used to load the same video in different formats. For
+
+  example, <code>['/assets/video.mp4', '/assets/video.ogv',
+  '/assets/video.webm']</code>.
+
+  This is useful for ensuring that the video can play across different
+
+  browsers with different capabilities. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/"
+  target="_blank">MDN</a>
+
+  for more information about supported formats.</p>
+
+  <p>The second parameter, <code>callback</code>, is optional. It's a function
+  to call once
+
+  the audio is ready to play.</p>
+line: 2213
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load the audio.
+      let beat = createAudio('/assets/beat.mp3');
+
+      // Show the default audio controls.
+      beat.showControls();
+
+      describe('An audio beat plays when the user double-clicks the square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: src
+    description: |
+      <p>path to an audio file, or an array of paths
+                                      for supporting different browsers.</p>
+    type: 'String|String[]'
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the audio is ready to play.</p>
+    type: Function
+    optional: true
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createAudio
diff --git a/src/content/reference/en/p5 copy/createButton.mdx b/src/content/reference/en/p5 copy/createButton.mdx
new file mode 100644
index 0000000000..9ff2d66faf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createButton.mdx	
@@ -0,0 +1,109 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L924
+title: createButton
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><button></button></code> element.</p>
+
+  <p>The first parameter, <code>label</code>, is a string that sets the label
+  displayed on
+
+  the button.</p>
+
+  <p>The second parameter, <code>value</code>, is optional. It's a string that
+  sets the
+
+  button's value. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value"
+  target="_blank">MDN</a>
+
+  for more details.</p>
+line: 924
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a button and place it beneath the canvas.
+      let button = createButton('click me');
+      button.position(0, 100);
+
+      // Call repaint() when the button is pressed.
+      button.mousePressed(repaint);
+
+      describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+    }
+
+    // Change the background color.
+    function repaint() {
+      let g = random(255);
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let button;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a button and set its value to 0.
+      // Place the button beneath the canvas.
+      button = createButton('click me', 'red');
+      button.position(0, 100);
+
+      // Call randomColor() when the button is pressed.
+      button.mousePressed(randomColor);
+
+      describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+    }
+
+    function draw() {
+      // Use the button's value to set the background color.
+      let c = button.value();
+      background(c);
+    }
+
+    // Set the button's value to a random color.
+    function randomColor() {
+      let c = random(['red', 'green', 'blue', 'yellow']);
+      button.value(c);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: label
+    description: |
+      <p>label displayed on the button.</p>
+    type: String
+  - name: value
+    description: |
+      <p>value of the button.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createButton
diff --git a/src/content/reference/en/p5 copy/createCamera.mdx b/src/content/reference/en/p5 copy/createCamera.mdx
new file mode 100644
index 0000000000..8fbb13ce5d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCamera.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L638
+title: createCamera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Camera">p5.Camera</a> object and
+  sets it
+
+  as the current (active) camera.</p>
+
+  <p>The new camera is initialized with a default position <code>(0, 0,
+  800)</code> and a
+
+  default perspective projection. Its properties can be controlled with
+
+  <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
+
+  <code>myCamera.lookAt(0, 0, 0)</code>.</p>
+
+  <p>Note: Every 3D sketch starts with a default camera initialized.
+
+  This camera can be controlled with the functions
+
+  <a href="/reference/p5/camera/">camera()</a>,
+
+  <a href="/reference/p5/perspective/">perspective()</a>,
+
+  <a href="/reference/p5/ortho/">ortho()</a>, and
+
+  <a href="/reference/p5/frustum/">frustum()</a> if it's the only camera in the
+  scene.</p>
+
+  <p>Note: <code>createCamera()</code> can only be used in WebGL mode.</p>
+line: 638
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to toggle between cameras.
+
+    let cam1;
+    let cam2;
+    let usingCam1 = true;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the first camera.
+      // Keep its default settings.
+      cam1 = createCamera();
+
+      // Create the second camera.
+      // Place it at the top-left.
+      // Point it at the origin.
+      cam2 = createCamera();
+      cam2.setPosition(400, -400, 800);
+      cam2.lookAt(0, 0, 0);
+
+      // Set the current camera to cam1.
+      setCamera(cam1);
+
+      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the box.
+      box();
+    }
+
+    // Toggle the current camera when the user double-clicks.
+    function doubleClicked() {
+      if (usingCam1 === true) {
+        setCamera(cam2);
+        usingCam1 = false;
+      } else {
+        setCamera(cam1);
+        usingCam1 = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: the new camera.
+  type: p5.Camera
+chainable: false
+---
+
+
+# createCamera
diff --git a/src/content/reference/en/p5 copy/createCanvas.mdx b/src/content/reference/en/p5 copy/createCanvas.mdx
new file mode 100644
index 0000000000..600d7e3545
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCanvas.mdx	
@@ -0,0 +1,191 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L15
+title: createCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates a canvas element on the web page.</p>
+
+  <p><code>createCanvas()</code> creates the main drawing canvas for a sketch.
+  It should
+
+  only be called once at the beginning of <a
+  href="/reference/p5/setup/">setup()</a>.
+
+  Calling <code>createCanvas()</code> more than once causes unpredictable
+  behavior.</p>
+
+  <p>The first two parameters, <code>width</code> and <code>height</code>, are
+  optional. They set the
+
+  dimensions of the canvas and the values of the
+
+  <a href="/reference/p5/width/">width</a> and <a
+  href="/reference/p5/height/">height</a> system
+
+  variables. For example, calling <code>createCanvas(900, 500)</code> creates a
+  canvas
+
+  that's 900×500 pixels. By default, <code>width</code> and <code>height</code>
+  are both 100.</p>
+
+  <p>The third parameter is also optional. If either of the constants
+  <code>P2D</code> or
+
+  <code>WEBGL</code> is passed, as in <code>createCanvas(900, 500,
+  WEBGL)</code>, then it will set
+
+  the sketch's rendering mode. If an existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createCanvas(900, 500, myCanvas)</code>, then it will
+  be used
+
+  by the sketch.</p>
+
+  <p>The fourth parameter is also optional. If an existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createCanvas(900, 500, WEBGL, myCanvas)</code>, then it
+  will be
+
+  used by the sketch.</p>
+
+  <p>Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported
+
+  by the browser. Check the <a
+  href="/reference/p5/webglVersion/">webglVersion</a>
+
+  system variable to check what version is being used, or call
+
+  <code>setAttributes({ version: 1 })</code> to create a WebGL1 context.</p>
+line: 15
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(0, 0, width, height);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 50);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(0, 0, width, height);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Use WebGL mode.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(-width / 2, -height / 2, width / 2, height / 2);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a p5.Renderer object.
+      let cnv = createCanvas(50, 50);
+
+      // Position the canvas.
+      cnv.position(10, 20);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(0, 0, width, height);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new `p5.Renderer` that holds the canvas.
+  type: p5.Renderer
+overloads:
+  - line: 15
+    params:
+      - name: width
+        description: |
+          <p>width of the canvas. Defaults to 100.</p>
+        type: Number
+        optional: true
+      - name: height
+        description: |
+          <p>height of the canvas. Defaults to 100.</p>
+        type: Number
+        optional: true
+      - name: renderer
+        description: |
+          <p>either P2D or WEBGL. Defaults to <code>P2D</code>.</p>
+        type: Constant
+        optional: true
+      - name: canvas
+        description: |
+          <p>existing canvas element that should be used for the sketch.</p>
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: new `p5.Renderer` that holds the canvas.
+      type: p5.Renderer
+  - line: 119
+    params:
+      - name: width
+        description: ''
+        type: Number
+        optional: true
+      - name: height
+        description: ''
+        type: Number
+        optional: true
+      - name: canvas
+        description: ''
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: ''
+      type: p5.Renderer
+chainable: false
+---
+
+
+# createCanvas
diff --git a/src/content/reference/en/p5 copy/createCapture.mdx b/src/content/reference/en/p5 copy/createCapture.mdx
new file mode 100644
index 0000000000..1087d14b1a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCapture.mdx	
@@ -0,0 +1,189 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2295
+title: createCapture
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><video></code> element that "captures" the audio/video
+  stream from
+
+  the webcam and microphone.</p>
+
+  <p><code>createCapture()</code> returns a new
+
+  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
+  shown by
+
+  default. They can be hidden by calling <code>capture.hide()</code> and drawn
+  to the
+
+  canvas using <a href="/reference/p5/image/">image()</a>.</p>
+
+  <p>The first parameter, <code>type</code>, is optional. It sets the type of
+  capture to
+
+  use. By default, <code>createCapture()</code> captures both audio and video.
+  If <code>VIDEO</code>
+
+  is passed, as in <code>createCapture(VIDEO)</code>, only video will be
+  captured.
+
+  If <code>AUDIO</code> is passed, as in <code>createCapture(AUDIO)</code>, only
+  audio will be
+
+  captured. A constraints object can also be passed to customize the stream.
+
+  See the <a
+  href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints"
+  target="_blank">
+
+  W3C documentation</a> for possible properties. Different browsers support
+  different
+
+  properties.</p>
+
+  <p>The 'flipped' property is an optional property which can be set to
+  <code>{flipped:true}</code>
+
+  to mirror the video output.If it is true then it means that video will be
+  mirrored
+
+  or flipped and if nothing is mentioned then by default it will be
+  <code>false</code>.</p>
+
+  <p>The second parameter,<code>callback</code>, is optional. It's a function to
+  call once
+
+  the capture is ready for use. The callback function should have one
+
+  parameter, <code>stream</code>, that's a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/"
+  target="_blank">MediaStream</a> object.</p>
+
+  <p>Note: <code>createCapture()</code> only works when running a sketch locally
+  or using HTTPS. Learn more
+
+  <a
+  href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https/"
+  target="_blank">here</a>
+
+  and <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia/"
+  target="_blank">here</a>.</p>
+line: 2295
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Create the video capture.
+      createCapture(VIDEO);
+
+      describe('A video stream from the webcam.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    let capture;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the video capture and hide the element.
+      capture = createCapture(VIDEO);
+      capture.hide();
+
+      describe('A video stream from the webcam with inverted colors.');
+    }
+
+    function draw() {
+      // Draw the video capture within the canvas.
+      image(capture, 0, 0, width, width * capture.height / capture.width);
+
+      // Invert the colors in the stream.
+      filter(INVERT);
+    }
+    </code>
+    </div>
+    <div class='notest'>
+    <code>
+    let capture;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the video capture with mirrored output.
+      capture = createCapture(VIDEO,{ flipped:true });
+      capture.size(100,100);
+
+      describe('A video stream from the webcam with flipped or mirrored output.');
+    }
+
+    </code>
+    </div>
+
+    <div class='notest norender'>
+    <code>
+    function setup() {
+      createCanvas(480, 120);
+
+      // Create a constraints object.
+      let constraints = {
+        video: {
+          mandatory: {
+            minWidth: 1280,
+            minHeight: 720
+          },
+          optional: [{ maxFrameRate: 10 }]
+        },
+        audio: false
+      };
+
+      // Create the video capture.
+      createCapture(constraints);
+
+      describe('A video stream from the webcam.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: type
+    description: |
+      <p>type of capture, either AUDIO or VIDEO,
+                                        or a constraints object. Both video and audio
+                                        audio streams are captured by default.</p>
+    type: String|Constant|Object
+    optional: true
+  - name: flipped
+    description: >
+      <p>flip the capturing video and mirror the output with
+      <code>{flipped:true}</code>. By
+                                        default it is false.</p>
+    type: Object
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the stream
+                                        has loaded.</p>
+    type: Function
+    optional: true
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createCapture
diff --git a/src/content/reference/en/p5 copy/createCheckbox.mdx b/src/content/reference/en/p5 copy/createCheckbox.mdx
new file mode 100644
index 0000000000..45335be2d4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCheckbox.mdx	
@@ -0,0 +1,131 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1008
+title: createCheckbox
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a checkbox <code><input></input></code> element.</p>
+
+  <p>Checkboxes extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a
+
+  <code>checked()</code> method. Calling <code>myBox.checked()</code> returns
+  <code>true</code> if it the box
+
+  is checked and <code>false</code> if not.</p>
+
+  <p>The first parameter, <code>label</code>, is optional. It's a string that
+  sets the label
+
+  to display next to the checkbox.</p>
+
+  <p>The second parameter, <code>value</code>, is also optional. It's a boolean
+  that sets the
+
+  checkbox's value.</p>
+line: 1008
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a checkbox and place it beneath the canvas.
+      checkbox = createCheckbox();
+      checkbox.position(0, 100);
+
+      describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a checkbox and place it beneath the canvas.
+      // Label the checkbox "white".
+      checkbox = createCheckbox(' white');
+      checkbox.position(0, 100);
+
+      describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a checkbox and place it beneath the canvas.
+      // Label the checkbox "white" and set its value to true.
+      checkbox = createCheckbox(' white', true);
+      checkbox.position(0, 100);
+
+      describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: label
+    description: |
+      <p>label displayed after the checkbox.</p>
+    type: String
+    optional: true
+  - name: value
+    description: >
+      <p>value of the checkbox. Checked is <code>true</code> and unchecked is
+      <code>false</code>.</p>
+    type: Boolean
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createCheckbox
diff --git a/src/content/reference/en/p5 copy/createColorPicker.mdx b/src/content/reference/en/p5 copy/createColorPicker.mdx
new file mode 100644
index 0000000000..0c34a0593e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createColorPicker.mdx	
@@ -0,0 +1,101 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1759
+title: createColorPicker
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a color picker element.</p>
+
+  <p>The parameter, <code>value</code>, is optional. If a color string or
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object is passed, it will set
+  the default
+
+  color.</p>
+
+  <p>Color pickers extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a
+
+  couple of helpful methods for managing colors:</p>
+
+  <ul>
+
+  <li><code>myPicker.value()</code> returns the current color as a hex string in
+  the format <code>'#rrggbb'</code>.</li>
+
+  <li><code>myPicker.color()</code> returns the current color as a <a
+  href="/reference/p5/p5.Color">p5.Color</a> object.</li>
+
+  </ul>
+line: 1759
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myPicker;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a color picker and set its position.
+      myPicker = createColorPicker('deeppink');
+      myPicker.position(0, 100);
+
+      describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
+    }
+
+    function draw() {
+      // Use the color picker to paint the background.
+      let c = myPicker.color();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myPicker;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a color picker and set its position.
+      myPicker = createColorPicker('deeppink');
+      myPicker.position(0, 100);
+
+      describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
+    }
+
+    function draw() {
+      // Use the color picker to paint the background.
+      let c = myPicker.value();
+      background(c);
+
+      // Display the current color as a hex string.
+      text(c, 25, 55);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: >
+      <p>default color as a <a
+      href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"
+      target="_blank">CSS color string</a>.</p>
+    type: String|p5.Color
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createColorPicker
diff --git a/src/content/reference/en/p5 copy/createConvolver.mdx b/src/content/reference/en/p5 copy/createConvolver.mdx
new file mode 100644
index 0000000000..89fba3be4e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createConvolver.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L8885
+title: createConvolver
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Create a p5.Convolver. Accepts a path to a soundfile
+  that will be used to generate an impulse response.</p>
+line: 8885
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    let cVerb, sound;
+    function preload() {
+      // We have both MP3 and OGG versions of all sound assets
+      soundFormats('ogg', 'mp3');
+
+      // Try replacing 'bx-spring' with other soundfiles like
+      // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+      cVerb = createConvolver('/assets/bx-spring.mp3');
+
+      // Try replacing 'Damscray_DancingTiger' with
+      // 'beat', 'doorbell', lucky_dragons_-_power_melody'
+      sound = loadSound('/assets/Damscray_DancingTiger.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playSound);
+      background(220);
+      text('tap to play', 20, 20);
+
+      // disconnect from main output...
+      sound.disconnect();
+
+      // ...and process with cVerb
+      // so that we only hear the convolution
+      cVerb.process(sound);
+    }
+
+    function playSound() {
+      sound.play();
+    }
+    </code></div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path to a sound file</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to call if loading is successful.
+                                    The object will be passed in as the argument
+                                    to the callback function.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if loading is not successful.
+                                    A custom error will be passed in as the argument
+                                    to the callback function.</p>
+    type: Function
+    optional: true
+return:
+  description: ''
+  type: p5.Convolver
+chainable: false
+---
+
+
+# createConvolver
diff --git a/src/content/reference/en/p5 copy/createDiv.mdx b/src/content/reference/en/p5 copy/createDiv.mdx
new file mode 100644
index 0000000000..610e0a4f67
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createDiv.mdx	
@@ -0,0 +1,72 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L491
+title: createDiv
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><div></div></code> element.</p>
+
+  <p><code><div></div></code> elements are commonly used as containers for
+
+  other elements.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code><div></div></code>.</p>
+line: 491
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a div element and set its position.
+      let div = createDiv('p5*js');
+      div.position(25, 35);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an h3 element within the div.
+      let div = createDiv('<h3>p5*js</h3>');
+      div.position(20, 5);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: html
+    description: >
+      <p>inner HTML for the new <code>&lt;div&gt;&lt;/div&gt;</code>
+      element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createDiv
diff --git a/src/content/reference/en/p5 copy/createElement.mdx b/src/content/reference/en/p5 copy/createElement.mdx
new file mode 100644
index 0000000000..5969416251
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createElement.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2493
+title: createElement
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
+
+  <p>The first parameter, <code>tag</code>, is a string an HTML tag such as
+  <code>'h5'</code>.</p>
+
+  <p>The second parameter, <code>content</code>, is optional. It's a string that
+  sets the
+
+  HTML content to insert into the new element. New elements have no content
+
+  by default.</p>
+line: 2493
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an h5 element with nothing in it.
+      createElement('h5');
+
+      describe('A gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an h5 element with the content "p5*js".
+      let h5 = createElement('h5', 'p5*js');
+
+      // Set the element's style and position.
+      h5.style('color', 'deeppink');
+      h5.position(30, 15);
+
+      describe('The text "p5*js" written in pink in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: tag
+    description: |
+      <p>tag for the new element.</p>
+    type: String
+  - name: content
+    description: |
+      <p>HTML content to insert into the element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createElement
diff --git a/src/content/reference/en/p5 copy/createFileInput.mdx b/src/content/reference/en/p5 copy/createFileInput.mdx
new file mode 100644
index 0000000000..295f2a0434
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createFileInput.mdx	
@@ -0,0 +1,138 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1942
+title: createFileInput
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code><input></input></code> element of type
+  <code>'file'</code>.</p>
+
+  <p><code>createFileInput()</code> allows users to select local files for use
+  in a sketch.
+
+  It returns a <a href="/reference/p5/p5.File">p5.File</a> object.</p>
+
+  <p>The first parameter, <code>callback</code>, is a function that's called
+  when the file
+
+  loads. The callback function should have one parameter, <code>file</code>,
+  that's a
+
+  <a href="/reference/p5/p5.File">p5.File</a> object.</p>
+
+  <p>The second parameter, <code>multiple</code>, is optional. It's a boolean
+  value that
+
+  allows loading multiple files if set to <code>true</code>. If
+  <code>true</code>, <code>callback</code>
+
+  will be called once per file.</p>
+line: 1942
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to select an image to
+    // load and display.
+    let input;
+    let img;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a file input and place it beneath
+      // the canvas.
+      input = createFileInput(handleImage);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the image if loaded.
+      if (img) {
+        image(img, 0, 0, width, height);
+      }
+    }
+
+    // Create an image if the file is an image.
+    function handleImage(file) {
+      if (file.type === 'image') {
+        img = createImg(file.data, '');
+        img.hide();
+      } else {
+        img = null;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Use the file input to select multiple images
+    // to load and display.
+    let input;
+    let images = [];
+
+    function setup() {
+      // Create a file input and place it beneath
+      // the canvas. Allow it to load multiple files.
+      input = createFileInput(handleImage, true);
+      input.position(0, 100);
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the images if loaded. Each image
+      // is drawn 20 pixels lower than the
+      // previous image.
+      for (let i = 0; i < images.length; i += 1) {
+        // Calculate the y-coordinate.
+        let y = i * 20;
+
+        // Draw the image.
+        image(images[i], 0, y, 100, 100);
+      }
+
+      describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
+    }
+
+    // Create an image if the file is an image,
+    // then add it to the images array.
+    function handleImage(file) {
+      if (file.type === 'image') {
+        let img = createImg(file.data, '');
+        img.hide();
+        images.push(img);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: callback
+    description: |
+      <p>function to call once the file loads.</p>
+    type: Function
+  - name: multiple
+    description: |
+      <p>allow multiple files to be selected.</p>
+    type: Boolean
+    optional: true
+return:
+  description: new <a href="#/p5.File">p5.File</a> object.
+  type: p5.File
+chainable: false
+---
+
+
+# createFileInput
diff --git a/src/content/reference/en/p5 copy/createFilterShader.mdx b/src/content/reference/en/p5 copy/createFilterShader.mdx
new file mode 100644
index 0000000000..5c6c9a4ec5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createFilterShader.mdx	
@@ -0,0 +1,148 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L540
+title: createFilterShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Creates a <a href="/reference/p5/p5.Shader">p5.Shader</a> object to be used
+  with the
+
+  <a href="/reference/p5/filter/">filter()</a> function.</p>
+
+  <p><code>createFilterShader()</code> works like
+
+  <a href="/reference/p5/createShader/">createShader()</a> but has a default
+  vertex
+
+  shader included. <code>createFilterShader()</code> is intended to be used
+  along with
+
+  <a href="/reference/p5/filter/">filter()</a> for filtering the contents of a
+  canvas.
+
+  A filter shader will be applied to the whole canvas instead of just
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects.</p>
+
+  <p>The parameter, <code>fragSrc</code>, sets the fragment shader. It’s a
+  string that
+
+  contains the fragment shader program written in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>.</p>
+
+  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> object that's created
+  has some
+
+  uniforms that can be set:</p>
+
+  <ul>
+
+  <li><code>sampler2D tex0</code>, which contains the canvas contents as a
+  texture.</li>
+
+  <li><code>vec2 canvasSize</code>, which is the width and height of the canvas,
+  not including pixel density.</li>
+
+  <li><code>vec2 texelSize</code>, which is the size of a physical pixel
+  including pixel density. This is calculated as <code>1.0 / (width *
+  density)</code> for the pixel width and <code>1.0 / (height * density)</code>
+  for the pixel height.</li>
+
+  </ul>
+
+  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> that's created also
+  provides
+
+  <code>varying vec2 vTexCoord</code>, a coordinate with values between 0 and 1.
+
+  <code>vTexCoord</code> describes where on the canvas the pixel will be
+  drawn.</p>
+
+  <p>For more info about filters and shaders, see Adam Ferriss' <a
+  href="https://github.com/aferriss/p5jsShaderExamples/">repo of shader
+  examples</a>
+
+  or the <a href="https://p5js.org/tutorials/intro-to-shaders/">Introduction to
+  Shaders</a> tutorial.</p>
+line: 540
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      let fragSrc = `precision highp float;
+      void main() {
+        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+      }`;
+
+      createCanvas(100, 100, WEBGL);
+      let s = createFilterShader(fragSrc);
+      filter(s);
+      describe('a yellow canvas');
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    let img, s;
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+    function setup() {
+      let fragSrc = `precision highp float;
+
+      // x,y coordinates, given from the vertex shader
+      varying vec2 vTexCoord;
+
+      // the canvas contents, given from filter()
+      uniform sampler2D tex0;
+      // other useful information from the canvas
+      uniform vec2 texelSize;
+      uniform vec2 canvasSize;
+      // a custom variable from this sketch
+      uniform float darkness;
+
+      void main() {
+        // get the color at current pixel
+        vec4 color = texture2D(tex0, vTexCoord);
+        // set the output color
+        color.b = 1.0;
+        color *= darkness;
+        gl_FragColor = vec4(color.rgb, 1.0);
+      }`;
+
+      createCanvas(100, 100, WEBGL);
+      s = createFilterShader(fragSrc);
+    }
+    function draw() {
+      image(img, -50, -50);
+      s.setUniform('darkness', 0.5);
+      filter(s);
+      describe('a image of bricks tinted dark blue');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader.</p>
+    type: String
+return:
+  description: new shader object created from the fragment shader.
+  type: p5.Shader
+chainable: false
+---
+
+
+# createFilterShader
diff --git a/src/content/reference/en/p5 copy/createFramebuffer.mdx b/src/content/reference/en/p5 copy/createFramebuffer.mdx
new file mode 100644
index 0000000000..80d8199779
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createFramebuffer.mdx	
@@ -0,0 +1,208 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L495
+title: createFramebuffer
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates and a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+  object.</p>
+
+  <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
+  separate drawing
+
+  surfaces that can be used as textures in WebGL mode. They're similar to
+
+  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally run
+  much
+
+  faster when used as textures.</p>
+
+  <p>The parameter, <code>options</code>, is optional. An object can be passed
+  to configure
+
+  the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
+  available
+
+  properties are:</p>
+
+  <ul>
+
+  <li><code>format</code>: data format of the texture, either
+  <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>.
+  Default is <code>UNSIGNED_BYTE</code>.</li>
+
+  <li><code>channels</code>: whether to store <code>RGB</code> or
+  <code>RGBA</code> color channels. Default is to match the main canvas which is
+  <code>RGBA</code>.</li>
+
+  <li><code>depth</code>: whether to include a depth buffer. Default is
+  <code>true</code>.</li>
+
+  <li><code>depthFormat</code>: data format of depth information, either
+  <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
+  <code>FLOAT</code>.</li>
+
+  <li><code>stencil</code>: whether to include a stencil buffer for masking.
+  <code>depth</code> must be <code>true</code> for this feature to work.
+  Defaults to the value of <code>depth</code> which is <code>true</code>.</li>
+
+  <li><code>antialias</code>: whether to perform anti-aliasing. If set to
+  <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be
+  used by default. The number of samples can also be set, as in <code>{
+  antialias: 4 }</code>. Default is to match <a
+  href="/reference/p5/setAttributes/">setAttributes()</a> which is
+  <code>false</code> (<code>true</code> in Safari).</li>
+
+  <li><code>width</code>: width of the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
+  always match the main canvas width.</li>
+
+  <li><code>height</code>: height of the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
+  always match the main canvas height.</li>
+
+  <li><code>density</code>: pixel density of the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
+  always match the main canvas pixel density.</li>
+
+  <li><code>textureFiltering</code>: how to read values from the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
+  <code>LINEAR</code> (nearby pixels will be interpolated) or
+  <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code>
+  when using the texture as an image and <code>NEAREST</code> if reading the
+  texture as data. Default is <code>LINEAR</code>.</li>
+
+  </ul>
+
+  <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
+  attributes are set, they won't automatically match the main canvas and must be
+  changed manually.</p>
+
+  <p>Note: <code>createFramebuffer()</code> can only be used in WebGL mode.</p>
+line: 495
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myBuffer;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Framebuffer object.
+      myBuffer = createFramebuffer();
+
+      describe('A grid of white toruses rotating against a dark gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Start drawing to the p5.Framebuffer object.
+      myBuffer.begin();
+
+      // Clear the drawing surface.
+      clear();
+
+      // Turn on the lights.
+      lights();
+
+      // Rotate the coordinate system.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Style the torus.
+      noStroke();
+
+      // Draw the torus.
+      torus(20);
+
+      // Stop drawing to the p5.Framebuffer object.
+      myBuffer.end();
+
+      // Iterate from left to right.
+      for (let x = -50; x < 50; x += 25) {
+        // Iterate from top to bottom.
+        for (let y = -50; y < 50; y += 25) {
+          // Draw the p5.Framebuffer object to the canvas.
+          image(myBuffer, x, y, 25, 25);
+        }
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myBuffer;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create an options object.
+      let options = { width: 25, height: 25 };
+
+      // Create a p5.Framebuffer object.
+      // Use options for configuration.
+      myBuffer = createFramebuffer(options);
+
+      describe('A grid of white toruses rotating against a dark gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Start drawing to the p5.Framebuffer object.
+      myBuffer.begin();
+
+      // Clear the drawing surface.
+      clear();
+
+      // Turn on the lights.
+      lights();
+
+      // Rotate the coordinate system.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Style the torus.
+      noStroke();
+
+      // Draw the torus.
+      torus(5, 2.5);
+
+      // Stop drawing to the p5.Framebuffer object.
+      myBuffer.end();
+
+      // Iterate from left to right.
+      for (let x = -50; x < 50; x += 25) {
+        // Iterate from top to bottom.
+        for (let y = -50; y < 50; y += 25) {
+          // Draw the p5.Framebuffer object to the canvas.
+          image(myBuffer, x, y);
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: options
+    description: |
+      <p>configuration options.</p>
+    type: Object
+    optional: true
+return:
+  description: new framebuffer.
+  type: p5.Framebuffer
+chainable: false
+---
+
+
+# createFramebuffer
diff --git a/src/content/reference/en/p5 copy/createGraphics.mdx b/src/content/reference/en/p5 copy/createGraphics.mdx
new file mode 100644
index 0000000000..6d75f158f4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createGraphics.mdx	
@@ -0,0 +1,191 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L370
+title: createGraphics
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates a <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.</p>
+
+  <p><code>createGraphics()</code> creates an offscreen drawing canvas (graphics
+  buffer)
+
+  and returns it as a <a href="/reference/p5/p5.Graphics">p5.Graphics</a>
+  object. Drawing
+
+  to a separate graphics buffer can be helpful for performance and for
+
+  organizing code.</p>
+
+  <p>The first two parameters, <code>width</code> and <code>height</code>, are
+  optional. They set the
+
+  dimensions of the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.
+  For
+
+  example, calling <code>createGraphics(900, 500)</code> creates a graphics
+  buffer
+
+  that's 900×500 pixels.</p>
+
+  <p>The third parameter is also optional. If either of the constants
+  <code>P2D</code> or
+
+  <code>WEBGL</code> is passed, as in <code>createGraphics(900, 500,
+  WEBGL)</code>, then it will set
+
+  the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object's rendering
+  mode. If an
+
+  existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createGraphics(900, 500, myCanvas)</code>, then it will
+  be used
+
+  by the graphics buffer.</p>
+
+  <p>The fourth parameter is also optional. If an existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createGraphics(900, 500, WEBGL, myCanvas)</code>, then
+  it will be
+
+  used by the graphics buffer.</p>
+
+  <p>Note: In WebGL mode, the <a
+  href="/reference/p5/p5.Graphics">p5.Graphics</a> object
+
+  will use a WebGL2 context if it's supported by the browser. Check the
+
+  <a href="/reference/p5/webglVersion/">webglVersion</a> system variable to
+  check what
+
+  version is being used, or call <code>setAttributes({ version: 1 })</code> to
+  create a
+
+  WebGL1 context.</p>
+line: 370
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    //  Double-click to draw the contents of the graphics buffer.
+
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Create the p5.Graphics object.
+      pg = createGraphics(50, 50);
+
+      // Draw to the graphics buffer.
+      pg.background(100);
+      pg.circle(pg.width / 2, pg.height / 2, 20);
+
+      describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');
+    }
+
+    // Display the graphics buffer when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        image(pg, 25, 25);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    //  Double-click to draw the contents of the graphics buffer.
+
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Create the p5.Graphics object in WebGL mode.
+      pg = createGraphics(50, 50, WEBGL);
+
+      // Draw to the graphics buffer.
+      pg.background(100);
+      pg.lights();
+      pg.noStroke();
+      pg.rotateX(QUARTER_PI);
+      pg.rotateY(QUARTER_PI);
+      pg.torus(15, 5);
+
+      describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');
+    }
+
+    // Display the graphics buffer when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        image(pg, 25, 25);
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new graphics buffer.
+  type: p5.Graphics
+overloads:
+  - line: 370
+    params:
+      - name: width
+        description: |
+          <p>width of the graphics buffer.</p>
+        type: Number
+      - name: height
+        description: |
+          <p>height of the graphics buffer.</p>
+        type: Number
+      - name: renderer
+        description: |
+          <p>either P2D or WEBGL. Defaults to P2D.</p>
+        type: Constant
+        optional: true
+      - name: canvas
+        description: |
+          <p>existing canvas element that should be
+                                               used for the graphics buffer..</p>
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: new graphics buffer.
+      type: p5.Graphics
+  - line: 475
+    params:
+      - name: width
+        description: ''
+        type: Number
+      - name: height
+        description: ''
+        type: Number
+      - name: canvas
+        description: ''
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: ''
+      type: p5.Graphics
+chainable: false
+---
+
+
+# createGraphics
diff --git a/src/content/reference/en/p5 copy/createImage.mdx b/src/content/reference/en/p5 copy/createImage.mdx
new file mode 100644
index 0000000000..33c151c315
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createImage.mdx	
@@ -0,0 +1,172 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L15
+title: createImage
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+  <p><code>createImage()</code> uses the <code>width</code> and
+  <code>height</code> parameters to set the new
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object's dimensions in pixels.
+  The new
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> can be modified by updating its
+
+  <a href="/reference/p5.Image/pixels/">pixels</a> array or by calling its
+
+  <a href="/reference/p5.Image/get/">get()</a> and
+
+  <a href="/reference/p5.Image/set/">set()</a> methods. The
+
+  <a href="/reference/p5.Image/loadPixels/">loadPixels()</a> method must be
+  called
+
+  before reading or modifying pixel values. The
+
+  <a href="/reference/p5.Image/updatePixels/">updatePixels()</a> method must be
+  called
+
+  for updates to take effect.</p>
+
+  <p>Note: The new <a href="/reference/p5/p5.Image">p5.Image</a> object is
+  transparent by
+
+  default.</p>
+line: 15
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the image's pixels into memory.
+      img.loadPixels();
+
+      // Set all the image's pixels to black.
+      for (let x = 0; x < img.width; x += 1) {
+        for (let y = 0; y < img.height; y += 1) {
+          img.set(x, y, 0);
+        }
+      }
+
+      // Update the image's pixel values.
+      img.updatePixels();
+
+      // Draw the image.
+      image(img, 17, 17);
+
+      describe('A black square drawn in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the image's pixels into memory.
+      img.loadPixels();
+
+      // Create a color gradient.
+      for (let x = 0; x < img.width; x += 1) {
+        for (let y = 0; y < img.height; y += 1) {
+          // Calculate the transparency.
+          let a = map(x, 0, img.width, 0, 255);
+
+          // Create a p5.Color object.
+          let c = color(0, a);
+
+          // Set the pixel's color.
+          img.set(x, y, c);
+        }
+      }
+
+      // Update the image's pixels.
+      img.updatePixels();
+
+      // Display the image.
+      image(img, 17, 17);
+
+      describe('A square with a horizontal color gradient that transitions from gray to black.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the pixels into memory.
+      img.loadPixels();
+      // Get the current pixel density.
+      let d = pixelDensity();
+
+      // Calculate the pixel that is halfway through the image's pixel array.
+      let halfImage = 4 * (d * img.width) * (d * img.height / 2);
+
+      // Set half of the image's pixels to black.
+      for (let i = 0; i < halfImage; i += 4) {
+        // Red.
+        img.pixels[i] = 0;
+        // Green.
+        img.pixels[i + 1] = 0;
+        // Blue.
+        img.pixels[i + 2] = 0;
+        // Alpha.
+        img.pixels[i + 3] = 255;
+      }
+
+      // Update the image's pixels.
+      img.updatePixels();
+
+      // Display the image.
+      image(img, 17, 17);
+
+      describe('A black square drawn in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width in pixels.</p>
+    type: Integer
+  - name: height
+    description: |
+      <p>height in pixels.</p>
+    type: Integer
+return:
+  description: new <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# createImage
diff --git a/src/content/reference/en/p5 copy/createImg.mdx b/src/content/reference/en/p5 copy/createImg.mdx
new file mode 100644
index 0000000000..22b71d22c4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createImg.mdx	
@@ -0,0 +1,115 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L649
+title: createImg
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code><img></code> element that can appear outside of the
+  canvas.</p>
+
+  <p>The first parameter, <code>src</code>, is a string with the path to the
+  image file.
+
+  <code>src</code> should be a relative path, as in
+  <code>'/assets/image.png'</code>, or a URL, as
+
+  in <code>'https://example.com/image.png'</code>.</p>
+
+  <p>The second parameter, <code>alt</code>, is a string with the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes"
+  target="_blank">alternate text</a>
+
+  for the image. An empty string <code>''</code> can be used for images that
+  aren't displayed.</p>
+
+  <p>The third parameter, <code>crossOrigin</code>, is optional. It's a string
+  that sets the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes/"
+  target="_blank">crossOrigin property</a>
+
+  of the image. Use <code>'anonymous'</code> or <code>'use-credentials'</code>
+  to fetch the image
+
+  with cross-origin access.</p>
+
+  <p>The fourth parameter, <code>callback</code>, is also optional. It sets a
+  function to
+
+  call after the image loads. The new image is passed to the callback
+
+  function as a <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
+line: 649
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      let img = createImg(
+        'https://p5js.org//assets/img/asterisk-01.png',
+        'The p5.js magenta asterisk.'
+      );
+      img.position(0, -10);
+
+      describe('A gray square with a magenta asterisk in its center.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 649
+    params:
+      - name: src
+        description: |
+          <p>relative path or URL for the image.</p>
+        type: String
+      - name: alt
+        description: |
+          <p>alternate text for the image.</p>
+        type: String
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 693
+    params:
+      - name: src
+        description: ''
+        type: String
+      - name: alt
+        description: ''
+        type: String
+      - name: crossOrigin
+        description: |
+          <p>crossOrigin property to use when fetching the image.</p>
+        type: String
+        optional: true
+      - name: successCallback
+        description: |
+          <p>function to call once the image loads. The new image will be passed
+                                               to the function as a <a href="#/p5.Element">p5.Element</a> object.</p>
+        type: Function
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+chainable: false
+---
+
+
+# createImg
diff --git a/src/content/reference/en/p5 copy/createInput.mdx b/src/content/reference/en/p5 copy/createInput.mdx
new file mode 100644
index 0000000000..3a790ee6b2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createInput.mdx	
@@ -0,0 +1,118 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1859
+title: createInput
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a text <code><input></input></code> element.</p>
+
+  <p>Call <code>myInput.size()</code> to set the length of the text box.</p>
+
+  <p>The first parameter, <code>value</code>, is optional. It's a string that
+  sets the
+
+  input's default value. The input is blank by default.</p>
+
+  <p>The second parameter, <code>type</code>, is also optional. It's a string
+  that
+
+  specifies the type of text being input. See MDN for a full
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/"
+  target="_blank">list of options</a>.
+
+  The default is <code>'text'</code>.</p>
+line: 1859
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myInput;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an input element and place it
+      // beneath the canvas.
+      myInput = createInput();
+      myInput.position(0, 100);
+
+      describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input to display a message.
+      let msg = myInput.value();
+      text(msg, 25, 55);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myInput;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an input element and place it
+      // beneath the canvas. Set its default
+      // text to "hello!".
+      myInput = createInput('hello!');
+      myInput.position(0, 100);
+
+      describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input to display a message.
+      let msg = myInput.value();
+      text(msg, 25, 55);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 1859
+    params:
+      - name: value
+        description: >
+          <p>default value of the input box. Defaults to an empty string
+          <code>''</code>.</p>
+        type: String
+        optional: true
+      - name: type
+        description: |
+          <p>type of input. Defaults to <code>'text'</code>.</p>
+        type: String
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1929
+    params:
+      - name: value
+        description: ''
+        type: String
+        optional: true
+    return:
+      description: ''
+      type: p5.Element
+chainable: false
+---
+
+
+# createInput
diff --git a/src/content/reference/en/p5 copy/createModel.mdx b/src/content/reference/en/p5 copy/createModel.mdx
new file mode 100644
index 0000000000..c94e95900f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createModel.mdx	
@@ -0,0 +1,193 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L1132
+title: createModel
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: >
+  <p>Load a 3d model from an OBJ or STL string.</p>
+
+  <p>OBJ and STL files lack a built-in sense of scale, causing models exported
+  from different programs to vary in size.
+
+  If your model doesn't display correctly, consider using
+  <code>loadModel()</code> with <code>normalize</code> set to <code>true</code>
+  to standardize its size.
+
+  Further adjustments can be made using the <code>scale()</code> function.</p>
+
+  <p>Also, the support for colored STL files is not present. STL files with
+  color will be
+
+  rendered without color properties.</p>
+
+  <ul>
+
+  <li>Options can include:</li>
+
+  </ul>
+
+  <ul>
+
+  <li><code>modelString</code>: Specifies the plain text string of either an stl
+  or obj file to be loaded.</li>
+
+  <li><code>fileType</code>: Defines the file extension of the model.</li>
+
+  <li><code>normalize</code>: Enables standardized size scaling during loading
+  if set to true.</li>
+
+  <li><code>successCallback</code>: Callback for post-loading actions with the
+  3D model object.</li>
+
+  <li><code>failureCallback</code>: Handles errors if model loading fails,
+  receiving an event error.</li>
+
+  <li><code>flipU</code>: Flips the U texture coordinates of the model.</li>
+
+  <li><code>flipV</code>: Flips the V texture coordinates of the model.</li>
+
+  </ul>
+line: 1132
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    const octahedron_model = `
+    v 0.000000E+00 0.000000E+00 40.0000
+    v 22.5000 22.5000 0.000000E+00
+    v 22.5000 -22.5000 0.000000E+00
+    v -22.5000 -22.5000 0.000000E+00
+    v -22.5000 22.5000 0.000000E+00
+    v 0.000000E+00 0.000000E+00 -40.0000
+    f     1 2 3
+    f     1 3 4
+    f     1 4 5
+    f     1 5 2
+    f     6 5 4
+    f     6 4 3
+    f     6 3 2
+    f     6 2 5
+    `;
+    //draw a spinning octahedron
+    let octahedron;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      octahedron = createModel(octahedron_model, '.obj');
+      describe('Vertically rotating 3D octahedron.');
+    }
+
+    function draw() {
+      background(200);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      model(octahedron);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+  type: p5.Geometry
+overloads:
+  - line: 1132
+    params:
+      - name: modelString
+        description: |
+          <p>String of the object to be loaded</p>
+        type: String
+      - name: fileType
+        description: |
+          <p>The file extension of the model
+                                               (<code>.stl</code>, <code>.obj</code>).</p>
+        type: String
+        optional: true
+      - name: normalize
+        description: |
+          <p>If true, scale the model to a
+                                               standardized size when loading</p>
+        type: Boolean
+      - name: successCallback
+        description: |
+          <p>Function to be called
+                                              once the model is loaded. Will be passed
+                                              the 3D model object.</p>
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: |
+          <p>called with event error if
+                                                  the model fails to load.</p>
+        type: Function(Event)
+        optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+  - line: 1202
+    params:
+      - name: modelString
+        description: ''
+        type: String
+      - name: fileType
+        description: ''
+        type: String
+        optional: true
+      - name: successCallback
+        description: ''
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: ''
+        type: Function(Event)
+        optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+  - line: 1210
+    params:
+      - name: modelString
+        description: ''
+        type: String
+      - name: fileType
+        description: ''
+        type: String
+        optional: true
+      - name: options
+        description: ''
+        type: Object
+        optional: true
+        props:
+          - name: successCallback
+            description: ''
+            type: function(p5.Geometry)
+            optional: true
+          - name: failureCallback
+            description: ''
+            type: Function(Event)
+            optional: true
+          - name: normalize
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipU
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipV
+            description: ''
+            type: Boolean
+            optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+chainable: false
+---
+
+
+# createModel
diff --git a/src/content/reference/en/p5 copy/createNumberDict.mdx b/src/content/reference/en/p5 copy/createNumberDict.mdx
new file mode 100644
index 0000000000..952410a222
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createNumberDict.mdx	
@@ -0,0 +1,57 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L48
+title: createNumberDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: >
+  <p>Creates a new instance of <a
+  href="/reference/p5/p5.NumberDict">p5.NumberDict</a> using the key-value pair
+   or object you provide.</p>
+line: 48
+isConstructor: false
+itemtype: method
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myDictionary = createNumberDict(100, 42);
+       print(myDictionary.hasKey(100)); // logs true to console
+      let anotherDictionary = createNumberDict({ 200: 84 });
+       print(anotherDictionary.hasKey(200)); // logs true to console
+     }
+     </code></div>
+class: p5
+return:
+  description: ''
+  type: p5.NumberDict
+overloads:
+  - line: 48
+    params:
+      - name: key
+        description: ''
+        type: Number
+      - name: value
+        description: ''
+        type: Number
+    return:
+      description: ''
+      type: p5.NumberDict
+  - line: 71
+    params:
+      - name: object
+        description: |
+          <p>object</p>
+        type: Object
+    return:
+      description: ''
+      type: p5.NumberDict
+chainable: false
+---
+
+
+# createNumberDict
diff --git a/src/content/reference/en/p5 copy/createP.mdx b/src/content/reference/en/p5 copy/createP.mdx
new file mode 100644
index 0000000000..6d3005fc37
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createP.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L543
+title: createP
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a paragraph element.</p>
+
+  <p><code><p></p></code> elements are commonly used for paragraph-length
+  text.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code><p></p></code>.</p>
+line: 543
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a paragraph element and set its position.
+      let p = createP('Tell me a story.');
+      p.position(5, 0);
+
+      describe('A gray square displaying the text "Tell me a story." written in black.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: html
+    description: |
+      <p>inner HTML for the new <code>&lt;p&gt;&lt;/p&gt;</code> element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createP
diff --git a/src/content/reference/en/p5 copy/createRadio.mdx b/src/content/reference/en/p5 copy/createRadio.mdx
new file mode 100644
index 0000000000..f2b8a2a81c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createRadio.mdx	
@@ -0,0 +1,223 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1440
+title: createRadio
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a radio button element.</p>
+
+  <p>The parameter is optional. If a string is passed, as in
+
+  <code>let myRadio = createSelect('food')</code>, then each radio option will
+
+  have <code>"food"</code> as its <code>name</code> parameter: <code><input
+  name="food"></code>.
+
+  If an existing <code><div></div></code> or <code><span></span></code>
+
+  element is passed, as in <code>let myRadio = createSelect(container)</code>,
+  it will
+
+  become the radio button's parent element.</p>
+
+  <p>Radio buttons extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a few
+
+  helpful methods for managing options:</p>
+
+  <ul>
+
+  <li><code>myRadio.option(value, [label])</code> adds an option to the menu.
+  The first parameter, <code>value</code>, is a string that sets the option's
+  value and label. The second parameter, <code>label</code>, is optional. If
+  provided, it sets the label displayed for the <code>value</code>. If an option
+  with <code>value</code> already exists, its label is changed and its value is
+  returned.</li>
+
+  <li><code>myRadio.value()</code> returns the currently-selected option's
+  value.</li>
+
+  <li><code>myRadio.selected()</code> returns the currently-selected
+  option.</li>
+
+  <li><code>myRadio.selected(value)</code> selects the given option and returns
+  it as an <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/"
+  target="_blank"><code>HTMLInputElement</code></a>.</li>
+
+  <li><code>myRadio.disable(shouldDisable)</code> Disables the radio button if
+  <code>true</code> is passed, and enables it if <code>false</code> is
+  passed.</li>
+
+  </ul>
+line: 1440
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let style = document.createElement('style');
+    style.innerHTML = `
+    .p5-radio label {
+       display: flex;
+       align-items: center;
+     }
+     .p5-radio input {
+       margin-right: 5px;
+     }
+     `;
+    document.head.appendChild(style);
+
+    let myRadio;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.class('p5-radio');
+      myRadio.size(60);
+
+      // Add a few color options.
+      myRadio.option('red');
+      myRadio.option('yellow');
+      myRadio.option('blue');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let g = myRadio.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myRadio;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.size(50);
+
+      // Add a few color options.
+      // Color values are labeled with
+      // emotions they evoke.
+      myRadio.option('red', 'love');
+      myRadio.option('yellow', 'joy');
+      myRadio.option('blue', 'trust');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let c = myRadio.value();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myRadio;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.class('p5-radio');
+      myRadio.size(50);
+
+      // Add a few color options.
+      myRadio.option('red');
+      myRadio.option('yellow');
+      myRadio.option('blue');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      // Create a button and place it beneath the canvas.
+      let btn = createButton('disable');
+      btn.position(0, 100);
+
+      // Call disableRadio() when btn is pressed.
+      btn.mousePressed(disableRadio);
+
+      describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let c = myRadio.value();
+      background(c);
+    }
+
+    // Disable myRadio.
+    function disableRadio() {
+      myRadio.disable(true);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 1440
+    params:
+      - name: containerElement
+        description: >
+          <p>container HTML Element, either a
+          <code>&lt;div&gt;&lt;/div&gt;</code>
+
+          or <code>&lt;span&gt;&lt;/span&gt;</code>.</p>
+        type: Object
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1588
+    params:
+      - name: name
+        description: >
+          <p>name parameter assigned to each option's
+          <code>&lt;input&gt;&lt;/input&gt;</code> element.</p>
+        type: String
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1593
+    params: []
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+chainable: false
+---
+
+
+# createRadio
diff --git a/src/content/reference/en/p5 copy/createSelect.mdx b/src/content/reference/en/p5 copy/createSelect.mdx
new file mode 100644
index 0000000000..496f4082e6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createSelect.mdx	
@@ -0,0 +1,235 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1159
+title: createSelect
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a dropdown menu <code><select></select></code> element.</p>
+
+  <p>The parameter is optional. If <code>true</code> is passed, as in
+
+  <code>let mySelect = createSelect(true)</code>, then the dropdown will support
+
+  multiple selections. If an existing <code><select></select></code> element
+
+  is passed, as in <code>let mySelect = createSelect(otherSelect)</code>, the
+  existing
+
+  element will be wrapped in a new <a
+  href="/reference/p5/p5.Element">p5.Element</a>
+
+  object.</p>
+
+  <p>Dropdowns extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a few
+
+  helpful methods for managing options:</p>
+
+  <ul>
+
+  <li><code>mySelect.option(name, [value])</code> adds an option to the menu.
+  The first paremeter, <code>name</code>, is a string that sets the option's
+  name and value. The second parameter, <code>value</code>, is optional. If
+  provided, it sets the value that corresponds to the key <code>name</code>. If
+  an option with <code>name</code> already exists, its value is changed to
+  <code>value</code>.</li>
+
+  <li><code>mySelect.value()</code> returns the currently-selected option's
+  value.</li>
+
+  <li><code>mySelect.selected()</code> returns the currently-selected
+  option.</li>
+
+  <li><code>mySelect.selected(option)</code> selects the given option by
+  default.</li>
+
+  <li><code>mySelect.disable()</code> marks the whole dropdown element as
+  disabled.</li>
+
+  <li><code>mySelect.disable(option)</code> marks a given option as
+  disabled.</li>
+
+  <li><code>mySelect.enable()</code> marks the whole dropdown element as
+  enabled.</li>
+
+  <li><code>mySelect.enable(option)</code> marks a given option as enabled.</li>
+
+  </ul>
+line: 1159
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      // Set the selected option to "red".
+      mySelect.selected('red');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      // Set the selected option to "red".
+      mySelect.selected('red');
+
+      // Disable the "yellow" option.
+      mySelect.disable('yellow');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options with names and values.
+      mySelect.option('one', 'red');
+      mySelect.option('two', 'green');
+      mySelect.option('three', 'blue');
+      mySelect.option('four', 'yellow');
+
+      // Set the selected option to "one".
+      mySelect.selected('one');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Hold CTRL to select multiple options on Windows and Linux.
+    // Hold CMD to select multiple options on macOS.
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and allow multiple selections.
+      // Place it beneath the canvas.
+      mySelect = createSelect(true);
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the selected value(s) to draw circles.
+      let colors = mySelect.selected();
+      for (let i = 0; i < colors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = 10 + i * 20;
+
+        // Access the color.
+        let c = colors[i];
+
+        // Draw the circle.
+        fill(c);
+        circle(x, 50, 20);
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 1159
+    params:
+      - name: multiple
+        description: |
+          <p>support multiple selections.</p>
+        type: Boolean
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1324
+    params:
+      - name: existing
+        description: >
+          <p>select element to wrap, either as a <a
+          href="#/p5.Element">p5.Element</a> or
+                                   a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" target="_blank">HTMLSelectElement</a>.</p>
+        type: Object
+    return:
+      description: ''
+      type: p5.Element
+chainable: false
+---
+
+
+# createSelect
diff --git a/src/content/reference/en/p5 copy/createShader.mdx b/src/content/reference/en/p5 copy/createShader.mdx
new file mode 100644
index 0000000000..c595145529
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createShader.mdx	
@@ -0,0 +1,438 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L173
+title: createShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
+
+  <p>Shaders are programs that run on the graphics processing unit (GPU). They
+
+  can process many pixels at the same time, making them fast for many
+
+  graphics tasks. They’re written in a language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.</p>
+
+  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
+  it can be
+
+  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
+
+  <code>shader(myShader)</code>. A shader program consists of two parts, a
+  vertex shader
+
+  and a fragment shader. The vertex shader affects where 3D geometry is drawn
+
+  on the screen and the fragment shader affects color.</p>
+
+  <p>The first parameter, <code>vertSrc</code>, sets the vertex shader. It’s a
+  string that
+
+  contains the vertex shader program written in GLSL.</p>
+
+  <p>The second parameter, <code>fragSrc</code>, sets the fragment shader. It’s
+  a string
+
+  that contains the fragment shader program written in GLSL.</p>
+
+  <p>A shader can optionally describe <em>hooks,</em> which are functions in
+  GLSL that
+
+  users may choose to provide to customize the behavior of the shader using the
+
+  <a href="/reference/p5.Shader/modify/"><code>modify()</code></a> method of
+  <code>p5.Shader</code>. These are added by
+
+  describing the hooks in a third parameter, <code>options</code>, and
+  referencing the hooks in
+
+  your <code>vertSrc</code> or <code>fragSrc</code>. Hooks for the vertex or
+  fragment shader are described under
+
+  the <code>vertex</code> and <code>fragment</code> keys of
+  <code>options</code>. Each one is an object. where each key is
+
+  the type and name of a hook function, and each value is a string with the
+
+  parameter list and default implementation of the hook. For example, to let
+  users
+
+  optionally run code at the start of the vertex shader, the options object
+  could
+
+  include:</p>
+
+  <pre><code class="language-js">{
+    vertex: {
+      'void beforeVertex': '() {}'
+    }
+  }
+
+  </code></pre>
+
+  <p>Then, in your vertex shader source, you can run a hook by calling a
+  function
+
+  with the same name prefixed by <code>HOOK_</code>. If you want to check if the
+  default
+
+  hook has been replaced, maybe to avoid extra overhead, you can check if the
+
+  same name prefixed by <code>AUGMENTED_HOOK_</code> has been defined:</p>
+
+  <pre><code class="language-glsl">void main() {
+    // In most cases, just calling the hook is fine:
+    HOOK_beforeVertex();
+
+    // Alternatively, for more efficiency:
+    #ifdef AUGMENTED_HOOK_beforeVertex
+    HOOK_beforeVertex();
+    #endif
+
+    // Add the rest of your shader code here!
+  }
+
+  </code></pre>
+
+  <p>Note: Only filter shaders can be used in 2D mode. All shaders can be used
+
+  in WebGL mode.</p>
+line: 173
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+
+    void main() {
+      // Set each pixel's RGBA value to yellow.
+      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let shaderProgram = createShader(vertSrc, fragSrc);
+
+      // Compile and apply the p5.Shader object.
+      shader(shaderProgram);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A yellow square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+    uniform vec2 p;
+    uniform float r;
+    const int numIterations = 500;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vec2 c = p + gl_FragCoord.xy * r;
+      vec2 z = c;
+      float n = 0.0;
+
+      for (int i = numIterations; i > 0; i--) {
+        if (z.x * z.x + z.y * z.y > 4.0) {
+          n = float(i) / float(numIterations);
+          break;
+        }
+        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+      }
+
+      gl_FragColor = vec4(
+        0.5 - cos(n * 17.0) / 2.0,
+        0.5 - cos(n * 13.0) / 2.0,
+        0.5 - cos(n * 23.0) / 2.0,
+        1.0
+      );
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let mandelbrot = createShader(vertSrc, fragSrc);
+
+      // Compile and apply the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      // p is the center point of the Mandelbrot image.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      // Set the shader uniform r to 0.005.
+      // r is the size of the image in Mandelbrot-space.
+      mandelbrot.setUniform('r', 0.005);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A black fractal image on a magenta background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+    uniform vec2 p;
+    uniform float r;
+    const int numIterations = 500;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vec2 c = p + gl_FragCoord.xy * r;
+      vec2 z = c;
+      float n = 0.0;
+
+      for (int i = numIterations; i > 0; i--) {
+        if (z.x * z.x + z.y * z.y > 4.0) {
+          n = float(i) / float(numIterations);
+          break;
+        }
+
+        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+      }
+
+      gl_FragColor = vec4(
+        0.5 - cos(n * 17.0) / 2.0,
+        0.5 - cos(n * 13.0) / 2.0,
+        0.5 - cos(n * 23.0) / 2.0,
+        1.0
+      );
+    }
+    `;
+
+    let mandelbrot;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      mandelbrot = createShader(vertSrc, fragSrc);
+
+      // Apply the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      // p is the center point of the Mandelbrot image.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates
+      // between 0 and 0.005.
+      // r is the size of the image in Mandelbrot-space.
+      let radius = 0.005 * (sin(frameCount * 0.01) + 1);
+      mandelbrot.setUniform('r', radius);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // A shader with hooks.
+    let myShader;
+
+    // A shader with modified hooks.
+    let modifiedShader;
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+
+    void main() {
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a fragment shader that uses a hook.
+    let fragSrc = `
+    precision highp float;
+    void main() {
+      // Let users override the color
+      gl_FragColor = HOOK_getColor(vec4(1., 0., 0., 1.));
+    }
+    `;
+
+    function setup() {
+      createCanvas(50, 50, WEBGL);
+
+      // Create a shader with hooks
+      myShader = createShader(vertSrc, fragSrc, {
+        fragment: {
+          'vec4 getColor': '(vec4 color) { return color; }'
+        }
+      });
+
+      // Make a version of the shader with a hook overridden
+      modifiedShader = myShader.modify({
+        'vec4 getColor': `(vec4 color) {
+          return vec4(0., 0., 1., 1.);
+        }`
+      });
+    }
+
+    function draw() {
+      noStroke();
+
+      push();
+      shader(myShader);
+      translate(-width/3, 0);
+      sphere(10);
+      pop();
+
+      push();
+      shader(modifiedShader);
+      translate(width/3, 0);
+      sphere(10);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: vertSrc
+    description: |
+      <p>source code for the vertex shader.</p>
+    type: String
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader.</p>
+    type: String
+  - name: options
+    description: >
+      <p>An optional object describing how this shader can
+
+      be augmented with hooks. It can include:</p>
+
+      <ul>
+
+      <li><code>vertex</code>: An object describing the available vertex shader
+      hooks.</li>
+
+      <li><code>fragment</code>: An object describing the available frament
+      shader hooks.</li>
+
+      </ul>
+    type: Object
+    optional: true
+return:
+  description: |-
+    new shader object created from the
+    vertex and fragment shaders.
+  type: p5.Shader
+chainable: false
+---
+
+
+# createShader
diff --git a/src/content/reference/en/p5 copy/createSlider.mdx b/src/content/reference/en/p5 copy/createSlider.mdx
new file mode 100644
index 0000000000..7bdf510078
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createSlider.mdx	
@@ -0,0 +1,162 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L789
+title: createSlider
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a slider <code><input></input></code> element.</p>
+
+  <p>Range sliders are useful for quickly selecting numbers from a given
+  range.</p>
+
+  <p>The first two parameters, <code>min</code> and <code>max</code>, are
+  numbers that set the
+
+  slider's minimum and maximum.</p>
+
+  <p>The third parameter, <code>value</code>, is optional. It's a number that
+  sets the
+
+  slider's default value.</p>
+
+  <p>The fourth parameter, <code>step</code>, is also optional. It's a number
+  that sets the
+
+  spacing between each value in the slider's range. Setting <code>step</code> to
+  0
+
+  allows the slider to move smoothly from <code>min</code> to
+  <code>max</code>.</p>
+line: 789
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      slider = createSlider(0, 255);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      slider = createSlider(0, 255, 0);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      // Set its step size to 50.
+      slider = createSlider(0, 255, 0, 50);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      // Set its step size to 0 so that it moves smoothly.
+      slider = createSlider(0, 255, 0, 0);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: min
+    description: |
+      <p>minimum value of the slider.</p>
+    type: Number
+  - name: max
+    description: |
+      <p>maximum value of the slider.</p>
+    type: Number
+  - name: value
+    description: |
+      <p>default value of the slider.</p>
+    type: Number
+    optional: true
+  - name: step
+    description: |
+      <p>size for each step in the slider's range.</p>
+    type: Number
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createSlider
diff --git a/src/content/reference/en/p5 copy/createSpan.mdx b/src/content/reference/en/p5 copy/createSpan.mdx
new file mode 100644
index 0000000000..ed346b35dc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createSpan.mdx	
@@ -0,0 +1,93 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L578
+title: createSpan
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><span></span></code> element.</p>
+
+  <p><code><span></span></code> elements are commonly used as containers
+
+  for inline elements. For example, a <code><span></span></code>
+
+  can hold part of a sentence that's a
+
+  <span style="color: deeppink;">different</span> style.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code><span></span></code>.</p>
+line: 578
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a span element and set its position.
+      let span = createSpan('p5*js');
+      span.position(25, 35);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a div element as a container.
+      let div = createDiv();
+
+      // Place the div at the center.
+      div.position(25, 35);
+
+      // Create a span element.
+      let s1 = createSpan('p5');
+
+      // Create a second span element.
+      let s2 = createSpan('*');
+
+      // Set the second span's font color.
+      s2.style('color', 'deeppink');
+
+      // Create a third span element.
+      let s3 = createSpan('js');
+
+      // Add all the spans to the container div.
+      s1.parent(div);
+      s2.parent(div);
+      s3.parent(div);
+
+      describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: html
+    description: >
+      <p>inner HTML for the new <code>&lt;span&gt;&lt;/span&gt;</code>
+      element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createSpan
diff --git a/src/content/reference/en/p5 copy/createStringDict.mdx b/src/content/reference/en/p5 copy/createStringDict.mdx
new file mode 100644
index 0000000000..bc080c1276
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createStringDict.mdx	
@@ -0,0 +1,56 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L14
+title: createStringDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Creates a new instance of p5.StringDict using the key-value pair
+   or the object you provide.</p>
+line: 14
+isConstructor: false
+itemtype: method
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myDictionary = createStringDict('p5', 'js');
+       print(myDictionary.hasKey('p5')); // logs true to console
+      let anotherDictionary = createStringDict({ happy: 'coding' });
+       print(anotherDictionary.hasKey('happy')); // logs true to console
+     }
+     </code></div>
+class: p5
+return:
+  description: ''
+  type: p5.StringDict
+overloads:
+  - line: 14
+    params:
+      - name: key
+        description: ''
+        type: String
+      - name: value
+        description: ''
+        type: String
+    return:
+      description: ''
+      type: p5.StringDict
+  - line: 37
+    params:
+      - name: object
+        description: |
+          <p>object</p>
+        type: Object
+    return:
+      description: ''
+      type: p5.StringDict
+chainable: false
+---
+
+
+# createStringDict
diff --git a/src/content/reference/en/p5 copy/createVector.mdx b/src/content/reference/en/p5 copy/createVector.mdx
new file mode 100644
index 0000000000..07ca75ec36
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createVector.mdx	
@@ -0,0 +1,133 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/math.js#L10
+title: createVector
+module: Math
+submodule: Vector
+file: src/math/math.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+
+  <p>A vector can be thought of in different ways. In one view, a vector is like
+
+  an arrow pointing in space. Vectors have both magnitude (length) and
+
+  direction. This view is helpful for programming motion.</p>
+
+  <p>A vector's components determine its magnitude and direction. For example,
+
+  calling <code>createVector(3, 4)</code> creates a new
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object with an x-component of
+  3 and a
+
+  y-component of 4. From the origin, this vector's tip is 3 units to the
+
+  right and 4 units down.</p>
+
+  <p><a href="/reference/p5/p5.Vector">p5.Vector</a> objects are often used to
+  program
+
+  motion because they simplify the math. For example, a moving ball has a
+
+  position and a velocity. Position describes where the ball is in space. The
+
+  ball's position vector extends from the origin to the ball's center.
+
+  Velocity describes the ball's speed and the direction it's moving. If the
+
+  ball is moving straight up, its velocity vector points straight up. Adding
+
+  the ball's velocity vector to its position vector moves it, as in
+
+  <code>pos.add(vel)</code>. Vector math relies on methods inside the
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> class.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create p5.Vector objects.
+      let p1 = createVector(25, 25);
+      let p2 = createVector(50, 50);
+      let p3 = createVector(75, 75);
+
+      // Draw the dots.
+      strokeWeight(5);
+      point(p1);
+      point(p2);
+      point(p3);
+
+      describe('Three black dots form a diagonal line from top left to bottom right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pos;
+    let vel;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create p5.Vector objects.
+      pos = createVector(50, 100);
+      vel = createVector(0, -1);
+
+      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Add velocity to position.
+      pos.add(vel);
+
+      // If the dot reaches the top of the canvas,
+      // restart from the bottom.
+      if (pos.y < 0) {
+        pos.y = 100;
+      }
+
+      // Draw the dot.
+      strokeWeight(5);
+      point(pos);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x component of the vector.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y component of the vector.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z component of the vector.</p>
+    type: Number
+    optional: true
+return:
+  description: new <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# createVector
diff --git a/src/content/reference/en/p5 copy/createVideo.mdx b/src/content/reference/en/p5 copy/createVideo.mdx
new file mode 100644
index 0000000000..a7053f80a0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createVideo.mdx	
@@ -0,0 +1,135 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2115
+title: createVideo
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><video></code> element for simple audio/video playback.</p>
+
+  <p><code>createVideo()</code> returns a new
+
+  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
+  shown by
+
+  default. They can be hidden by calling <code>video.hide()</code> and drawn to
+  the
+
+  canvas using <a href="/reference/p5/image/">image()</a>.</p>
+
+  <p>The first parameter, <code>src</code>, is the path the video. If a single
+  string is
+
+  passed, as in <code>'/assets/topsecret.mp4'</code>, a single video is loaded.
+  An array
+
+  of strings can be used to load the same video in different formats. For
+
+  example, <code>['/assets/topsecret.mp4', '/assets/topsecret.ogv',
+  '/assets/topsecret.webm']</code>.
+
+  This is useful for ensuring that the video can play across different browsers
+  with
+
+  different capabilities. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/">MDN</a>
+
+  for more information about supported formats.</p>
+
+  <p>The second parameter, <code>callback</code>, is optional. It's a function
+  to call once
+
+  the video is ready to play.</p>
+line: 2115
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Note: this may not work in some browsers.
+      let video = createVideo('/assets/small.mp4');
+
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Provide an array options for different file formats.
+      let video = createVideo(
+        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm']
+      );
+
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    let video;
+
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Provide an array options for different file formats.
+      // Call mute() once the video loads.
+      video = createVideo(
+        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm'],
+        muteVideo
+      );
+
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+
+    // Mute the video once it loads.
+    function muteVideo() {
+      video.volume(0);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: src
+    description: |
+      <p>path to a video file, or an array of paths for
+                                    supporting different browsers.</p>
+    type: 'String|String[]'
+  - name: callback
+    description: |
+      <p>function to call once the video is ready to play.</p>
+    type: Function
+    optional: true
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createVideo
diff --git a/src/content/reference/en/p5 copy/createWriter.mdx b/src/content/reference/en/p5 copy/createWriter.mdx
new file mode 100644
index 0000000000..18928ff461
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createWriter.mdx	
@@ -0,0 +1,146 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1444
+title: createWriter
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a>
+  object.</p>
+
+  <p><a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> objects provide a
+  way to
+
+  save a sequence of text data, called the <em>print stream</em>, to the user's
+
+  computer. They're low-level objects that enable precise control of text
+
+  output. Functions such as
+
+  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
+
+  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
+  file
+
+  saving.</p>
+
+  <p>The first parameter, <code>filename</code>, is the name of the file to be
+  written. If
+
+  a string is passed, as in <code>createWriter('words.txt')</code>, a new
+
+  <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> object will be
+  created that
+
+  writes to a file named <code>words.txt</code>.</p>
+
+  <p>The second parameter, <code>extension</code>, is optional. If a string is
+  passed, as
+
+  in <code>createWriter('words', 'csv')</code>, the first parameter will be
+  interpreted
+
+  as the file name and the second parameter as the extension.</p>
+line: 1444
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create a p5.PrintWriter object.
+        let myWriter = createWriter('xo.txt');
+
+        // Add some lines to the print stream.
+        myWriter.print('XOO');
+        myWriter.print('OXO');
+        myWriter.print('OOX');
+
+        // Save the file and close the print stream.
+        myWriter.close();
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create a p5.PrintWriter object.
+        // Use the file format .csv.
+        let myWriter = createWriter('mauna_loa_co2', 'csv');
+
+        // Add some lines to the print stream.
+        myWriter.print('date,ppm_co2');
+        myWriter.print('1960-01-01,316.43');
+        myWriter.print('1970-01-01,325.06');
+        myWriter.print('1980-01-01,337.9');
+        myWriter.print('1990-01-01,353.86');
+        myWriter.print('2000-01-01,369.45');
+        myWriter.print('2020-01-01,413.61');
+
+        // Save the file and close the print stream.
+        myWriter.close();
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: name
+    description: |
+      <p>name of the file to create.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>format to use for the file.</p>
+    type: String
+    optional: true
+return:
+  description: stream for writing data.
+  type: p5.PrintWriter
+chainable: false
+---
+
+
+# createWriter
diff --git a/src/content/reference/en/p5 copy/cursor.mdx b/src/content/reference/en/p5 copy/cursor.mdx
new file mode 100644
index 0000000000..8ada3a4379
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cursor.mdx	
@@ -0,0 +1,139 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L209
+title: cursor
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Changes the cursor's appearance.</p>
+
+  <p>The first parameter, <code>type</code>, sets the type of cursor to display.
+  The
+
+  built-in options are <code>ARROW</code>, <code>CROSS</code>,
+  <code>HAND</code>, <code>MOVE</code>, <code>TEXT</code>, and
+  <code>WAIT</code>.
+
+  <code>cursor()</code> also recognizes standard CSS cursor properties passed as
+
+  strings: <code>'help'</code>, <code>'wait'</code>, <code>'crosshair'</code>,
+  <code>'not-allowed'</code>, <code>'zoom-in'</code>,
+
+  and <code>'grab'</code>. If the path to an image is passed, as in
+
+  <code>cursor('/assets/target.png')</code>, then the image will be used as the
+  cursor.
+
+  Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be <a
+  href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits">at
+  most 32 by 32 pixels large.</a></p>
+
+  <p>The parameters <code>x</code> and <code>y</code> are optional. If an image
+  is used for the
+
+  cursor, <code>x</code> and <code>y</code> set the location pointed to within
+  the image. They are
+
+  both 0 by default, so the cursor points to the image's top-left corner.
+  <code>x</code>
+
+  and <code>y</code> must be less than the image's width and height,
+  respectively.</p>
+line: 209
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square. The cursor appears as crosshairs.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the cursor to crosshairs: +
+      cursor(CROSS);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Divide the canvas into quadrants.
+      line(50, 0, 50, 100);
+      line(0, 50, 100, 50);
+
+      // Change cursor based on mouse position.
+      if (mouseX < 50 && mouseY < 50) {
+        cursor(CROSS);
+      } else if (mouseX > 50 && mouseY < 50) {
+        cursor('progress');
+      } else if (mouseX > 50 && mouseY > 50) {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+      } else {
+        cursor('grab');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Change the cursor's active spot
+      // when the mouse is pressed.
+      if (mouseIsPressed === true) {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);
+      } else {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: type
+    description: |
+      <p>Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
+                                    Native CSS properties: 'grab', 'progress', and so on.
+                                    Path to cursor image.</p>
+    type: String|Constant
+  - name: x
+    description: |
+      <p>horizontal active spot of the cursor.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>vertical active spot of the cursor.</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# cursor
diff --git a/src/content/reference/en/p5 copy/curve.mdx b/src/content/reference/en/p5 copy/curve.mdx
new file mode 100644
index 0000000000..9631e551e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curve.mdx	
@@ -0,0 +1,272 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L570
+title: curve
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Draws a curve using a Catmull-Rom spline.</p>
+
+  <p>Spline curves can form shapes and curves that slope gently. They’re like
+
+  cables that are attached to a set of points. Splines are defined by two
+
+  anchor points and two control points.</p>
+
+  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
+  first control point. This
+
+  point isn’t drawn and can be thought of as the curve’s starting point.</p>
+
+  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
+  <code>x3</code>, and <code>y3</code>, set the two anchor
+
+  points. The anchor points are the start and end points of the curve’s
+
+  visible segment.</p>
+
+  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
+  the last control
+
+  point. This point isn’t drawn and can be thought of as the curve’s ending
+
+  point.</p>
+
+  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>curve()</code> has twelve arguments because each point has x-, y-, and
+
+  z-coordinates.</p>
+line: 570
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(5, 26, 73, 24, 73, 61, 15, 65);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(5, 26, 5, 26, 73, 24, 73, 61);
+      curve(73, 24, 73, 61, 15, 65, 15, 65);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(73, 24);
+      point(73, 61);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(5, 26);
+      point(15, 65);
+
+      describe(
+        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let x1 = 5;
+    let y1 = 26;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(x1, y1, 73, 24, 73, 61, 15, 65);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(x1, y1, x1, y1, 73, 24, 73, 61);
+      curve(73, 24, 73, 61, 15, 65, 15, 65);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(73, 24);
+      point(73, 61);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x1, y1);
+      point(15, 65);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x1, y1) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x1 = mouseX;
+        y1 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background('skyblue');
+
+      // Draw the red balloon.
+      fill('red');
+      curve(-150, 275, 50, 60, 50, 60, 250, 275);
+
+      // Draw the balloon string.
+      line(50, 60, 50, 80);
+
+      describe('A red balloon in a blue sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red balloon in a blue sky.');
+    }
+
+    function draw() {
+      background('skyblue');
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the red balloon.
+      fill('red');
+      curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
+
+      // Draw the balloon string.
+      line(0, 10, 0, 0, 30, 0);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 570
+    params:
+      - name: x1
+        description: |
+          <p>x-coordinate of the first control point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>y-coordinate of the first control point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>x-coordinate of the first anchor point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the second anchor point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the second anchor point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>x-coordinate of the second control point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>y-coordinate of the second control point.</p>
+        type: Number
+    chainable: 1
+  - line: 746
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>z-coordinate of the first control point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the second anchor point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>z-coordinate of the second control point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# curve
diff --git a/src/content/reference/en/p5 copy/curveDetail.mdx b/src/content/reference/en/p5 copy/curveDetail.mdx
new file mode 100644
index 0000000000..796ca5a026
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveDetail.mdx	
@@ -0,0 +1,117 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L772
+title: curveDetail
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Sets the number of segments used to draw spline curves in WebGL mode.</p>
+
+  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+
+  more flat segments makes shapes appear smoother.</p>
+
+  <p>The parameter, <code>detail</code>, is the number of segments to use while
+  drawing a
+
+  spline curve. For example, calling <code>curveDetail(5)</code> will use 5
+  segments to
+
+  draw curves with the <a href="/reference/p5/curve/">curve()</a> function. By
+
+  default,<code>detail</code> is 20.</p>
+
+  <p>Note: <code>curveDetail()</code> has no effect in 2D mode.</p>
+line: 772
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(5, 26, 73, 24, 73, 61, 15, 65);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(5, 26, 5, 26, 73, 24, 73, 61);
+      curve(73, 24, 73, 61, 15, 65, 15, 65);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(73, 24);
+      point(73, 61);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(5, 26);
+      point(15, 65);
+
+      describe(
+        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Set the curveDetail() to 3.
+      curveDetail(3);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);
+      curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(23, -26);
+      point(23, 11);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(-45, -24);
+      point(-35, 15);
+
+      describe(
+        'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: resolution
+    description: |
+      <p>number of segments to use. Defaults to 20.</p>
+    type: Number
+chainable: true
+---
+
+
+# curveDetail
diff --git a/src/content/reference/en/p5 copy/curvePoint.mdx b/src/content/reference/en/p5 copy/curvePoint.mdx
new file mode 100644
index 0000000000..761b468ca6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curvePoint.mdx	
@@ -0,0 +1,160 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L930
+title: curvePoint
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a spline curve using interpolation.</p>
+
+  <p><code>curvePoint()</code> calculates coordinates along a spline curve using
+  the
+
+  anchor and control points. It expects points in the same order as the
+
+  <a href="/reference/p5/curve/">curve()</a> function. <code>curvePoint()</code>
+  works one axis
+
+  at a time. Passing the anchor and control points' x-coordinates will
+
+  calculate the x-coordinate of a point on the curve. Passing the anchor and
+
+  control points' y-coordinates will calculate the y-coordinate of a point on
+
+  the curve.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first control
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  anchor points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 930
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 5;
+      let y1 = 26;
+      let x2 = 73;
+      let y2 = 24;
+      let x3 = 73;
+      let y3 = 61;
+      let x4 = 15;
+      let y4 = 65;
+
+      // Draw the curve.
+      noFill();
+      curve(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw circles along the curve's path.
+      fill(255);
+
+      // Top.
+      let x = curvePoint(x1, x2, x3, x4, 0);
+      let y = curvePoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Center.
+      x = curvePoint(x1, x2, x3, x4, 0.5);
+      y = curvePoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Bottom.
+      x = curvePoint(x1, x2, x3, x4, 1);
+      y = curvePoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black curve on a gray square. A white circle moves back and forth along the curve.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 5;
+      let y1 = 26;
+      let x2 = 73;
+      let y2 = 24;
+      let x3 = 73;
+      let y3 = 61;
+      let x4 = 15;
+      let y4 = 65;
+
+      // Draw the curve.
+      noFill();
+      curve(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Calculate the circle's coordinates.
+      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+      let x = curvePoint(x1, x2, x3, x4, t);
+      let y = curvePoint(y1, y2, y3, y4, t);
+
+      // Draw the circle.
+      fill(255);
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of a point on the curve.
+  type: Number
+chainable: false
+---
+
+
+# curvePoint
diff --git a/src/content/reference/en/p5 copy/curveTangent.mdx b/src/content/reference/en/p5 copy/curveTangent.mdx
new file mode 100644
index 0000000000..005ade9aab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveTangent.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L1054
+title: curveTangent
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a line that's tangent to a spline curve.</p>
+
+  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
+
+  the curve's slope at the point where it intersects.</p>
+
+  <p><code>curveTangent()</code> calculates coordinates along a tangent line
+  using the
+
+  spline curve's anchor and control points. It expects points in the same
+
+  order as the <a href="/reference/p5/curve/">curve()</a> function.
+  <code>curveTangent()</code>
+
+  works one axis at a time. Passing the anchor and control points'
+
+  x-coordinates will calculate the x-coordinate of a point on the tangent
+
+  line. Passing the anchor and control points' y-coordinates will calculate
+
+  the y-coordinate of a point on the tangent line.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first control
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  anchor points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 1054
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 5;
+      let y1 = 26;
+      let x2 = 73;
+      let y2 = 24;
+      let x3 = 73;
+      let y3 = 61;
+      let x4 = 15;
+      let y4 = 65;
+
+      // Draw the curve.
+      noFill();
+      curve(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw tangents along the curve's path.
+      fill(255);
+
+      // Top circle.
+      stroke(0);
+      let x = curvePoint(x1, x2, x3, x4, 0);
+      let y = curvePoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Top tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);
+      let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Center circle.
+      stroke(0);
+      x = curvePoint(x1, x2, x3, x4, 0.5);
+      y = curvePoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Center tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);
+      ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Bottom circle.
+      stroke(0);
+      x = curvePoint(x1, x2, x3, x4, 1);
+      y = curvePoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      // Bottom tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);
+      ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      describe(
+        'A black curve on a gray square. A white circle moves back and forth along the curve.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of a point on the tangent line.
+  type: Number
+chainable: false
+---
+
+
+# curveTangent
diff --git a/src/content/reference/en/p5 copy/curveTightness.mdx b/src/content/reference/en/p5 copy/curveTightness.mdx
new file mode 100644
index 0000000000..506066be18
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveTightness.mdx	
@@ -0,0 +1,77 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L875
+title: curveTightness
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Adjusts the way <a href="/reference/p5/curve/">curve()</a> and
+
+  <a href="/reference/p5/curveVertex/">curveVertex()</a> draw.</p>
+
+  <p>Spline curves are like cables that are attached to a set of points.
+
+  <code>curveTightness()</code> adjusts how tightly the cable is attached to the
+  points.</p>
+
+  <p>The parameter, <code>tightness</code>, determines how the curve fits to the
+  vertex
+
+  points. By default, <code>tightness</code> is set to 0. Setting tightness to
+  1,
+
+  as in <code>curveTightness(1)</code>, connects the curve's points using
+  straight
+
+  lines. Values in the range from –5 to  5 deform curves while leaving them
+
+  recognizable.</p>
+line: 875
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move the mouse left and right to see the curve change.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the curve's tightness using the mouse.
+      let t = map(mouseX, 0, 100, -5, 5, true);
+      curveTightness(t);
+
+      // Draw the curve.
+      noFill();
+      beginShape();
+      curveVertex(10, 26);
+      curveVertex(10, 26);
+      curveVertex(83, 24);
+      curveVertex(83, 61);
+      curveVertex(25, 65);
+      curveVertex(25, 65);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: amount
+    description: |
+      <p>amount of tightness.</p>
+    type: Number
+chainable: true
+---
+
+
+# curveTightness
diff --git a/src/content/reference/en/p5 copy/curveVertex.mdx b/src/content/reference/en/p5 copy/curveVertex.mdx
new file mode 100644
index 0000000000..3d928fc0ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveVertex.mdx	
@@ -0,0 +1,407 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L832
+title: curveVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a spline curve segment to a custom shape.</p>
+
+  <p><code>curveVertex()</code> adds a curved segment to custom shapes. The
+  spline curves
+
+  it creates are defined like those made by the
+
+  <a href="/reference/p5/curve/">curve()</a> function.
+  <code>curveVertex()</code> must be called
+
+  between the <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
+
+  <p>Spline curves can form shapes and curves that slope gently. They’re like
+
+  cables that are attached to a set of points. Splines are defined by two
+
+  anchor points and two control points. <code>curveVertex()</code> must be
+  called at
+
+  least four times between
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> in order to draw a curve:</p>
+
+  <pre><code class="language-js">beginShape();
+
+
+  // Add the first control point.
+
+  curveVertex(84, 91);
+
+
+  // Add the anchor points to draw between.
+
+  curveVertex(68, 19);
+
+  curveVertex(21, 17);
+
+
+  // Add the second control point.
+
+  curveVertex(32, 91);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p>The code snippet above would only draw the curve between the anchor points,
+
+  similar to the <a href="/reference/p5/curve/">curve()</a> function. The
+  segments
+
+  between the control and anchor points can be drawn by calling
+
+  <code>curveVertex()</code> with the coordinates of the control points:</p>
+
+  <pre><code class="language-js">beginShape();
+
+
+  // Add the first control point and draw a segment to it.
+
+  curveVertex(84, 91);
+
+  curveVertex(84, 91);
+
+
+  // Add the anchor points to draw between.
+
+  curveVertex(68, 19);
+
+  curveVertex(21, 17);
+
+
+  // Add the second control point.
+
+  curveVertex(32, 91);
+
+
+  // Uncomment the next line to draw the segment to the second control point.
+
+  // curveVertex(32, 91);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p>The first two parameters, <code>x</code> and <code>y</code>, set the
+  vertex’s location. For
+
+  example, calling <code>curveVertex(10, 10)</code> adds a point to the curve at
+
+  <code>(10, 10)</code>.</p>
+
+  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>curveVertex()</code> has three arguments because each point has x-, y-,
+  and
+
+  z-coordinates. By default, the vertex’s z-coordinate is set to 0.</p>
+
+  <p>Note: <code>curveVertex()</code> won’t work when an argument is passed to
+
+  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 832
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point.
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point.
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(32, 91);
+      point(84, 91);
+
+      describe(
+        'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(32, 91);
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point.
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(32, 91);
+      point(84, 91);
+
+      describe(
+        'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(32, 91);
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point and draw a segment to it.
+      curveVertex(84, 91);
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(32, 91);
+      point(84, 91);
+
+      describe(
+        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the bottom-left corner
+    // and drag to change the curve's shape.
+
+    let x1 = 32;
+    let y1 = 91;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the shape.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(x1, y1);
+      curveVertex(x1, y1);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point and draw a segment to it.
+      curveVertex(84, 91);
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x1, y1);
+      point(84, 91);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x1, y1) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x1 = mouseX;
+        y1 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(32, 91);
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point.
+      curveVertex(84, 91);
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A ghost shape drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 832
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the vertex</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the vertex</p>
+        type: Number
+    chainable: 1
+  - line: 1160
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the vertex.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# curveVertex
diff --git a/src/content/reference/en/p5 copy/cylinder.mdx b/src/content/reference/en/p5 copy/cylinder.mdx
new file mode 100644
index 0000000000..dd81cd687f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cylinder.mdx	
@@ -0,0 +1,282 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1477
+title: cylinder
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a cylinder.</p>
+
+  <p>A cylinder is a 3D shape with triangular faces that connect a flat bottom
+
+  to a flat top. Cylinders with few faces look like boxes. Cylinders with
+
+  many faces have smooth surfaces.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>cylinder(20)</code>, it sets the radius of the cylinder’s base. By
+  default,
+
+  <code>radius</code> is 50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cylinder(20, 30)</code>, it sets the cylinder’s height. By
+  default,
+
+  <code>height</code> is set to the cylinder’s <code>radius</code>.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cylinder(20, 30, 5)</code>, it sets the number of edges used to
+  form the
+
+  cylinder's top and bottom. Using more edges makes the top and bottom look
+
+  more like circles. By default, <code>detailX</code> is 24.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cylinder(20, 30, 5, 2)</code>, it sets the number of triangle
+  subdivisions
+
+  to use along the y-axis, between cylinder's the top and bottom. All 3D
+
+  shapes are made by connecting triangles to form their surfaces. By default,
+
+  <code>detailY</code> is 1.</p>
+
+  <p>The fifth parameter, <code>bottomCap</code>, is also optional. If a
+  <code>false</code> is passed,
+
+  as in <code>cylinder(20, 30, 5, 2, false)</code> the cylinder’s bottom won’t
+  be drawn.
+
+  By default, <code>bottomCap</code> is <code>true</code>.</p>
+
+  <p>The sixth parameter, <code>topCap</code>, is also optional. If a
+  <code>false</code> is passed, as
+
+  in <code>cylinder(20, 30, 5, 2, false, false)</code> the cylinder’s top won’t
+  be
+
+  drawn. By default, <code>topCap</code> is <code>true</code>.</p>
+
+  <p>Note: <code>cylinder()</code> can only be used in WebGL mode.</p>
+line: 1477
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      cylinder();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius and height to 30.
+      cylinder(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      cylinder(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 5.
+      cylinder(30, 50, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 2.
+      cylinder(30, 50, 24, 2);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background. Its top is missing.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 1.
+      // Don't draw its bottom.
+      cylinder(30, 50, 24, 1, false);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background. Its top and bottom are missing.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 1.
+      // Don't draw its bottom or top.
+      cylinder(30, 50, 24, 1, false, false);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the cylinder. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: >
+      <p>height of the cylinder. Defaults to the value of
+      <code>radius</code>.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of edges along the top and bottom. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
+    type: Integer
+    optional: true
+  - name: bottomCap
+    description: >
+      <p>whether to draw the cylinder's bottom. Defaults to
+      <code>true</code>.</p>
+    type: Boolean
+    optional: true
+  - name: topCap
+    description: |
+      <p>whether to draw the cylinder's top. Defaults to <code>true</code>.</p>
+    type: Boolean
+    optional: true
+chainable: true
+---
+
+
+# cylinder
diff --git a/src/content/reference/en/p5 copy/day.mdx b/src/content/reference/en/p5 copy/day.mdx
new file mode 100644
index 0000000000..f029fcb983
--- /dev/null
+++ b/src/content/reference/en/p5 copy/day.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L10
+title: day
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current day as a number from 1–31.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current day.
+      let d = day();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the day.
+      text(`Current day: ${d}`, 20, 50, 60);
+
+      describe(`The text 'Current day: ${d}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current day between 1 and 31.
+  type: Integer
+chainable: false
+---
+
+
+# day
diff --git a/src/content/reference/en/p5 copy/debugMode.mdx b/src/content/reference/en/p5 copy/debugMode.mdx
new file mode 100644
index 0000000000..19ccdfb63f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/debugMode.mdx	
@@ -0,0 +1,362 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L471
+title: debugMode
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: >
+  <p>Adds a grid and an axes icon to clarify orientation in 3D sketches.</p>
+
+  <p><code>debugMode()</code> adds a grid that shows where the “ground” is in a
+  sketch. By
+
+  default, the grid will run through the origin <code>(0, 0, 0)</code> of the
+  sketch
+
+  along the XZ plane. <code>debugMode()</code> also adds an axes icon that
+  points along
+
+  the positive x-, y-, and z-axes. Calling <code>debugMode()</code> displays the
+  grid
+
+  and axes icon with their default size and position.</p>
+
+  <p>There are four ways to call <code>debugMode()</code> with optional
+  parameters to
+
+  customize the debugging environment.</p>
+
+  <p>The first way to call <code>debugMode()</code> has one parameter,
+  <code>mode</code>. If the
+
+  system constant <code>GRID</code> is passed, as in
+  <code>debugMode(GRID)</code>, then the grid
+
+  will be displayed and the axes icon will be hidden. If the constant
+  <code>AXES</code>
+
+  is passed, as in <code>debugMode(AXES)</code>, then the axes icon will be
+  displayed
+
+  and the grid will be hidden.</p>
+
+  <p>The second way to call <code>debugMode()</code> has six parameters. The
+  first
+
+  parameter, <code>mode</code>, selects either <code>GRID</code> or
+  <code>AXES</code> to be displayed. The
+
+  next five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
+  <code>xOff</code>, <code>yOff</code>, and
+
+  <code>zOff</code> are optional. They’re numbers that set the appearance of the
+  grid
+
+  (<code>gridSize</code> and <code>gridDivisions</code>) and the placement of
+  the axes icon
+
+  (<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>). For example,
+  calling
+
+  <code>debugMode(20, 5, 10, 10, 10)</code> sets the <code>gridSize</code> to 20
+  pixels, the number
+
+  of <code>gridDivisions</code> to 5, and offsets the axes icon by 10 pixels
+  along the
+
+  x-, y-, and z-axes.</p>
+
+  <p>The third way to call <code>debugMode()</code> has five parameters. The
+  first
+
+  parameter, <code>mode</code>, selects either <code>GRID</code> or
+  <code>AXES</code> to be displayed. The
+
+  next four parameters, <code>axesSize</code>, <code>xOff</code>,
+  <code>yOff</code>, and <code>zOff</code> are optional.
+
+  They’re numbers that set the appearance of the size of the axes icon
+
+  (<code>axesSize</code>) and its placement (<code>xOff</code>,
+  <code>yOff</code>, and <code>zOff</code>).</p>
+
+  <p>The fourth way to call <code>debugMode()</code> has nine optional
+  parameters. The
+
+  first five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
+  <code>gridXOff</code>, <code>gridYOff</code>,
+
+  and <code>gridZOff</code> are numbers that set the appearance of the grid. For
+
+  example, calling <code>debugMode(100, 5, 0, 0, 0)</code> sets the
+  <code>gridSize</code> to 100,
+
+  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
+  so that
+
+  the grid is centered at the origin. The next four parameters,
+  <code>axesSize</code>,
+
+  <code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are numbers that
+  set the appearance of the size
+
+  of the axes icon (<code>axesSize</code>) and its placement
+  (<code>axesXOff</code>, <code>axesYOff</code>,
+
+  and <code>axesZOff</code>). For example, calling
+
+  <code>debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)</code> sets the
+  <code>gridSize</code> to 100,
+
+  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
+  so that
+
+  the grid is centered at the origin. It then sets the <code>axesSize</code> to
+  50 and
+
+  offsets the icon 10 pixels along each axis.</p>
+line: 471
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      debugMode();
+
+      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      // Only display the axes icon.
+      debugMode(AXES);
+
+      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      // Only display the grid and customize it:
+      // - size: 50
+      // - divisions: 10
+      // - offsets: 0, 20, 0
+      debugMode(GRID, 50, 10, 0, 20, 0);
+
+      describe('A multicolor box on a gray background. A grid is displayed below the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      // Display the grid and axes icon and customize them:
+      // Grid
+      // ----
+      // - size: 50
+      // - divisions: 10
+      // - offsets: 0, 20, 0
+      // Axes
+      // ----
+      // - size: 50
+      // - offsets: 0, 0, 0
+      debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);
+
+      describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 471
+    params: []
+  - line: 650
+    params:
+      - name: mode
+        description: |
+          <p>either GRID or AXES</p>
+        type: Constant
+  - line: 655
+    params:
+      - name: mode
+        description: ''
+        type: Constant
+      - name: gridSize
+        description: |
+          <p>side length of the grid.</p>
+        type: Number
+        optional: true
+      - name: gridDivisions
+        description: |
+          <p>number of divisions in the grid.</p>
+        type: Number
+        optional: true
+      - name: xOff
+        description: |
+          <p>offset from origin along the x-axis.</p>
+        type: Number
+        optional: true
+      - name: yOff
+        description: |
+          <p>offset from origin along the y-axis.</p>
+        type: Number
+        optional: true
+      - name: zOff
+        description: |
+          <p>offset from origin along the z-axis.</p>
+        type: Number
+        optional: true
+  - line: 665
+    params:
+      - name: mode
+        description: ''
+        type: Constant
+      - name: axesSize
+        description: |
+          <p>length of axes icon markers.</p>
+        type: Number
+        optional: true
+      - name: xOff
+        description: ''
+        type: Number
+        optional: true
+      - name: yOff
+        description: ''
+        type: Number
+        optional: true
+      - name: zOff
+        description: ''
+        type: Number
+        optional: true
+  - line: 674
+    params:
+      - name: gridSize
+        description: ''
+        type: Number
+        optional: true
+      - name: gridDivisions
+        description: ''
+        type: Number
+        optional: true
+      - name: gridXOff
+        description: |
+          <p>grid offset from the origin along the x-axis.</p>
+        type: Number
+        optional: true
+      - name: gridYOff
+        description: |
+          <p>grid offset from the origin along the y-axis.</p>
+        type: Number
+        optional: true
+      - name: gridZOff
+        description: |
+          <p>grid offset from the origin along the z-axis.</p>
+        type: Number
+        optional: true
+      - name: axesSize
+        description: ''
+        type: Number
+        optional: true
+      - name: axesXOff
+        description: |
+          <p>axes icon offset from the origin along the x-axis.</p>
+        type: Number
+        optional: true
+      - name: axesYOff
+        description: |
+          <p>axes icon offset from the origin along the y-axis.</p>
+        type: Number
+        optional: true
+      - name: axesZOff
+        description: |
+          <p>axes icon offset from the origin along the z-axis.</p>
+        type: Number
+        optional: true
+chainable: false
+---
+
+
+# debugMode
diff --git a/src/content/reference/en/p5 copy/degrees.mdx b/src/content/reference/en/p5 copy/degrees.mdx
new file mode 100644
index 0000000000..730b361384
--- /dev/null
+++ b/src/content/reference/en/p5 copy/degrees.mdx	
@@ -0,0 +1,53 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L485
+title: degrees
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: |
+  <p>Converts an angle measured in radians to its value in degrees.</p>
+  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
+  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
+  <p>The same angle can be expressed in with either unit. For example, 90° is a
+  quarter of a full rotation. The same angle is 2 × π ÷ 4
+  (about 1.57) radians.</p>
+line: 485
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the angle conversion.
+      let rad = QUARTER_PI;
+      let deg = degrees(rad);
+
+      // Display the conversion.
+      text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
+
+      describe('The text "0.79 rad = 45˚".');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radians
+    description: |
+      <p>radians value to convert to degrees.</p>
+    type: Number
+return:
+  description: converted angle.
+  type: Number
+chainable: false
+---
+
+
+# degrees
diff --git a/src/content/reference/en/p5 copy/deltaTime.mdx b/src/content/reference/en/p5 copy/deltaTime.mdx
new file mode 100644
index 0000000000..0915a014c2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deltaTime.mdx	
@@ -0,0 +1,68 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L124
+title: deltaTime
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that tracks the number of milliseconds it
+  took to draw
+
+  the last frame.</p>
+
+  <p><code>deltaTime</code> contains the amount of time it took
+
+  <a href="/reference/p5/draw/">draw()</a> to execute during the previous frame.
+  It's
+
+  useful for simulating physics.</p>
+line: 124
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    let x = 0;
+    let speed = 0.05;
+
+    function setup()  {
+      createCanvas(100, 100);
+
+      // Set the frameRate to 30.
+      frameRate(30);
+
+      describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use deltaTime to calculate
+      // a change in position.
+      let deltaX = speed * deltaTime;
+
+      // Update the x variable.
+      x += deltaX;
+
+      // Reset x to 0 if it's
+      // greater than 100.
+      if (x > 100)  {
+        x = 0;
+      }
+
+      // Use x to set the circle's
+      // position.
+      circle(x, 50, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Integer
+---
+
+
+# deltaTime
diff --git a/src/content/reference/en/p5 copy/describe.mdx b/src/content/reference/en/p5 copy/describe.mdx
new file mode 100644
index 0000000000..dee815b9f1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/describe.mdx	
@@ -0,0 +1,137 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L18
+title: describe
+module: Environment
+submodule: Environment
+file: src/accessibility/describe.js
+description: >
+  <p>Creates a screen reader-accessible description of the canvas.</p>
+
+  <p>The first parameter, <code>text</code>, is the description of the
+  canvas.</p>
+
+  <p>The second parameter, <code>display</code>, is optional. It determines how
+  the
+
+  description is displayed. If <code>LABEL</code> is passed, as in
+
+  <code>describe('A description.', LABEL)</code>, the description will be
+  visible in
+
+  a div element next to the canvas. If <code>FALLBACK</code> is passed, as in
+
+  <code>describe('A description.', FALLBACK)</code>, the description will only
+  be
+
+  visible to screen readers. This is the default mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+line: 18
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Draw a heart.
+      fill('red');
+      noStroke();
+      circle(67, 67, 20);
+      circle(83, 67, 20);
+      triangle(91, 73, 75, 95, 59, 73);
+
+      // Add a general description of the canvas.
+      describe('A pink square with a red heart in the bottom-right corner.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Draw a heart.
+      fill('red');
+      noStroke();
+      circle(67, 67, 20);
+      circle(83, 67, 20);
+      triangle(91, 73, 75, 95, 59, 73);
+
+      // Add a general description of the canvas
+      // and display it for debugging.
+      describe('A pink square with a red heart in the bottom-right corner.', LABEL);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // The expression
+      // frameCount % 100
+      // causes x to increase from 0
+      // to 99, then restart from 0.
+      let x = frameCount % 100;
+
+      // Draw the circle.
+      fill(0, 255, 0);
+      circle(x, 50, 40);
+
+      // Add a general description of the canvas.
+      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // The expression
+      // frameCount % 100
+      // causes x to increase from 0
+      // to 99, then restart from 0.
+      let x = frameCount % 100;
+
+      // Draw the circle.
+      fill(0, 255, 0);
+      circle(x, 50, 40);
+
+      // Add a general description of the canvas
+      // and display it for debugging.
+      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: text
+    description: |
+      <p>description of the canvas.</p>
+    type: String
+  - name: display
+    description: |
+      <p>either LABEL or FALLBACK.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# describe
diff --git a/src/content/reference/en/p5 copy/describeElement.mdx b/src/content/reference/en/p5 copy/describeElement.mdx
new file mode 100644
index 0000000000..0b7bc8b330
--- /dev/null
+++ b/src/content/reference/en/p5 copy/describeElement.mdx	
@@ -0,0 +1,127 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L162
+title: describeElement
+module: Environment
+submodule: Environment
+file: src/accessibility/describe.js
+description: >
+  <p>Creates a screen reader-accessible description of elements in the
+  canvas.</p>
+
+  <p>Elements are shapes or groups of shapes that create meaning together. For
+
+  example, a few overlapping circles could make an "eye" element.</p>
+
+  <p>The first parameter, <code>name</code>, is the name of the element.</p>
+
+  <p>The second parameter, <code>text</code>, is the description of the
+  element.</p>
+
+  <p>The third parameter, <code>display</code>, is optional. It determines how
+  the
+
+  description is displayed. If <code>LABEL</code> is passed, as in
+
+  <code>describe('A description.', LABEL)</code>, the description will be
+  visible in
+
+  a div element next to the canvas. Using <code>LABEL</code> creates unhelpful
+
+  duplicates for screen readers. Only use <code>LABEL</code> during development.
+  If
+
+  <code>FALLBACK</code> is passed, as in <code>describe('A description.',
+  FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+line: 162
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Describe the first element
+      // and draw it.
+      describeElement('Circle', 'A yellow circle in the top-left corner.');
+      noStroke();
+      fill('yellow');
+      circle(25, 25, 40);
+
+      // Describe the second element
+      // and draw it.
+      describeElement('Heart', 'A red heart in the bottom-right corner.');
+      fill('red');
+      circle(66.6, 66.6, 20);
+      circle(83.2, 66.6, 20);
+      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+
+      // Add a general description of the canvas.
+      describe('A red heart and yellow circle over a pink background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Describe the first element
+      // and draw it. Display the
+      // description for debugging.
+      describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
+      noStroke();
+      fill('yellow');
+      circle(25, 25, 40);
+
+      // Describe the second element
+      // and draw it. Display the
+      // description for debugging.
+      describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
+      fill('red');
+      circle(66.6, 66.6, 20);
+      circle(83.2, 66.6, 20);
+      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+
+      // Add a general description of the canvas.
+      describe('A red heart and yellow circle over a pink background.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: name
+    description: |
+      <p>name of the element.</p>
+    type: String
+  - name: text
+    description: |
+      <p>description of the element.</p>
+    type: String
+  - name: display
+    description: |
+      <p>either LABEL or FALLBACK.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# describeElement
diff --git a/src/content/reference/en/p5 copy/deviceMoved.mdx b/src/content/reference/en/p5 copy/deviceMoved.mdx
new file mode 100644
index 0000000000..90e9ce91fb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceMoved.mdx	
@@ -0,0 +1,49 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L501
+title: deviceMoved
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function is
+  called when the device is moved by more than
+
+  the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
+
+  The threshold value can be changed using <a
+  href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>.</p>
+line: 501
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Move the device around
+    // to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device moves`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# deviceMoved
diff --git a/src/content/reference/en/p5 copy/deviceOrientation.mdx b/src/content/reference/en/p5 copy/deviceOrientation.mdx
new file mode 100644
index 0000000000..a18763fc87
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceOrientation.mdx	
@@ -0,0 +1,22 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L11
+title: deviceOrientation
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable deviceOrientation always contains the orientation of
+  the device. The value of this variable will either be set 'landscape'
+  or 'portrait'. If no data is available it will be set to 'undefined'.
+  either LANDSCAPE or PORTRAIT.</p>
+line: 11
+isConstructor: false
+itemtype: property
+class: p5
+type: Constant
+---
+
+
+# deviceOrientation
diff --git a/src/content/reference/en/p5 copy/deviceShaken.mdx b/src/content/reference/en/p5 copy/deviceShaken.mdx
new file mode 100644
index 0000000000..0c1cce17f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceShaken.mdx	
@@ -0,0 +1,50 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L589
+title: deviceShaken
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function is
+  called when the device total acceleration
+
+  changes of accelerationX and accelerationY values is more than
+
+  the threshold value. The default threshold is set to 30.
+
+  The threshold value can be changed using <a
+  href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>.</p>
+line: 589
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Shake the device to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device shakes`);
+    }
+    function deviceShaken() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# deviceShaken
diff --git a/src/content/reference/en/p5 copy/deviceTurned.mdx b/src/content/reference/en/p5 copy/deviceTurned.mdx
new file mode 100644
index 0000000000..28f760eb6f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceTurned.mdx	
@@ -0,0 +1,80 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L531
+title: deviceTurned
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> function is
+  called when the device rotates by
+
+  more than 90 degrees continuously.</p>
+
+  <p>The axis that triggers the <a
+  href="/reference/p5/deviceTurned/">deviceTurned()</a> method is stored in the
+  turnAxis
+
+  variable. The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> method
+  can be locked to trigger on any axis:
+
+  X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>
+line: 531
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees
+    // to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device turns`);
+    }
+    function deviceTurned() {
+      if (value === 0) {
+        value = 255;
+      } else if (value === 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+    <div>
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees in the
+    // X-axis to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when x-axis turns`);
+    }
+    function deviceTurned() {
+      if (turnAxis === 'X') {
+        if (value === 0) {
+          value = 255;
+        } else if (value === 255) {
+          value = 0;
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# deviceTurned
diff --git a/src/content/reference/en/p5 copy/directionalLight.mdx b/src/content/reference/en/p5 copy/directionalLight.mdx
new file mode 100644
index 0000000000..b2b3e011a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/directionalLight.mdx	
@@ -0,0 +1,277 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L461
+title: directionalLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines in one direction.</p>
+
+  <p>Directional lights don’t shine from a specific point. They’re like a sun
+
+  that shines from somewhere offscreen. The light’s direction is set using
+
+  three <code>(x, y, z)</code> values between -1 and 1. For example, setting a
+  light’s
+
+  direction as <code>(1, 0, 0)</code> will light <a
+  href="/reference/p5/p5.Geometry">p5.Geometry</a>
+
+  objects from the left since the light faces directly to the right. A
+
+  maximum of 5 directional lights can be active at once.</p>
+
+  <p>There are four ways to call <code>directionalLight()</code> with parameters
+  to set the
+
+  light’s color and direction.</p>
+
+  <p>The first way to call <code>directionalLight()</code> has six parameters.
+  The first
+
+  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
+  the light’s color using the
+
+  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last three
+
+  parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the
+  light’s direction. For example,
+
+  <code>directionalLight(255, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0,
+  0)</code> light
+
+  that shines to the right <code>(1, 0, 0)</code>.</p>
+
+  <p>The second way to call <code>directionalLight()</code> has four parameters.
+  The first
+
+  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
+  the light’s color using the
+
+  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last
+  parameter,
+
+  <code>direction</code> sets the light’s direction using a
+   <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
+  <code>directionalLight(255, 0, 0, lightDir)</code> creates a red <code>(255,
+  0, 0)</code> light
+
+  that shines in the direction the <code>lightDir</code> vector points.</p>
+
+  <p>The third way to call <code>directionalLight()</code> has four parameters.
+  The first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
+  the light’s direction. For
+
+  example, <code>directionalLight(myColor, 1, 0, 0)</code> creates a light that
+  shines
+
+  to the right <code>(1, 0, 0)</code> with the color value of
+  <code>myColor</code>.</p>
+
+  <p>The fourth way to call <code>directionalLight()</code> has two parameters.
+  The first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  second parameter, <code>direction</code>, sets the light’s direction using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object. For example,
+
+  <code>directionalLight(myColor, lightDir)</code> creates a light that shines
+  in the
+
+  direction the <code>lightDir</code> vector points with the color value of
+  <code>myColor</code>.</p>
+line: 461
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to turn on the directional light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the light.
+      if (isLit === true) {
+        // Add a red directional light from above.
+        // Use RGB values and XYZ directions.
+        directionalLight(255, 0, 0, 0, 1, 0);
+      }
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red directional light from above.
+      // Use a p5.Color object and XYZ directions.
+      let c = color(255, 0, 0);
+      directionalLight(c, 0, 1, 0);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red directional light from above.
+      // Use a p5.Color object and a p5.Vector object.
+      let c = color(255, 0, 0);
+      let lightDir = createVector(0, 1, 0);
+      directionalLight(c, lightDir);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 461
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: x
+        description: |
+          <p>x-component of the light's direction between -1 and 1.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-component of the light's direction between -1 and 1.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-component of the light's direction between -1 and 1.</p>
+        type: Number
+    chainable: 1
+  - line: 614
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: direction
+        description: |
+          <p>direction of the light as a
+                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
+        type: p5.Vector
+    chainable: 1
+  - line: 624
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                                                    an array of color values, or as a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+    chainable: 1
+  - line: 634
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: direction
+        description: ''
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# directionalLight
diff --git a/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx b/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
new file mode 100644
index 0000000000..a72ec28678
--- /dev/null
+++ b/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L872
+title: disableFriendlyErrors
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>Turns off the parts of the Friendly Error System (FES) that impact
+  performance.</p>
+
+  <p>The <a
+  href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md"
+  target="_blank">FES</a>
+
+  can cause sketches to draw slowly because it does extra work behind the
+
+  scenes. For example, the FES checks the arguments passed to functions,
+
+  which takes time to process. Disabling the FES can significantly improve
+
+  performance by turning off these checks.</p>
+line: 872
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Disable the FES.
+    p5.disableFriendlyErrors = true;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // The circle() function requires three arguments. The
+      // next line would normally display a friendly error that
+      // points this out. Instead, nothing happens and it fails
+      // silently.
+      circle(50, 50);
+
+      describe('A gray square.');
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# disableFriendlyErrors
diff --git a/src/content/reference/en/p5 copy/displayDensity.mdx b/src/content/reference/en/p5 copy/displayDensity.mdx
new file mode 100644
index 0000000000..e52be83ec2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/displayDensity.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1078
+title: displayDensity
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Returns the display's current pixel density.</p>
+line: 1078
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 1.
+      pixelDensity(1);
+
+      // Create a canvas and draw
+      // a circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');
+    }
+
+    function mousePressed() {
+      // Get the current display density.
+      let d = displayDensity();
+
+      // Use the display density to set
+      // the sketch's pixel density.
+      pixelDensity(d);
+
+      // Paint the background and
+      // draw a circle.
+      background(200);
+      circle(50, 50, 70);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current pixel density of the display.
+  type: Number
+chainable: false
+---
+
+
+# displayDensity
diff --git a/src/content/reference/en/p5 copy/displayHeight.mdx b/src/content/reference/en/p5 copy/displayHeight.mdx
new file mode 100644
index 0000000000..d392419e70
--- /dev/null
+++ b/src/content/reference/en/p5 copy/displayHeight.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L621
+title: displayHeight
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the height of the screen
+  display.</p>
+
+  <p><code>displayHeight</code> is useful for running full-screen programs. Its
+  value
+
+  depends on the current <a
+  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
+
+  <p>Note: The actual screen height can be computed as
+
+  <code>displayHeight * pixelDensity()</code>.</p>
+line: 621
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the display's dimensions.
+      createCanvas(displayWidth, displayHeight);
+
+      background(200);
+
+      describe('A gray canvas that is the same size as the display.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# displayHeight
diff --git a/src/content/reference/en/p5 copy/displayWidth.mdx b/src/content/reference/en/p5 copy/displayWidth.mdx
new file mode 100644
index 0000000000..9ab79a09db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/displayWidth.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L590
+title: displayWidth
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the width of the screen
+  display.</p>
+
+  <p><code>displayWidth</code> is useful for running full-screen programs. Its
+  value
+
+  depends on the current <a
+  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
+
+  <p>Note: The actual screen width can be computed as
+
+  <code>displayWidth * pixelDensity()</code>.</p>
+line: 590
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the display's dimensions.
+      createCanvas(displayWidth, displayHeight);
+
+      background(200);
+
+      describe('A gray canvas that is the same size as the display.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# displayWidth
diff --git a/src/content/reference/en/p5 copy/dist.mdx b/src/content/reference/en/p5 copy/dist.mdx
new file mode 100644
index 0000000000..60b7155b9b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/dist.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L155
+title: dist
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the distance between two points.</p>
+
+  <p>The version of <code>dist()</code> with four parameters calculates distance
+  in two
+
+  dimensions.</p>
+
+  <p>The version of <code>dist()</code> with six parameters calculates distance
+  in three
+
+  dimensions.</p>
+
+  <p>Use <a href="/reference/p5.Vector/dist/">p5.Vector.dist()</a> to calculate
+  the
+
+  distance between two <a href="/reference/p5/p5.Vector">p5.Vector</a>
+  objects.</p>
+line: 155
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates.
+      let x1 = 10;
+      let y1 = 50;
+      let x2 = 90;
+      let y2 = 50;
+
+      // Draw the points and a line connecting them.
+      line(x1, y1, x2, y2);
+      strokeWeight(5);
+      point(x1, y1);
+      point(x2, y2);
+
+      // Calculate the distance.
+      let d = dist(x1, y1, x2, y2);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the distance.
+      text(d, 43, 40);
+
+      describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: distance between the two points.
+  type: Number
+overloads:
+  - line: 155
+    params:
+      - name: x1
+        description: |
+          <p>x-coordinate of the first point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>y-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>x-coordinate of the second point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the second point.</p>
+        type: Number
+    return:
+      description: distance between the two points.
+      type: Number
+  - line: 209
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>z-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the second point.</p>
+        type: Number
+    return:
+      description: distance between the two points.
+      type: Number
+chainable: false
+---
+
+
+# dist
diff --git a/src/content/reference/en/p5 copy/doubleClicked.mdx b/src/content/reference/en/p5 copy/doubleClicked.mdx
new file mode 100644
index 0000000000..3e148c677f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/doubleClicked.mdx	
@@ -0,0 +1,157 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1599
+title: doubleClicked
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when a mouse button is clicked twice
+  quickly.</p>
+
+  <p>Declaring the function <code>doubleClicked()</code> sets a code block to
+  run
+
+  automatically when the user presses and releases the mouse button twice
+
+  quickly:</p>
+
+  <pre><code class="language-js">function doubleClicked() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>doubleClicked()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function doubleClicked() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional.
+  <code>doubleClicked()</code> is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the double-click event:</p>
+
+  <pre><code class="language-js">function doubleClicked(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, code placed in <code>doubleClicked()</code> will
+  run after two
+
+  touches that occur within a short time.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+line: 1599
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the square's color when the user double-clicks.
+    function doubleClicked() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the circle.
+      fill(value);
+
+      // Draw the circle.
+      circle(50, 50, 80);
+    }
+
+    // Reassign value to 255 when the user double-clicks on the circle.
+    function doubleClicked() {
+      if (dist(50, 50, mouseX, mouseY) < 40) {
+        value = 255;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# doubleClicked
diff --git a/src/content/reference/en/p5 copy/draw.mdx b/src/content/reference/en/p5 copy/draw.mdx
new file mode 100644
index 0000000000..dba2e2b44a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/draw.mdx	
@@ -0,0 +1,129 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L176
+title: draw
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>A function that's called repeatedly while the sketch runs.</p>
+
+  <p>Declaring the function <code>draw()</code> sets a code block to run
+  repeatedly
+
+  once the sketch starts. It’s used to create animations and respond to
+
+  user inputs:</p>
+
+  <pre><code class="language-js">function draw() {
+    // Code to run repeatedly.
+  }
+
+  </code></pre>
+
+  <p>This is often called the "draw loop" because p5.js calls the code in
+
+  <code>draw()</code> in a loop behind the scenes. By default,
+  <code>draw()</code> tries to run
+
+  60 times per second. The actual rate depends on many factors. The
+
+  drawing rate, called the "frame rate", can be controlled by calling
+
+  <a href="/reference/p5/frameRate/">frameRate()</a>. The number of times
+  <code>draw()</code>
+
+  has run is stored in the system variable
+
+  <a href="/reference/p5/frameCount/">frameCount()</a>.</p>
+
+  <p>Code placed within <code>draw()</code> begins looping after
+
+  <a href="/reference/p5/setup/">setup()</a> runs. <code>draw()</code> will run
+  until the user
+
+  closes the sketch. <code>draw()</code> can be stopped by calling the
+
+  <a href="/reference/p5/noLoop/">noLoop()</a> function. <code>draw()</code> can
+  be resumed by
+
+  calling the <a href="/reference/p5/loop/">loop()</a> function.</p>
+line: 176
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Paint the background once.
+      background(200);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+      );
+    }
+
+    function draw() {
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves.'
+      );
+    }
+
+    function draw() {
+      // Paint the background repeatedly.
+      background(200);
+
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click the canvas to change the circle's color.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      // Paint the background repeatedly.
+      background(200);
+
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+
+    // Change the fill color when the user double-clicks.
+    function doubleClicked() {
+      fill('deeppink');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# draw
diff --git a/src/content/reference/en/p5 copy/drawingContext.mdx b/src/content/reference/en/p5 copy/drawingContext.mdx
new file mode 100644
index 0000000000..3cf1335733
--- /dev/null
+++ b/src/content/reference/en/p5 copy/drawingContext.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L1198
+title: drawingContext
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>A system variable that provides direct access to the sketch's
+
+  <code><canvas></code> element.</p>
+
+  <p>The <code><canvas></code> element provides many specialized features that
+  aren't
+
+  included in the p5.js library. The <code>drawingContext</code> system variable
+
+  provides access to these features by exposing the sketch's
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/">CanvasRenderingContext2D</a>
+
+  object.</p>
+line: 1198
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Style the circle using shadows.
+      drawingContext.shadowOffsetX = 5;
+      drawingContext.shadowOffsetY = -5;
+      drawingContext.shadowBlur = 10;
+      drawingContext.shadowColor = 'black';
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe("A white circle on a gray background. The circle's edges are shadowy.");
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background('skyblue');
+
+      // Style the circle using a color gradient.
+      let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);
+      myGradient.addColorStop(0, 'yellow');
+      myGradient.addColorStop(0.6, 'orangered');
+      myGradient.addColorStop(1, 'yellow');
+      drawingContext.fillStyle = myGradient;
+      drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A fiery sun drawn on a light blue background.');
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# drawingContext
diff --git a/src/content/reference/en/p5 copy/ellipse.mdx b/src/content/reference/en/p5 copy/ellipse.mdx
new file mode 100644
index 0000000000..6c07765230
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ellipse.mdx	
@@ -0,0 +1,164 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L371
+title: ellipse
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws an ellipse (oval).</p>
+
+  <p>An ellipse is a round shape defined by the <code>x</code>, <code>y</code>,
+  <code>w</code>, and
+
+  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
+  of its center. <code>w</code> and
+
+  <code>h</code> set its width and height. See
+
+  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to set
+
+  its position.</p>
+
+  <p>If no height is set, the value of width is used for both the width and
+
+  height. If a negative height or width is specified, the absolute value is
+
+  taken.</p>
+
+  <p>The fifth parameter, <code>detail</code>, is also optional. It determines
+  how many
+
+  vertices are used to draw the ellipse in WebGL mode. The default value is
+
+  25.</p>
+line: 371
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      ellipse(50, 50, 80, 80);
+
+      describe('A white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      ellipse(50, 50, 80);
+
+      describe('A white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      ellipse(50, 50, 80, 40);
+
+      describe('A white ellipse on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      ellipse(0, 0, 80, 40);
+
+      describe('A white ellipse on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Use 6 vertices.
+      ellipse(0, 0, 80, 40, 6);
+
+      describe('A white hexagon on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 371
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the center of the ellipse.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the center of the ellipse.</p>
+        type: Number
+      - name: w
+        description: |
+          <p>width of the ellipse.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>height of the ellipse.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 472
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: w
+        description: ''
+        type: Number
+      - name: h
+        description: ''
+        type: Number
+      - name: detail
+        description: |
+          <p>optional parameter for WebGL mode only. This is to
+                                  specify the number of vertices that makes up the
+                                  perimeter of the ellipse. Default value is 25. Won't
+                                  draw a stroke for a detail of more than 50.</p>
+        type: Integer
+        optional: true
+chainable: true
+---
+
+
+# ellipse
diff --git a/src/content/reference/en/p5 copy/ellipseMode.mdx b/src/content/reference/en/p5 copy/ellipseMode.mdx
new file mode 100644
index 0000000000..0826de63f4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ellipseMode.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L12
+title: ellipseMode
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Changes where ellipses, circles, and arcs are drawn.</p>
+
+  <p>By default, the first two parameters of
+
+  <a href="/reference/p5/ellipse/">ellipse()</a>, <a
+  href="/reference/p5/circle/">circle()</a>,
+
+  and <a href="/reference/p5/arc/">arc()</a>
+
+  are the x- and y-coordinates of the shape's center. The next parameters set
+
+  the shape's width and height. This is the same as calling
+
+  <code>ellipseMode(CENTER)</code>.</p>
+
+  <p><code>ellipseMode(RADIUS)</code> also uses the first two parameters to set
+  the x- and
+
+  y-coordinates of the shape's center. The next parameters are half of the
+
+  shapes's width and height. Calling <code>ellipse(0, 0, 10, 15)</code> draws a
+  shape
+
+  with a width of 20 and height of 30.</p>
+
+  <p><code>ellipseMode(CORNER)</code> uses the first two parameters as the
+  upper-left
+
+  corner of the shape. The next parameters are its width and height.</p>
+
+  <p><code>ellipseMode(CORNERS)</code> uses the first two parameters as the
+  location of one
+
+  corner of the ellipse's bounding box. The next parameters are the location
+
+  of the opposite corner.</p>
+
+  <p>The argument passed to <code>ellipseMode()</code> must be written in ALL
+  CAPS because
+
+  the constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>,
+  and <code>CORNERS</code> are defined this
+
+  way. JavaScript is a case-sensitive language.</p>
+line: 12
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // White ellipse.
+      ellipseMode(RADIUS);
+      fill(255);
+      ellipse(50, 50, 30, 30);
+
+      // Gray ellipse.
+      ellipseMode(CENTER);
+      fill(100);
+      ellipse(50, 50, 30, 30);
+
+      describe('A white circle with a gray circle at its center. Both circles have black outlines.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // White ellipse.
+      ellipseMode(CORNER);
+      fill(255);
+      ellipse(25, 25, 50, 50);
+
+      // Gray ellipse.
+      ellipseMode(CORNERS);
+      fill(100);
+      ellipse(25, 25, 50, 50);
+
+      describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either CENTER, RADIUS, CORNER, or CORNERS</p>
+    type: Constant
+chainable: true
+---
+
+
+# ellipseMode
diff --git a/src/content/reference/en/p5 copy/ellipsoid.mdx b/src/content/reference/en/p5 copy/ellipsoid.mdx
new file mode 100644
index 0000000000..56d86709b7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ellipsoid.mdx	
@@ -0,0 +1,233 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1965
+title: ellipsoid
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws an ellipsoid.</p>
+
+  <p>An ellipsoid is a 3D shape with triangular faces that connect to form a
+
+  round surface. Ellipsoids with few faces look like crystals. Ellipsoids
+
+  with many faces have smooth surfaces and look like eggs.
+  <code>ellipsoid()</code>
+
+  defines a shape by its radii. This is different from
+
+  <a href="/reference/p5/ellipse/">ellipse()</a> which uses diameters
+
+  (width and height).</p>
+
+  <p>The first parameter, <code>radiusX</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>ellipsoid(20)</code>, it sets the radius of the ellipsoid along the
+  x-axis. By
+
+  default, <code>radiusX</code> is 50.</p>
+
+  <p>The second parameter, <code>radiusY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30)</code>, it sets the ellipsoid’s radius along the
+  y-axis.
+
+  By default, <code>radiusY</code> is set to the ellipsoid’s
+  <code>radiusX</code>.</p>
+
+  <p>The third parameter, <code>radiusZ</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30, 40)</code>, it sets the ellipsoid’s radius along
+  the
+
+  z-axis. By default, <code>radiusZ</code> is set to the ellipsoid’s
+  <code>radiusY</code>.</p>
+
+  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30, 40, 5)</code>, it sets the number of triangle
+
+  subdivisions to use along the x-axis. All 3D shapes are made by connecting
+
+  triangles to form their surfaces. By default, <code>detailX</code> is 24.</p>
+
+  <p>The fifth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30, 40, 5, 7)</code>, it sets the number of triangle
+
+  subdivisions to use along the y-axis. All 3D shapes are made by connecting
+
+  triangles to form their surfaces. By default, <code>detailY</code> is 16.</p>
+
+  <p>Note: <code>ellipsoid()</code> can only be used in WebGL mode.</p>
+line: 1965
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      ellipsoid(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      ellipsoid(30, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      // Set its radiusZ to 50.
+      ellipsoid(30, 40, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      // Set its radiusZ to 50.
+      // Set its detailX to 4.
+      ellipsoid(30, 40, 50, 4);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      // Set its radiusZ to 50.
+      // Set its detailX to 4.
+      // Set its detailY to 3.
+      ellipsoid(30, 40, 50, 4, 3);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radiusX
+    description: |
+      <p>radius of the ellipsoid along the x-axis. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: radiusY
+    description: >
+      <p>radius of the ellipsoid along the y-axis. Defaults to
+      <code>radiusX</code>.</p>
+    type: Number
+    optional: true
+  - name: radiusZ
+    description: >
+      <p>radius of the ellipsoid along the z-axis. Defaults to
+      <code>radiusY</code>.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# ellipsoid
diff --git a/src/content/reference/en/p5 copy/emissiveMaterial.mdx b/src/content/reference/en/p5 copy/emissiveMaterial.mdx
new file mode 100644
index 0000000000..10037c3c86
--- /dev/null
+++ b/src/content/reference/en/p5 copy/emissiveMaterial.mdx	
@@ -0,0 +1,140 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2647
+title: emissiveMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the emissive color of shapes’ surface material.</p>
+
+  <p>The <code>emissiveMaterial()</code> color sets a color shapes display at
+  full
+
+  strength, regardless of lighting. This can give the appearance that a shape
+
+  is glowing. However, emissive materials don’t actually emit light that
+
+  can affect surrounding objects.</p>
+
+  <p><code>emissiveMaterial()</code> can be called three ways with different
+  parameters to
+
+  set the material’s color.</p>
+
+  <p>The first way to call <code>emissiveMaterial()</code> has one parameter,
+  <code>gray</code>.
+
+  Grayscale values between 0 and 255, as in <code>emissiveMaterial(50)</code>,
+  can be
+
+  passed to set the material’s color. Higher grayscale values make shapes
+
+  appear brighter.</p>
+
+  <p>The second way to call <code>emissiveMaterial()</code> has one parameter,
+  <code>color</code>. A
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  values, or a
+
+  CSS color string, as in <code>emissiveMaterial('magenta')</code>, can be
+  passed to set
+
+  the material’s color.</p>
+
+  <p>The third way to call <code>emissiveMaterial()</code> has four parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
+  HSBA, or HSLA values can be
+
+  passed to set the material’s colors, as in <code>emissiveMaterial(255, 0,
+  0)</code> or
+
+  <code>emissiveMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
+  using
+
+  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+
+  <p>Note: <code>emissiveMaterial()</code> can only be used in WebGL mode.</p>
+line: 2647
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white ambient light.
+      ambientLight(255, 255, 255);
+
+      // Add a red emissive material using RGB values.
+      emissiveMaterial(255, 0, 0);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2647
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the
+                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the
+                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha value in the current
+                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2717
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 (black) and 255 (white).</p>
+        type: Number
+    chainable: 1
+  - line: 2723
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                     an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+    chainable: 1
+chainable: true
+---
+
+
+# emissiveMaterial
diff --git a/src/content/reference/en/p5 copy/endClip.mdx b/src/content/reference/en/p5 copy/endClip.mdx
new file mode 100644
index 0000000000..69bf243858
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endClip.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L190
+title: endClip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: |
+  <p>Ends defining a mask that was started with
+  <a href="/reference/p5/beginClip/">beginClip()</a>.</p>
+line: 190
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white triangle and circle on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# endClip
diff --git a/src/content/reference/en/p5 copy/endContour.mdx b/src/content/reference/en/p5 copy/endContour.mdx
new file mode 100644
index 0000000000..5965b72db8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endContour.mdx	
@@ -0,0 +1,133 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1224
+title: endContour
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Stops creating a hole within a flat shape.</p>
+
+  <p>The <a href="/reference/p5/beginContour/">beginContour()</a> and
+  <code>endContour()</code>
+
+  functions allow for creating negative space within custom shapes that are
+
+  flat. <a href="/reference/p5/beginContour/">beginContour()</a> begins adding
+  vertices
+
+  to a negative space and <code>endContour()</code> stops adding them.
+
+  <a href="/reference/p5/beginContour/">beginContour()</a> and
+  <code>endContour()</code> must be
+
+  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a>.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and <a
+  href="/reference/p5/scale/">scale()</a>
+
+  don't work between <a href="/reference/p5/beginContour/">beginContour()</a>
+  and
+
+  <code>endContour()</code>. It's also not possible to use other shapes, such as
+
+  <a href="/reference/p5/ellipse/">ellipse()</a> or <a
+  href="/reference/p5/rect/">rect()</a>,
+
+  between <a href="/reference/p5/beginContour/">beginContour()</a> and
+  <code>endContour()</code>.</p>
+
+  <p>Note: The vertices that define a negative space must "wind" in the opposite
+
+  direction from the outer shape. First, draw vertices for the outer shape
+
+  clockwise order. Then, draw vertices for the negative space in
+
+  counter-clockwise order.</p>
+line: 1224
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(10, 10);
+      vertex(90, 10);
+      vertex(90, 90);
+      vertex(10, 90);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(30, 30);
+      vertex(30, 70);
+      vertex(70, 70);
+      vertex(70, 30);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(-40, -40);
+      vertex(40, -40);
+      vertex(40, 40);
+      vertex(-40, 40);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(-20, -20);
+      vertex(-20, 20);
+      vertex(20, 20);
+      vertex(20, -20);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# endContour
diff --git a/src/content/reference/en/p5 copy/endGeometry.mdx b/src/content/reference/en/p5 copy/endGeometry.mdx
new file mode 100644
index 0000000000..bfbeb81c7b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endGeometry.mdx	
@@ -0,0 +1,285 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L266
+title: endGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Stops adding shapes to a new
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and returns the
+  object.</p>
+
+  <p>The <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>
+
+  functions help with creating complex 3D shapes from simpler ones such as
+
+  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
+  begins adding shapes
+
+  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
+
+  <p><code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a> can help
+
+  to make sketches more performant. For example, if a complex 3D shape
+
+  doesn’t change while a sketch runs, then it can be created with
+
+  <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>.
+
+  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
+  then
+
+  drawing it will run faster than repeatedly drawing the individual pieces.</p>
+
+  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
+  way to
+
+  build 3D shapes.</p>
+
+  <p>Note: <code>endGeometry()</code> can only be used in WebGL mode.</p>
+line: 266
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add a cone.
+      cone();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      createArrow();
+
+      describe('A white arrow drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let blueArrow;
+    let redArrow;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the arrows.
+      redArrow = createArrow('red');
+      blueArrow = createArrow('blue');
+
+      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the red arrow.
+      model(redArrow);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the blue arrow.
+      model(blueArrow);
+    }
+
+    function createArrow(fillColor) {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      fill(fillColor);
+
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = createParticles();
+    }
+
+    function createParticles() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new 3D shape.
+  type: p5.Geometry
+chainable: false
+---
+
+
+# endGeometry
diff --git a/src/content/reference/en/p5 copy/endShape.mdx b/src/content/reference/en/p5 copy/endShape.mdx
new file mode 100644
index 0000000000..198b6d7497
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endShape.mdx	
@@ -0,0 +1,256 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1344
+title: endShape
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Stops adding vertices to a custom shape.</p>
+
+  <p>The <a href="/reference/p5/beginShape/">beginShape()</a> and
+  <code>endShape()</code> functions
+
+  allow for creating custom shapes in 2D or 3D.
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> begins adding vertices to
+  a
+
+  custom shape and <code>endShape()</code> stops adding them.</p>
+
+  <p>The first parameter, <code>mode</code>, is optional. By default, the first
+  and last
+
+  vertices of a shape aren't connected. If the constant <code>CLOSE</code> is
+  passed, as
+
+  in <code>endShape(CLOSE)</code>, then the first and last vertices will be
+  connected.</p>
+
+  <p>The second parameter, <code>count</code>, is also optional. In WebGL mode,
+  it’s more
+
+  efficient to draw many copies of the same shape using a technique called
+
+  <a
+  href="https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html"
+  target="_blank">instancing</a>.
+
+  The <code>count</code> parameter tells WebGL mode how many copies to draw. For
+
+  example, calling <code>endShape(CLOSE, 400)</code> after drawing a custom
+  shape will
+
+  make it efficient to draw 400 copies. This feature requires
+
+  <a href="https://p5js.org/tutorials/intro-to-shaders/" target="_blank">writing
+  a custom shader</a>.</p>
+
+  <p>After calling <a href="/reference/p5/beginShape/">beginShape()</a>, shapes
+  can be
+
+  built by calling <a href="/reference/p5/vertex/">vertex()</a>,
+
+  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
+
+  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
+
+  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
+
+  <code>endShape()</code> will stop adding vertices to the
+
+  shape. Each shape will be outlined with the current stroke color and filled
+
+  with the current fill color.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and
+
+  <a href="/reference/p5/scale/">scale()</a> don't work between
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+  <code>endShape()</code>. It's also not
+
+  possible to use other shapes, such as <a
+  href="/reference/p5/ellipse/">ellipse()</a> or
+
+  <a href="/reference/p5/rect/">rect()</a>, between
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+  <code>endShape()</code>.</p>
+line: 1344
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shapes.
+      noFill();
+
+      // Left triangle.
+      beginShape();
+      vertex(20, 20);
+      vertex(45, 20);
+      vertex(45, 80);
+      endShape(CLOSE);
+
+      // Right triangle.
+      beginShape();
+      vertex(50, 20);
+      vertex(75, 20);
+      vertex(75, 80);
+      endShape();
+
+      describe(
+        'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(200, 100);
+
+      background(240);
+
+      noFill();
+      stroke(0);
+
+      // Open shape (left)
+      beginShape();
+      vertex(20, 20);
+      vertex(80, 20);
+      vertex(80, 80);
+      endShape();  // Not closed
+
+      // Closed shape (right)
+      beginShape();
+      vertex(120, 20);
+      vertex(180, 20);
+      vertex(180, 80);
+      endShape(CLOSE);  // Closed
+
+      describe(
+        'Two right-angled shapes on a light gray background. The left shape is open with three lines. The right shape is closed, forming a triangle.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `#version 300 es
+
+    precision mediump float;
+
+    in vec3 aPosition;
+    flat out int instanceID;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+
+      // Copy the instance ID to the fragment shader.
+      instanceID = gl_InstanceID;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+
+      // gl_InstanceID represents a numeric value for each instance.
+      // Using gl_InstanceID allows us to move each instance separately.
+      // Here we move each instance horizontally by ID * 23.
+      float xOffset = float(gl_InstanceID) * 23.0;
+
+      // Apply the offset to the final position.
+      gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
+        vec4(xOffset, 0.0, 0.0, 0.0));
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `#version 300 es
+
+    precision mediump float;
+
+    out vec4 outColor;
+    flat in int instanceID;
+    uniform float numInstances;
+
+    void main() {
+      vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
+      vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
+
+      // Normalize the instance ID.
+      float normId = float(instanceID) / numInstances;
+
+      // Mix between two colors using the normalized instance ID.
+      outColor = mix(red, blue, normId);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let myShader = createShader(vertSrc, fragSrc);
+
+      background(220);
+
+      // Compile and apply the p5.Shader.
+      shader(myShader);
+
+      // Set the numInstances uniform.
+      myShader.setUniform('numInstances', 4);
+
+      // Translate the origin to help align the drawing.
+      translate(25, -10);
+
+      // Style the shapes.
+      noStroke();
+
+      // Draw the shapes.
+      beginShape();
+      vertex(0, 0);
+      vertex(0, 20);
+      vertex(20, 20);
+      vertex(20, 0);
+      vertex(0, 0);
+      endShape(CLOSE, 4);
+
+      describe('A row of four squares. Their colors transition from purple on the left to red on the right');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>use CLOSE to close the shape</p>
+    type: Constant
+    optional: true
+  - name: count
+    description: >
+      <p>number of times you want to draw/instance the shape (for WebGL
+      mode).</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# endShape
diff --git a/src/content/reference/en/p5 copy/erase.mdx b/src/content/reference/en/p5 copy/erase.mdx
new file mode 100644
index 0000000000..24f1397e8e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/erase.mdx	
@@ -0,0 +1,123 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1629
+title: erase
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Starts using shapes to erase parts of the canvas.</p>
+
+  <p>All drawing that follows <code>erase()</code> will subtract from the
+  canvas, revealing
+
+  the web page underneath. The erased areas will become transparent, allowing
+
+  the content behind the canvas to show through. The
+
+  <a href="/reference/p5/fill/">fill()</a>, <a
+  href="/reference/p5/stroke/">stroke()</a>, and
+
+  <a href="/reference/p5/blendMode/">blendMode()</a> have no effect once
+  <code>erase()</code> is
+
+  called.</p>
+
+  <p>The <code>erase()</code> function has two optional parameters. The first
+  parameter
+
+  sets the strength of erasing by the shape's interior. A value of 0 means
+
+  that no erasing will occur. A value of 255 means that the shape's interior
+
+  will fully erase the content underneath. The default value is 255
+
+  (full strength).</p>
+
+  <p>The second parameter sets the strength of erasing by the shape's edge. A
+
+  value of 0 means that no erasing will occur. A value of 255 means that the
+
+  shape's edge will fully erase the content underneath. The default value is
+
+  255 (full strength).</p>
+
+  <p>To cancel the erasing effect, use the <a
+  href="/reference/p5/noErase/">noErase()</a>
+
+  function.</p>
+
+  <p><code>erase()</code> has no effect on drawing done with the
+
+  <a href="/reference/p5/image/">image()</a> and
+
+  <a href="/reference/p5/background/">background()</a> functions.</p>
+line: 1629
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(100, 100, 250);
+
+      // Draw a pink square.
+      fill(250, 100, 100);
+      square(20, 20, 60);
+
+      // Erase a circular area.
+      erase();
+      circle(25, 30, 30);
+      noErase();
+
+      describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(100, 100, 250);
+
+      // Draw a pink square.
+      fill(250, 100, 100);
+      square(20, 20, 60);
+
+      // Erase a circular area.
+      strokeWeight(5);
+      erase(150, 255);
+      circle(25, 30, 30);
+      noErase();
+
+      describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: strengthFill
+    description: |
+      <p>a number (0-255) for the strength of erasing under a shape's interior.
+                                             Defaults to 255, which is full strength.</p>
+    type: Number
+    optional: true
+  - name: strengthStroke
+    description: |
+      <p>a number (0-255) for the strength of erasing under a shape's edge.
+                                             Defaults to 255, which is full strength.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# erase
diff --git a/src/content/reference/en/p5 copy/exitPointerLock.mdx b/src/content/reference/en/p5 copy/exitPointerLock.mdx
new file mode 100644
index 0000000000..db8a989422
--- /dev/null
+++ b/src/content/reference/en/p5 copy/exitPointerLock.mdx	
@@ -0,0 +1,82 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1946
+title: exitPointerLock
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>Exits a pointer lock started with
+
+  <a href="/reference/p5/requestPointerLock/">requestPointerLock</a>.</p>
+
+  <p>Calling <code>requestPointerLock()</code> locks the values of
+
+  <a href="/reference/p5/mouseX/">mouseX</a>, <a
+  href="/reference/p5/mouseY/">mouseY</a>,
+
+  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
+  href="/reference/p5/pmouseY/">pmouseY</a>.
+
+  Calling <code>exitPointerLock()</code> resumes updating the mouse system
+  variables.</p>
+
+  <p>Note: Most browsers require an input, such as a click, before calling
+
+  <code>requestPointerLock()</code>. It’s recommended to call
+  <code>requestPointerLock()</code> in
+
+  an event function such as <a
+  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
+line: 1946
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let isLocked = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a word at its center. The word changes between "Unlocked" and "Locked" when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Tell the user whether the pointer is locked.
+      if (isLocked === true) {
+        text('Locked', 50, 50);
+      } else {
+        text('Unlocked', 50, 50);
+      }
+    }
+
+    // Toggle the pointer lock when the user double-clicks.
+    function doubleClicked() {
+      if (isLocked === true) {
+        exitPointerLock();
+        isLocked = false;
+      } else {
+        requestPointerLock();
+        isLocked = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# exitPointerLock
diff --git a/src/content/reference/en/p5 copy/exp.mdx b/src/content/reference/en/p5 copy/exp.mdx
new file mode 100644
index 0000000000..e75a420dab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/exp.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L230
+title: exp
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the value of Euler's number e (2.71828...) raised to the power
+  of a number.</p>
+line: 230
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = exp(1);
+      circle(10, 10, d);
+
+      // Left-center.
+      d = exp(2);
+      circle(20, 20, d);
+
+      // Right-center.
+      d = exp(3);
+      circle(40, 40, d);
+
+      // Bottom-right.
+      d = exp(4);
+      circle(80, 80, d);
+
+      describe('A series of circles that grow exponentially from top left to bottom right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that grow exponentially from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 0.005 * exp(x * 0.1);
+
+      // Draw a point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>exponent to raise.</p>
+    type: Number
+return:
+  description: e^n
+  type: Number
+chainable: false
+---
+
+
+# exp
diff --git a/src/content/reference/en/p5 copy/fill.mdx b/src/content/reference/en/p5 copy/fill.mdx
new file mode 100644
index 0000000000..84f074abd4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/fill.mdx	
@@ -0,0 +1,312 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1000
+title: fill
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Sets the color used to fill shapes.</p>
+
+  <p>Calling <code>fill(255, 165, 0)</code> or <code>fill('orange')</code> means
+  all shapes drawn
+
+  after the fill command will be filled with the color orange.</p>
+
+  <p>The version of <code>fill()</code> with one parameter interprets the value
+  one of
+
+  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
+  grayscale
+
+  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
+  color
+
+  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
+  provided to
+
+  set the fill color.</p>
+
+  <p>The version of <code>fill()</code> with three parameters interprets them as
+  RGB, HSB,
+
+  or HSL colors, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The default color space is
+  RGB,
+
+  with each value in the range from 0 to 255.</p>
+
+  <p>The version of <code>fill()</code> with four parameters interprets them as
+  <code>RGBA</code>, <code>HSBA</code>,
+
+  or <code>HSLA</code> colors, depending on the current <a
+  href="/reference/p5/colorMode/">colorMode()</a>. The last parameter
+
+  sets the alpha (transparency) value.</p>
+line: 1000
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A grayscale value.
+      fill(51);
+      square(20, 20, 60);
+
+      describe('A dark charcoal gray square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // R, G & B values.
+      fill(255, 204, 0);
+      square(20, 20, 60);
+
+      describe('A yellow square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // R, G, B, and Alpha values.
+      fill(255, 0, 0, 128);
+      square(20, 20, 60);
+
+      describe('A semi-transparent red square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(100);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // H, S & B values.
+      fill(255, 204, 100);
+      square(20, 20, 60);
+
+      describe('A royal blue square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A CSS named color.
+      fill('red');
+      square(20, 20, 60);
+
+      describe('A red square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Three-digit hex RGB notation.
+      fill('#fae');
+      square(20, 20, 60);
+
+      describe('A pink square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Six-digit hex RGB notation.
+      fill('#A251FA');
+      square(20, 20, 60);
+
+      describe('A purple square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGB notation.
+      fill('rgb(0, 255, 0)');
+      square(20, 20, 60);
+
+      describe('A bright green square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGBA notation.
+      fill('rgba(0, 255, 0, 0.25)');
+      square(20, 20, 60);
+
+      describe('A soft green rectange with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGB notation.
+      fill('rgb(100%, 0%, 10%)');
+      square(20, 20, 60);
+
+      describe('A red square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGBA notation.
+      fill('rgba(100%, 0%, 100%, 0.5)');
+      square(20, 20, 60);
+
+      describe('A dark fuchsia square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A p5.Color object.
+      let c = color(0, 0, 255);
+      fill(c);
+      square(20, 20, 60);
+
+      describe('A blue square with a black outline.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1000
+    params:
+      - name: v1
+        description: >
+          <p>red value if color mode is RGB or hue value if color mode is
+          HSB.</p>
+        type: Number
+      - name: v2
+        description: >
+          <p>green value if color mode is RGB or saturation value if color mode
+          is HSB.</p>
+        type: Number
+      - name: v3
+        description: >
+          <p>blue value if color mode is RGB or brightness value if color mode
+          is HSB.</p>
+        type: Number
+      - name: alpha
+        description: >
+          <p>alpha value, controls transparency (0 - transparent, 255 -
+          opaque).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1225
+    params:
+      - name: value
+        description: |
+          <p>a color string.</p>
+        type: String
+    chainable: 1
+  - line: 1231
+    params:
+      - name: gray
+        description: |
+          <p>a grayscale value.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1238
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue &
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 1245
+    params:
+      - name: color
+        description: |
+          <p>the fill color.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# fill
diff --git a/src/content/reference/en/p5 copy/filter.mdx b/src/content/reference/en/p5 copy/filter.mdx
new file mode 100644
index 0000000000..5496568d48
--- /dev/null
+++ b/src/content/reference/en/p5 copy/filter.mdx	
@@ -0,0 +1,330 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L442
+title: filter
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Applies an image filter to the canvas.</p>
+
+  <p>The preset options are:</p>
+
+  <p><code>INVERT</code>
+
+  Inverts the colors in the image. No parameter is used.</p>
+
+  <p><code>GRAY</code>
+
+  Converts the image to grayscale. No parameter is used.</p>
+
+  <p><code>THRESHOLD</code>
+
+  Converts the image to black and white. Pixels with a grayscale value
+
+  above a given threshold are converted to white. The rest are converted to
+
+  black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+
+  value is specified, 0.5 is used.</p>
+
+  <p><code>OPAQUE</code>
+
+  Sets the alpha channel to entirely opaque. No parameter is used.</p>
+
+  <p><code>POSTERIZE</code>
+
+  Limits the number of colors in the image. Each color channel is limited to
+
+  the number of colors specified. Values between 2 and 255 are valid, but
+
+  results are most noticeable with lower values. The default value is 4.</p>
+
+  <p><code>BLUR</code>
+
+  Blurs the image. The level of blurring is specified by a blur radius. Larger
+
+  values increase the blur. The default value is 4. A gaussian blur is used
+
+  in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>
+
+  <p><code>ERODE</code>
+
+  Reduces the light areas. No parameter is used.</p>
+
+  <p><code>DILATE</code>
+
+  Increases the light areas. No parameter is used.</p>
+
+  <p><code>filter()</code> uses WebGL in the background by default because it's
+  faster.
+
+  This can be disabled in <code>P2D</code> mode by adding a <code>false</code>
+  argument, as in
+
+  <code>filter(BLUR, false)</code>. This may be useful to keep computation off
+  the GPU
+
+  or to work around a lack of WebGL support.</p>
+
+  <p>In WebgL mode, <code>filter()</code> can also use custom shaders. See
+
+  <a href="/reference/p5/createFilterShader/">createFilterShader()</a> for more
+
+  information.</p>
+line: 442
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the INVERT filter.
+      filter(INVERT);
+
+      describe('A blue brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the GRAY filter.
+      filter(GRAY);
+
+      describe('A brick wall drawn in grayscale.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the THRESHOLD filter.
+      filter(THRESHOLD);
+
+      describe('A brick wall drawn in black and white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the OPAQUE filter.
+      filter(OPAQUE);
+
+      describe('A red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the POSTERIZE filter.
+      filter(POSTERIZE, 3);
+
+      describe('An image of a red brick wall drawn with limited color palette.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the BLUR filter.
+      filter(BLUR, 3);
+
+      describe('A blurry image of a red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the DILATE filter.
+      filter(DILATE);
+
+      describe('A red brick wall with bright lines between each brick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the ERODE filter.
+      filter(ERODE);
+
+      describe('A red brick wall with faint lines between each brick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the BLUR filter.
+      // Don't use WebGL.
+      filter(BLUR, 3, false);
+
+      describe('A blurry image of a red brick wall.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 442
+    params:
+      - name: filterType
+        description: |
+          <p>either THRESHOLD, GRAY, OPAQUE, INVERT,
+                                         POSTERIZE, BLUR, ERODE, DILATE or BLUR.</p>
+        type: Constant
+      - name: filterParam
+        description: |
+          <p>parameter unique to each filter.</p>
+        type: Number
+        optional: true
+      - name: useWebGL
+        description: |
+          <p>flag to control whether to use fast
+                                         WebGL filters (GPU) or original image
+                                         filters (CPU); defaults to <code>true</code>.</p>
+        type: Boolean
+        optional: true
+  - line: 715
+    params:
+      - name: filterType
+        description: ''
+        type: Constant
+      - name: useWebGL
+        description: ''
+        type: Boolean
+        optional: true
+  - line: 720
+    params:
+      - name: shaderFilter
+        description: |
+          <p>shader that's been loaded, with the
+                                            frag shader using a <code>tex0</code> uniform.</p>
+        type: p5.Shader
+chainable: false
+---
+
+
+# filter
diff --git a/src/content/reference/en/p5 copy/float.mdx b/src/content/reference/en/p5 copy/float.mdx
new file mode 100644
index 0000000000..fffd6bfc1b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/float.mdx	
@@ -0,0 +1,116 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L10
+title: float
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>String</code> to a floating point (decimal)
+  <code>Number</code>.</p>
+
+  <p><code>float()</code> converts strings that resemble numbers, such as
+  <code>'12.34'</code>, into
+
+  numbers.</p>
+
+  <p>The parameter, <code>str</code>, is the string value to convert. For
+  example, calling
+
+  <code>float('12.34')</code> returns the number <code>12.34</code>.  If an
+  array of strings is
+
+  passed, as in <code>float(['12.34', '56.78'])</code>, then an array of numbers
+  will be
+
+  returned.</p>
+
+  <p>Note: If a string can't be converted to a number, as in
+  <code>float('giraffe')</code>,
+
+  then the value <code>NaN</code> (not a number) will be returned.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '12.3';
+
+      // Convert the string to a number.
+      let converted = float(original);
+
+      // Double the converted value.
+      let twice = converted * 2;
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(12);
+
+      // Display the original and converted values.
+      text(`${original} × 2 = ${twice}`, 50, 50);
+
+      describe('The text "12.3 × 2 = 24.6" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let original = ['60', '30', '15'];
+
+      // Convert the strings to numbers.
+      let diameters = float(original);
+
+      for (let d of diameters) {
+        // Draw a circle.
+        circle(50, 50, d);
+      }
+
+      describe('Three white, concentric circles on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 10
+    params:
+      - name: str
+        description: |
+          <p>string to convert.</p>
+        type: String
+    return:
+      description: converted number.
+      type: Number
+  - line: 80
+    params:
+      - name: ns
+        description: |
+          <p>array of strings to convert.</p>
+        type: 'String[]'
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# float
diff --git a/src/content/reference/en/p5 copy/floor.mdx b/src/content/reference/en/p5 copy/floor.mdx
new file mode 100644
index 0000000000..a9e97965a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/floor.mdx	
@@ -0,0 +1,57 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L294
+title: floor
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the closest integer value that is less than or equal to the
+  value of a number.</p>
+line: 294
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use RGB color with values from 0 to 1.
+      colorMode(RGB, 1);
+
+      noStroke();
+
+      // Draw the left rectangle.
+      let r = 0.8;
+      fill(r, 0, 0);
+      rect(0, 0, 50, 100);
+
+      // Round r down to 0.
+      r = floor(r);
+
+      // Draw the right rectangle.
+      fill(r, 0, 0);
+      rect(50, 0, 50, 100);
+
+      describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to round down.</p>
+    type: Number
+return:
+  description: rounded down number.
+  type: Integer
+chainable: false
+---
+
+
+# floor
diff --git a/src/content/reference/en/p5 copy/focused.mdx b/src/content/reference/en/p5 copy/focused.mdx
new file mode 100644
index 0000000000..1e95f25927
--- /dev/null
+++ b/src/content/reference/en/p5 copy/focused.mdx	
@@ -0,0 +1,50 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L174
+title: focused
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Boolean</code> variable that's <code>true</code> if the browser is
+  focused and <code>false</code> if
+
+  not.</p>
+
+  <p>Note: The browser window can only receive input if it's focused.</p>
+line: 174
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Open this example in two separate browser
+    // windows placed side-by-side to demonstrate.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A square changes color from green to red when the browser window is out of focus.');
+    }
+
+    function draw() {
+      // Change the background color
+      // when the browser window
+      // goes in/out of focus.
+      if (focused === true) {
+        background(0, 255, 0);
+      } else {
+        background(255, 0, 0);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# focused
diff --git a/src/content/reference/en/p5 copy/for.mdx b/src/content/reference/en/p5 copy/for.mdx
new file mode 100644
index 0000000000..dc71d1c2ca
--- /dev/null
+++ b/src/content/reference/en/p5 copy/for.mdx	
@@ -0,0 +1,290 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1648
+title: for
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A way to repeat a block of code when the number of iterations is known.</p>
+
+  <p><code>for</code> loops are helpful for repeating statements a certain
+  number of times.
+
+  For example, a <code>for</code> loop makes it easy to express the idea
+
+  "draw five lines" like so:</p>
+
+  <pre><code class="language-js">for (let x = 10; x < 100; x += 20) {
+    line(x, 25, x, 75);
+  }
+
+  </code></pre>
+
+  <p>The loop's header begins with the keyword <code>for</code>. Loops generally
+  count up
+
+  or count down as they repeat, or iterate. The statements in parentheses
+
+  <code>let x = 10; x < 100; x += 20</code> tell the loop how it should
+  repeat:</p>
+
+  <ul>
+
+  <li><code>let x = 10</code> tells the loop to start counting at
+  <code>10</code> and keep track of iterations using the variable
+  <code>x</code>.</li>
+
+  <li><code>x < 100</code> tells the loop to count up to, but not including,
+  <code>100</code>.</li>
+
+  <li><code>x += 20</code>  tells the loop to count up by <code>20</code> at the
+  end of each iteration.</li>
+
+  </ul>
+
+  <p>The code between the curly braces <code>{}</code> is the loop's body.
+  Statements in the
+
+  loop body are repeated during each iteration of the loop.</p>
+
+  <p>It's common to create infinite loops accidentally. When this happens,
+
+  sketches may become unresponsive and the web browser may display a warning.
+
+  For example, the following loop never stops iterating because it doesn't
+
+  count up:</p>
+
+  <pre><code class="language-js">for (let x = 10; x < 100; x = 20) {
+    line(x, 25, x, 75);
+  }
+
+  </code></pre>
+
+  <p>The statement <code>x = 20</code> keeps the variable <code>x</code> stuck
+  at <code>20</code>, which is
+
+  always less than <code>100</code>.</p>
+
+  <p><code>for</code> loops can also count down:</p>
+
+  <pre><code class="language-js">for (let d = 100; d > 0; d -= 10) {
+    circle(50, 50, d);
+  }
+
+  </code></pre>
+
+  <p><code>for</code> loops can also contain other loops. The following nested
+  loop draws a
+
+  grid of points:</p>
+
+  <pre><code class="language-js">// Loop from left to right.
+
+  for (let x = 10; x < 100; x += 10) {
+
+    // Loop from top to bottom.
+    for (let y = 10; y < 100; y += 10) {
+      point(x, y);
+    }
+
+  }
+
+  </code></pre>
+
+  <p><code>for</code> loops are also helpful for iterating through the elements
+  of an
+
+  array. For example, it's common to iterate through an array that contains
+
+  information about where or what to draw:</p>
+
+  <pre><code class="language-js">// Create an array of x-coordinates.
+
+  let xCoordinates = [20, 40, 60];
+
+
+  for (let i = 0; i < xCoordinates.length; i += 1) {
+    // Update the element.
+    xCoordinates[i] += random(-1, 1);
+
+    // Draw a circle.
+    circle(xCoordinates[i], 50, 20);
+  }
+
+  </code></pre>
+
+  <p>If the array's values aren't modified, the <code>for...of</code> statement
+  can
+
+  simplify the code. They're similar to <code>for</code> loops in Python and
+  <code>for-each</code>
+
+  loops in C++ and Java. The following loops have the same effect:</p>
+
+  <pre><code class="language-js">// Draw circles with a for loop.
+
+  let xCoordinates = [20, 40, 60];
+
+
+  for (let i = 0; i < xCoordinates.length; i += 1) {
+    circle(xCoordinates[i], 50, 20);
+  }
+
+  </code></pre>
+
+  <pre><code class="language-js">// Draw circles with a for...of statement.
+
+  let xCoordinates = [20, 40, 60];
+
+
+  for (let x of xCoordinates) {
+    circle(x, 50, 20);
+  }
+
+  </code></pre>
+
+  <p>In the code snippets above, the variables <code>i</code> and <code>x</code>
+  have different roles.</p>
+
+  <p>In the first snippet, <code>i</code> counts from <code>0</code> up to
+  <code>2</code>, which is one less than
+
+  <code>xCoordinates.length</code>. <code>i</code> is used to access the element
+  in <code>xCoordinates</code>
+
+  at index <code>i</code>.</p>
+
+  <p>In the second code snippet, <code>x</code> isn't keeping track of the
+  loop's progress
+
+  or an index. During each iteration, <code>x</code> contains the next element
+  of
+
+  <code>xCoordinates</code>. <code>x</code> starts from the beginning of
+  <code>xCoordinates</code> (<code>20</code>) and
+
+  updates its value to <code>40</code> and then <code>60</code> during the next
+  iterations.</p>
+line: 1648
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Five black vertical lines on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw vertical lines using a loop.
+      for (let x = 10; x < 100; x += 20) {
+        line(x, 25, x, 75);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Five white concentric circles drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw concentric circles using a loop.
+      for (let d = 100; d > 0; d -= 20) {
+        circle(50, 50, d);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A grid of black dots on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the spacing for points on the grid.
+      let space = 10;
+
+      // Increase the stroke weight.
+      strokeWeight(3);
+
+      // Loop from the left to the right.
+      for (let x = space; x < 100; x += space) {
+        // Loop from the top to the bottom.
+        for (let y = space; y < 100; y += space) {
+          point(x, y);
+        }
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable xCoordinates and assign it an array of numbers.
+    let xCoordinates = [20, 40, 60, 80];
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the element at index i and use it to draw a circle.
+      for (let i = 0; i < xCoordinates.length; i += 1) {
+        circle(xCoordinates[i], 50, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable xCoordinates and assign it an array of numbers.
+    let xCoordinates = [20, 40, 60, 80];
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access each element of the array and use it to draw a circle.
+      for (let x of xCoordinates) {
+        circle(x, 50, 20);
+      }
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# for
diff --git a/src/content/reference/en/p5 copy/fract.mdx b/src/content/reference/en/p5 copy/fract.mdx
new file mode 100644
index 0000000000..399f144c09
--- /dev/null
+++ b/src/content/reference/en/p5 copy/fract.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L1048
+title: fract
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the fractional part of a number.</p>
+  <p>A number's fractional part includes its decimal values. For example,
+  <code>fract(12.34)</code> returns 0.34.</p>
+line: 1048
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Original number.
+      let n = 56.78;
+      text(n, 50, 33);
+
+      // Fractional part.
+      let f = fract(n);
+      text(f, 50, 67);
+
+      describe('The number 56.78 written above the number 0.78.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number whose fractional part will be found.</p>
+    type: Number
+return:
+  description: fractional part of n.
+  type: Number
+chainable: false
+---
+
+
+# fract
diff --git a/src/content/reference/en/p5 copy/frameCount.mdx b/src/content/reference/en/p5 copy/frameCount.mdx
new file mode 100644
index 0000000000..f2d02603a0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/frameCount.mdx	
@@ -0,0 +1,73 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L69
+title: frameCount
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that tracks the number of frames drawn since
+  the sketch
+
+  started.</p>
+
+  <p><code>frameCount</code>'s value is 0 inside <a
+  href="/reference/p5/setup/">setup()</a>. It
+
+  increments by 1 each time the code in <a href="/reference/p5/draw/">draw()</a>
+
+  finishes executing.</p>
+line: 69
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the value of
+      // frameCount.
+      textSize(30);
+      textAlign(CENTER, CENTER);
+      text(frameCount, 50, 50);
+
+      describe('The number 0 written in black in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Set the frameRate to 30.
+      frameRate(30);
+
+      textSize(30);
+      textAlign(CENTER, CENTER);
+
+      describe('A number written in black in the middle of a gray square. Its value increases rapidly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display the value of
+      // frameCount.
+      text(frameCount, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Integer
+---
+
+
+# frameCount
diff --git a/src/content/reference/en/p5 copy/frameRate.mdx b/src/content/reference/en/p5 copy/frameRate.mdx
new file mode 100644
index 0000000000..38ccddd0d6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/frameRate.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L330
+title: frameRate
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Sets the number of frames to draw per second.</p>
+
+  <p>Calling <code>frameRate()</code> with one numeric argument, as in
+  <code>frameRate(30)</code>,
+
+  attempts to draw 30 frames per second (FPS). The target frame rate may not
+
+  be achieved depending on the sketch's processing needs. Most computers
+
+  default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
+
+  fast enough for smooth animations.</p>
+
+  <p>Calling <code>frameRate()</code> without an argument returns the current
+  frame rate.
+
+  The value returned is an approximation.</p>
+line: 330
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the x variable based
+      // on the current frameCount.
+      let x = frameCount % 100;
+
+      // If the mouse is pressed,
+      // decrease the frame rate.
+      if (mouseIsPressed === true) {
+        frameRate(10);
+      } else {
+        frameRate(60);
+      }
+
+      // Use x to set the circle's
+      // position.
+      circle(x, 50, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the mouse is pressed, do lots
+      // of math to slow down drawing.
+      if (mouseIsPressed === true) {
+        for (let i = 0; i < 1000000; i += 1) {
+          random();
+        }
+      }
+
+      // Get the current frame rate
+      // and display it.
+      let fps = frameRate();
+      text(fps, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 330
+    params:
+      - name: fps
+        description: |
+          <p>number of frames to draw per second.</p>
+        type: Number
+    chainable: 1
+  - line: 404
+    params: []
+    return:
+      description: current frame rate.
+      type: Number
+chainable: true
+---
+
+
+# frameRate
diff --git a/src/content/reference/en/p5 copy/freeGeometry.mdx b/src/content/reference/en/p5 copy/freeGeometry.mdx
new file mode 100644
index 0000000000..7af36d8620
--- /dev/null
+++ b/src/content/reference/en/p5 copy/freeGeometry.mdx	
@@ -0,0 +1,152 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L748
+title: freeGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Clears a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object from
+  the graphics
+
+  processing unit (GPU) memory.</p>
+
+  <p><a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can contain
+  lots of data
+
+  about their vertices, surface normals, colors, and so on. Complex 3D shapes
+
+  can use lots of memory which is a limited resource in many GPUs. Calling
+
+  <code>freeGeometry()</code> can improve performance by freeing a
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object’s resources from
+  GPU memory.
+
+  <code>freeGeometry()</code> works with <a
+  href="/reference/p5/p5.Geometry">p5.Geometry</a> objects
+
+  created with <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a>,
+
+  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, and
+
+  <a href="/reference/p5/loadModel/">loadModel()</a>.</p>
+
+  <p>The parameter, <code>geometry</code>, is the <a
+  href="/reference/p5/p5.Geometry">p5.Geometry</a>
+
+  object to be freed.</p>
+
+  <p>Note: A <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object can
+  still be drawn
+
+  after its resources are cleared from GPU memory. It may take longer to draw
+
+  the first time it’s redrawn.</p>
+
+  <p>Note: <code>freeGeometry()</code> can only be used in WebGL mode.</p>
+line: 748
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Create a p5.Geometry object.
+      beginGeometry();
+      cone();
+      let shape = endGeometry();
+
+      // Draw the shape.
+      model(shape);
+
+      // Free the shape's resources.
+      freeGeometry(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = buildGeometry(createParticles);
+    }
+
+    function createParticles() {
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: geometry
+    description: |
+      <p>3D shape whose resources should be freed.</p>
+    type: p5.Geometry
+chainable: false
+---
+
+
+# freeGeometry
diff --git a/src/content/reference/en/p5 copy/freqToMidi.mdx b/src/content/reference/en/p5 copy/freqToMidi.mdx
new file mode 100644
index 0000000000..12c6e1eff9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/freqToMidi.mdx	
@@ -0,0 +1,29 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L825
+title: freqToMidi
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the closest MIDI note value for
+  a given frequency.</p>
+line: 825
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: frequency
+    description: |
+      <p>A freqeuncy, for example, the "A"
+                                 above Middle C is 440Hz</p>
+    type: Number
+return:
+  description: MIDI note value
+  type: Number
+chainable: false
+---
+
+
+# freqToMidi
diff --git a/src/content/reference/en/p5 copy/frustum.mdx b/src/content/reference/en/p5 copy/frustum.mdx
new file mode 100644
index 0000000000..01ffd87883
--- /dev/null
+++ b/src/content/reference/en/p5 copy/frustum.mdx	
@@ -0,0 +1,175 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L522
+title: frustum
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets the frustum of the current camera in a 3D sketch.</p>
+
+  <p>In a frustum projection, shapes that are further from the camera appear
+
+  smaller than shapes that are near the camera. This technique, called
+
+  foreshortening, creates realistic 3D scenes.</p>
+
+  <p><code>frustum()</code> changes the default camera’s perspective by changing
+  its
+
+  viewing frustum. The frustum is the volume of space that’s visible to the
+
+  camera. The frustum’s shape is a pyramid with its top cut off. The camera
+
+  is placed where the top of the pyramid should be and points towards the
+
+  base of the pyramid. It views everything within the frustum.</p>
+
+  <p>The first four parameters, <code>left</code>, <code>right</code>,
+  <code>bottom</code>, and <code>top</code>, set the
+
+  coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+  <code>frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
+  wide
+
+  and 400 pixels tall. By default, these coordinates are set based on the
+
+  sketch’s width and height, as in
+
+  <code>ortho(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>
+
+  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
+  distance of the
+
+  frustum’s near and far plane from the camera. For example, calling
+
+  <code>ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s
+  200 pixels
+
+  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
+
+  pixels from the camera. By default, near is set to <code>0.1 * 800</code>,
+  which is
+
+  1/10th the default distance between the camera and the origin.
+  <code>far</code> is set
+
+  to <code>10 * 800</code>, which is 10 times the default distance between the
+  camera
+
+  and the origin.</p>
+
+  <p>Note: <code>frustum()</code> can only be used in WebGL mode.</p>
+line: 522
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A row of white cubes on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Apply the default frustum projection.
+      frustum();
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust the frustum.
+      // Center it.
+      // Set its width and height to 20 pixels.
+      // Place its near plane 300 pixels from the camera.
+      // Place its far plane 350 pixels from the camera.
+      frustum(-10, 10, -10, 10, 300, 350);
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: left
+    description: >
+      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: right
+    description: >
+      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: bottom
+    description: >
+      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: top
+    description: >
+      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: near
+    description: >
+      <p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
+      800</code>.</p>
+    type: Number
+    optional: true
+  - name: far
+    description: >
+      <p>z-coordinate of the frustum’s far plane. Defaults to <code>10 *
+      800</code>.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# frustum
diff --git a/src/content/reference/en/p5 copy/fullscreen.mdx b/src/content/reference/en/p5 copy/fullscreen.mdx
new file mode 100644
index 0000000000..1c6b2eb7fe
--- /dev/null
+++ b/src/content/reference/en/p5 copy/fullscreen.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L950
+title: fullscreen
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Toggles full-screen mode or returns the current mode.</p>
+
+  <p>Calling <code>fullscreen(true)</code> makes the sketch full-screen. Calling
+
+  <code>fullscreen(false)</code> makes the sketch its original size.</p>
+
+  <p>Calling <code>fullscreen()</code> without an argument returns
+  <code>true</code> if the sketch
+
+  is in full-screen mode and <code>false</code> if not.</p>
+
+  <p>Note: Due to browser restrictions, <code>fullscreen()</code> can only be
+  called with
+
+  user input such as a mouse press.</p>
+line: 950
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      describe('A gray canvas that switches between default and full-screen display when clicked.');
+    }
+
+    // If the mouse is pressed,
+    // toggle full-screen mode.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        let fs = fullscreen();
+        fullscreen(!fs);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: val
+    description: |
+      <p>whether the sketch should be in fullscreen mode.</p>
+    type: Boolean
+    optional: true
+return:
+  description: current fullscreen state.
+  type: Boolean
+chainable: false
+---
+
+
+# fullscreen
diff --git a/src/content/reference/en/p5 copy/function.mdx b/src/content/reference/en/p5 copy/function.mdx
new file mode 100644
index 0000000000..e213633c86
--- /dev/null
+++ b/src/content/reference/en/p5 copy/function.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L317
+title: function
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions/\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();\n</code></pre>\n<p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n</code></pre>\n<p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code></pre>\n<p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n  let answer = 2 * x;\n  return answer;\n}\n</code></pre>\n<p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n</code></pre>\n"
+line: 317
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function.\n  drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function and pass values for\n  // its position and size.\n  drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('The message \"Hello, \U0001F30D!\" written on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Create a greeting.\n  let greeting = createGreeting('\U0001F30D');\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(16);\n\n  // Display the greeting.\n  text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n  let message = `Hello, ${name}!`;\n  return message;\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# function
diff --git a/src/content/reference/en/p5 copy/get.mdx b/src/content/reference/en/p5 copy/get.mdx
new file mode 100644
index 0000000000..42cbb8e7f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/get.mdx	
@@ -0,0 +1,178 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L820
+title: get
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Gets a pixel or a region of pixels from the canvas.</p>
+
+  <p><code>get()</code> is easy to use but it's not as fast as
+
+  <a href="/reference/p5/pixels/">pixels</a>. Use <a
+  href="/reference/p5/pixels/">pixels</a>
+
+  to read many pixel values.</p>
+
+  <p>The version of <code>get()</code> with no parameters returns the entire
+  canvas.</p>
+
+  <p>The version of <code>get()</code> with two parameters interprets them as
+
+  coordinates. It returns an array with the <code>[R, G, B, A]</code> values of
+  the
+
+  pixel at the given point.</p>
+
+  <p>The version of <code>get()</code> with four parameters interprets them as
+  coordinates
+
+  and dimensions. It returns a subsection of the canvas as a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two parameters
+  are the
+
+  coordinates for the upper-left corner of the subsection. The last two
+
+  parameters are the width and height of the subsection.</p>
+
+  <p>Use <a href="/reference/p5.Image/get/">p5.Image.get()</a> to work directly
+  with
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> objects.</p>
+line: 820
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Get the entire canvas.
+      let c = get();
+
+      // Display half the canvas.
+      image(c, 50, 0);
+
+      describe('Two identical mountain landscapes shown side-by-side.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Get the color of a pixel.
+      let c = get(50, 90);
+
+      // Style the square with the pixel's color.
+      fill(c);
+      noStroke();
+
+      // Display the square.
+      square(25, 25, 50);
+
+      describe('A mountain landscape with an olive green square in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Get a region of the image.
+      let c = get(0, 0, 50, 50);
+
+      // Display the region.
+      image(c, 50, 50);
+
+      describe('A mountain landscape drawn on top of another mountain landscape.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+overloads:
+  - line: 820
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the pixel.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the pixel.</p>
+        type: Number
+      - name: w
+        description: |
+          <p>width of the subsection to be returned.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>height of the subsection to be returned.</p>
+        type: Number
+    return:
+      description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+      type: p5.Image
+  - line: 931
+    params: []
+    return:
+      description: whole canvas as a <a href="#/p5.Image">p5.Image</a>.
+      type: p5.Image
+  - line: 935
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+    return:
+      description: 'color of the pixel at (x, y) in array format `[R, G, B, A]`.'
+      type: 'Number[]'
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5 copy/getAudioContext.mdx b/src/content/reference/en/p5 copy/getAudioContext.mdx
new file mode 100644
index 0000000000..c7291c5cdf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getAudioContext.mdx	
@@ -0,0 +1,56 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L159
+title: getAudioContext
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >-
+  <p>Returns the Audio Context for this sketch. Useful for users
+
+  who would like to dig deeper into the <a target="_blank"
+  href="http://webaudio.github.io/web-audio-api/">Web Audio API
+
+  </a>.</p>
+
+
+  <p>Some browsers require users to startAudioContext
+
+  with a user gesture, such as touchStarted in the example below.</p>
+line: 159
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+     function draw() {
+       background(255);
+       textAlign(CENTER);
+
+       if (getAudioContext().state !== 'running') {
+         text('click to start audio', width/2, height/2);
+       } else {
+         text('audio is enabled', width/2, height/2);
+       }
+     }
+
+     function touchStarted() {
+       if (getAudioContext().state !== 'running') {
+         getAudioContext().resume();
+       }
+       var synth = new p5.MonoSynth();
+       synth.play('A4', 0.5, 0, 0.2);
+     }
+
+    </div></code>
+class: p5
+return:
+  description: AudioContext for this sketch
+  type: Object
+chainable: false
+---
+
+
+# getAudioContext
diff --git a/src/content/reference/en/p5 copy/getItem.mdx b/src/content/reference/en/p5 copy/getItem.mdx
new file mode 100644
index 0000000000..5747f67366
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getItem.mdx	
@@ -0,0 +1,151 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L164
+title: getItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Returns a value in the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs.</p>
+
+  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
+  values in
+
+  <code>localStorage</code> and <code>getItem()</code> makes it easy to retrieve
+  them.</p>
+
+  <p>The first parameter, <code>key</code>, is the name of the value to be
+  stored as a
+
+  string.</p>
+
+  <p>The second parameter, <code>value</code>, is the value to be retrieved a
+  string. For
+
+  example, calling <code>getItem('size')</code> retrieves the value with the key
+  <code>size</code>.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 164
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe('The text "Feist: 1234" written in black on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an object.
+      let p = { x: 50, y: 50 };
+
+      // Store the object.
+      storeItem('position', p);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let p = getItem('position');
+
+      // Draw the circle.
+      circle(p.x, p.y, 30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let c = color('deeppink');
+
+      // Store the object.
+      storeItem('color', c);
+
+      describe('A pink circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let c = getItem('color');
+
+      // Style the circle.
+      fill(c);
+
+      // Draw the circle.
+      circle(50, 50, 30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: key
+    description: |
+      <p>name of the value.</p>
+    type: String
+return:
+  description: stored item.
+  type: String|Number|Boolean|Object|Array
+chainable: false
+---
+
+
+# getItem
diff --git a/src/content/reference/en/p5 copy/getOutputVolume.mdx b/src/content/reference/en/p5 copy/getOutputVolume.mdx
new file mode 100644
index 0000000000..6542c5edb6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getOutputVolume.mdx	
@@ -0,0 +1,25 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L726
+title: getOutputVolume
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a number representing the output volume for sound
+  in this sketch.</p>
+line: 726
+isConstructor: false
+itemtype: method
+class: p5
+return:
+  description: |-
+    Output volume for sound in this sketch.
+                     Should be between 0.0 (silence) and 1.0.
+  type: Number
+chainable: false
+---
+
+
+# getOutputVolume
diff --git a/src/content/reference/en/p5 copy/getTargetFrameRate.mdx b/src/content/reference/en/p5 copy/getTargetFrameRate.mdx
new file mode 100644
index 0000000000..10e3c74a4b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getTargetFrameRate.mdx	
@@ -0,0 +1,48 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L447
+title: getTargetFrameRate
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Returns the target frame rate.</p>
+  <p>The value is either the system frame rate or the last value passed to
+  <a href="/reference/p5/frameRate/">frameRate()</a>.</p>
+line: 447
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('The number 20 written in black on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the frame rate to 20.
+      frameRate(20);
+
+      // Get the target frame rate and
+      // display it.
+      let fps = getTargetFrameRate();
+      text(fps, 43, 54);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: _targetFrameRate
+  type: Number
+chainable: false
+---
+
+
+# getTargetFrameRate
diff --git a/src/content/reference/en/p5 copy/getURL.mdx b/src/content/reference/en/p5 copy/getURL.mdx
new file mode 100644
index 0000000000..01ccdc8e11
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getURL.mdx	
@@ -0,0 +1,46 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1149
+title: getURL
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the sketch's current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/"
+  target="_blank">URL</a>
+
+  as a <code>String</code>.</p>
+line: 1149
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL
+      // and display it.
+      let url = getURL();
+      textWrap(CHAR);
+      text(url, 0, 40, 100);
+
+      describe('The URL "https://p5js.org/reference/p5/getURL" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: url
+  type: String
+chainable: false
+---
+
+
+# getURL
diff --git a/src/content/reference/en/p5 copy/getURLParams.mdx b/src/content/reference/en/p5 copy/getURLParams.mdx
new file mode 100644
index 0000000000..c08c77f23f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getURLParams.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1208
+title: getURLParams
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters"
+  target="_blank">URL parameters</a>
+
+  in an <code>Object</code>.</p>
+
+  <p>For example, calling <code>getURLParams()</code> in a sketch hosted at the
+  URL
+
+  <code>https://p5js.org?year=2014&month=May&day=15</code> returns
+
+  <code>{ year: 2014, month: 'May', day: 15 }</code>.</p>
+line: 1208
+isConstructor: false
+itemtype: method
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class='norender notest'>
+    <code>
+    // Imagine this sketch is hosted at the following URL:
+    // https://p5js.org?year=2014&month=May&day=15
+
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL
+      // parameters and display
+      // them.
+      let params = getURLParams();
+      text(params.day, 10, 20);
+      text(params.month, 10, 40);
+      text(params.year, 10, 60);
+
+      describe('The text "15", "May", and "2014" written in black on separate lines.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: URL params
+  type: Object
+chainable: false
+---
+
+
+# getURLParams
diff --git a/src/content/reference/en/p5 copy/getURLPath.mdx b/src/content/reference/en/p5 copy/getURLPath.mdx
new file mode 100644
index 0000000000..e71b7746ad
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getURLPath.mdx	
@@ -0,0 +1,58 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1175
+title: getURLPath
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource"
+  target="_blank">URL</a>
+
+  path as an <code>Array</code> of <code>String</code>s.</p>
+
+  <p>For example, consider a sketch hosted at the URL
+
+  <code>https://example.com/sketchbook</code>. Calling <code>getURLPath()</code>
+  returns
+
+  <code>['sketchbook']</code>. For a sketch hosted at the URL
+
+  <code>https://example.com/sketchbook/monday</code>, <code>getURLPath()</code>
+  returns
+
+  <code>['sketchbook', 'monday']</code>.</p>
+line: 1175
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL path
+      // and display the first
+      // part.
+      let path = getURLPath();
+      text(path[0], 25, 54);
+
+      describe('The word "reference" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: path components.
+  type: 'String[]'
+chainable: false
+---
+
+
+# getURLPath
diff --git a/src/content/reference/en/p5 copy/green.mdx b/src/content/reference/en/p5 copy/green.mdx
new file mode 100644
index 0000000000..72634492fb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/green.mdx	
@@ -0,0 +1,159 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L692
+title: green
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the green value of a color.</p>
+
+  <p><code>green()</code> extracts the green value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>green()</code> returns a color's green value in the range
+  0
+
+  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  RGB, it
+
+  returns the green value in the given range.</p>
+line: 692
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let c = color(175, 100, 220);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 100.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [175, 100, 220];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 100.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgb(175, 100, 220)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 100.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(69, 39, 86);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 39.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the green value.
+  type: Number
+chainable: false
+---
+
+
+# green
diff --git a/src/content/reference/en/p5 copy/gridOutput.mdx b/src/content/reference/en/p5 copy/gridOutput.mdx
new file mode 100644
index 0000000000..c80c3efaf2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/gridOutput.mdx	
@@ -0,0 +1,189 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L161
+title: gridOutput
+module: Environment
+submodule: Environment
+file: src/accessibility/outputs.js
+description: >
+  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
+
+  <p><code>gridOutput()</code> adds a general description, table of shapes, and
+  list of
+
+  shapes to the web page. The general description includes the canvas size,
+
+  canvas color, and number of shapes. For example,
+
+  <code>gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1
+  square</code>.</p>
+
+  <p><code>gridOutput()</code> uses its table of shapes as a grid. Each shape in
+  the grid
+
+  is placed in a cell whose row and column correspond to the shape's location
+
+  on the canvas. The grid cells describe the color and type of shape at that
+
+  location. For example, <code>red circle</code>. These descriptions can be
+  selected
+
+  individually to get more details. This is different from
+
+  <a href="/reference/p5/textOutput/">textOutput()</a>, which uses its table as
+  a list.</p>
+
+  <p>A list of shapes follows the table. The list describes the color, type,
+
+  location, and area of each shape. For example,
+
+  <code>red circle, location = middle, area = 3 %</code>.</p>
+
+  <p>The <code>display</code> parameter is optional. It determines how the
+  description is
+
+  displayed. If <code>LABEL</code> is passed, as in
+  <code>gridOutput(LABEL)</code>, the description
+
+  will be visible in a div element next to the canvas. Using <code>LABEL</code>
+  creates
+
+  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
+
+  development. If <code>FALLBACK</code> is passed, as in
+  <code>gridOutput(FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+
+  <p><code>gridOutput()</code> generates descriptions in English only. Text
+  drawn with
+
+  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
+  mode
+
+  and 3D shapes are not supported.</p>
+
+  <p>Use <a href="/reference/p5/describe/">describe()</a> and
+
+  <a href="/reference/p5/describeElement/">describeElement()</a> for more
+  control
+
+  over canvas descriptions.</p>
+line: 161
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Add the grid description.
+      gridOutput();
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Add the grid description and
+      // display it for debugging.
+      gridOutput(LABEL);
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the grid description.
+      gridOutput();
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the grid description and
+      // display it for debugging.
+      gridOutput(LABEL);
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: display
+    description: |
+      <p>either FALLBACK or LABEL.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# gridOutput
diff --git a/src/content/reference/en/p5 copy/height.mdx b/src/content/reference/en/p5 copy/height.mdx
new file mode 100644
index 0000000000..f6321218df
--- /dev/null
+++ b/src/content/reference/en/p5 copy/height.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L881
+title: height
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the height of the canvas in
+  pixels.</p>
+
+  <p><code>height</code>'s default value is 100. Calling
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
+
+  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
+
+  <code>height</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
+  sets its value to
+
+  0.</p>
+line: 881
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 54);
+
+      describe('The number 100 written in black on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 50);
+
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 27);
+
+      describe('The number 50 written in black on a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 54);
+
+      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+    }
+
+    // If the mouse is pressed, reisze
+    // the canvas and display its new
+    // height.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        resizeCanvas(100, 50);
+        background(200);
+        text(height, 42, 27);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# height
diff --git a/src/content/reference/en/p5 copy/hex.mdx b/src/content/reference/en/p5 copy/hex.mdx
new file mode 100644
index 0000000000..5475af324a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/hex.mdx	
@@ -0,0 +1,166 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L818
+title: hex
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Number</code> to a <code>String</code> with its
+  hexadecimal value.</p>
+
+  <p><code>hex()</code> converts a number to a string with its hexadecimal
+  number value.
+
+  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+
+  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+
+  number <code>11</code> (eleven) in base-10 is written as the letter
+  <code>B</code> in hex.</p>
+
+  <p>The first parameter, <code>n</code>, is the number to convert. For example,
+  <code>hex(20)</code>,
+
+  returns the string <code>'00000014'</code>. If an array is passed, as in
+
+  <code>hex([1, 10, 100])</code>, an array of hexadecimal strings is
+  returned.</p>
+
+  <p>The second parameter, <code>digits</code>, is optional. If a number is
+  passed, as in
+
+  <code>hex(20, 2)</code>, it sets the number of hexadecimal digits to display.
+  For
+
+  example, calling <code>hex(20, 2)</code> returns the string
+  <code>'14'</code>.</p>
+line: 818
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 20;
+
+      // Convert the number to a hex string.
+      let converted = hex(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "20 = 00000014" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 20;
+
+      // Convert the number to a hex string.
+      // Only display two hex digits.
+      let converted = hex(original, 2);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "20 = 14" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = [1, 10, 100];
+
+      // Convert the numbers to hex strings.
+      // Only use two hex digits.
+      let converted = hex(original, 2);
+
+      // Style the text.
+      textAlign(RIGHT, CENTER);
+      textSize(16);
+
+      // Iterate over the converted values.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${ original[i]} = ${converted[i]}`, 75, y);
+      }
+
+      describe(
+        'The text "1 = 01", "10 = 0A", and "100 = 64" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted hexadecimal value.
+  type: String
+overloads:
+  - line: 818
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: Number
+      - name: digits
+        description: |
+          <p>number of digits to include.</p>
+        type: Number
+        optional: true
+    return:
+      description: converted hexadecimal value.
+      type: String
+  - line: 926
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: 'Number[]'
+      - name: digits
+        description: ''
+        type: Number
+        optional: true
+    return:
+      description: converted hexadecimal values.
+      type: 'String[]'
+chainable: false
+---
+
+
+# hex
diff --git a/src/content/reference/en/p5 copy/hour.mdx b/src/content/reference/en/p5 copy/hour.mdx
new file mode 100644
index 0000000000..802a809d72
--- /dev/null
+++ b/src/content/reference/en/p5 copy/hour.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L44
+title: hour
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current hour as a number from 0–23.</p>
+line: 44
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current hour.
+      let h = hour();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the hour.
+      text(`Current hour: ${h}`, 20, 50, 60);
+
+      describe(`The text 'Current hour: ${h}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current hour between 0 and 23.
+  type: Integer
+chainable: false
+---
+
+
+# hour
diff --git a/src/content/reference/en/p5 copy/httpDo.mdx b/src/content/reference/en/p5 copy/httpDo.mdx
new file mode 100644
index 0000000000..52d6553248
--- /dev/null
+++ b/src/content/reference/en/p5 copy/httpDo.mdx	
@@ -0,0 +1,150 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1208
+title: httpDo
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text.<br><br>
+
+  For more advanced use, you may also pass in the path as the first argument
+
+  and a object as the second argument, the signature follows the one specified
+
+  in the Fetch API specification.
+
+  This method is suitable for fetching files up to size of 64MB when "GET" is
+  used.</br></br></p>
+line: 1208
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Examples use USGS Earthquake API:
+    // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+
+    // displays an animation of all USGS earthquakes
+    let earthquakes;
+    let eqFeatureIndex = 0;
+
+    function preload() {
+      let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+      httpDo(
+        url,
+        {
+          method: 'GET',
+          // Other Request options, like special headers for apis
+          headers: { authorization: 'Bearer secretKey' }
+        },
+        function(res) {
+          earthquakes = res;
+        }
+      );
+    }
+
+    function draw() {
+      // wait until the data is loaded
+      if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+        return;
+      }
+      clear();
+
+      let feature = earthquakes.features[eqFeatureIndex];
+      let mag = feature.properties.mag;
+      let rad = mag / 11 * ((width + height) / 2);
+      fill(255, 0, 0, 100);
+      ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+
+      if (eqFeatureIndex >= earthquakes.features.length) {
+        eqFeatureIndex = 0;
+      } else {
+        eqFeatureIndex += 1;
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+overloads:
+  - line: 1208
+    params:
+      - name: path
+        description: |
+          <p>name of the file or url to load</p>
+        type: String
+      - name: method
+        description: |
+          <p>either "GET", "POST", or "PUT",
+                                             defaults to "GET"</p>
+        type: String
+        optional: true
+      - name: datatype
+        description: |
+          <p>"json", "jsonp", "xml", or "text"</p>
+        type: String
+        optional: true
+      - name: data
+        description: |
+          <p>param data passed sent with request</p>
+        type: Object
+        optional: true
+      - name: callback
+        description: |
+          <p>function to be executed after
+                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+                                             as first argument</p>
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: |
+          <p>function to be executed if
+                                             there is an error, response is passed
+                                             in as first argument</p>
+        type: Function
+        optional: true
+    return:
+      description: |-
+        A promise that resolves with the data when the operation
+                          completes successfully or rejects with the error after
+                          one occurs.
+      type: Promise
+  - line: 1279
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: options
+        description: >
+          <p>Request object options as documented in the
+                                             "fetch" API
+          <a
+          href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API">reference</a></p>
+        type: Object
+      - name: callback
+        description: ''
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+chainable: false
+---
+
+
+# httpDo
diff --git a/src/content/reference/en/p5 copy/httpGet.mdx b/src/content/reference/en/p5 copy/httpGet.mdx
new file mode 100644
index 0000000000..9e8591e059
--- /dev/null
+++ b/src/content/reference/en/p5 copy/httpGet.mdx	
@@ -0,0 +1,140 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1043
+title: httpGet
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP GET request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text. This is equivalent
+  to
+
+  calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
+
+  a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+
+  which can be used to initialize typed arrays (such as Uint8Array).</p>
+line: 1043
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    // Examples use USGS Earthquake API:
+    //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
+    let earthquakes;
+    function preload() {
+      // Get the most recent earthquake in the database
+      let url =
+       'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+        'format=geojson&limit=1&orderby=time';
+      httpGet(url, 'jsonp', false, function(response) {
+        // when the HTTP request completes, populate the variable that holds the
+        // earthquake data used in the visualization.
+        earthquakes = response;
+      });
+    }
+
+    function draw() {
+      if (!earthquakes) {
+        // Wait until the earthquake data has loaded before drawing.
+        return;
+      }
+      background(200);
+      // Get the magnitude and name of the earthquake out of the loaded JSON
+      let earthquakeMag = earthquakes.features[0].properties.mag;
+      let earthquakeName = earthquakes.features[0].properties.place;
+      ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+      textAlign(CENTER);
+      text(earthquakeName, 0, height - 30, width, 30);
+      noLoop();
+    }
+    </code></div>
+class: p5
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+overloads:
+  - line: 1043
+    params:
+      - name: path
+        description: |
+          <p>name of the file or url to load</p>
+        type: String
+      - name: datatype
+        description: |
+          <p>"json", "jsonp", "binary", "arrayBuffer",
+                                             "xml", or "text"</p>
+        type: String
+        optional: true
+      - name: data
+        description: |
+          <p>param data passed sent with request</p>
+        type: Object|Boolean
+        optional: true
+      - name: callback
+        description: |
+          <p>function to be executed after
+                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+                                             as first argument</p>
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: |
+          <p>function to be executed if
+                                             there is an error, response is passed
+                                             in as first argument</p>
+        type: Function
+        optional: true
+    return:
+      description: |-
+        A promise that resolves with the data when the operation
+                          completes successfully or rejects with the error after
+                          one occurs.
+      type: Promise
+  - line: 1097
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: data
+        description: ''
+        type: Object|Boolean
+      - name: callback
+        description: ''
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+  - line: 1105
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: callback
+        description: ''
+        type: Function
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+chainable: false
+---
+
+
+# httpGet
diff --git a/src/content/reference/en/p5 copy/httpPost.mdx b/src/content/reference/en/p5 copy/httpPost.mdx
new file mode 100644
index 0000000000..39f4fc75a0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/httpPost.mdx	
@@ -0,0 +1,165 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1119
+title: httpPost
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP POST request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text. This is equivalent
+  to
+
+  calling <code>httpDo(path, 'POST')</code>.</p>
+line: 1119
+isConstructor: false
+itemtype: method
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Examples use jsonplaceholder.typicode.com for a Mock Data API
+
+
+    let url = 'https://jsonplaceholder.typicode.com/posts';
+
+    let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very
+    cool.' };
+
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+    }
+
+
+    function mousePressed() {
+      httpPost(url, 'json', postData, function(result) {
+        strokeWeight(2);
+        text(result.body, mouseX, mouseY);
+      });
+    }
+
+    </code>
+
+    </div>
+
+
+    <div><code>
+
+    let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+
+    let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+    }
+
+
+    function mousePressed() {
+      httpPost(
+        url,
+        'json',
+        postData,
+        function(result) {
+          // ... won't be called
+        },
+        function(error) {
+          strokeWeight(2);
+          text(error.toString(), mouseX, mouseY);
+        }
+      );
+    }
+
+    </code></div>
+class: p5
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+overloads:
+  - line: 1119
+    params:
+      - name: path
+        description: |
+          <p>name of the file or url to load</p>
+        type: String
+      - name: datatype
+        description: |
+          <p>"json", "jsonp", "xml", or "text".
+                                             If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.</p>
+        type: String
+        optional: true
+      - name: data
+        description: |
+          <p>param data passed sent with request</p>
+        type: Object|Boolean
+        optional: true
+      - name: callback
+        description: |
+          <p>function to be executed after
+                                             <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
+                                             as first argument</p>
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: |
+          <p>function to be executed if
+                                             there is an error, response is passed
+                                             in as first argument</p>
+        type: Function
+        optional: true
+    return:
+      description: |-
+        A promise that resolves with the data when the operation
+                          completes successfully or rejects with the error after
+                          one occurs.
+      type: Promise
+  - line: 1186
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: data
+        description: ''
+        type: Object|Boolean
+      - name: callback
+        description: ''
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+  - line: 1194
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: callback
+        description: ''
+        type: Function
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+chainable: false
+---
+
+
+# httpPost
diff --git a/src/content/reference/en/p5 copy/hue.mdx b/src/content/reference/en/p5 copy/hue.mdx
new file mode 100644
index 0000000000..6baca2b9ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/hue.mdx	
@@ -0,0 +1,145 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L828
+title: hue
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the hue value of a color.</p>
+
+  <p><code>hue()</code> extracts the hue value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>Hue describes a color's position on the color wheel. By default,
+  <code>hue()</code>
+
+  returns a color's HSL hue in the range 0 to 360. If the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
+  returns the hue
+
+  value in the given mode.</p>
+line: 828
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a p5.Color object.
+      let c = color(0, 50, 100);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 20, 35, 60);
+
+      // Set 'hueValue' to 0.
+      let hueValue = hue(c);
+
+      // Draw the right rectangle.
+      fill(hueValue);
+      rect(50, 20, 35, 60);
+
+      describe(
+        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a color array.
+      let c = [0, 50, 100];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 20, 35, 60);
+
+      // Set 'hueValue' to 0.
+      let hueValue = hue(c);
+
+      // Draw the right rectangle.
+      fill(hueValue);
+      rect(50, 20, 35, 60);
+
+      describe(
+        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 20, 35, 60);
+
+      // Set 'hueValue' to 0.
+      let hueValue = hue(c);
+
+      // Draw the right rectangle.
+      fill(hueValue);
+      rect(50, 20, 35, 60);
+
+      describe(
+        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the hue value.
+  type: Number
+chainable: false
+---
+
+
+# hue
diff --git a/src/content/reference/en/p5 copy/if.mdx b/src/content/reference/en/p5 copy/if.mdx
new file mode 100644
index 0000000000..88228b3ed0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/if.mdx	
@@ -0,0 +1,268 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L110
+title: if
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A way to choose whether to run a block of code.</p>
+
+  <p><code>if</code> statements are helpful for running a block of code based on
+  a
+
+  condition. For example, an <code>if</code> statement makes it easy to express
+  the
+
+  idea "Draw a circle if the mouse is pressed.":</p>
+
+  <pre><code class="language-js">if (mouseIsPressed === true) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>The statement header begins with the keyword <code>if</code>. The
+  expression in
+
+  parentheses <code>mouseIsPressed === true</code> is a <code>Boolean</code>
+  expression that's
+
+  either <code>true</code> or <code>false</code>. The code between the curly
+  braces <code>{}</code> is the if
+
+  statement's body. The body only runs if the <code>Boolean</code> expression is
+  <code>true</code>.</p>
+
+  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
+  variable is
+
+  always <code>true</code> or <code>false</code>, so the code snippet above
+  could also be written
+
+  as follows:</p>
+
+  <pre><code class="language-js">if (mouseIsPressed) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>An <code>if</code>-<code>else</code> statement adds a block of code that
+  runs if the <code>Boolean</code>
+
+  expression is <code>false</code>. For example, here's an
+  <code>if</code>-<code>else</code> statement that
+
+  expresses the idea "Draw a circle if the mouse is pressed. Otherwise,
+
+  display a message.":</p>
+
+  <pre><code class="language-js">if (mouseIsPressed === true) {
+    // When true.
+    circle(mouseX, mouseY, 20);
+  } else {
+    // When false.
+    text('Click me!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>There are two possible paths, or branches, in this code snippet. The
+
+  program must follow one branch or the other.</p>
+
+  <p>An <code>else</code>-<code>if</code> statement makes it possible to add
+  more branches.
+
+  <code>else</code>-<code>if</code> statements run different blocks of code
+  under different
+
+  conditions. For example, an <code>else</code>-<code>if</code> statement makes
+  it easy to express
+
+  the idea "If the mouse is on the left, paint the canvas white. If the mouse
+
+  is in the middle, paint the canvas gray. Otherwise, paint the canvas
+
+  black.":</p>
+
+  <pre><code class="language-js">if (mouseX < 33) {
+    background(255);
+  } else if (mouseX < 67) {
+    background(200);
+  } else {
+    background(0);
+  }
+
+  </code></pre>
+
+  <p><code>if</code> statements can add as many
+  <code>else</code>-<code>if</code> statements as needed. However,
+
+  there can only be one <code>else</code> statement and it must be last.</p>
+
+  <p><code>if</code> statements can also check for multiple conditions at once.
+  For
+
+  example, the <code>Boolean</code> operator <code>&&</code> (AND) checks
+  whether two expressions
+
+  are both <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
+    text('You pressed the "p" key!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
+  message will
+
+  display.</p>
+
+  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
+  least one of two
+
+  expressions is <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
+  true) {
+    text('You did something!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user presses a key, or presses a mouse button, or both, then a
+
+  message will display.</p>
+
+  <p>The body of an <code>if</code> statement can contain another
+  <code>if</code> statement. This is
+
+  called a "nested <code>if</code> statement." For example, nested
+  <code>if</code> statements make
+
+  it easy to express the idea "If a key is pressed, then check if the key is
+
+  <code>'r'</code>. If it is, then set the fill to red.":</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true) {
+    if (key === 'r') {
+      fill('red');
+    }
+  }
+
+  </code></pre>
+
+  <p>See <a href="/reference/p5/Boolean/">Boolean</a> and <a
+  href="/reference/p5/Number/">Number</a>
+
+  to learn more about these data types and the operations they support.</p>
+line: 110
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click the mouse to show the circle.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (mouseIsPressed === true) {
+        circle(mouseX, mouseY, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse to show different shapes.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (mouseIsPressed === true) {
+        circle(50, 50, 20);
+      } else {
+        ellipse(50, 50, 20, 50);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Move the mouse to change the background color.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A square changes color from white to black as the user moves the mouse from left to right.'
+      );
+    }
+
+    function draw() {
+      if (mouseX < 33) {
+        background(255);
+      } else if (mouseX < 67) {
+        background(200);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle drawn on a gray background. The circle changes color to red when the user presses the "r" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (keyIsPressed === true) {
+        if (key === 'r') {
+          fill('red');
+        }
+      }
+
+      circle(50, 50, 40);
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# if
diff --git a/src/content/reference/en/p5 copy/image.mdx b/src/content/reference/en/p5 copy/image.mdx
new file mode 100644
index 0000000000..9dbd36fd22
--- /dev/null
+++ b/src/content/reference/en/p5 copy/image.mdx	
@@ -0,0 +1,327 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L888
+title: image
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Draws an image to the canvas.</p>
+
+  <p>The first parameter, <code>img</code>, is the source image to be drawn.
+  <code>img</code> can be
+
+  any of the following objects:</p>
+
+  <ul>
+
+  <li><a href="/reference/p5/p5.Image">p5.Image</a></li>
+
+  <li><a href="/reference/p5/p5.Element">p5.Element</a></li>
+
+  <li><a href="/reference/p5/p5.Texture">p5.Texture</a></li>
+
+  <li><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a></li>
+
+  <li><a
+  href="/reference/p5/p5.FramebufferTexture">p5.FramebufferTexture</a></li>
+
+  </ul>
+
+  <p>The second and third parameters, <code>dx</code> and <code>dy</code>, set
+  the coordinates of the
+
+  destination image's top left corner. See
+
+  <a href="/reference/p5/imageMode/">imageMode()</a> for other ways to position
+  images.</p>
+
+  <p>Here's a diagram that explains how optional parameters work in
+  <code>image()</code>:</p>
+
+  <p><img src="/assets/drawImage.png"/></p>
+
+  <p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are
+  optional. They set the
+
+  the width and height to draw the destination image. By default,
+  <code>image()</code>
+
+  draws the full source image at its original size.</p>
+
+  <p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are
+  also optional.
+
+  These coordinates define the top left corner of a subsection to draw from
+
+  the source image.</p>
+
+  <p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are
+  also optional.
+
+  They define the width and height of a subsection to draw from the source
+
+  image. By default, <code>image()</code> draws the full subsection that begins
+  at
+
+  <code>(sx, sy)</code> and extends to the edges of the source image.</p>
+
+  <p>The ninth parameter, <code>fit</code>, is also optional. It enables a
+  subsection of
+
+  the source image to be drawn without affecting its aspect ratio. If
+
+  <code>CONTAIN</code> is passed, the full subsection will appear within the
+  destination
+
+  rectangle. If <code>COVER</code> is passed, the subsection will completely
+  cover the
+
+  destination rectangle. This may have the effect of zooming into the
+
+  subsection.</p>
+
+  <p>The tenth and eleventh parameters, <code>xAlign</code> and
+  <code>yAlign</code>, are also
+
+  optional. They determine how to align the fitted subsection.
+  <code>xAlign</code> can
+
+  be set to either <code>LEFT</code>, <code>RIGHT</code>, or
+  <code>CENTER</code>. <code>yAlign</code> can be set to
+
+  either <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By
+  default, both <code>xAlign</code> and <code>yAlign</code>
+
+  are set to <code>CENTER</code>.</p>
+line: 888
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image.
+      image(img, 10, 10);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image 50x50.
+      image(img, 0, 0, 50, 50);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the center of the image.
+      image(img, 25, 25, 50, 50, 25, 25, 50, 50);
+
+      describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/moonwalk.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image and scale it to fit within the canvas.
+      image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
+
+      describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      // Image is 50 x 50 pixels.
+      img = loadImage('/assets/laDefense50.png');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image and scale it to cover the canvas.
+      image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
+
+      describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 888
+    params:
+      - name: img
+        description: |
+          <p>image to display.</p>
+        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
+      - name: x
+        description: |
+          <p>x-coordinate of the top-left corner of the image.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the top-left corner of the image.</p>
+        type: Number
+      - name: width
+        description: |
+          <p>width to draw the image.</p>
+        type: Number
+        optional: true
+      - name: height
+        description: |
+          <p>height to draw the image.</p>
+        type: Number
+        optional: true
+  - line: 1074
+    params:
+      - name: img
+        description: ''
+        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
+      - name: dx
+        description: |
+          <p>the x-coordinate of the destination
+                                    rectangle in which to draw the source image</p>
+        type: Number
+      - name: dy
+        description: |
+          <p>the y-coordinate of the destination
+                                    rectangle in which to draw the source image</p>
+        type: Number
+      - name: dWidth
+        description: |
+          <p>the width of the destination rectangle</p>
+        type: Number
+      - name: dHeight
+        description: |
+          <p>the height of the destination rectangle</p>
+        type: Number
+      - name: sx
+        description: |
+          <p>the x-coordinate of the subsection of the source
+          image to draw into the destination rectangle</p>
+        type: Number
+      - name: sy
+        description: |
+          <p>the y-coordinate of the subsection of the source
+          image to draw into the destination rectangle</p>
+        type: Number
+      - name: sWidth
+        description: |
+          <p>the width of the subsection of the
+                                    source image to draw into the destination
+                                    rectangle</p>
+        type: Number
+        optional: true
+      - name: sHeight
+        description: |
+          <p>the height of the subsection of the
+                                     source image to draw into the destination rectangle</p>
+        type: Number
+        optional: true
+      - name: fit
+        description: |
+          <p>either CONTAIN or COVER</p>
+        type: Constant
+        optional: true
+      - name: xAlign
+        description: |
+          <p>either LEFT, RIGHT or CENTER default is CENTER</p>
+        type: Constant
+        optional: true
+      - name: yAlign
+        description: |
+          <p>either TOP, BOTTOM or CENTER default is CENTER</p>
+        type: Constant
+        optional: true
+chainable: false
+---
+
+
+# image
diff --git a/src/content/reference/en/p5 copy/imageLight.mdx b/src/content/reference/en/p5 copy/imageLight.mdx
new file mode 100644
index 0000000000..70b001f3e5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/imageLight.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L956
+title: imageLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates an ambient light from an image.</p>
+
+  <p><code>imageLight()</code> simulates a light shining from all directions.
+  The effect is
+
+  like placing the sketch at the center of a giant sphere that uses the image
+
+  as its texture. The image's diffuse light will be affected by
+
+  <a href="/reference/p5/fill/">fill()</a> and the specular reflections will be
+
+  affected by <a href="/reference/p5/specularMaterial/">specularMaterial()</a>
+  and
+
+  <a href="/reference/p5/shininess/">shininess()</a>.</p>
+
+  <p>The parameter, <code>img</code>, is the <a
+  href="/reference/p5/p5.Image">p5.Image</a> object to
+
+  use as the light source.</p>
+line: 956
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
+    }
+
+    function draw() {
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the image as a panorama (360˚ background).
+      panorama(img);
+
+      // Add a soft ambient light.
+      ambientLight(50);
+
+      // Add light from the image.
+      imageLight(img);
+
+      // Style the sphere.
+      specularMaterial(20);
+      shininess(100);
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: img
+    description: |
+      <p>image to use as the light source.</p>
+    type: p5.image
+chainable: false
+---
+
+
+# imageLight
diff --git a/src/content/reference/en/p5 copy/imageMode.mdx b/src/content/reference/en/p5 copy/imageMode.mdx
new file mode 100644
index 0000000000..f7d41c6d54
--- /dev/null
+++ b/src/content/reference/en/p5 copy/imageMode.mdx	
@@ -0,0 +1,129 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1395
+title: imageMode
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Changes the location from which images are drawn when
+
+  <a href="/reference/p5/image/">image()</a> is called.</p>
+
+  <p>By default, the first
+
+  two parameters of <a href="/reference/p5/image/">image()</a> are the x- and
+
+  y-coordinates of the image's upper-left corner. The next parameters are
+
+  its width and height. This is the same as calling
+  <code>imageMode(CORNER)</code>.</p>
+
+  <p><code>imageMode(CORNERS)</code> also uses the first two parameters of
+
+  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
+  image's
+
+  top-left corner. The third and fourth parameters are the coordinates of its
+
+  bottom-right corner.</p>
+
+  <p><code>imageMode(CENTER)</code> uses the first two parameters of
+
+  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
+  image's
+
+  center. The next parameters are its width and height.</p>
+line: 1395
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use CORNER mode.
+      imageMode(CORNER);
+
+      // Display the image.
+      image(img, 10, 10, 50, 50);
+
+      describe('A square image of a brick wall is drawn at the top left of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use CORNERS mode.
+      imageMode(CORNERS);
+
+      // Display the image.
+      image(img, 10, 10, 90, 40);
+
+      describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use CENTER mode.
+      imageMode(CENTER);
+
+      // Display the image.
+      image(img, 50, 50, 80, 80);
+
+      describe('A square image of a brick wall is drawn on a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either CORNER, CORNERS, or CENTER.</p>
+    type: Constant
+chainable: false
+---
+
+
+# imageMode
diff --git a/src/content/reference/en/p5 copy/input.mdx b/src/content/reference/en/p5 copy/input.mdx
new file mode 100644
index 0000000000..83f71feabc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/input.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L405
+title: input
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Calls a function when the element receives input.</p>
+
+  <p><code>myElement.input()</code> is often used to with text inputs and
+  sliders. Calling
+
+  <code>myElement.input(false)</code> disables the function.</p>
+line: 405
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a slider and place it beneath the canvas.
+      slider = createSlider(0, 255, 200);
+      slider.position(0, 100);
+
+      // Call repaint() when the slider changes.
+      slider.input(repaint);
+
+      describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');
+    }
+
+    // Paint the background using slider's value.
+    function repaint() {
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let input;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an input and place it beneath the canvas.
+      input = createInput('');
+      input.position(0, 100);
+
+      // Call repaint() when input is detected.
+      input.input(repaint);
+
+      describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');
+    }
+
+    // Paint the background gray and display the input's value.
+    function repaint() {
+      background(200);
+      let msg = input.value();
+      text(msg, 5, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fxn
+    description: |
+      <p>function to call when input is detected within
+                                     the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+chainable: true
+---
+
+
+# input
diff --git a/src/content/reference/en/p5 copy/int.mdx b/src/content/reference/en/p5 copy/int.mdx
new file mode 100644
index 0000000000..5d5fe8826a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/int.mdx	
@@ -0,0 +1,169 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L92
+title: int
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Boolean</code>, <code>String</code>, or decimal
+  <code>Number</code> to an integer.</p>
+
+  <p><code>int()</code> converts values to integers. Integers are positive or
+  negative
+
+  numbers without decimals. If the original value has decimals, as in -34.56,
+
+  they're removed to produce an integer such as -34.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a Boolean, as in
+
+  <code>int(false)</code> or <code>int(true)</code>, then the number 0
+  (<code>false</code>) or 1 (<code>true</code>) will
+
+  be returned. If <code>n</code> is a string or number, as in
+  <code>int('45')</code> or
+
+  <code>int(67.89)</code>, then an integer will be returned. If an array is
+  passed, as
+
+  in <code>int([12.34, 56.78])</code>, then an array of integers will be
+  returned.</p>
+
+  <p>Note: If a value can't be converted to a number, as in
+  <code>int('giraffe')</code>,
+
+  then the value <code>NaN</code> (not a number) will be returned.</p>
+line: 92
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a Boolean variable.
+      let original = false;
+
+      // Convert the Boolean to an integer.
+      let converted = int(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "false : 0" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '12.34';
+
+      // Convert the string to an integer.
+      let converted = int(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and converted values.
+      text(`${original} ≈ ${converted}`, 50, 50);
+
+      describe('The text "12.34 ≈ 12" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a decimal number variable.
+      let original = 12.34;
+
+      // Convert the decimal number to an integer.
+      let converted = int(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and converted values.
+      text(`${original} ≈ ${converted}`, 50, 50);
+
+      describe('The text "12.34 ≈ 12" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let original = ['60', '30', '15'];
+
+      // Convert the strings to integers.
+      let diameters = int(original);
+
+      for (let d of diameters) {
+        // Draw a circle.
+        circle(50, 50, d);
+      }
+
+      describe('Three white, concentric circles on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 92
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Boolean|Number
+    return:
+      description: converted number.
+      type: Number
+  - line: 211
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# int
diff --git a/src/content/reference/en/p5 copy/isLooping.mdx b/src/content/reference/en/p5 copy/isLooping.mdx
new file mode 100644
index 0000000000..622fd77d9b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/isLooping.mdx	
@@ -0,0 +1,65 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L224
+title: isLooping
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Returns <code>true</code> if the draw loop is running and
+  <code>false</code> if not.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
+
+  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
+
+  restarted by calling <a href="/reference/p5/loop/">loop()</a>.</p>
+
+  <p>The <code>isLooping()</code> function can be used to check whether a sketch
+  is
+
+  looping, as in <code>isLooping() === true</code>.</p>
+line: 224
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle at the mouse's position.
+      circle(mouseX, mouseY, 20);
+    }
+
+    // Toggle the draw loop when the user double-clicks.
+    function doubleClicked() {
+      if (isLooping() === true) {
+        noLoop();
+      } else {
+        loop();
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# isLooping
diff --git a/src/content/reference/en/p5 copy/join.mdx b/src/content/reference/en/p5 copy/join.mdx
new file mode 100644
index 0000000000..23222a6db4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/join.mdx	
@@ -0,0 +1,70 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L15
+title: join
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Combines an array of strings into one string.</p>
+
+  <p>The first parameter, <code>list</code>, is the array of strings to
+  join.</p>
+
+  <p>The second parameter, <code>separator</code>, is the character(s) that
+  should be used
+
+  to separate the combined strings. For example, calling
+
+  <code>join(myWords, ' : ')</code> would return a string of words each
+  separated by a
+
+  colon and spaces.</p>
+line: 15
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let myWords = ['one', 'two', 'three'];
+
+      // Create a combined string
+      let combined = join(myWords, ' : ');
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+
+      // Display the combined string.
+      text(combined, 50, 50);
+
+      describe('The text "one : two : three" written in black on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>array of strings to combine.</p>
+    type: Array
+  - name: separator
+    description: |
+      <p>character(s) to place between strings when they're combined.</p>
+    type: String
+return:
+  description: combined string.
+  type: String
+chainable: false
+---
+
+
+# join
diff --git a/src/content/reference/en/p5 copy/key.mdx b/src/content/reference/en/p5 copy/key.mdx
new file mode 100644
index 0000000000..63fc144fa3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/key.mdx	
@@ -0,0 +1,106 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L102
+title: key
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A <code>String</code> system variable that contains the value of the last
+  key typed.</p>
+
+  <p>The key variable is helpful for checking whether an
+
+  <a href="https://en.wikipedia.org/wiki/ASCII#Printable_characters"
+  target="_blank">ASCII</a>
+
+  key has been typed. For example, the expression <code>key === "a"</code>
+  evaluates to
+
+  <code>true</code> if the <code>a</code> key was typed and <code>false</code>
+  if not. <code>key</code> doesn’t update
+
+  for special keys such as <code>LEFT_ARROW</code> and <code>ENTER</code>. Use
+  keyCode instead for
+
+  special keys. The <a href="/reference/p5/keyIsDown/">keyIsDown()</a> function
+  should
+
+  be used to check for multiple different key presses at the same time.</p>
+line: 102
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The last key pressed is displayed at the center.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the last key pressed.
+      text(key, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses the keys "w", "a", "s", or "d". It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if a key is pressed.
+      if (keyIsPressed === true) {
+        if (key === 'w') {
+          y -= 1;
+        } else if (key === 's') {
+          y += 1;
+        } else if (key === 'a') {
+          x -= 1;
+        } else if (key === 'd') {
+          x += 1;
+        }
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle at (x, y).
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# key
diff --git a/src/content/reference/en/p5 copy/keyCode.mdx b/src/content/reference/en/p5 copy/keyCode.mdx
new file mode 100644
index 0000000000..808526b788
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyCode.mdx	
@@ -0,0 +1,128 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L184
+title: keyCode
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A <code>Number</code> system variable that contains the code of the last
+  key typed.</p>
+
+  <p>All keys have a <code>keyCode</code>. For example, the <code>a</code> key
+  has the <code>keyCode</code> 65.
+
+  The <code>keyCode</code> variable is helpful for checking whether a special
+  key has
+
+  been typed. For example, the following conditional checks whether the enter
+
+  key has been typed:</p>
+
+  <pre><code class="language-js">if (keyCode === 13) {
+    // Code to run if the enter key was pressed.
+  }
+
+  </code></pre>
+
+  <p>The same code can be written more clearly using the system variable
+  <code>ENTER</code>
+
+  which has a value of 13:</p>
+
+  <pre><code class="language-js">if (keyCode === ENTER) {
+    // Code to run if the enter key was pressed.
+  }
+
+  </code></pre>
+
+  <p>The system variables <code>BACKSPACE</code>, <code>DELETE</code>,
+  <code>ENTER</code>, <code>RETURN</code>, <code>TAB</code>,
+
+  <code>ESCAPE</code>, <code>SHIFT</code>, <code>CONTROL</code>,
+  <code>OPTION</code>, <code>ALT</code>, <code>UP_ARROW</code>,
+  <code>DOWN_ARROW</code>,
+
+  <code>LEFT_ARROW</code>, and <code>RIGHT_ARROW</code> are all helpful
+  shorthands the key codes of
+
+  special keys. Key codes can be found on websites such as
+
+  <a href="http://keycode.info/">keycode.info</a>.</p>
+line: 184
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The last key pressed and its code are displayed at the center.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the last key pressed and its code.
+      text(`${key} : ${keyCode}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if an arrow key is pressed.
+      if (keyIsPressed === true) {
+        if (keyCode === UP_ARROW) {
+          y -= 1;
+        } else if (keyCode === DOWN_ARROW) {
+          y += 1;
+        } else if (keyCode === LEFT_ARROW) {
+          x -= 1;
+        } else if (keyCode === RIGHT_ARROW) {
+          x += 1;
+        }
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle at (x, y).
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+type: Integer
+---
+
+
+# keyCode
diff --git a/src/content/reference/en/p5 copy/keyIsDown.mdx b/src/content/reference/en/p5 copy/keyIsDown.mdx
new file mode 100644
index 0000000000..8afe4b0bdf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyIsDown.mdx	
@@ -0,0 +1,142 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L811
+title: keyIsDown
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>Returns <code>true</code> if the key it’s checking is pressed and
+  <code>false</code> if not.</p>
+
+  <p><code>keyIsDown()</code> is helpful when checking for multiple different
+  key presses.
+
+  For example, <code>keyIsDown()</code> can be used to check if both
+  <code>LEFT_ARROW</code> and
+
+  <code>UP_ARROW</code> are pressed:</p>
+
+  <pre><code class="language-js">if (keyIsDown(LEFT_ARROW) &&
+  keyIsDown(UP_ARROW)) {
+    // Move diagonally.
+  }
+
+  </code></pre>
+
+  <p><code>keyIsDown()</code> can check for key presses using
+
+  <a href="/reference/p5/keyCode/">keyCode</a> values, as in
+  <code>keyIsDown(37)</code> or
+
+  <code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as
+
+  <a href="https://keycode.info" target="_blank">keycode.info</a>.</p>
+line: 811
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if an arrow key is pressed.
+      if (keyIsDown(LEFT_ARROW) === true) {
+        x -= 1;
+      }
+
+      if (keyIsDown(RIGHT_ARROW) === true) {
+        x += 1;
+      }
+
+      if (keyIsDown(UP_ARROW) === true) {
+        y -= 1;
+      }
+
+      if (keyIsDown(DOWN_ARROW) === true) {
+        y += 1;
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle.
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if an arrow key is pressed.
+      if (keyIsDown(37) === true) {
+        x -= 1;
+      }
+
+      if (keyIsDown(39) === true) {
+        x += 1;
+      }
+
+      if (keyIsDown(38) === true) {
+        y -= 1;
+      }
+
+      if (keyIsDown(40) === true) {
+        y += 1;
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle.
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: code
+    description: |
+      <p>key to check.</p>
+    type: Number
+return:
+  description: whether the key is down or not.
+  type: Boolean
+chainable: false
+---
+
+
+# keyIsDown
diff --git a/src/content/reference/en/p5 copy/keyIsPressed.mdx b/src/content/reference/en/p5 copy/keyIsPressed.mdx
new file mode 100644
index 0000000000..0b129c49e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyIsPressed.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L10
+title: keyIsPressed
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A <code>Boolean</code> system variable that's <code>true</code> if any key
+  is currently pressed
+
+  and <code>false</code> if not.</p>
+line: 10
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      if (keyIsPressed === true) {
+        fill(0);
+      } else {
+        fill(255);
+      }
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      if (keyIsPressed) {
+        fill(0);
+      } else {
+        fill(255);
+      }
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the word "false" at its center. The word switches to "true" when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the value of keyIsPressed.
+      text(keyIsPressed, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# keyIsPressed
diff --git a/src/content/reference/en/p5 copy/keyPressed.mdx b/src/content/reference/en/p5 copy/keyPressed.mdx
new file mode 100644
index 0000000000..4a4007f09a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyPressed.mdx	
@@ -0,0 +1,192 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L284
+title: keyPressed
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A function that's called once when any key is pressed.</p>
+
+  <p>Declaring the function <code>keyPressed()</code> sets a code block to run
+  once
+
+  automatically when the user presses any key:</p>
+
+  <pre><code class="language-js">function keyPressed() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/key/">key</a> and <a
+  href="/reference/p5/keyCode/">keyCode</a>
+
+  variables will be updated with the most recently typed value when
+
+  <code>keyPressed()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function keyPressed() {
+    if (key === 'c') {
+      // Code to run.
+    }
+
+    if (keyCode === ENTER) {
+      // Code to run.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>keyPressed()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
+  target="_blank">KeyboardEvent</a>
+
+  object with properties that describe the key press event:</p>
+
+  <pre><code class="language-js">function keyPressed(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Browsers may have default behaviors attached to various key events. For
+
+  example, some browsers may jump to the bottom of a web page when the
+
+  <code>SPACE</code> key is pressed. To prevent any default behavior for this
+  event, add
+
+  <code>return false;</code> to the end of the function.</p>
+line: 284
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the background color when the user presses a key.
+    function keyPressed() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square turns black when the user presses the "b" key. It turns white when the user presses the "a" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Reassign value when the user presses the 'a' or 'b' key.
+    function keyPressed() {
+      if (key === 'a') {
+        value = 255;
+      } else if (key === 'b') {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the background color when the user presses an arrow key.
+    function keyPressed() {
+      if (keyCode === LEFT_ARROW) {
+        value = 255;
+      } else if (keyCode === RIGHT_ARROW) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>KeyboardEvent</code> callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+chainable: false
+---
+
+
+# keyPressed
diff --git a/src/content/reference/en/p5 copy/keyReleased.mdx b/src/content/reference/en/p5 copy/keyReleased.mdx
new file mode 100644
index 0000000000..e19da953f1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyReleased.mdx	
@@ -0,0 +1,188 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L474
+title: keyReleased
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A function that's called once when any key is released.</p>
+
+  <p>Declaring the function <code>keyReleased()</code> sets a code block to run
+  once
+
+  automatically when the user releases any key:</p>
+
+  <pre><code class="language-js">function keyReleased() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/key/">key</a> and <a
+  href="/reference/p5/keyCode/">keyCode</a>
+
+  variables will be updated with the most recently released value when
+
+  <code>keyReleased()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function keyReleased() {
+    if (key === 'c') {
+      // Code to run.
+    }
+
+    if (keyCode === ENTER) {
+      // Code to run.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>keyReleased()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
+  target="_blank">KeyboardEvent</a>
+
+  object with properties that describe the key press event:</p>
+
+  <pre><code class="language-js">function keyReleased(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Browsers may have default behaviors attached to various key events. To
+
+  prevent any default behavior for this event, add <code>return false;</code> to
+  the end
+
+  of the function.</p>
+line: 474
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user releases a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle value when the user releases a key.
+    function keyReleased() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes white when the user releases the "w" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Set value to 255 the user releases the 'w' key.
+    function keyReleased() {
+      if (key === 'w') {
+        value = 255;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the background color when the user releases an arrow key.
+    function keyReleased() {
+      if (keyCode === LEFT_ARROW) {
+        value = 255;
+      } else if (keyCode === RIGHT_ARROW) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>KeyboardEvent</code> callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+chainable: false
+---
+
+
+# keyReleased
diff --git a/src/content/reference/en/p5 copy/keyTyped.mdx b/src/content/reference/en/p5 copy/keyTyped.mdx
new file mode 100644
index 0000000000..a591db9e60
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyTyped.mdx	
@@ -0,0 +1,170 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L655
+title: keyTyped
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A function that's called once when keys with printable characters are
+  pressed.</p>
+
+  <p>Declaring the function <code>keyTyped()</code> sets a code block to run
+  once
+
+  automatically when the user presses any key with a printable character such
+
+  as <code>a</code> or 1. Modifier keys such as <code>SHIFT</code>,
+  <code>CONTROL</code>, and the arrow keys
+
+  will be ignored:</p>
+
+  <pre><code class="language-js">function keyTyped() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/key/">key</a> and <a
+  href="/reference/p5/keyCode/">keyCode</a>
+
+  variables will be updated with the most recently released value when
+
+  <code>keyTyped()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function keyTyped() {
+    // Check for the "c" character using key.
+    if (key === 'c') {
+      // Code to run.
+    }
+
+    // Check for "c" using keyCode.
+    if (keyCode === 67) {
+      // Code to run.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>keyTyped()</code> is
+  always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
+  target="_blank">KeyboardEvent</a>
+
+  object with properties that describe the key press event:</p>
+
+  <pre><code class="language-js">function keyReleased(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Note: Use the <a href="/reference/p5/keyPressed/">keyPressed()</a> function
+  and
+
+  <a href="/reference/p5/keyCode/">keyCode</a> system variable to respond to
+  modifier
+
+  keys such as <code>ALT</code>.</p>
+
+  <p>Browsers may have default behaviors attached to various key events. To
+
+  prevent any default behavior for this event, add <code>return false;</code> to
+  the end
+
+  of the function.</p>
+line: 655
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+    // Note: Pressing special keys such as SPACE have no effect.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square changes color when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the square's color when the user types a printable key.
+    function keyTyped() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square turns black when the user types the "b" key. It turns white when the user types the "a" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Reassign value when the user types the 'a' or 'b' key.
+    function keyTyped() {
+      if (key === 'a') {
+        value = 255;
+      } else if (key === 'b') {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>KeyboardEvent</code> callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+chainable: false
+---
+
+
+# keyTyped
diff --git a/src/content/reference/en/p5 copy/lerp.mdx b/src/content/reference/en/p5 copy/lerp.mdx
new file mode 100644
index 0000000000..84c4b5bc7a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lerp.mdx	
@@ -0,0 +1,122 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L332
+title: lerp
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates a number between two numbers at a specific increment.</p>
+
+  <p>The <code>amt</code> parameter is the amount to interpolate between the two
+  numbers.
+
+  0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is
+
+  half-way in between, and 1.0 is equal to the second number. The
+  <code>lerp()</code>
+
+  function is convenient for creating motion along a straight path and for
+
+  drawing dotted lines.</p>
+
+  <p>If the value of <code>amt</code> is less than 0 or more than 1,
+  <code>lerp()</code> will return a
+
+  number outside of the original interval. For example, calling
+
+  <code>lerp(0, 10, 1.5)</code> will return 15.</p>
+line: 332
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Declare variables for coordinates.
+      let a = 20;
+      let b = 80;
+      let c = lerp(a, b, 0.2);
+      let d = lerp(a, b, 0.5);
+      let e = lerp(a, b, 0.8);
+
+      strokeWeight(5);
+
+      // Draw the original points in black.
+      stroke(0);
+      point(a, 50);
+      point(b, 50);
+
+      // Draw the lerped points in gray.
+      stroke(100);
+      point(c, 50);
+      point(d, 50);
+      point(e, 50);
+
+      describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let x = 50;
+    let y = 50;
+    let targetX = 50;
+    let targetY = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');
+    }
+
+    function draw() {
+      background(220);
+
+      // Move x and y toward the target.
+      x = lerp(x, targetX, 0.05);
+      y = lerp(y, targetY, 0.05);
+
+      // Draw the circle.
+      circle(x, y, 20);
+    }
+
+    // Set x and y when the user clicks the mouse.
+    function mouseClicked() {
+      x = mouseX;
+      y = mouseY;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: start
+    description: |
+      <p>first value.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>second value.</p>
+    type: Number
+  - name: amt
+    description: |
+      <p>number.</p>
+    type: Number
+return:
+  description: lerped value.
+  type: Number
+chainable: false
+---
+
+
+# lerp
diff --git a/src/content/reference/en/p5 copy/lerpColor.mdx b/src/content/reference/en/p5 copy/lerpColor.mdx
new file mode 100644
index 0000000000..d815ba9ddb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lerpColor.mdx	
@@ -0,0 +1,96 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L949
+title: lerpColor
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Blends two colors to find a third color between them.</p>
+
+  <p>The <code>amt</code> parameter specifies the amount to interpolate between
+  the two
+
+  values. 0 is equal to the first color, 0.1 is very near the first color,
+
+  0.5 is halfway between the two colors, and so on. Negative numbers are set
+
+  to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
+
+  <a href="/reference/p5/lerp/">lerp</a>. It's necessary because numbers outside
+  of the
+
+  interval [0, 1] will produce strange and unexpected colors.</p>
+
+  <p>The way that colors are interpolated depends on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 949
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create p5.Color objects to interpolate between.
+      let from = color(218, 165, 32);
+      let to = color(72, 61, 139);
+
+      // Create intermediate colors.
+      let interA = lerpColor(from, to, 0.33);
+      let interB = lerpColor(from, to, 0.66);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(from);
+      rect(10, 20, 20, 60);
+
+      // Draw the left-center rectangle.
+      fill(interA);
+      rect(30, 20, 20, 60);
+
+      // Draw the right-center rectangle.
+      fill(interB);
+      rect(50, 20, 20, 60);
+
+      // Draw the right rectangle.
+      fill(to);
+      rect(70, 20, 20, 60);
+
+      describe(
+        'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: c1
+    description: >
+      <p>interpolate from this color (any value created by the color()
+      function).</p>
+    type: p5.Color
+  - name: c2
+    description: >
+      <p>interpolate to this color (any value created by the color()
+      function).</p>
+    type: p5.Color
+  - name: amt
+    description: |
+      <p>number between 0 and 1.</p>
+    type: Number
+return:
+  description: interpolated color.
+  type: p5.Color
+chainable: false
+---
+
+
+# lerpColor
diff --git a/src/content/reference/en/p5 copy/let.mdx b/src/content/reference/en/p5 copy/let.mdx
new file mode 100644
index 0000000000..f04902a9b0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/let.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L7
+title: let
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Declares a new variable.</p>
+
+  <p>A variable is a container for a value. For example, a variable might
+
+  contain a creature's x-coordinate as a <code>Number</code> or its name as a
+
+  <code>String</code>. Variables can change value by reassigning them as
+  follows:</p>
+
+  <pre><code class="language-js">// Declare the variable x and assign it the
+  value 10.
+
+  let x = 10;
+
+
+  // Reassign x to 50.
+
+  x = 50;
+
+  </code></pre>
+
+  <p>Variables have block scope. When a variable is declared between curly
+
+  braces <code>{}</code>, it only exists within the block defined by those
+  braces. For
+
+  example, the following code would throw a <code>ReferenceError</code> because
+  <code>x</code> is
+
+  declared within the <code>setup()</code> function's block:</p>
+
+  <pre><code class="language-js">function setup() {
+    createCanvas(100, 100);
+
+    let x = 50;
+  }
+
+
+  function draw() {
+    background(200);
+
+    // x was declared in setup(), so it can't be referenced here.
+    circle(x, 50, 20);
+  }
+
+  </code></pre>
+
+  <p>Variables declared outside of all curly braces <code>{}</code> are in the
+  global
+
+  scope. A variable that's in the global scope can be used and changed
+
+  anywhere in a sketch:</p>
+
+  <pre><code class="language-js">let x = 50;
+
+
+  function setup() {
+    createCanvas(100, 100);
+  }
+
+
+  function draw() {
+    background(200);
+
+    // Change the value of x.
+    x += 10;
+
+    circle(x, 50, 20);
+  }
+
+  </code></pre>
+line: 7
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(220);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(16);\n\n  // Create the message variable.\n  let message = 'Hello, \U0001F30D!';\n\n  // Display the message.\n  text(message, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n  background(220);\n\n  // Change the value of x.\n  x += 1;\n\n  circle(x, 50, 20);\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# let
diff --git a/src/content/reference/en/p5 copy/lightFalloff.mdx b/src/content/reference/en/p5 copy/lightFalloff.mdx
new file mode 100644
index 0000000000..e8b8245064
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lightFalloff.mdx	
@@ -0,0 +1,100 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1161
+title: lightFalloff
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Sets the falloff rate for <a
+  href="/reference/p5/pointLight/">pointLight()</a>
+
+  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
+
+  <p>A light’s falloff describes the intensity of its beam at a distance. For
+
+  example, a lantern has a slow falloff, a flashlight has a medium falloff,
+
+  and a laser pointer has a sharp falloff.</p>
+
+  <p><code>lightFalloff()</code> has three parameters, <code>constant</code>,
+  <code>linear</code>, and
+
+  <code>quadratic</code>. They’re numbers used to calculate falloff at a
+  distance, <code>d</code>,
+
+  as follows:</p>
+
+  <p><code>falloff = 1 / (constant + d * linear + (d * d) *
+  quadratic)</code></p>
+
+  <p>Note: <code>constant</code>, <code>linear</code>, and
+  <code>quadratic</code> should always be set to values
+
+  greater than 0.</p>
+line: 1161
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to change the falloff rate.
+
+    let useFalloff = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Set the light falloff.
+      if (useFalloff === true) {
+        lightFalloff(2, 0, 0);
+      }
+
+      // Add a white point light from the front.
+      pointLight(255, 255, 255, 0, 0, 100);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Change the falloff value when the user double-clicks.
+    function doubleClicked() {
+      useFalloff = true;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: constant
+    description: |
+      <p>constant value for calculating falloff.</p>
+    type: Number
+  - name: linear
+    description: |
+      <p>linear value for calculating falloff.</p>
+    type: Number
+  - name: quadratic
+    description: |
+      <p>quadratic value for calculating falloff.</p>
+    type: Number
+chainable: true
+---
+
+
+# lightFalloff
diff --git a/src/content/reference/en/p5 copy/lightness.mdx b/src/content/reference/en/p5 copy/lightness.mdx
new file mode 100644
index 0000000000..284523dcc8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lightness.mdx	
@@ -0,0 +1,168 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1134
+title: lightness
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the lightness value of a color.</p>
+
+  <p><code>lightness()</code> extracts the HSL lightness value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>lightness()</code> returns a color's HSL lightness in the
+  range 0
+
+  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  HSL, it
+
+  returns the lightness value in the given range.</p>
+line: 1134
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a p5.Color object using HSL values.
+      let c = color(0, 100, 75);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 75.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a color array.
+      let c = [0, 100, 75];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 75.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 75.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color with values in the range 0-255.
+      colorMode(HSL, 255);
+
+      // Create a p5.Color object using HSL values.
+      let c = color(0, 255, 191.5);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 191.5.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the lightness value.
+  type: Number
+chainable: false
+---
+
+
+# lightness
diff --git a/src/content/reference/en/p5 copy/lights.mdx b/src/content/reference/en/p5 copy/lights.mdx
new file mode 100644
index 0000000000..a7cf3ba7ae
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lights.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1077
+title: lights
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: |
+  <p>Places an ambient and directional light in the scene.
+  The lights are set to ambientLight(128, 128, 128) and
+  directionalLight(128, 128, 128, 0, 0, -1).</p>
+  <p>Note: lights need to be called (whether directly or indirectly)
+  within draw() to remain persistent in a looping program.
+  Placing them in setup() will cause them to only have an effect
+  the first time through the loop.</p>
+line: 1077
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to turn on the lights.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the lights.
+      if (isLit === true) {
+        lights();
+      }
+
+      // Draw the box.
+      box();
+    }
+
+    // Turn on the lights when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box drawn against a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      ambientLight(128, 128, 128);
+      directionalLight(128, 128, 128, 0, 0, -1);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# lights
diff --git a/src/content/reference/en/p5 copy/line.mdx b/src/content/reference/en/p5 copy/line.mdx
new file mode 100644
index 0000000000..b225222235
--- /dev/null
+++ b/src/content/reference/en/p5 copy/line.mdx	
@@ -0,0 +1,194 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L564
+title: line
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a straight line between two points.</p>
+
+  <p>A line's default width is one pixel. The version of <code>line()</code>
+  with four
+
+  parameters draws the line in 2D. To color a line, use the
+
+  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
+  use the
+
+  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A line
+
+  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
+  won't
+
+  affect the line's color.</p>
+
+  <p>The version of <code>line()</code> with six parameters allows the line to
+  be drawn in
+
+  3D space. Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
+line: 564
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      line(30, 20, 85, 75);
+
+      describe(
+        'A black line on a gray canvas running from top-center to bottom-right.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      stroke('magenta');
+      strokeWeight(5);
+
+      line(30, 20, 85, 75);
+
+      describe(
+        'A thick, magenta line on a gray canvas running from top-center to bottom-right.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      line(30, 20, 85, 20);
+
+      // Right.
+      stroke(126);
+      line(85, 20, 85, 75);
+
+      // Bottom.
+      stroke(255);
+      line(85, 75, 30, 75);
+
+      describe(
+        'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      line(-20, -30, 35, 25);
+
+      describe(
+        'A black line on a gray canvas running from top-center to bottom-right.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black line connecting two spheres. The scene spins slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw a line.
+      line(0, 0, 0, 30, 20, -10);
+
+      // Draw the center sphere.
+      sphere(10);
+
+      // Translate to the second point.
+      translate(30, 20, -10);
+
+      // Draw the bottom-right sphere.
+      sphere(10);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 564
+    params:
+      - name: x1
+        description: |
+          <p>the x-coordinate of the first point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>the y-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>the x-coordinate of the second point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>the y-coordinate of the second point.</p>
+        type: Number
+    chainable: 1
+  - line: 696
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>the z-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>the z-coordinate of the second point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# line
diff --git a/src/content/reference/en/p5 copy/linePerspective.mdx b/src/content/reference/en/p5 copy/linePerspective.mdx
new file mode 100644
index 0000000000..80bf539c73
--- /dev/null
+++ b/src/content/reference/en/p5 copy/linePerspective.mdx	
@@ -0,0 +1,164 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L280
+title: linePerspective
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Enables or disables perspective for lines in 3D sketches.</p>
+
+  <p>In WebGL mode, lines can be drawn with a thinner stroke when they’re
+
+  further from the camera. Doing so gives them a more realistic appearance.</p>
+
+  <p>By default, lines are drawn differently based on the type of perspective
+
+  being used:</p>
+
+  <ul>
+
+  <li><code>perspective()</code> and <code>frustum()</code> simulate a realistic
+  perspective. In
+
+  these modes, stroke weight is affected by the line’s distance from the
+
+  camera. Doing so results in a more natural appearance.
+  <code>perspective()</code> is
+
+  the default mode for 3D sketches.</li>
+
+  <li><code>ortho()</code> doesn’t simulate a realistic perspective. In this
+  mode, stroke
+
+  weights are consistent regardless of the line’s distance from the camera.
+
+  Doing so results in a more predictable and consistent appearance.</li>
+
+  </ul>
+
+  <p><code>linePerspective()</code> can override the default line drawing
+  mode.</p>
+
+  <p>The parameter, <code>enable</code>, is optional. It’s a
+  <code>Boolean</code> value that sets the
+
+  way lines are drawn. If <code>true</code> is passed, as in
+  <code>linePerspective(true)</code>,
+
+  then lines will appear thinner when they are further from the camera. If
+
+  <code>false</code> is passed, as in <code>linePerspective(false)</code>, then
+  lines will have
+
+  consistent stroke weights regardless of their distance from the camera. By
+
+  default, <code>linePerspective()</code> is enabled.</p>
+
+  <p>Calling <code>linePerspective()</code> without passing an argument returns
+  <code>true</code> if
+
+  it's enabled and <code>false</code> if not.</p>
+
+  <p>Note: <code>linePerspective()</code> can only be used in WebGL mode.</p>
+line: 280
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click the canvas to toggle the line perspective.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+
+    // Toggle the line perspective when the user double-clicks.
+    function doubleClicked() {
+      let isEnabled = linePerspective();
+      linePerspective(!isEnabled);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click the canvas to toggle the line perspective.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Use an orthographic projection.
+      ortho();
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+
+    // Toggle the line perspective when the user double-clicks.
+    function doubleClicked() {
+      let isEnabled = linePerspective();
+      linePerspective(!isEnabled);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 280
+    params:
+      - name: enable
+        description: |
+          <p>whether to enable line perspective.</p>
+        type: Boolean
+  - line: 392
+    params: []
+    return:
+      description: whether line perspective is enabled.
+      type: Boolean
+chainable: false
+---
+
+
+# linePerspective
diff --git a/src/content/reference/en/p5 copy/loadBytes.mdx b/src/content/reference/en/p5 copy/loadBytes.mdx
new file mode 100644
index 0000000000..8b02c0683e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadBytes.mdx	
@@ -0,0 +1,56 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L986
+title: loadBytes
+module: IO
+submodule: Input
+file: src/io/files.js
+description: |
+  <p>This method is suitable for fetching files up to size of 64MB.</p>
+line: 986
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    let data;
+
+    function preload() {
+      data = loadBytes('/assets/mammals.xml');
+    }
+
+    function setup() {
+      for (let i = 0; i < 5; i++) {
+        console.log(data.bytes[i].toString(16));
+      }
+      describe('no image displayed');
+    }
+    </code></div>
+class: p5
+params:
+  - name: file
+    description: |
+      <p>name of the file or URL to load</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
+                                         completes</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if there
+                                         is an error</p>
+    type: Function
+    optional: true
+return:
+  description: an object whose 'bytes' property will be the loaded buffer
+  type: Object
+chainable: false
+---
+
+
+# loadBytes
diff --git a/src/content/reference/en/p5 copy/loadFont.mdx b/src/content/reference/en/p5 copy/loadFont.mdx
new file mode 100644
index 0000000000..86af4b7123
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadFont.mdx	
@@ -0,0 +1,171 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L16
+title: loadFont
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Loads a font and creates a <a href="/reference/p5/p5.Font">p5.Font</a>
+  object.
+
+  <code>loadFont()</code> can load fonts in either .otf or .ttf format. Loaded
+  fonts can
+
+  be used to style text on the canvas and in HTML elements.</p>
+
+  <p>The first parameter, <code>path</code>, is the path to a font file.
+
+  Paths to local files should be relative. For example,
+
+  <code>'/assets/inconsolata.otf'</code>. The Inconsolata font used in the
+  following
+
+  examples can be downloaded for free
+
+  <a href="https://www.fontsquirrel.com/fonts/inconsolata/"
+  target="_blank">here</a>.
+
+  Paths to remote files should be URLs. For example,
+
+  <code>'https://example.com/inconsolata.otf'</code>. URLs may be blocked due to
+  browser
+
+  security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, it will be called once the font has loaded. The callback function
+
+  may use the new <a href="/reference/p5/p5.Font">p5.Font</a> object if
+  needed.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, it will be called if the font fails to load. The callback function
+
+  may use the error
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/"
+  target="_blank">Event</a>
+
+  object if needed.</p>
+
+  <p>Fonts can take time to load. Calling <code>loadFont()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures fonts load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or
+
+  <a href="/reference/p5/draw/">draw()</a>.</p>
+line: 16
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadFont('/assets/inconsolata.otf', font => {
+        fill('deeppink');
+        textFont(font);
+        textSize(36);
+        text('p5*js', 10, 50);
+
+        describe('The text "p5*js" written in pink on a white background.');
+      });
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadFont('/assets/inconsolata.otf', success, failure);
+    }
+
+    function success(font) {
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+
+    function failure(event) {
+      console.error('Oops!', event);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function preload() {
+      loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      let p = createP('p5*js');
+      p.style('color', 'deeppink');
+      p.style('font-family', 'Inconsolata');
+      p.style('font-size', '36px');
+      p.position(10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the font to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function called with the
+                                                <a href="#/p5.Font">p5.Font</a> object after it
+                                                loads.</p>
+    type: Function
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function called with the error
+                                                <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
+                                                object if the font fails to load.</p>
+    type: Function
+    optional: true
+return:
+  description: <a href="#/p5.Font">p5.Font</a> object.
+  type: p5.Font
+chainable: false
+---
+
+
+# loadFont
diff --git a/src/content/reference/en/p5 copy/loadImage.mdx b/src/content/reference/en/p5 copy/loadImage.mdx
new file mode 100644
index 0000000000..7e5b8bf0b7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadImage.mdx	
@@ -0,0 +1,137 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L18
+title: loadImage
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Loads an image to create a <a href="/reference/p5/p5.Image">p5.Image</a>
+  object.</p>
+
+  <p><code>loadImage()</code> interprets the first parameter one of three ways.
+  If the path
+
+  to an image file is provided, <code>loadImage()</code> will load it. Paths to
+  local
+
+  files should be relative, such as <code>'/assets/thundercat.jpg'</code>. URLs
+  such as
+
+  <code>'https://example.com/thundercat.jpg'</code> may be blocked due to
+  browser
+
+  security. Raw image data can also be passed as a base64 encoded image in
+
+  the form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>.</p>
+
+  <p>The second parameter is optional. If a function is passed, it will be
+
+  called once the image has loaded. The callback function can optionally use
+
+  the new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+  <p>The third parameter is also optional. If a function is passed, it will be
+
+  called if the image fails to load. The callback function can optionally use
+
+  the event error.</p>
+
+  <p>Images can take time to load. Calling <code>loadImage()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures images load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 18
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Call handleImage() once the image loads.
+      loadImage('/assets/laDefense.jpg', handleImage);
+
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+
+    // Display the image.
+    function handleImage(img) {
+      image(img, 0, 0);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Call handleImage() once the image loads or
+      // call handleError() if an error occurs.
+      loadImage('/assets/laDefense.jpg', handleImage, handleError);
+    }
+
+    // Display the image.
+    function handleImage(img) {
+      image(img, 0, 0);
+
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+
+    // Log the error.
+    function handleError(event) {
+      console.error('Oops!', event);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the image to be loaded or base64 encoded image.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function called with
+                                    <a href="#/p5.Image">p5.Image</a> once it
+                                    loads.</p>
+    type: function(p5.Image)
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function called with event
+                                    error if the image fails to load.</p>
+    type: Function(Event)
+    optional: true
+return:
+  description: the <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# loadImage
diff --git a/src/content/reference/en/p5 copy/loadJSON.mdx b/src/content/reference/en/p5 copy/loadJSON.mdx
new file mode 100644
index 0000000000..95fd0552b5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadJSON.mdx	
@@ -0,0 +1,288 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L17
+title: loadJSON
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Loads a JSON file to create an <code>Object</code>.</p>
+
+  <p>JavaScript Object Notation
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
+  target="_blank">JSON</a>)
+
+  is a standard format for sending data between applications. The format is
+
+  based on JavaScript objects which have keys and values. JSON files store
+
+  data in an object with strings as keys. Values can be strings, numbers,
+
+  Booleans, arrays, <code>null</code>, or other objects.</p>
+
+  <p>The first parameter, <code>path</code>, is always a string with the path to
+  the file.
+
+  Paths to local files should be relative, as in
+
+  <code>loadJSON('/assets/data.json')</code>. URLs such as
+
+  <code>'https://example.com/data.json'</code> may be blocked due to browser
+  security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, as in <code>loadJSON('/assets/data.json', handleData)</code>, then the
+
+  <code>handleData()</code> function will be called once the data loads. The
+  object
+
+  created from the JSON data will be passed to <code>handleData()</code> as its
+  only argument.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, as in <code>loadJSON('/assets/data.json', handleData,
+  handleFailure)</code>,
+
+  then the <code>handleFailure()</code> function will be called if an error
+  occurs while
+
+  loading. The <code>Error</code> object will be passed to
+  <code>handleFailure()</code> as its only
+
+  argument.</p>
+
+  <p>Note: Data can take time to load. Calling <code>loadJSON()</code> within
+
+  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
+  used in
+
+  <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 17
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the JSON and create an object.
+    function preload() {
+      myData = loadJSON('/assets/data.json');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the circle.
+      fill(myData.color);
+      noStroke();
+
+      // Draw the circle.
+      circle(myData.x, myData.y, myData.d);
+
+      describe('A pink circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the JSON and create an object.
+    function preload() {
+      myData = loadJSON('/assets/data.json');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object and make it transparent.
+      let c = color(myData.color);
+      c.setAlpha(80);
+
+      // Style the circles.
+      fill(c);
+      noStroke();
+
+      // Iterate over the myData.bubbles array.
+      for (let b of myData.bubbles) {
+        // Draw a circle for each bubble.
+        circle(b.x, b.y, b.d);
+      }
+
+      describe('Several pink bubbles floating in a blue sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the GeoJSON and create an object.
+    function preload() {
+      myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get data about the most recent earthquake.
+      let quake = myData.features[0].properties;
+
+      // Draw a circle based on the earthquake's magnitude.
+      circle(50, 50, quake.mag * 10);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display the earthquake's location.
+      text(quake.place, 5, 80, 100);
+
+      describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let bigQuake;
+
+    // Load the GeoJSON and preprocess it.
+    function preload() {
+      loadJSON(
+        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+        handleData
+      );
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a circle based on the earthquake's magnitude.
+      circle(50, 50, bigQuake.mag * 10);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display the earthquake's location.
+      text(bigQuake.place, 5, 80, 100);
+
+      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+    }
+
+    // Find the biggest recent earthquake.
+    function handleData(data) {
+      let maxMag = 0;
+      // Iterate over the earthquakes array.
+      for (let quake of data.features) {
+        // Reassign bigQuake if a larger
+        // magnitude quake is found.
+        if (quake.properties.mag > maxMag) {
+          bigQuake = quake.properties;
+        }
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let bigQuake;
+
+    // Load the GeoJSON and preprocess it.
+    function preload() {
+      loadJSON(
+        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+        handleData,
+        handleError
+      );
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a circle based on the earthquake's magnitude.
+      circle(50, 50, bigQuake.mag * 10);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display the earthquake's location.
+      text(bigQuake.place, 5, 80, 100);
+
+      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+    }
+
+    // Find the biggest recent earthquake.
+    function handleData(data) {
+      let maxMag = 0;
+      // Iterate over the earthquakes array.
+      for (let quake of data.features) {
+        // Reassign bigQuake if a larger
+        // magnitude quake is found.
+        if (quake.properties.mag > maxMag) {
+          bigQuake = quake.properties;
+        }
+      }
+    }
+
+    // Log any errors to the console.
+    function handleError(error) {
+      console.log('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the JSON file to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: >
+      <p>function to call once the data is loaded. Will be passed the
+      object.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: >
+      <p>function to call if the data fails to load. Will be passed an
+      <code>Error</code> event object.</p>
+    type: Function
+    optional: true
+return:
+  description: object containing the loaded data.
+  type: Object
+chainable: false
+---
+
+
+# loadJSON
diff --git a/src/content/reference/en/p5 copy/loadModel.mdx b/src/content/reference/en/p5 copy/loadModel.mdx
new file mode 100644
index 0000000000..56b2230e1e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadModel.mdx	
@@ -0,0 +1,469 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L13
+title: loadModel
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: >
+  <p>Loads a 3D model to create a
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
+
+  <p><code>loadModel()</code> can load 3D models from OBJ and STL files. Once
+  the model is
+
+  loaded, it can be displayed with the
+
+  <a href="/reference/p5/model/">model()</a> function, as in
+  <code>model(shape)</code>.</p>
+
+  <p>There are three ways to call <code>loadModel()</code> with optional
+  parameters to help
+
+  process the model.</p>
+
+  <p>The first parameter, <code>path</code>, is always a <code>String</code>
+  with the path to the
+
+  file. Paths to local files should be relative, as in
+
+  <code>loadModel('/assets/model.obj')</code>. URLs such as
+
+  <code>'https://example.com/model.obj'</code> may be blocked due to browser
+  security.</p>
+
+  <p>Note: When loading a <code>.obj</code> file that references materials
+  stored in
+
+  <code>.mtl</code> files, p5.js will attempt to load and apply those materials.
+
+  To ensure that the <code>.obj</code> file reads the <code>.mtl</code> file
+  correctly include the
+
+  <code>.mtl</code> file alongside it.</p>
+
+  <p>The first way to call <code>loadModel()</code> has three optional
+  parameters after the
+
+  file path. The first optional parameter, <code>successCallback</code>, is a
+  function
+
+  to call once the model loads. For example,
+
+  <code>loadModel('/assets/model.obj', handleModel)</code> will call the
+  <code>handleModel()</code>
+
+  function once the model loads. The second optional parameter,
+
+  <code>failureCallback</code>, is a function to call if the model fails to
+  load. For
+
+  example, <code>loadModel('/assets/model.obj', handleModel,
+  handleFailure)</code> will
+
+  call the <code>handleFailure()</code> function if an error occurs while
+  loading. The
+
+  third optional parameter, <code>fileType</code>, is the model’s file extension
+  as a
+
+  string. For example,
+
+  <code>loadModel('/assets/model', handleModel, handleFailure, '.obj')</code>
+  will try to
+
+  load the file model as a <code>.obj</code> file.</p>
+
+  <p>The second way to call <code>loadModel()</code> has four optional
+  parameters after the
+
+  file path. The first optional parameter is a <code>Boolean</code> value. If
+  <code>true</code> is
+
+  passed, as in <code>loadModel('/assets/model.obj', true)</code>, then the
+  model will be
+
+  resized to ensure it fits the canvas. The next three parameters are
+
+  <code>successCallback</code>, <code>failureCallback</code>, and
+  <code>fileType</code> as described above.</p>
+
+  <p>The third way to call <code>loadModel()</code> has one optional parameter
+  after the
+
+  file path. The optional parameter, <code>options</code>, is an
+  <code>Object</code> with options,
+
+  as in <code>loadModel('/assets/model.obj', options)</code>. The
+  <code>options</code> object can
+
+  have the following properties:</p>
+
+  <pre><code class="language-js">let options = {
+    // Enables standardized size scaling during loading if set to true.
+    normalize: true,
+
+    // Function to call once the model loads.
+    successCallback: handleModel,
+
+    // Function to call if an error occurs while loading.
+    failureCallback: handleError,
+
+    // Model's file extension.
+    fileType: '.stl',
+
+    // Flips the U texture coordinates of the model.
+    flipU: false,
+
+    // Flips the V texture coordinates of the model.
+    flipV: false
+  };
+
+
+  // Pass the options object to loadModel().
+
+  loadModel('/assets/model.obj', options);
+
+  </code></pre>
+
+  <p>Models can take time to load. Calling <code>loadModel()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures models load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+
+  <p>Note: There’s no support for colored STL files. STL files with color will
+
+  be rendered without color.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      shape = loadModel('/assets/teapot.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    // Normalize the geometry's size to fit the canvas.
+    function preload() {
+      shape = loadModel('/assets/teapot.obj', true);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/teapot.obj', true, handleModel);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and log the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/wrong.obj', true, handleModel, handleError);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and print the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+
+    // Print an error message if the file doesn't load.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/teapot.obj', true, handleModel, handleError, '.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and print the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+
+    // Print an error message if the file doesn't load.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+    let options = {
+      normalize: true,
+      successCallback: handleModel,
+      failureCallback: handleError,
+      fileType: '.obj'
+    };
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/teapot.obj', options);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and print the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+
+    // Print an error message if the file doesn't load.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+  type: p5.Geometry
+overloads:
+  - line: 13
+    params:
+      - name: path
+        description: |
+          <p>path of the model to be loaded.</p>
+        type: String
+      - name: normalize
+        description: |
+          <p>if <code>true</code>, scale the model to fit the canvas.</p>
+        type: Boolean
+      - name: successCallback
+        description: |
+          <p>function to call once the model is loaded. Will be passed
+                                                            the <a href="#/p5.Geometry">p5.Geometry</a> object.</p>
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: >
+          <p>function to call if the model fails to load. Will be passed an
+          <code>Error</code> event object.</p>
+        type: Function(Event)
+        optional: true
+      - name: fileType
+        description: >
+          <p>model’s file extension. Either <code>'.obj'</code> or
+          <code>'.stl'</code>.</p>
+        type: String
+        optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+  - line: 324
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: successCallback
+        description: ''
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: ''
+        type: Function(Event)
+        optional: true
+      - name: fileType
+        description: ''
+        type: String
+        optional: true
+    return:
+      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
+      type: p5.Geometry
+  - line: 332
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: options
+        description: |
+          <p>loading options.</p>
+        type: Object
+        optional: true
+        props:
+          - name: successCallback
+            description: ''
+            type: function(p5.Geometry)
+            optional: true
+          - name: failureCallback
+            description: ''
+            type: Function(Event)
+            optional: true
+          - name: fileType
+            description: ''
+            type: String
+            optional: true
+          - name: normalize
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipU
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipV
+            description: ''
+            type: Boolean
+            optional: true
+    return:
+      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
+      type: p5.Geometry
+chainable: false
+---
+
+
+# loadModel
diff --git a/src/content/reference/en/p5 copy/loadPixels.mdx b/src/content/reference/en/p5 copy/loadPixels.mdx
new file mode 100644
index 0000000000..424a87765f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadPixels.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L946
+title: loadPixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: |
+  <p>Loads the current value of each pixel on the canvas into the
+  <a href="/reference/p5/pixels/">pixels</a> array.</p>
+  <p><code>loadPixels()</code> must be called before reading from or writing to
+  <a href="/reference/p5/pixels/">pixels</a>.</p>
+line: 946
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0, 100, 100);
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Copy the top half of the canvas to the bottom.
+      for (let i = 0; i < halfImage; i += 1) {
+        pixels[i + halfImage] = pixels[i];
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Two identical images of mountain landscapes, one on top of the other.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# loadPixels
diff --git a/src/content/reference/en/p5 copy/loadShader.mdx b/src/content/reference/en/p5 copy/loadShader.mdx
new file mode 100644
index 0000000000..1180e6c487
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadShader.mdx	
@@ -0,0 +1,172 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L12
+title: loadShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Loads vertex and fragment shaders to create a
+
+  <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
+
+  <p>Shaders are programs that run on the graphics processing unit (GPU). They
+
+  can process many pixels at the same time, making them fast for many
+
+  graphics tasks. They’re written in a language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.</p>
+
+  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
+  it can be
+
+  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
+
+  <code>shader(myShader)</code>. A shader program consists of two files, a
+  vertex shader
+
+  and a fragment shader. The vertex shader affects where 3D geometry is drawn
+
+  on the screen and the fragment shader affects color.</p>
+
+  <p><code>loadShader()</code> loads the vertex and fragment shaders from their
+  <code>.vert</code> and
+
+  <code>.frag</code> files. For example, calling
+
+  <code>loadShader('/assets/shader.vert', '/assets/shader.frag')</code> loads
+  both
+
+  required shaders and returns a <a href="/reference/p5/p5.Shader">p5.Shader</a>
+  object.</p>
+
+  <p>The third parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, it will be called once the shader has loaded. The callback function
+
+  can use the new <a href="/reference/p5/p5.Shader">p5.Shader</a> object as its
+
+  parameter.</p>
+
+  <p>The fourth parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, it will be called if the shader fails to load. The callback
+
+  function can use the event error as its parameter.</p>
+
+  <p>Shaders can take time to load. Calling <code>loadShader()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures shaders load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+
+  <p>Note: Shaders can only be used in WebGL mode.</p>
+line: 12
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Compile and apply the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      // Set the shader uniform r to the value 1.5.
+      mandelbrot.setUniform('r', 1.5);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+
+      describe('A black fractal image on a magenta background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates between 0 and 2.
+      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: vertFilename
+    description: |
+      <p>path of the vertex shader to be loaded.</p>
+    type: String
+  - name: fragFilename
+    description: |
+      <p>path of the fragment shader to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function to call once the shader is loaded. Can be passed the
+                                          <a href="#/p5.Shader">p5.Shader</a> object.</p>
+    type: Function
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function to call if the shader fails to load. Can be passed an
+                                          <code>Error</code> event object.</p>
+    type: Function
+    optional: true
+return:
+  description: new shader created from the vertex and fragment shader files.
+  type: p5.Shader
+chainable: false
+---
+
+
+# loadShader
diff --git a/src/content/reference/en/p5 copy/loadSound.mdx b/src/content/reference/en/p5 copy/loadSound.mdx
new file mode 100644
index 0000000000..be9dd1ac29
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadSound.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L2946
+title: loadSound
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>loadSound() returns a new p5.SoundFile from a specified
+  path. If called during preload(), the p5.SoundFile will be ready
+  to play in time for setup() and draw(). If called outside of
+  preload, the p5.SoundFile will not be ready immediately, so
+  loadSound accepts a callback as the second parameter. Using a
+  <a href="https://github.com/processing/p5.js/wiki/Local-server/">
+  local server</a> is recommended when loading external files.</p>
+line: 2946
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    let mySound;
+    function preload() {
+      soundFormats('mp3', 'ogg');
+      mySound = loadSound('/assets/doorbell');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+      background(220);
+      text('tap here to play', 10, 20);
+    }
+
+    function canvasPressed() {
+      // playing a sound file on a user gesture
+      // is equivalent to `userStartAudio()`
+      mySound.play();
+    }
+    </code></div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>Path to the sound file, or an array with
+                                        paths to soundfiles in multiple formats
+                                        i.e. ['sound.ogg', 'sound.mp3'].
+                                        Alternately, accepts an object: either
+                                        from the HTML5 File API, or a p5.File.</p>
+    type: String|Array
+  - name: successCallback
+    description: |
+      <p>Name of a function to call once file loads</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>Name of a function to call if there is
+                                          an error loading the file.</p>
+    type: Function
+    optional: true
+  - name: whileLoading
+    description: |
+      <p>Name of a function to call while file is loading.
+                                     This function will receive the percentage loaded
+                                     so far, from 0.0 to 1.0.</p>
+    type: Function
+    optional: true
+return:
+  description: Returns a p5.SoundFile
+  type: SoundFile
+chainable: false
+---
+
+
+# loadSound
diff --git a/src/content/reference/en/p5 copy/loadStrings.mdx b/src/content/reference/en/p5 copy/loadStrings.mdx
new file mode 100644
index 0000000000..ce011835bc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadStrings.mdx	
@@ -0,0 +1,188 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L309
+title: loadStrings
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Loads a text file to create an <code>Array</code>.</p>
+
+  <p>The first parameter, <code>path</code>, is always a string with the path to
+  the file.
+
+  Paths to local files should be relative, as in
+
+  <code>loadStrings('/assets/data.txt')</code>. URLs such as
+
+  <code>'https://example.com/data.txt'</code> may be blocked due to browser
+  security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, as in <code>loadStrings('/assets/data.txt', handleData)</code>, then
+  the
+
+  <code>handleData()</code> function will be called once the data loads. The
+  array
+
+  created from the text data will be passed to <code>handleData()</code> as its
+  only
+
+  argument.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, as in <code>loadStrings('/assets/data.txt', handleData,
+  handleFailure)</code>,
+
+  then the <code>handleFailure()</code> function will be called if an error
+  occurs while
+
+  loading. The <code>Error</code> object will be passed to
+  <code>handleFailure()</code> as its only
+
+  argument.</p>
+
+  <p>Note: Data can take time to load. Calling <code>loadStrings()</code> within
+
+  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
+  used in
+
+  <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 309
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the text and create an array.
+    function preload() {
+      myData = loadStrings('/assets/test.txt');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Select a random line from the text.
+      let phrase = random(myData);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display the text.
+      text(phrase, 10, 50, 90);
+
+      describe(`The text "${phrase}" written in black on a gray background.`);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastLine;
+
+    // Load the text and preprocess it.
+    function preload() {
+      loadStrings('/assets/test.txt', handleData);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display the text.
+      text(lastLine, 10, 50, 90);
+
+      describe('The text "I talk like an orange" written in black on a gray background.');
+    }
+
+    // Select the last line from the text.
+    function handleData(data) {
+      lastLine = data[data.length - 1];
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastLine;
+
+    // Load the text and preprocess it.
+    function preload() {
+      loadStrings('/assets/test.txt', handleData, handleError);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display the text.
+      text(lastLine, 10, 50, 90);
+
+      describe('The text "I talk like an orange" written in black on a gray background.');
+    }
+
+    // Select the last line from the text.
+    function handleData(data) {
+      lastLine = data[data.length - 1];
+    }
+
+    // Log any errors to the console.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the text file to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function to call once the data is
+                                           loaded. Will be passed the array.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if the data fails to
+                                         load. Will be passed an <code>Error</code> event
+                                         object.</p>
+    type: Function
+    optional: true
+return:
+  description: new array containing the loaded text.
+  type: 'String[]'
+chainable: false
+---
+
+
+# loadStrings
diff --git a/src/content/reference/en/p5 copy/loadTable.mdx b/src/content/reference/en/p5 copy/loadTable.mdx
new file mode 100644
index 0000000000..d93e40a3da
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadTable.mdx	
@@ -0,0 +1,124 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L505
+title: loadTable
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Reads the contents of a file or URL and creates a <a
+  href="/reference/p5/p5.Table">p5.Table</a> object with
+
+  its values. If a file is specified, it must be located in the sketch's
+
+  "data" folder. The filename parameter can also be a URL to a file found
+
+  online. By default, the file is assumed to be comma-separated (in CSV
+
+  format). Table only looks for a header row if the 'header' option is
+
+  included.</p>
+
+  <p>This method is asynchronous, meaning it may not finish before the next
+
+  line in your sketch is executed. Calling <a
+  href="/reference/p5/loadTable/">loadTable()</a> inside <a
+  href="/reference/p5/preload/">preload()</a>
+
+  guarantees to complete the operation before <a
+  href="/reference/p5/setup/">setup()</a> and <a
+  href="/reference/p5/draw/">draw()</a> are called.
+
+  Outside of <a href="/reference/p5/preload/">preload()</a>, you may supply a
+  callback function to handle the
+
+  object:</p>
+
+  <p>All files loaded and saved use UTF-8 encoding. This method is suitable for
+  fetching files up to size of 64MB.</p>
+line: 505
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // Given the following CSV file called "mammals.csv"
+    // located in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('/assets/mammals.csv', 'csv', 'header');
+      //the file can be remote
+      //table = loadTable("https://p5js.org/reference//assets/mammals.csv",
+      //                  "csv", "header");
+    }
+
+    function setup() {
+      //count the columns
+      print(table.getRowCount() + ' total rows in table');
+      print(table.getColumnCount() + ' total columns in table');
+
+      print(table.getColumn('name'));
+      //["Goat", "Leopard", "Zebra"]
+
+      //cycle through the table
+      for (let r = 0; r < table.getRowCount(); r++)
+        for (let c = 0; c < table.getColumnCount(); c++) {
+          print(table.getString(r, c));
+        }
+      describe(`randomly generated text from a file,
+        for example "i smell like butter"`);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: filename
+    description: |
+      <p>name of the file or URL to load</p>
+    type: String
+  - name: extension
+    description: |
+      <p>parse the table by comma-separated values "csv", semicolon-separated
+                                           values "ssv", or tab-separated values "tsv"</p>
+    type: String
+    optional: true
+  - name: header
+    description: |
+      <p>"header" to indicate table has header row</p>
+    type: String
+    optional: true
+  - name: callback
+    description: |
+      <p>function to be executed after
+                                           <a href="#/p5/loadTable">loadTable()</a> completes. On success, the
+                                           <a href="#/p5.Table">Table</a> object is passed in as the
+                                           first argument.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if
+                                           there is an error, response is passed
+                                           in as first argument</p>
+    type: Function
+    optional: true
+return:
+  description: <a href="#/p5.Table">Table</a> object containing data
+  type: Object
+chainable: false
+---
+
+
+# loadTable
diff --git a/src/content/reference/en/p5 copy/loadXML.mdx b/src/content/reference/en/p5 copy/loadXML.mdx
new file mode 100644
index 0000000000..859a3c895d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadXML.mdx	
@@ -0,0 +1,220 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L780
+title: loadXML
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Loads an XML file to create a <a href="/reference/p5/p5.XML">p5.XML</a>
+  object.</p>
+
+  <p>Extensible Markup Language
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
+  target="_blank">XML</a>)
+
+  is a standard format for sending data between applications. Like HTML, the
+
+  XML format is based on tags and attributes, as in
+
+  <code><time units="s">1234</time></code>.</p>
+
+  <p>The first parameter, <code>path</code>, is always a string with the path to
+  the file.
+
+  Paths to local files should be relative, as in
+
+  <code>loadXML('/assets/data.xml')</code>. URLs such as
+  <code>'https://example.com/data.xml'</code>
+
+  may be blocked due to browser security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, as in <code>loadXML('/assets/data.xml', handleData)</code>, then the
+
+  <code>handleData()</code> function will be called once the data loads. The
+
+  <a href="/reference/p5/p5.XML">p5.XML</a> object created from the data will be
+  passed
+
+  to <code>handleData()</code> as its only argument.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, as in <code>loadXML('/assets/data.xml', handleData,
+  handleFailure)</code>, then
+
+  the <code>handleFailure()</code> function will be called if an error occurs
+  while
+
+  loading. The <code>Error</code> object will be passed to
+  <code>handleFailure()</code> as its only
+
+  argument.</p>
+
+  <p>Note: Data can take time to load. Calling <code>loadXML()</code> within
+
+  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
+  used in
+
+  <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 780
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myXML;
+
+    // Load the XML and create a p5.XML object.
+    function preload() {
+      myXML = loadXML('/assets/animals.xml');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get an array with all mammal tags.
+      let mammals = myXML.getChildren('mammal');
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(14);
+
+      // Iterate over the mammals array.
+      for (let i = 0; i < mammals.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Get the mammal's common name.
+        let name = mammals[i].getContent();
+
+        // Display the mammal's name.
+        text(name, 20, y);
+      }
+
+      describe(
+        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastMammal;
+
+    // Load the XML and create a p5.XML object.
+    function preload() {
+      loadXML('/assets/animals.xml', handleData);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display the content of the last mammal element.
+      text(lastMammal, 50, 50);
+
+      describe('The word "Zebra" written in black on a gray background.');
+    }
+
+    // Get the content of the last mammal element.
+    function handleData(data) {
+      // Get an array with all mammal elements.
+      let mammals = data.getChildren('mammal');
+
+      // Get the content of the last mammal.
+      lastMammal = mammals[mammals.length - 1].getContent();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastMammal;
+
+    // Load the XML and preprocess it.
+    function preload() {
+      loadXML('/assets/animals.xml', handleData, handleError);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display the content of the last mammal element.
+      text(lastMammal, 50, 50);
+
+      describe('The word "Zebra" written in black on a gray background.');
+    }
+
+    // Get the content of the last mammal element.
+    function handleData(data) {
+      // Get an array with all mammal elements.
+      let mammals = data.getChildren('mammal');
+
+      // Get the content of the last mammal.
+      lastMammal = mammals[mammals.length - 1].getContent();
+    }
+
+    // Log any errors to the console.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the XML file to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function to call once the data is
+                                           loaded. Will be passed the
+                                           <a href="#/p5.XML">p5.XML</a> object.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if the data fails to
+                                         load. Will be passed an <code>Error</code> event
+                                         object.</p>
+    type: Function
+    optional: true
+return:
+  description: |-
+    XML data loaded into a <a href="#/p5.XML">p5.XML</a>
+                     object.
+  type: p5.XML
+chainable: false
+---
+
+
+# loadXML
diff --git a/src/content/reference/en/p5 copy/log.mdx b/src/content/reference/en/p5 copy/log.mdx
new file mode 100644
index 0000000000..c84c6d5a4b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/log.mdx	
@@ -0,0 +1,79 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L423
+title: log
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the natural logarithm (the base-e logarithm) of a number.</p>
+
+  <p><code>log()</code> expects the <code>n</code> parameter to be a value
+  greater than 0 because
+
+  the natural logarithm is defined that way.</p>
+line: 423
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = log(50);
+      circle(33, 33, d);
+
+      // Bottom-right.
+      d = log(500000000);
+      circle(67, 67, d);
+
+      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that get higher slowly from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate coordinates.
+      let x = frameCount;
+      let y = 15 * log(x);
+
+      // Draw a point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number greater than 0.</p>
+    type: Number
+return:
+  description: natural logarithm of n.
+  type: Number
+chainable: false
+---
+
+
+# log
diff --git a/src/content/reference/en/p5 copy/loop.mdx b/src/content/reference/en/p5 copy/loop.mdx
new file mode 100644
index 0000000000..a73432d2c1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loop.mdx	
@@ -0,0 +1,111 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L127
+title: loop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Resumes the draw loop after <a href="/reference/p5/noLoop/">noLoop()</a>
+  has been
+
+  called.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
+
+  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
+
+  restarted by calling <code>loop()</code>.</p>
+
+  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
+  to check
+
+  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
+line: 127
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe(
+        'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's x-coordinate.
+      let x = frameCount;
+
+      // Draw the circle.
+      circle(x, 50, 20);
+    }
+
+    // Resume the draw loop when the user double-clicks.
+    function doubleClicked() {
+      loop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let startButton;
+    let stopButton;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the button elements and place them
+      // beneath the canvas.
+      startButton = createButton('▶');
+      startButton.position(0, 100);
+      startButton.size(50, 20);
+      stopButton = createButton('◾');
+      stopButton.position(50, 100);
+      stopButton.size(50, 20);
+
+      // Set functions to call when the buttons are pressed.
+      startButton.mousePressed(loop);
+      stopButton.mousePressed(noLoop);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe(
+        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# loop
diff --git a/src/content/reference/en/p5 copy/mag.mdx b/src/content/reference/en/p5 copy/mag.mdx
new file mode 100644
index 0000000000..4d46565b07
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mag.mdx	
@@ -0,0 +1,84 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L481
+title: mag
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the magnitude, or length, of a vector.</p>
+
+  <p>A vector can be thought of in different ways. In one view, a vector is a
+
+  point in space. The vector's components, <code>x</code> and <code>y</code>,
+  are the point's
+
+  coordinates <code>(x, y)</code>. A vector's magnitude is the distance from the
+  origin
+
+  <code>(0, 0)</code> to <code>(x, y)</code>. <code>mag(x, y)</code> is a
+  shortcut for calling
+
+  <code>dist(0, 0, x, y)</code>.</p>
+
+  <p>A vector can also be thought of as an arrow pointing in space. This view is
+
+  helpful for programming motion. See <a
+  href="/reference/p5/p5.Vector">p5.Vector</a> for
+
+  more details.</p>
+
+  <p>Use <a href="/reference/p5.Vector/mag/">p5.Vector.mag()</a> to calculate
+  the
+
+  magnitude of a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+line: 481
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the vector's components.
+      let x = 30;
+      let y = 40;
+
+      // Calculate the magnitude.
+      let m = mag(x, y);
+
+      // Style the text.
+      textSize(16);
+
+      // Display the vector and its magnitude.
+      line(0, 0, x, y);
+      text(m, x, y);
+
+      describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>first component.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>second component.</p>
+    type: Number
+return:
+  description: magnitude of vector.
+  type: Number
+chainable: false
+---
+
+
+# mag
diff --git a/src/content/reference/en/p5 copy/map.mdx b/src/content/reference/en/p5 copy/map.mdx
new file mode 100644
index 0000000000..a94e6e4dd7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/map.mdx	
@@ -0,0 +1,119 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L534
+title: map
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Re-maps a number from one range to another.</p>
+
+  <p>For example, calling <code>map(2, 0, 10, 0, 100)</code> returns 20. The
+  first three
+
+  arguments set the original value to 2 and the original range from 0 to 10.
+
+  The last two arguments set the target range from 0 to 100. 20's position
+
+  in the target range [0, 100] is proportional to 2's position in the
+
+  original range [0, 10].</p>
+
+  <p>The sixth parameter, <code>withinBounds</code>, is optional. By default,
+  <code>map()</code> can
+
+  return values outside of the target range. For example,
+
+  <code>map(11, 0, 10, 0, 100)</code> returns 110. Passing <code>true</code> as
+  the sixth parameter
+
+  constrains the remapped value to the target range. For example,
+
+  <code>map(11, 0, 10, 0, 100, true)</code> returns 100.</p>
+line: 534
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the top line.
+      line(0, 25, mouseX, 25);
+
+      // Remap mouseX from [0, 100] to [0, 50].
+      let x = map(mouseX, 0, 100, 0, 50);
+
+      // Draw the bottom line.
+      line(0, 75, x, 75);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A circle changes color from black to white as the mouse moves from left to right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Remap mouseX from [0, 100] to [0, 255]
+      let c = map(mouseX, 0, 100, 0, 255);
+
+      // Style the circle.
+      fill(c);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>the value to be remapped.</p>
+    type: Number
+  - name: start1
+    description: |
+      <p>lower bound of the value's current range.</p>
+    type: Number
+  - name: stop1
+    description: |
+      <p>upper bound of the value's current range.</p>
+    type: Number
+  - name: start2
+    description: |
+      <p>lower bound of the value's target range.</p>
+    type: Number
+  - name: stop2
+    description: |
+      <p>upper bound of the value's target range.</p>
+    type: Number
+  - name: withinBounds
+    description: |
+      <p>constrain the value to the newly mapped range.</p>
+    type: Boolean
+    optional: true
+return:
+  description: remapped number.
+  type: Number
+chainable: false
+---
+
+
+# map
diff --git a/src/content/reference/en/p5 copy/match.mdx b/src/content/reference/en/p5 copy/match.mdx
new file mode 100644
index 0000000000..c93425e96d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/match.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L60
+title: match
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Applies a regular expression to a string and returns an array with the
+
+  first match.</p>
+
+  <p><code>match()</code> uses regular expressions (regex) to match patterns in
+  text. For
+
+  example, the regex <code>abc</code> can be used to search a string for the
+  exact
+
+  sequence of characters <code>abc</code>. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
+  target="_blank">MDN</a>.
+
+  for more information about regexes.</p>
+
+  <p>The first parameter, <code>str</code>, is the string to search.</p>
+
+  <p>The second parameter, <code>regex</code>, is a string with the regular
+  expression to
+
+  apply. For example, calling <code>match('Hello, p5*js!', '[a-z][0-9]')</code>
+  would
+
+  return the array <code>['p5']</code>.</p>
+
+  <p>Note: If no matches are found, <code>null</code> is returned.</p>
+line: 60
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'Hello, p5*js!';
+
+      // Match the characters that are lowercase
+      // letters followed by digits.
+      let matches = match(string, '[a-z][0-9]');
+
+      // Print the matches array to the console:
+      // ['p5']
+      print(matches);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the matches.
+      text(matches, 50, 50);
+
+      describe('The text "p5" written in black on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: str
+    description: |
+      <p>string to search.</p>
+    type: String
+  - name: regexp
+    description: |
+      <p>regular expression to match.</p>
+    type: String
+return:
+  description: match if found.
+  type: 'String[]'
+chainable: false
+---
+
+
+# match
diff --git a/src/content/reference/en/p5 copy/matchAll.mdx b/src/content/reference/en/p5 copy/matchAll.mdx
new file mode 100644
index 0000000000..371d596b61
--- /dev/null
+++ b/src/content/reference/en/p5 copy/matchAll.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L119
+title: matchAll
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Applies a regular expression to a string and returns an array of
+  matches.</p>
+
+  <p><code>match()</code> uses regular expressions (regex) to match patterns in
+  text. For
+
+  example, the regex <code>abc</code> can be used to search a string for the
+  exact
+
+  sequence of characters <code>abc</code>. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
+  target="_blank">MDN</a>.
+
+  for more information about regexes. <code>matchAll()</code> is different from
+
+  <a href="/reference/p5/match/">match()</a> because it returns every match, not
+  just
+
+  the first.</p>
+
+  <p>The first parameter, <code>str</code>, is the string to search.</p>
+
+  <p>The second parameter, <code>regex</code>, is a string with the regular
+  expression to
+
+  apply. For example, calling
+
+  <code>matchAll('p5*js is easier than abc123', '[a-z][0-9]')</code> would
+  return the
+
+  2D array <code>[['p5'], ['c1']]</code>.</p>
+
+  <p>Note: If no matches are found, an empty array <code>[]</code> is
+  returned.</p>
+line: 119
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'p5*js is easier than abc123';
+
+      // Match the character sequences that are
+      // lowercase letters followed by digits.
+      let matches = matchAll(string, '[a-z][0-9]');
+
+      // Print the matches array to the console:
+      // [['p5'], ['c1']]
+      print(matches);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Iterate over the matches array.
+      for (let i = 0; i < matches.length; i += 1) {
+
+        // Calculate the y-coordainate.
+        let y = (i + 1) * 33;
+
+        // Display the match.
+        text(matches[i], 50, y);
+      }
+
+      describe(
+        'The text "p5" and "c1" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: str
+    description: |
+      <p>string to search.</p>
+    type: String
+  - name: regexp
+    description: |
+      <p>regular expression to match.</p>
+    type: String
+return:
+  description: matches found.
+  type: 'String[]'
+chainable: false
+---
+
+
+# matchAll
diff --git a/src/content/reference/en/p5 copy/max.mdx b/src/content/reference/en/p5 copy/max.mdx
new file mode 100644
index 0000000000..0dd0ee142c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/max.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L618
+title: max
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Returns the largest value in a sequence of numbers.</p>
+
+  <p>The version of <code>max()</code> with one parameter interprets it as an
+  array of
+
+  numbers and returns the largest number.</p>
+
+  <p>The version of <code>max()</code> with two or more parameters interprets
+  them as
+
+  individual numbers and returns the largest number.</p>
+line: 618
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the maximum of 10, 5, and 20.
+      let m = max(10, 5, 20);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the max.
+      text(m, 50, 50);
+
+      describe('The number 20 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let numbers = [10, 5, 20];
+
+      // Calculate the maximum of the array.
+      let m = max(numbers);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the max.
+      text(m, 50, 50);
+
+      describe('The number 20 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: maximum number.
+  type: Number
+overloads:
+  - line: 618
+    params:
+      - name: n0
+        description: |
+          <p>first number to compare.</p>
+        type: Number
+      - name: n1
+        description: |
+          <p>second number to compare.</p>
+        type: Number
+    return:
+      description: maximum number.
+      type: Number
+  - line: 680
+    params:
+      - name: nums
+        description: |
+          <p>numbers to compare.</p>
+        type: 'Number[]'
+    return:
+      description: ''
+      type: Number
+chainable: false
+---
+
+
+# max
diff --git a/src/content/reference/en/p5 copy/metalness.mdx b/src/content/reference/en/p5 copy/metalness.mdx
new file mode 100644
index 0000000000..ef378bc2a9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/metalness.mdx	
@@ -0,0 +1,142 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L3069
+title: metalness
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the amount of "metalness" of a
+
+  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
+
+  <p><code>metalness()</code> can make materials appear more metallic. It
+  affects the way
+
+  materials reflect light sources including
+
+  affects the way materials reflect light sources including
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>,
+
+  <a href="/reference/p5/spotLight/">spotLight()</a>, and
+
+  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
+
+  <p>The parameter, <code>metallic</code>, is a number that sets the amount of
+  metalness.
+
+  <code>metallic</code> must be greater than 1, which is its default value.
+  Higher
+
+  values, such as <code>metalness(100)</code>, make specular materials appear
+  more
+
+  metallic.</p>
+line: 3069
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn on an ambient light.
+      ambientLight(200);
+
+      // Get the mouse's coordinates.
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Turn on a white point light that follows the mouse.
+      pointLight(255, 255, 255, mx, my, 50);
+
+      // Style the spheres.
+      noStroke();
+      fill(30, 30, 255);
+      specularMaterial(255);
+      shininess(20);
+
+      // Draw the left sphere with low metalness.
+      translate(-25, 0, 0);
+      metalness(1);
+      sphere(20);
+
+      // Draw the right sphere with high metalness.
+      translate(50, 0, 0);
+      metalness(50);
+      sphere(20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(100 ,100 ,WEBGL);
+
+      describe(
+        'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'
+      );
+    }
+
+    function draw() {
+      // Add the panorama.
+      panorama(img);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Use the image as a light source.
+      imageLight(img);
+
+      // Style the spheres.
+      noStroke();
+      specularMaterial(50);
+      shininess(200);
+
+      // Draw the left sphere with low metalness.
+      translate(-25, 0, 0);
+      metalness(1);
+      sphere(20);
+
+      // Draw the right sphere with high metalness.
+      translate(50, 0, 0);
+      metalness(50);
+      sphere(20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: metallic
+    description: |
+      <p>amount of metalness.</p>
+    type: Number
+chainable: false
+---
+
+
+# metalness
diff --git a/src/content/reference/en/p5 copy/midiToFreq.mdx b/src/content/reference/en/p5 copy/midiToFreq.mdx
new file mode 100644
index 0000000000..ada29d80ea
--- /dev/null
+++ b/src/content/reference/en/p5 copy/midiToFreq.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L841
+title: midiToFreq
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the frequency value of a MIDI note value.
+  General MIDI treats notes as integers where middle C
+  is 60, C# is 61, D is 62 etc. Useful for generating
+  musical frequencies with oscillators.</p>
+line: 841
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    let midiNotes = [60, 64, 67, 72];
+    let noteIndex = 0;
+    let midiVal, freq;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(startSound);
+      osc = new p5.TriOsc();
+      env = new p5.Envelope();
+    }
+
+    function draw() {
+      background(220);
+      text('tap to play', 10, 20);
+      if (midiVal) {
+        text('MIDI: ' + midiVal, 10, 40);
+        text('Freq: ' + freq, 10, 60);
+      }
+    }
+
+    function startSound() {
+      // see also: userStartAudio();
+      osc.start();
+
+      midiVal = midiNotes[noteIndex % midiNotes.length];
+      freq = midiToFreq(midiVal);
+      osc.freq(freq);
+      env.ramp(osc, 0, 1.0, 0);
+
+      noteIndex++;
+    }
+    </code></div>
+class: p5
+params:
+  - name: midiNote
+    description: |
+      <p>The number of a MIDI note</p>
+    type: Number
+return:
+  description: Frequency value of the given MIDI note
+  type: Number
+chainable: false
+---
+
+
+# midiToFreq
diff --git a/src/content/reference/en/p5 copy/millis.mdx b/src/content/reference/en/p5 copy/millis.mdx
new file mode 100644
index 0000000000..18f1ac06d0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/millis.mdx	
@@ -0,0 +1,147 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L112
+title: millis
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>Returns the number of milliseconds since a sketch started running.</p>
+
+  <p><code>millis()</code> keeps track of how long a sketch has been running in
+
+  milliseconds (thousandths of a second). This information is often
+
+  helpful for timing events and animations.</p>
+
+  <p>If a sketch has a
+
+  <a href="/reference/p5/setup/">setup()</a> function, then
+  <code>millis()</code> begins tracking
+
+  time before the code in <a href="/reference/p5/setup/">setup()</a> runs. If a
+
+  sketch includes a <a href="/reference/p5/preload/">preload()</a> function,
+  then
+
+  <code>millis()</code> begins tracking time as soon as the code in
+
+  <a href="/reference/p5/preload/">preload()</a> starts running.</p>
+line: 112
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the number of milliseconds the sketch has run.
+      let ms = millis();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(10);
+      textFont('Courier New');
+
+      // Display how long it took setup() to be called.
+      text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
+
+      describe(
+        `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Get the number of seconds the sketch has run.
+      let s = millis() / 1000;
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(10);
+      textFont('Courier New');
+
+      // Display how long the sketch has run.
+      text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle oscillates left and right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Get the number of seconds the sketch has run.
+      let s = millis() / 1000;
+
+      // Calculate an x-coordinate.
+      let x = 30 * sin(s) + 50;
+
+      // Draw the circle.
+      circle(x, 50, 30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Load the GeoJSON.
+    function preload() {
+      loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the number of milliseconds the sketch has run.
+      let ms = millis();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display how long it took to load the data.
+      text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
+
+      describe(
+        `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: number of milliseconds since starting the sketch.
+  type: Number
+chainable: false
+---
+
+
+# millis
diff --git a/src/content/reference/en/p5 copy/min.mdx b/src/content/reference/en/p5 copy/min.mdx
new file mode 100644
index 0000000000..67af3b37f1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/min.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L695
+title: min
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Returns the smallest value in a sequence of numbers.</p>
+
+  <p>The version of <code>min()</code> with one parameter interprets it as an
+  array of
+
+  numbers and returns the smallest number.</p>
+
+  <p>The version of <code>min()</code> with two or more parameters interprets
+  them as
+
+  individual numbers and returns the smallest number.</p>
+line: 695
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the minimum of 10, 5, and 20.
+      let m = min(10, 5, 20);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the min.
+      text(m, 50, 50);
+
+      describe('The number 5 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let numbers = [10, 5, 20];
+
+      // Calculate the minimum of the array.
+      let m = min(numbers);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the min.
+      text(m, 50, 50);
+
+      describe('The number 5 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: minimum number.
+  type: Number
+overloads:
+  - line: 695
+    params:
+      - name: n0
+        description: |
+          <p>first number to compare.</p>
+        type: Number
+      - name: n1
+        description: |
+          <p>second number to compare.</p>
+        type: Number
+    return:
+      description: minimum number.
+      type: Number
+  - line: 757
+    params:
+      - name: nums
+        description: |
+          <p>numbers to compare.</p>
+        type: 'Number[]'
+    return:
+      description: ''
+      type: Number
+chainable: false
+---
+
+
+# min
diff --git a/src/content/reference/en/p5 copy/minute.mdx b/src/content/reference/en/p5 copy/minute.mdx
new file mode 100644
index 0000000000..3ac966c800
--- /dev/null
+++ b/src/content/reference/en/p5 copy/minute.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L78
+title: minute
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current minute as a number from 0–59.</p>
+line: 78
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current minute.
+      let m = minute();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the minute.
+      text(`Current minute: ${m}`, 10, 50, 80);
+
+      describe(`The text 'Current minute: ${m}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current minute between 0 and 59.
+  type: Integer
+chainable: false
+---
+
+
+# minute
diff --git a/src/content/reference/en/p5 copy/model.mdx b/src/content/reference/en/p5 copy/model.mdx
new file mode 100644
index 0000000000..e925350407
--- /dev/null
+++ b/src/content/reference/en/p5 copy/model.mdx	
@@ -0,0 +1,155 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L991
+title: model
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: >
+  <p>Draws a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to the
+  canvas.</p>
+
+  <p>The parameter, <code>model</code>, is the
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to draw.
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can be built with
+
+  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, or
+
+  <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a>. They can also be
+  loaded from
+
+  a file with <a href="/reference/p5/loadGeometry/">loadGeometry()</a>.</p>
+
+  <p>Note: <code>model()</code> can only be used in WebGL mode.</p>
+line: 991
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createShape);
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    // Create p5.Geometry object from a single cone.
+    function createShape() {
+      cone();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createArrow);
+
+      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the p5.Geometry object again.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      shape = loadModel('/assets/octahedron.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white octahedron drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: model
+    description: |
+      <p>3D shape to be drawn.</p>
+    type: p5.Geometry
+chainable: false
+---
+
+
+# model
diff --git a/src/content/reference/en/p5 copy/month.mdx b/src/content/reference/en/p5 copy/month.mdx
new file mode 100644
index 0000000000..d2e248235c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/month.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L242
+title: month
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current month as a number from 1–12.</p>
+line: 242
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current month.
+      let m = month();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the month.
+      text(`Current month: ${m}`, 10, 50, 80);
+
+      describe(`The text 'Current month: ${m}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current month between 1 and 12.
+  type: Integer
+chainable: false
+---
+
+
+# month
diff --git a/src/content/reference/en/p5 copy/mouseButton.mdx b/src/content/reference/en/p5 copy/mouseButton.mdx
new file mode 100644
index 0000000000..82128f97a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseButton.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L687
+title: mouseButton
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A String system variable that contains the value of the last mouse button
+
+  pressed.</p>
+
+  <p>The <code>mouseButton</code> variable is either <code>LEFT</code>,
+  <code>RIGHT</code>, or <code>CENTER</code>,
+
+  depending on which button was pressed last.</p>
+
+  <p>Note: Different browsers may track <code>mouseButton</code> differently.
+  See
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons/"
+  target="_blank">MDN</a>
+
+  for more information.</p>
+line: 687
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with black text at its center. The text changes from 0 to either "left" or "right" when the user clicks a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse button.
+      text(mouseButton, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        "A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (mouseIsPressed === true) {
+        if (mouseButton === LEFT) {
+          circle(50, 50, 50);
+        }
+        if (mouseButton === RIGHT) {
+          square(25, 25, 50);
+        }
+        if (mouseButton === CENTER) {
+          triangle(23, 75, 50, 20, 78, 75);
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Constant
+---
+
+
+# mouseButton
diff --git a/src/content/reference/en/p5 copy/mouseClicked.mdx b/src/content/reference/en/p5 copy/mouseClicked.mdx
new file mode 100644
index 0000000000..80bd80b0a2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseClicked.mdx	
@@ -0,0 +1,196 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1443
+title: mouseClicked
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once after a mouse button is pressed and
+  released.</p>
+
+  <p>Declaring the function <code>mouseClicked()</code> sets a code block to run
+
+  automatically when the user releases a mouse button after having pressed
+
+  it:</p>
+
+  <pre><code class="language-js">function mouseClicked() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseClicked()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseClicked() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseClicked()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse click event:</p>
+
+  <pre><code class="language-js">function mouseClicked(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mouseClicked()</code> will run when a user’s
+  touch
+
+  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
+  If
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
+  touch
+
+  ends and <code>mouseClicked()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
+
+  <a href="/reference/p5/mouseReleased/">mouseReleased()</a>,
+
+  and <code>mouseClicked()</code> are all related.
+
+  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
+  user
+
+  clicks the mouse. <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
+  runs as
+
+  soon as the user releases the mouse click. <code>mouseClicked()</code> runs
+
+  immediately after <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
+line: 1443
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the square's color when the user clicks.
+    function mouseClicked() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the circle.
+      fill('orange');
+      stroke('royalblue');
+      strokeWeight(10);
+
+      describe(
+        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+      );
+    }
+
+    function draw() {
+      background(220);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+
+    // Set the stroke color and weight as soon as the user clicks.
+    function mousePressed() {
+      stroke('deeppink');
+      strokeWeight(3);
+    }
+
+    // Set the stroke and fill colors as soon as the user releases
+    // the mouse.
+    function mouseReleased() {
+      stroke('royalblue');
+
+      // This is never visible because fill() is called
+      // in mouseClicked() which runs immediately after
+      // mouseReleased();
+      fill('limegreen');
+    }
+
+    // Set the fill color and stroke weight after
+    // mousePressed() and mouseReleased() are called.
+    function mouseClicked() {
+      fill('orange');
+      strokeWeight(10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseClicked
diff --git a/src/content/reference/en/p5 copy/mouseDragged.mdx b/src/content/reference/en/p5 copy/mouseDragged.mdx
new file mode 100644
index 0000000000..26fea21fe9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseDragged.mdx	
@@ -0,0 +1,130 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L982
+title: mouseDragged
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called when the mouse moves while a button is
+  pressed.</p>
+
+  <p>Declaring the function <code>mouseDragged()</code> sets a code block to run
+
+  automatically when the user clicks and drags the mouse:</p>
+
+  <pre><code class="language-js">function mouseDragged() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseDragged()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseDragged() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseDragged()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse drag event:</p>
+
+  <pre><code class="language-js">function mouseDragged(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mouseDragged()</code> will run when a user
+  moves a touch
+
+  point if <a href="/reference/p5/touchMoved/">touchMoved()</a> isn’t declared.
+  If
+
+  <a href="/reference/p5/touchMoved/">touchMoved()</a> is declared, then
+
+  <a href="/reference/p5/touchMoved/">touchMoved()</a> will run when a user
+  moves a
+
+  touch point and <code>mouseDragged()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+line: 982
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mouseDragged() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseDragged
diff --git a/src/content/reference/en/p5 copy/mouseIsPressed.mdx b/src/content/reference/en/p5 copy/mouseIsPressed.mdx
new file mode 100644
index 0000000000..37109eb364
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseIsPressed.mdx	
@@ -0,0 +1,73 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L755
+title: mouseIsPressed
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Boolean</code> system variable that's <code>true</code> if the
+  mouse is pressed and
+
+  <code>false</code> if not.</p>
+line: 755
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the word "false" at its center. The word changes to "true" when the user presses a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouseIsPressed variable.
+      text(mouseIsPressed, 25, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      if (mouseIsPressed === true) {
+        fill(0);
+      } else {
+        fill(255);
+      }
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# mouseIsPressed
diff --git a/src/content/reference/en/p5 copy/mouseMoved.mdx b/src/content/reference/en/p5 copy/mouseMoved.mdx
new file mode 100644
index 0000000000..14928fdc5e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseMoved.mdx	
@@ -0,0 +1,118 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L896
+title: mouseMoved
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called when the mouse moves.</p>
+
+  <p>Declaring the function <code>mouseMoved()</code> sets a code block to run
+
+  automatically when the user moves the mouse without clicking any mouse
+
+  buttons:</p>
+
+  <pre><code class="language-js">function mouseMoved() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseMoved()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseMoved() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseMoved()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse move event:</p>
+
+  <pre><code class="language-js">function mouseMoved(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+line: 896
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mouseMoved() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseMoved
diff --git a/src/content/reference/en/p5 copy/mousePressed.mdx b/src/content/reference/en/p5 copy/mousePressed.mdx
new file mode 100644
index 0000000000..81181859c1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mousePressed.mdx	
@@ -0,0 +1,193 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1098
+title: mousePressed
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when a mouse button is pressed.</p>
+
+  <p>Declaring the function <code>mousePressed()</code> sets a code block to run
+
+  automatically when the user presses a mouse button:</p>
+
+  <pre><code class="language-js">function mousePressed() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mousePressed()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mousePressed() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mousePressed()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse press event:</p>
+
+  <pre><code class="language-js">function mousePressed(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mousePressed()</code> will run when a user’s
+  touch
+
+  begins if <a href="/reference/p5/touchStarted/">touchStarted()</a> isn’t
+  declared. If
+
+  <a href="/reference/p5/touchStarted/">touchStarted()</a> is declared, then
+
+  <a href="/reference/p5/touchStarted/">touchStarted()</a> will run when a
+  user’s touch
+
+  begins and <code>mousePressed()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: <code>mousePressed()</code>, <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a>,
+
+  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
+
+  <code>mousePressed()</code> runs as soon as the user clicks the mouse.
+
+  <a href="/reference/p5/mouseReleased/">mouseReleased()</a> runs as soon as the
+  user
+
+  releases the mouse click. <a
+  href="/reference/p5/mouseClicked/">mouseClicked()</a>
+
+  runs immediately after <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
+line: 1098
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mousePressed() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the circle.
+      fill('orange');
+      stroke('royalblue');
+      strokeWeight(10);
+
+      describe(
+        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+      );
+    }
+
+    function draw() {
+      background(220);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+
+    // Set the stroke color and weight as soon as the user clicks.
+    function mousePressed() {
+      stroke('deeppink');
+      strokeWeight(3);
+    }
+
+    // Set the stroke and fill colors as soon as the user releases
+    // the mouse.
+    function mouseReleased() {
+      stroke('royalblue');
+
+      // This is never visible because fill() is called
+      // in mouseClicked() which runs immediately after
+      // mouseReleased();
+      fill('limegreen');
+    }
+
+    // Set the fill color and stroke weight after
+    // mousePressed() and mouseReleased() are called.
+    function mouseClicked() {
+      fill('orange');
+      strokeWeight(10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mousePressed
diff --git a/src/content/reference/en/p5 copy/mouseReleased.mdx b/src/content/reference/en/p5 copy/mouseReleased.mdx
new file mode 100644
index 0000000000..6f52911162
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseReleased.mdx	
@@ -0,0 +1,195 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1270
+title: mouseReleased
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when a mouse button is released.</p>
+
+  <p>Declaring the function <code>mouseReleased()</code> sets a code block to
+  run
+
+  automatically when the user releases a mouse button after having pressed
+
+  it:</p>
+
+  <pre><code class="language-js">function mouseReleased() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseReleased()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseReleased() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional.
+  <code>mouseReleased()</code> is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse release event:</p>
+
+  <pre><code class="language-js">function mouseReleased(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mouseReleased()</code> will run when a user’s
+  touch
+
+  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
+  If
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
+  touch
+
+  ends and <code>mouseReleased()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
+  <code>mouseReleased()</code>,
+
+  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
+
+  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
+  user
+
+  clicks the mouse. <code>mouseReleased()</code> runs as soon as the user
+  releases the
+
+  mouse click. <a href="/reference/p5/mouseClicked/">mouseClicked()</a> runs
+
+  immediately after <code>mouseReleased()</code>.</p>
+line: 1270
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mouseReleased() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the circle.
+      fill('orange');
+      stroke('royalblue');
+      strokeWeight(10);
+
+      describe(
+        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+      );
+    }
+
+    function draw() {
+      background(220);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+
+    // Set the stroke color and weight as soon as the user clicks.
+    function mousePressed() {
+      stroke('deeppink');
+      strokeWeight(3);
+    }
+
+    // Set the stroke and fill colors as soon as the user releases
+    // the mouse.
+    function mouseReleased() {
+      stroke('royalblue');
+
+      // This is never visible because fill() is called
+      // in mouseClicked() which runs immediately after
+      // mouseReleased();
+      fill('limegreen');
+    }
+
+    // Set the fill color and stroke weight after
+    // mousePressed() and mouseReleased() are called.
+    function mouseClicked() {
+      fill('orange');
+      strokeWeight(10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseReleased
diff --git a/src/content/reference/en/p5 copy/mouseWheel.mdx b/src/content/reference/en/p5 copy/mouseWheel.mdx
new file mode 100644
index 0000000000..a659ea3cec
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseWheel.mdx	
@@ -0,0 +1,162 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1746
+title: mouseWheel
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when the mouse wheel moves.</p>
+
+  <p>Declaring the function <code>mouseWheel()</code> sets a code block to run
+
+  automatically when the user scrolls with the mouse wheel:</p>
+
+  <pre><code class="language-js">function mouseWheel() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseWheel()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseWheel() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseWheel()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse scroll event:</p>
+
+  <pre><code class="language-js">function mouseWheel(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>The <code>event</code> object has many properties including
+  <code>delta</code>, a <code>Number</code>
+
+  containing the distance that the user scrolled. For example,
+  <code>event.delta</code>
+
+  might have the value 5 when the user scrolls up. <code>event.delta</code> is
+  positive
+
+  if the user scrolls up and negative if they scroll down. The signs are
+
+  opposite on macOS with "natural" scrolling enabled.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: On Safari, <code>mouseWheel()</code> may only work as expected if
+
+  <code>return false;</code> is added at the end of the function.</p>
+line: 1746
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let circleSize = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle
+      circle(50, 50, circleSize);
+    }
+
+    // Increment circleSize when the user scrolls the mouse wheel.
+    function mouseWheel() {
+      circleSize += 1;
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let direction = '';
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Draw an arrow that points where
+      // the mouse last scrolled.
+      text(direction, 50, 50);
+    }
+
+    // Change direction when the user scrolls the mouse wheel.
+    function mouseWheel(event) {
+      if (event.delta > 0) {
+        direction = '▲';
+      } else {
+        direction = '▼';
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>WheelEvent</code> argument.</p>
+    type: WheelEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseWheel
diff --git a/src/content/reference/en/p5 copy/mouseX.mdx b/src/content/reference/en/p5 copy/mouseX.mdx
new file mode 100644
index 0000000000..7c0ba7f4a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseX.mdx	
@@ -0,0 +1,124 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L119
+title: mouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
+  position.</p>
+
+  <p><code>mouseX</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. For example, if the mouse is 50 pixels from
+
+  the left edge of the canvas, then <code>mouseX</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>mouseX</code> will hold
+  the
+
+  x-coordinate of the most recent touch point.</p>
+line: 119
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A vertical black line moves left and right following the mouse's x-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a vertical line that follows the mouse's x-coordinate.
+      line(mouseX, 0, mouseX, 100);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A vertical black line moves left and right following the mouse's x-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let mx = mouseX - 50;
+
+      // Draw the line.
+      line(mx, -50, mx, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    // Load a font for WebGL mode.
+    function preload() {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      textFont(font);
+      fill(0);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# mouseX
diff --git a/src/content/reference/en/p5 copy/mouseY.mdx b/src/content/reference/en/p5 copy/mouseY.mdx
new file mode 100644
index 0000000000..dc268025a4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseY.mdx	
@@ -0,0 +1,124 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L226
+title: mouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's vertical
+  position.</p>
+
+  <p><code>mouseY</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. For example, if the mouse is 50 pixels from
+
+  the top edge of the canvas, then <code>mouseY</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>mouseY</code> will hold
+  the
+
+  y-coordinate of the most recent touch point.</p>
+line: 226
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A horizontal black line moves up and down following the mouse's y-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a horizontal line that follows the mouse's y-coordinate.
+      line(0, mouseY, 100, mouseY);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A horizontal black line moves up and down following the mouse's y-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let my = mouseY - 50;
+
+      // Draw the line.
+      line(-50, my, 50, my);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    // Load a font for WebGL mode.
+    function preload() {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      textFont(font);
+      fill(0);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# mouseY
diff --git a/src/content/reference/en/p5 copy/movedX.mdx b/src/content/reference/en/p5 copy/movedX.mdx
new file mode 100644
index 0000000000..454b577166
--- /dev/null
+++ b/src/content/reference/en/p5 copy/movedX.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L12
+title: movedX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
+  movement.</p>
+
+  <p><code>movedX</code> tracks how many pixels the mouse moves left or right
+  between
+
+  frames. <code>movedX</code> will have a negative value if the mouse moves left
+  between
+
+  frames and a positive value if it moves right. <code>movedX</code> can be
+  calculated
+
+  as <code>mouseX - pmouseX</code>.</p>
+
+  <p>Note: <code>movedX</code> continues updating even when
+
+  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
+  active.
+
+  But keep in mind that during an active pointer lock, mouseX and pmouseX
+
+  are locked, so <code>movedX</code> is based on
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
+  MouseEvent's movementX value</a>
+
+  (which may behave differently in different browsers when the user
+
+  is zoomed in or out).</p>
+line: 12
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The text ">>" appears when the user moves the mouse to the right. The text "<<" appears when the user moves the mouse to the left.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display >> when movedX is positive and
+      // << when it's negative.
+      if (movedX > 0) {
+        text('>>', 50, 50);
+      } else if (movedX < 0) {
+        text('<<', 50, 50);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# movedX
diff --git a/src/content/reference/en/p5 copy/movedY.mdx b/src/content/reference/en/p5 copy/movedY.mdx
new file mode 100644
index 0000000000..00f4a28d5b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/movedY.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L62
+title: movedY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's vertical
+  movement.</p>
+
+  <p><code>movedY</code> tracks how many pixels the mouse moves up or down
+  between
+
+  frames. <code>movedY</code> will have a negative value if the mouse moves up
+  between
+
+  frames and a positive value if it moves down. <code>movedY</code> can be
+  calculated
+
+  as <code>mouseY - pmouseY</code>.</p>
+
+  <p>Note: <code>movedY</code> continues updating even when
+
+  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
+  active.
+
+  But keep in mind that during an active pointer lock, mouseX and pmouseX
+
+  are locked, so <code>movedX</code> is based on
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
+  MouseEvent's movementX value</a>
+
+  (which may behave differently in different browsers when the user
+
+  is zoomed in or out).</p>
+line: 62
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The text "▲" appears when the user moves the mouse upward. The text "▼" appears when the user moves the mouse downward.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display ▼ when movedY is positive and
+      // ▲ when it's negative.
+      if (movedY > 0) {
+        text('▼', 50, 50);
+      } else if (movedY < 0) {
+        text('▲', 50, 50);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# movedY
diff --git a/src/content/reference/en/p5 copy/nf.mdx b/src/content/reference/en/p5 copy/nf.mdx
new file mode 100644
index 0000000000..ab64244d9f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nf.mdx	
@@ -0,0 +1,159 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L199
+title: nf
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a <code>Number</code> into a <code>String</code> with a given
+  number of digits.</p>
+
+  <p><code>nf()</code> converts numbers such as <code>123.45</code> into strings
+  formatted with a set
+
+  number of digits, as in <code>'123.4500'</code>.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nf(123.45)</code> returns the string
+  <code>'123.45'</code>. If an array of
+
+  numbers is passed, as in <code>nf([123.45, 67.89])</code>, an array of
+  formatted
+
+  strings will be returned.</p>
+
+  <p>The second parameter, <code>left</code>, is optional. If a number is
+  passed, as in
+
+  <code>nf(123.45, 4)</code>, it sets the minimum number of digits to include to
+  the
+
+  left of the decimal place. If <code>left</code> is larger than the number of
+  digits in
+
+  <code>num</code>, then unused digits will be set to 0. For example, calling
+
+  <code>nf(123.45, 4)</code> returns the string <code>'0123.45'</code>.</p>
+
+  <p>The third parameter, <code>right</code>, is also optional. If a number is
+  passed, as
+
+  in <code>nf(123.45, 4, 1)</code>, it sets the minimum number of digits to
+  include to
+
+  the right of the decimal place. If <code>right</code> is smaller than the
+  number of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places. For example, calling <code>nf(123.45, 4, 1)</code> returns the
+  string
+
+  <code>'0123.5'</code>. If right is larger than the number of decimal places in
+  <code>num</code>,
+
+  then unused decimal places will be set to 0. For example, calling
+
+  <code>nf(123.45, 4, 3)</code> returns the string <code>'0123.450'</code>.</p>
+
+  <p>When the number is negative, for example, calling <code>nf(-123.45, 5,
+  2)</code>
+
+  returns the string <code>'-00123.45'</code>.</p>
+line: 199
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(16);
+
+      // Create a number variable.
+      let number = 123.45;
+
+      // Display the number as a string.
+      let formatted = nf(number);
+      text(formatted, 20, 20);
+
+      let negative = nf(-number, 4, 2);
+      text(negative, 20, 40);
+
+      // Display the number with four digits
+      // to the left of the decimal.
+      let left = nf(number, 4);
+      text(left, 20, 60);
+
+      // Display the number with four digits
+      // to the left of the decimal and one
+      // to the right.
+      let right = nf(number, 4, 1);
+      text(right, 20, 80);
+
+      describe(
+        'The numbers "123.45", "-0123.45", "0123.45", and "0123.5" written on four separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 199
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number|String
+      - name: left
+        description: |
+          <p>number of digits to include to the left of
+                                         the decimal point.</p>
+        type: Integer|String
+        optional: true
+      - name: right
+        description: |
+          <p>number of digits to include to the right
+                                          of the decimal point.</p>
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 276
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: 'Number[]'
+      - name: left
+        description: ''
+        type: Integer|String
+        optional: true
+      - name: right
+        description: ''
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nf
diff --git a/src/content/reference/en/p5 copy/nfc.mdx b/src/content/reference/en/p5 copy/nfc.mdx
new file mode 100644
index 0000000000..ba49f689fa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nfc.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L322
+title: nfc
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a <code>Number</code> into a <code>String</code> with commas to
+  mark units of 1,000.</p>
+
+  <p><code>nfc()</code> converts numbers such as 12345 into strings formatted
+  with commas
+
+  to mark the thousands place, as in <code>'12,345'</code>.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nfc(12345)</code> returns the string
+  <code>'12,345'</code>.</p>
+
+  <p>The second parameter, <code>right</code>, is optional. If a number is
+  passed, as in
+
+  <code>nfc(12345, 1)</code>, it sets the minimum number of digits to include to
+  the
+
+  right of the decimal place. If <code>right</code> is smaller than the number
+  of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places. For example, calling <code>nfc(12345.67, 1)</code> returns the
+  string
+
+  <code>'12,345.7'</code>. If <code>right</code> is larger than the number of
+  decimal places in
+
+  <code>num</code>, then unused decimal places will be set to 0. For example,
+  calling
+
+  <code>nfc(12345.67, 3)</code> returns the string
+  <code>'12,345.670'</code>.</p>
+line: 322
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(16);
+
+      // Create a number variable.
+      let number = 12345;
+
+      // Display the number as a string.
+      let commas = nfc(number);
+      text(commas, 15, 33);
+
+      // Display the number with four digits
+      // to the left of the decimal.
+      let decimals = nfc(number, 2);
+      text(decimals, 15, 67);
+
+      describe(
+        'The numbers "12,345" and "12,345.00" written on separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let numbers = [12345, 6789];
+
+      // Convert the numbers to formatted strings.
+      let formatted = nfc(numbers);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Iterate over the array.
+      for (let i = 0; i < formatted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 33;
+
+        // Display the original and formatted numbers.
+        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "12345 : 12,345" and "6789 : 6,789" written on two separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 322
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number|String
+      - name: right
+        description: |
+          <p>number of digits to include to the right
+                                           of the decimal point.</p>
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 411
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: 'Number[]'
+      - name: right
+        description: ''
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nfc
diff --git a/src/content/reference/en/p5 copy/nfp.mdx b/src/content/reference/en/p5 copy/nfp.mdx
new file mode 100644
index 0000000000..dbd80ca5d7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nfp.mdx	
@@ -0,0 +1,188 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L447
+title: nfp
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a <code>Number</code> into a <code>String</code> with a plus or
+  minus sign.</p>
+
+  <p><code>nfp()</code> converts numbers such as 123 into strings formatted with
+  a <code>+</code> or
+
+  <code>-</code> symbol to mark whether they're positive or negative, as in
+  <code>'+123'</code>.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nfp(123.45)</code> returns the string
+  <code>'+123.45'</code>. If an array
+
+  of numbers is passed, as in <code>nfp([123.45, -6.78])</code>, an array of
+  formatted
+
+  strings will be returned.</p>
+
+  <p>The second parameter, <code>left</code>, is optional. If a number is
+  passed, as in
+
+  <code>nfp(123.45, 4)</code>, it sets the minimum number of digits to include
+  to the
+
+  left of the decimal place. If <code>left</code> is larger than the number of
+  digits in
+
+  <code>num</code>, then unused digits will be set to 0. For example, calling
+
+  <code>nfp(123.45, 4)</code> returns the string <code>'+0123.45'</code>.</p>
+
+  <p>The third parameter, <code>right</code>, is also optional. If a number is
+  passed, as
+
+  in <code>nfp(123.45, 4, 1)</code>, it sets the minimum number of digits to
+  include to
+
+  the right of the decimal place. If <code>right</code> is smaller than the
+  number of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places.  For example, calling <code>nfp(123.45, 4, 1)</code> returns
+  the
+
+  string <code>'+0123.5'</code>. If <code>right</code> is larger than the number
+  of decimal places
+
+  in <code>num</code>, then unused decimal places will be set to 0.  For
+  example,
+
+  calling <code>nfp(123.45, 4, 3)</code> returns the string
+  <code>'+0123.450'</code>.</p>
+line: 447
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create number variables.
+      let positive = 123;
+      let negative = -123;
+
+      // Convert the positive number to a formatted string.
+      let p = nfp(positive);
+
+      // Convert the negative number to a formatted string
+      // with four digits to the left of the decimal
+      // and two digits to the right of the decimal.
+      let n = nfp(negative, 4, 2);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and formatted numbers.
+      text(`${positive} : ${p}`, 50, 33);
+      text(`${negative} : ${n}`, 50, 67);
+
+      describe(
+        'The text "123 : +123" and "-123 : -123.00" written on separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create number variables.
+      let numbers = [123, -4.56];
+
+      // Convert the numbers to formatted strings
+      // with four digits to the left of the decimal
+      // and one digit to the right of the decimal.
+      let formatted = nfp(numbers, 4, 1);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Iterate over the array.
+      for (let i = 0; i < formatted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 33;
+
+        // Display the original and formatted numbers.
+        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "123 : +0123.0" and "-4.56 : 00-4.6" written on separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 447
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number
+      - name: left
+        description: |
+          <p>number of digits to include to the left of the
+                                  decimal point.</p>
+        type: Integer
+        optional: true
+      - name: right
+        description: |
+          <p>number of digits to include to the right of the
+                                   decimal point.</p>
+        type: Integer
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 552
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: 'Number[]'
+      - name: left
+        description: ''
+        type: Integer
+        optional: true
+      - name: right
+        description: ''
+        type: Integer
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nfp
diff --git a/src/content/reference/en/p5 copy/nfs.mdx b/src/content/reference/en/p5 copy/nfs.mdx
new file mode 100644
index 0000000000..80c144e391
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nfs.mdx	
@@ -0,0 +1,176 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L573
+title: nfs
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a positive <code>Number</code> into a <code>String</code> with an
+  extra space in front.</p>
+
+  <p><code>nfs()</code> converts positive numbers such as 123.45 into strings
+  formatted
+
+  with an extra space in front, as in ' 123.45'. Doing so can be helpful for
+
+  aligning positive and negative numbers.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nfs(123.45)</code> returns the string <code>'
+  123.45'</code>.</p>
+
+  <p>The second parameter, <code>left</code>, is optional. If a number is
+  passed, as in
+
+  <code>nfs(123.45, 4)</code>, it sets the minimum number of digits to include
+  to the
+
+  left of the decimal place. If <code>left</code> is larger than the number of
+  digits in
+
+  <code>num</code>, then unused digits will be set to 0. For example, calling
+
+  <code>nfs(123.45, 4)</code> returns the string <code>' 0123.45'</code>.</p>
+
+  <p>The third parameter, <code>right</code>, is also optional. If a number is
+  passed, as
+
+  in <code>nfs(123.45, 4, 1)</code>, it sets the minimum number of digits to
+  include to
+
+  the right of the decimal place. If <code>right</code> is smaller than the
+  number of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places.  For example, calling <code>nfs(123.45, 4, 1)</code> returns
+  the
+
+  string <code>' 0123.5'</code>. If <code>right</code> is larger than the number
+  of decimal places
+
+  in <code>num</code>, then unused decimal places will be set to 0.  For
+  example,
+
+  calling <code>nfs(123.45, 4, 3)</code> returns the string <code>'
+  0123.450'</code>.</p>
+line: 573
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create number variables.
+      let positive = 123;
+      let negative = -123;
+
+      // Convert the positive number to a formatted string.
+      let formatted = nfs(positive);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display the negative number and the formatted positive number.
+      text(negative, 50, 33);
+      text(formatted, 50, 67);
+
+      describe(
+        'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let number = 123.45;
+
+      // Convert the positive number to a formatted string.
+      // Use four digits to the left of the decimal and
+      // one digit to the right.
+      let formatted = nfs(number, 4, 1);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display a negative version of the number and
+      // the formatted positive version.
+      text('-0123.5', 50, 33);
+      text(formatted, 50, 67);
+
+      describe(
+        'The numbers "-0123.5" and "0123.5" written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 573
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number
+      - name: left
+        description: |
+          <p>number of digits to include to the left of the
+                                  decimal point.</p>
+        type: Integer
+        optional: true
+      - name: right
+        description: |
+          <p>number of digits to include to the right of the
+                                   decimal point.</p>
+        type: Integer
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 669
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: Array
+      - name: left
+        description: ''
+        type: Integer
+        optional: true
+      - name: right
+        description: ''
+        type: Integer
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nfs
diff --git a/src/content/reference/en/p5 copy/noCanvas.mdx b/src/content/reference/en/p5 copy/noCanvas.mdx
new file mode 100644
index 0000000000..08fcdda5e5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noCanvas.mdx	
@@ -0,0 +1,36 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L346
+title: noCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Removes the default canvas.</p>
+
+  <p>By default, a 100×100 pixels canvas is created without needing to call
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.
+  <code>noCanvas()</code> removes the
+
+  default canvas for sketches that don't need it.</p>
+line: 346
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      noCanvas();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noCanvas
diff --git a/src/content/reference/en/p5 copy/noCursor.mdx b/src/content/reference/en/p5 copy/noCursor.mdx
new file mode 100644
index 0000000000..37ac72c0cf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noCursor.mdx	
@@ -0,0 +1,38 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L482
+title: noCursor
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Hides the cursor from view.</p>
+line: 482
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Hide the cursor.
+      noCursor();
+    }
+
+    function draw() {
+      background(200);
+
+      circle(mouseX, mouseY, 10);
+
+      describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noCursor
diff --git a/src/content/reference/en/p5 copy/noDebugMode.mdx b/src/content/reference/en/p5 copy/noDebugMode.mdx
new file mode 100644
index 0000000000..19d36eba2b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noDebugMode.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L725
+title: noDebugMode
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: >
+  <p>Turns off <a href="/reference/p5/debugMode/">debugMode()</a> in a 3D
+  sketch.</p>
+line: 725
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      debugMode();
+
+      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.  box(20, 40);
+    }
+
+    // Disable debug mode when the user double-clicks.
+    function doubleClicked() {
+      noDebugMode();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noDebugMode
diff --git a/src/content/reference/en/p5 copy/noErase.mdx b/src/content/reference/en/p5 copy/noErase.mdx
new file mode 100644
index 0000000000..e959433b77
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noErase.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1716
+title: noErase
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Ends erasing that was started with <a
+  href="/reference/p5/erase/">erase()</a>.</p>
+
+  <p>The <a href="/reference/p5/fill/">fill()</a>, <a
+  href="/reference/p5/stroke/">stroke()</a>, and
+
+  <a href="/reference/p5/blendMode/">blendMode()</a> settings will return to
+  what they
+
+  were prior to calling <a href="/reference/p5/erase/">erase()</a>.</p>
+line: 1716
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(235, 145, 15);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(30, 45, 220);
+      rect(30, 10, 10, 80);
+
+      // Erase a circle.
+      erase();
+      circle(50, 50, 60);
+      noErase();
+
+      // Draw the right rectangle.
+      rect(70, 10, 10, 80);
+
+      describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noErase
diff --git a/src/content/reference/en/p5 copy/noFill.mdx b/src/content/reference/en/p5 copy/noFill.mdx
new file mode 100644
index 0000000000..67a3979778
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noFill.mdx	
@@ -0,0 +1,73 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1257
+title: noFill
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Disables setting the fill color for shapes.</p>
+
+  <p>Calling <code>noFill()</code> is the same as making the fill completely
+  transparent,
+
+  as in <code>fill(0, 0)</code>. If both <a
+  href="/reference/p5/noStroke/">noStroke()</a> and
+
+  <code>noFill()</code> are called, nothing will be drawn to the screen.</p>
+line: 1257
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the top square.
+      square(32, 10, 35);
+
+      // Draw the bottom square.
+      noFill();
+      square(32, 55, 35);
+
+      describe('A white square on above an empty square. Both squares have black outlines.');
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A purple cube wireframe spinning on a black canvas.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the box.
+      noFill();
+      stroke(100, 100, 240);
+
+      // Rotate the coordinates.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Draw the box.
+      box(45);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noFill
diff --git a/src/content/reference/en/p5 copy/noLights.mdx b/src/content/reference/en/p5 copy/noLights.mdx
new file mode 100644
index 0000000000..1f85888bf6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noLights.mdx	
@@ -0,0 +1,79 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1687
+title: noLights
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Removes all lights from the sketch.</p>
+
+  <p>Calling <code>noLights()</code> removes any lights created with
+
+  <a href="/reference/p5/lights/">lights()</a>,
+
+  <a href="/reference/p5/ambientLight/">ambientLight()</a>,
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>, or
+
+  <a href="/reference/p5/spotLight/">spotLight()</a>. These functions may be
+  called
+
+  after <code>noLights()</code> to create a new lighting scheme.</p>
+line: 1687
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw the top sphere.
+      push();
+      translate(0, -25, 0);
+      sphere(20);
+      pop();
+
+      // Turn off the lights.
+      noLights();
+
+      // Add a red directional light that points into the screen.
+      directionalLight(255, 0, 0, 0, 0, -1);
+
+      // Draw the bottom sphere.
+      push();
+      translate(0, 25, 0);
+      sphere(20);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noLights
diff --git a/src/content/reference/en/p5 copy/noLoop.mdx b/src/content/reference/en/p5 copy/noLoop.mdx
new file mode 100644
index 0000000000..fe1897a8cb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noLoop.mdx	
@@ -0,0 +1,139 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L9
+title: noLoop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Stops the code in <a href="/reference/p5/draw/">draw()</a> from running
+  repeatedly.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <code>noLoop()</code> stops <a
+  href="/reference/p5/draw/">draw()</a> from
+
+  repeating. The draw loop can be restarted by calling
+
+  <a href="/reference/p5/loop/">loop()</a>. <a
+  href="/reference/p5/draw/">draw()</a> can be run
+
+  once by calling <a href="/reference/p5/redraw/">redraw()</a>.</p>
+
+  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
+  to check
+
+  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
+line: 9
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe('A white half-circle on the left edge of a gray square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's x-coordinate.
+      let x = frameCount;
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, 50, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click to stop the draw loop.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, y, 20);
+    }
+
+    // Stop the draw loop when the user double-clicks.
+    function doubleClicked() {
+      noLoop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let startButton;
+    let stopButton;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the button elements and place them
+      // beneath the canvas.
+      startButton = createButton('▶');
+      startButton.position(0, 100);
+      startButton.size(50, 20);
+      stopButton = createButton('◾');
+      stopButton.position(50, 100);
+      stopButton.size(50, 20);
+
+      // Set functions to call when the buttons are pressed.
+      startButton.mousePressed(loop);
+      stopButton.mousePressed(noLoop);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe(
+        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noLoop
diff --git a/src/content/reference/en/p5 copy/noSmooth.mdx b/src/content/reference/en/p5 copy/noSmooth.mdx
new file mode 100644
index 0000000000..a1af76d10d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noSmooth.mdx	
@@ -0,0 +1,92 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L100
+title: noSmooth
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Draws certain features with jagged (aliased) edges.</p>
+
+  <p><a href="/reference/p5/smooth/">smooth()</a> is active by default. In 2D
+  mode,
+
+  <code>noSmooth()</code> is helpful for scaling up images without blurring. The
+
+  functions don't affect shapes or fonts.</p>
+
+  <p>In WebGL mode, <code>noSmooth()</code> causes all shapes to be drawn with
+  jagged
+
+  (aliased) edges. The functions don't affect images or fonts.</p>
+line: 100
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let heart;
+
+    // Load a pixelated heart image from an image data string.
+    function preload() {
+      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Antialiased hearts.
+      image(heart, 10, 10);
+      image(heart, 20, 10, 16, 16);
+      image(heart, 40, 10, 32, 32);
+
+      // Aliased hearts.
+      noSmooth();
+      image(heart, 10, 60);
+      image(heart, 20, 60, 16, 16);
+      image(heart, 40, 60, 32, 32);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A white circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Disable smoothing.
+      noSmooth();
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A pixelated white circle on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noSmooth
diff --git a/src/content/reference/en/p5 copy/noStroke.mdx b/src/content/reference/en/p5 copy/noStroke.mdx
new file mode 100644
index 0000000000..7c4fe80960
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noStroke.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1317
+title: noStroke
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Disables drawing points, lines, and the outlines of shapes.</p>
+
+  <p>Calling <code>noStroke()</code> is the same as making the stroke completely
+  transparent,
+
+  as in <code>stroke(0, 0)</code>. If both <code>noStroke()</code> and
+
+  <a href="/reference/p5/noFill/">noFill()</a> are called, nothing will be drawn
+  to the
+
+  screen.</p>
+line: 1317
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      noStroke();
+      square(20, 20, 60);
+
+      describe('A white square with no outline.');
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A pink cube with no edge outlines spinning on a black canvas.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the box.
+      noStroke();
+      fill(240, 150, 150);
+
+      // Rotate the coordinates.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Draw the box.
+      box(45);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noStroke
diff --git a/src/content/reference/en/p5 copy/noTint.mdx b/src/content/reference/en/p5 copy/noTint.mdx
new file mode 100644
index 0000000000..e3b0aeea19
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noTint.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1345
+title: noTint
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Removes the current tint set by <a
+  href="/reference/p5/tint/">tint()</a>.</p>
+
+  <p><code>noTint()</code> restores images to their original colors.</p>
+line: 1345
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left.
+      // Tint with a CSS color string.
+      tint('red');
+      image(img, 0, 0);
+
+      // Right.
+      // Remove the tint.
+      noTint();
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noTint
diff --git a/src/content/reference/en/p5 copy/noise.mdx b/src/content/reference/en/p5 copy/noise.mdx
new file mode 100644
index 0000000000..1b67f49cb9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noise.mdx	
@@ -0,0 +1,282 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L36
+title: noise
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Returns random numbers that can be tuned to feel organic.</p>
+
+  <p>Values returned by <a href="/reference/p5/random/">random()</a> and
+
+  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> can change by
+  large
+
+  amounts between function calls. By contrast, values returned by
+  <code>noise()</code>
+
+  can be made "smooth". Calls to <code>noise()</code> with similar inputs will
+  produce
+
+  similar outputs. <code>noise()</code> is used to create textures, motion,
+  shapes,
+
+  terrains, and so on. Ken Perlin invented <code>noise()</code> while animating
+  the
+
+  original <em>Tron</em> film in the 1980s.</p>
+
+  <p><code>noise()</code> always returns values between 0 and 1. It returns the
+  same value
+
+  for a given input while a sketch is running. <code>noise()</code> produces
+  different
+
+  results each time a sketch runs. The
+
+  <a href="/reference/p5/noiseSeed/">noiseSeed()</a> function can be used to
+  generate
+
+  the same sequence of Perlin noise values each time a sketch runs.</p>
+
+  <p>The character of the noise can be adjusted in two ways. The first way is to
+
+  scale the inputs. <code>noise()</code> interprets inputs as coordinates. The
+  sequence
+
+  of noise values will be smoother when the input coordinates are closer. The
+
+  second way is to use the <a
+  href="/reference/p5/noiseDetail/">noiseDetail()</a>
+
+  function.</p>
+
+  <p>The version of <code>noise()</code> with one parameter computes noise
+  values in one
+
+  dimension. This dimension can be thought of as space, as in
+  <code>noise(x)</code>, or
+
+  time, as in <code>noise(t)</code>.</p>
+
+  <p>The version of <code>noise()</code> with two parameters computes noise
+  values in two
+
+  dimensions. These dimensions can be thought of as space, as in
+
+  <code>noise(x, y)</code>, or space and time, as in <code>noise(x,
+  t)</code>.</p>
+
+  <p>The version of <code>noise()</code> with three parameters computes noise
+  values in
+
+  three dimensions. These dimensions can be thought of as space, as in
+
+  <code>noise(x, y, z)</code>, or space and time, as in <code>noise(x, y,
+  t)</code>.</p>
+line: 36
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black dot moves randomly on a gray square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 100 * noise(0.005 * frameCount);
+      let y = 100 * noise(0.005 * frameCount + 10000);
+
+      // Draw the point.
+      strokeWeight(5);
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black dot moves randomly on a gray square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.005;
+
+      // Scale the input coordinate.
+      let nt = noiseScale * frameCount;
+
+      // Compute the noise values.
+      let x = noiseLevel * noise(nt);
+      let y = noiseLevel * noise(nt + 10000);
+
+      // Draw the point.
+      strokeWeight(5);
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A hilly terrain drawn in gray against a black sky.');
+    }
+
+    function draw() {
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.02;
+
+      // Scale the input coordinate.
+      let x = frameCount;
+      let nx = noiseScale * x;
+
+      // Compute the noise value.
+      let y = noiseLevel * noise(nx);
+
+      // Draw the line.
+      line(x, 0, x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A calm sea drawn in gray against a black sky.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.002;
+
+      // Iterate from left to right.
+      for (let x = 0; x < width; x += 1) {
+        // Scale the input coordinates.
+        let nx = noiseScale * x;
+        let nt = noiseScale * frameCount;
+
+        // Compute the noise value.
+        let y = noiseLevel * noise(nx, nt);
+
+        // Draw the line.
+        line(x, 0, x, y);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the noise level and scale.
+      let noiseLevel = 255;
+      let noiseScale = 0.01;
+
+      // Iterate from top to bottom.
+      for (let y = 0; y < height; y += 1) {
+        // Iterate from left to right.
+        for (let x = 0; x < width; x += 1) {
+          // Scale the input coordinates.
+          let nx = noiseScale * x;
+          let ny = noiseScale * y;
+
+          // Compute the noise value.
+          let c = noiseLevel * noise(nx, ny);
+
+          // Draw the point.
+          stroke(c);
+          point(x, y);
+        }
+      }
+
+      describe('A gray cloudy pattern.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray cloudy pattern that changes.');
+    }
+
+    function draw() {
+      // Set the noise level and scale.
+      let noiseLevel = 255;
+      let noiseScale = 0.009;
+
+      // Iterate from top to bottom.
+      for (let y = 0; y < height; y += 1) {
+        // Iterate from left to right.
+        for (let x = 0; x < width; x += 1) {
+          // Scale the input coordinates.
+          let nx = noiseScale * x;
+          let ny = noiseScale * y;
+          let nt = noiseScale * frameCount;
+
+          // Compute the noise value.
+          let c = noiseLevel * noise(nx, ny, nt);
+
+          // Draw the point.
+          stroke(c);
+          point(x, y);
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate in noise space.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate in noise space.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z-coordinate in noise space.</p>
+    type: Number
+    optional: true
+return:
+  description: Perlin noise value at specified coordinates.
+  type: Number
+chainable: false
+---
+
+
+# noise
diff --git a/src/content/reference/en/p5 copy/noiseDetail.mdx b/src/content/reference/en/p5 copy/noiseDetail.mdx
new file mode 100644
index 0000000000..973ac515ab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noiseDetail.mdx	
@@ -0,0 +1,100 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L331
+title: noiseDetail
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Adjusts the character of the noise produced by the
+
+  <a href="/reference/p5/noise/">noise()</a> function.</p>
+
+  <p>Perlin noise values are created by adding layers of noise together. The
+
+  noise layers, called octaves, are similar to harmonics in music. Lower
+
+  octaves contribute more to the output signal. They define the overall
+
+  intensity of the noise. Higher octaves create finer-grained details.</p>
+
+  <p>By default, noise values are created by combining four octaves. Each higher
+
+  octave contributes half as much (50% less) compared to its predecessor.
+
+  <code>noiseDetail()</code> changes the number of octaves and the falloff
+  amount. For
+
+  example, calling <code>noiseDetail(6, 0.25)</code> ensures that
+
+  <a href="/reference/p5/noise/">noise()</a> will use six octaves. Each higher
+  octave
+
+  will contribute 25% as much (75% less) compared to its predecessor. Falloff
+
+  values between 0 and 1 are valid. However, falloff values greater than 0.5
+
+  might result in noise values greater than 1.</p>
+line: 331
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Set the noise level and scale.
+      let noiseLevel = 255;
+      let noiseScale = 0.02;
+
+      // Iterate from top to bottom.
+      for (let y = 0; y < height; y += 1) {
+        // Iterate from left to right.
+        for (let x = 0; x < width / 2; x += 1) {
+          // Scale the input coordinates.
+          let nx = noiseScale * x;
+          let ny = noiseScale * y;
+
+          // Compute the noise value with six octaves
+          // and a low falloff factor.
+          noiseDetail(6, 0.25);
+          let c = noiseLevel * noise(nx, ny);
+
+          // Draw the left side.
+          stroke(c);
+          point(x, y);
+
+          // Compute the noise value with four octaves
+          // and a high falloff factor.
+          noiseDetail(4, 0.5);
+          c = noiseLevel * noise(nx, ny);
+
+          // Draw the right side.
+          stroke(c);
+          point(x + 50, y);
+        }
+      }
+
+      describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: lod
+    description: |
+      <p>number of octaves to be used by the noise.</p>
+    type: Number
+  - name: falloff
+    description: |
+      <p>falloff factor for each octave.</p>
+    type: Number
+chainable: false
+---
+
+
+# noiseDetail
diff --git a/src/content/reference/en/p5 copy/noiseSeed.mdx b/src/content/reference/en/p5 copy/noiseSeed.mdx
new file mode 100644
index 0000000000..a1f2ce6fbd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noiseSeed.mdx	
@@ -0,0 +1,68 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L405
+title: noiseSeed
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Sets the seed value for the <a href="/reference/p5/noise/">noise()</a>
+  function.</p>
+
+  <p>By default, <a href="/reference/p5/noise/">noise()</a> produces different
+  results
+
+  each time a sketch is run. Calling <code>noiseSeed()</code> with a constant
+  argument,
+
+  such as <code>noiseSeed(99)</code>, makes <a
+  href="/reference/p5/noise/">noise()</a> produce the
+
+  same results each time a sketch is run.</p>
+line: 405
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the noise seed for consistent results.
+      noiseSeed(99);
+
+      describe('A black rectangle that grows randomly, first to the right and then to the left.');
+    }
+
+    function draw() {
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.005;
+
+      // Scale the input coordinate.
+      let nt = noiseScale * frameCount;
+
+      // Compute the noise value.
+      let x = noiseLevel * noise(nt);
+
+      // Draw the line.
+      line(x, 0, x, height);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: seed
+    description: |
+      <p>seed value.</p>
+    type: Number
+chainable: false
+---
+
+
+# noiseSeed
diff --git a/src/content/reference/en/p5 copy/norm.mdx b/src/content/reference/en/p5 copy/norm.mdx
new file mode 100644
index 0000000000..d52a73e4c5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/norm.mdx	
@@ -0,0 +1,69 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L772
+title: norm
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Maps a number from one range to a value between 0 and 1.</p>
+
+  <p>For example, <code>norm(2, 0, 10)</code> returns 0.2. 2's position in the
+  original
+
+  range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
+
+  is the same as calling <code>map(2, 0, 10, 0, 1)</code>.</p>
+
+  <p>Numbers outside of the original range are not constrained between 0 and 1.
+
+  Out-of-range values are often intentional and useful.</p>
+line: 772
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use RGB color with values from 0 to 1.
+      colorMode(RGB, 1);
+
+      describe('A square changes color from black to red as the mouse moves from left to right.');
+    }
+
+    function draw() {
+      // Calculate the redValue.
+      let redValue = norm(mouseX, 0, 100);
+
+      // Paint the background.
+      background(redValue, 0, 0);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>incoming value to be normalized.</p>
+    type: Number
+  - name: start
+    description: |
+      <p>lower bound of the value's current range.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>upper bound of the value's current range.</p>
+    type: Number
+return:
+  description: normalized number.
+  type: Number
+chainable: false
+---
+
+
+# norm
diff --git a/src/content/reference/en/p5 copy/normal.mdx b/src/content/reference/en/p5 copy/normal.mdx
new file mode 100644
index 0000000000..a109745b80
--- /dev/null
+++ b/src/content/reference/en/p5 copy/normal.mdx	
@@ -0,0 +1,250 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L2097
+title: normal
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Sets the normal vector for vertices in a custom 3D shape.</p>
+
+  <p>3D shapes created with <a href="/reference/p5/beginShape/">beginShape()</a>
+  and
+
+  <a href="/reference/p5/endShape/">endShape()</a> are made by connecting sets
+  of
+
+  points called vertices. Each vertex added with
+
+  <a href="/reference/p5/vertex/">vertex()</a> has a normal vector that points
+  away
+
+  from it. The normal vector controls how light reflects off the shape.</p>
+
+  <p><code>normal()</code> can be called two ways with different parameters to
+  define the
+
+  normal vector's components.</p>
+
+  <p>The first way to call <code>normal()</code> has three parameters,
+  <code>x</code>, <code>y</code>, and <code>z</code>.
+
+  If <code>Number</code>s are passed, as in <code>normal(1, 2, 3)</code>, they
+  set the x-, y-, and
+
+  z-components of the normal vector.</p>
+
+  <p>The second way to call <code>normal()</code> has one parameter,
+  <code>vector</code>. If a
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object is passed, as in
+
+  <code>normal(myVector)</code>, its components will be used to set the normal
+  vector.</p>
+
+  <p><code>normal()</code> changes the normal vector of vertices added to a
+  custom shape
+
+  with <a href="/reference/p5/vertex/">vertex()</a>. <code>normal()</code> must
+  be called between
+
+  the <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions, just like
+
+  <a href="/reference/p5/vertex/">vertex()</a>. The normal vector set by calling
+
+  <code>normal()</code> will affect all following vertices until
+  <code>normal()</code> is called
+
+  again:</p>
+
+  <pre><code class="language-js">beginShape();
+
+
+  // Set the vertex normal.
+
+  normal(-0.4, -0.4, 0.8);
+
+
+  // Add a vertex.
+
+  vertex(-30, -30, 0);
+
+
+  // Set the vertex normal.
+
+  normal(0, 0, 1);
+
+
+  // Add vertices.
+
+  vertex(30, -30, 0);
+
+  vertex(30, 30, 0);
+
+
+  // Set the vertex normal.
+
+  normal(0.4, -0.4, 0.8);
+
+
+  // Add a vertex.
+
+  vertex(-30, 30, 0);
+
+
+  endShape();
+
+  </code></pre>
+line: 2097
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the shape.
+      normalMaterial();
+      noStroke();
+
+      // Draw the shape.
+      beginShape();
+      vertex(-30, -30, 0);
+      vertex(30, -30, 0);
+      vertex(30, 30, 0);
+      vertex(-30, 30, 0);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the shape.
+      normalMaterial();
+      noStroke();
+
+      // Draw the shape.
+      // Use normal() to set vertex normals.
+      beginShape();
+      normal(-0.4, -0.4, 0.8);
+      vertex(-30, -30, 0);
+
+      normal(0, 0, 1);
+      vertex(30, -30, 0);
+      vertex(30, 30, 0);
+
+      normal(0.4, -0.4, 0.8);
+      vertex(-30, 30, 0);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the shape.
+      normalMaterial();
+      noStroke();
+
+      // Create p5.Vector objects.
+      let n1 = createVector(-0.4, -0.4, 0.8);
+      let n2 = createVector(0, 0, 1);
+      let n3 = createVector(0.4, -0.4, 0.8);
+
+      // Draw the shape.
+      // Use normal() to set vertex normals.
+      beginShape();
+      normal(n1);
+      vertex(-30, -30, 0);
+
+      normal(n2);
+      vertex(30, -30, 0);
+      vertex(30, 30, 0);
+
+      normal(n3);
+      vertex(-30, 30, 0);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2097
+    params:
+      - name: vector
+        description: |
+          <p>vertex normal as a <a href="#/p5.Vector">p5.Vector</a> object.</p>
+        type: p5.Vector
+    chainable: 1
+  - line: 2272
+    params:
+      - name: x
+        description: |
+          <p>x-component of the vertex normal.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-component of the vertex normal.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-component of the vertex normal.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# normal
diff --git a/src/content/reference/en/p5 copy/normalMaterial.mdx b/src/content/reference/en/p5 copy/normalMaterial.mdx
new file mode 100644
index 0000000000..0652b349d4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/normalMaterial.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2365
+title: normalMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the current material as a normal material.</p>
+
+  <p>A normal material sets surfaces facing the x-axis to red, those facing the
+
+  y-axis to green, and those facing the z-axis to blue. Normal material isn't
+
+  affected by light. It’s often used as a placeholder material when
+  debugging.</p>
+
+  <p>Note: <code>normalMaterial()</code> can only be used in WebGL mode.</p>
+line: 2365
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor torus drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the torus.
+      normalMaterial();
+
+      // Draw the torus.
+      torus(30);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# normalMaterial
diff --git a/src/content/reference/en/p5 copy/orbitControl.mdx b/src/content/reference/en/p5 copy/orbitControl.mdx
new file mode 100644
index 0000000000..be2fd25452
--- /dev/null
+++ b/src/content/reference/en/p5 copy/orbitControl.mdx	
@@ -0,0 +1,203 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L11
+title: orbitControl
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: >
+  <p>Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
+
+  touchscreen.</p>
+
+  <p>3D sketches are viewed through an imaginary camera. Calling
+
+  <code>orbitControl()</code> within the <a
+  href="/reference/p5/draw/">draw()</a> function allows
+
+  the user to change the camera’s position:</p>
+
+  <pre><code class="language-js">function draw() {
+    background(200);
+
+    // Enable orbiting with the mouse.
+    orbitControl();
+
+    // Rest of sketch.
+  }
+
+  </code></pre>
+
+  <p>Left-clicking and dragging or swipe motion will rotate the camera position
+
+  about the center of the sketch. Right-clicking and dragging or multi-swipe
+
+  will pan the camera position without rotation. Using the mouse wheel
+
+  (scrolling) or pinch in/out will move the camera further or closer from the
+
+  center of the sketch.</p>
+
+  <p>The first three parameters, <code>sensitivityX</code>,
+  <code>sensitivityY</code>, and
+
+  <code>sensitivityZ</code>, are optional. They’re numbers that set the sketch’s
+
+  sensitivity to movement along each axis. For example, calling
+
+  <code>orbitControl(1, 2, -1)</code> keeps movement along the x-axis at its
+  default
+
+  value, makes the sketch twice as sensitive to movement along the y-axis,
+
+  and reverses motion along the z-axis. By default, all sensitivity values
+
+  are 1.</p>
+
+  <p>The fourth parameter, <code>options</code>, is also optional. It’s an
+  object that
+
+  changes the behavior of orbiting. For example, calling
+
+  <code>orbitControl(1, 1, 1, options)</code> keeps the default sensitivity
+  values while
+
+  changing the behaviors set with <code>options</code>. The object can have the
+
+  following properties:</p>
+
+  <pre><code class="language-js">let options = {
+    // Setting this to false makes mobile interactions smoother by
+    // preventing accidental interactions with the page while orbiting.
+    // By default, it's true.
+    disableTouchActions: true,
+
+    // Setting this to true makes the camera always rotate in the
+    // direction the mouse/touch is moving.
+    // By default, it's false.
+    freeRotation: false
+  };
+
+
+  orbitControl(1, 1, 1, options);
+
+  </code></pre>
+line: 11
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      // Make the interactions 3X sensitive.
+      orbitControl(3, 3, 3);
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create an options object.
+      let options = {
+        disableTouchActions: false,
+        freeRotation: true
+      };
+
+      // Enable orbiting with the mouse.
+      // Prevent accidental touch actions on touchscreen devices
+      // and enable free rotation.
+      orbitControl(1, 1, 1, options);
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(30, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: sensitivityX
+    description: |
+      <p>sensitivity to movement along the x-axis. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: sensitivityY
+    description: |
+      <p>sensitivity to movement along the y-axis. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: sensitivityZ
+    description: |
+      <p>sensitivity to movement along the z-axis. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: options
+    description: |
+      <p>object with two optional properties, <code>disableTouchActions</code>
+                                 and <code>freeRotation</code>. Both are <code>Boolean</code>s. <code>disableTouchActions</code>
+                                 defaults to <code>true</code> and <code>freeRotation</code> defaults to <code>false</code>.</p>
+    type: Object
+    optional: true
+chainable: true
+---
+
+
+# orbitControl
diff --git a/src/content/reference/en/p5 copy/ortho.mdx b/src/content/reference/en/p5 copy/ortho.mdx
new file mode 100644
index 0000000000..5fb384ba48
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ortho.mdx	
@@ -0,0 +1,168 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L412
+title: ortho
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets an orthographic projection for the current camera in a 3D sketch.</p>
+
+  <p>In an orthographic projection, shapes with the same size always appear the
+
+  same size, regardless of whether they are near or far from the camera.</p>
+
+  <p><code>ortho()</code> changes the camera’s perspective by changing its
+  viewing frustum
+
+  from a truncated pyramid to a rectangular prism. The camera is placed in
+
+  front of the frustum and views everything between the frustum’s near plane
+
+  and its far plane. <code>ortho()</code> has six optional parameters to define
+  the
+
+  frustum.</p>
+
+  <p>The first four parameters, <code>left</code>, <code>right</code>,
+  <code>bottom</code>, and <code>top</code>, set the
+
+  coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+  <code>ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
+  wide and
+
+  400 pixels tall. By default, these coordinates are set based on the
+
+  sketch’s width and height, as in
+
+  <code>ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>
+
+  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
+  distance of the
+
+  frustum’s near and far plane from the camera. For example, calling
+
+  <code>ortho(-100, 100, 200, 200, 50, 1000)</code> creates a frustum that’s 200
+  pixels
+
+  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
+
+  pixels from the camera. By default, <code>near</code> and <code>far</code> are
+  set to 0 and
+
+  <code>max(width, height) + 800</code>, respectively.</p>
+
+  <p>Note: <code>ortho()</code> can only be used in WebGL mode.</p>
+line: 412
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Apply an orthographic projection.
+      ortho();
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Apply an orthographic projection.
+      // Center the frustum.
+      // Set its width and height to 20.
+      // Place its near plane 300 pixels from the camera.
+      // Place its far plane 350 pixels from the camera.
+      ortho(-10, 10, -10, 10, 300, 350);
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: left
+    description: >
+      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: right
+    description: >
+      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: bottom
+    description: >
+      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: top
+    description: >
+      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: near
+    description: |
+      <p>z-coordinate of the frustum’s near plane. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: far
+    description: >
+      <p>z-coordinate of the frustum’s far plane. Defaults to <code>max(width,
+      height) + 800</code>.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# ortho
diff --git a/src/content/reference/en/p5 copy/outputVolume.mdx b/src/content/reference/en/p5 copy/outputVolume.mdx
new file mode 100644
index 0000000000..fe618922fb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/outputVolume.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L738
+title: outputVolume
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>Scale the output of all sound in this sketch</p>
+  Scaled between 0.0 (silence) and 1.0 (full volume).
+  1.0 is the maximum amplitude of a digital sound, so multiplying
+  by greater than 1.0 may cause digital distortion. To
+  fade, provide a <code>rampTime</code> parameter. For more
+  complex fades, see the Envelope class.
+
+  <p>Alternately, you can pass in a signal source such as an
+  oscillator to modulate the amplitude with an audio signal.</p>
+  <p><b>How This Works</b>: When you load the p5.sound module, it
+  creates a single instance of p5sound. All sound objects in this
+  module output to p5sound before reaching your computer's output.
+  So if you change the amplitude of p5sound, it impacts all of the
+  sound in this module.</p>
+
+  <p>If no value is provided, returns a Web Audio API Gain Node</p>
+line: 738
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: volume
+    description: |
+      <p>Volume (amplitude) between 0.0
+                                         and 1.0 or modulating signal/oscillator</p>
+    type: Number|Object
+  - name: rampTime
+    description: |
+      <p>Fade for t seconds</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>Schedule this event to happen at
+                                     t seconds in the future</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# outputVolume
diff --git a/src/content/reference/en/p5 copy/p5.Camera.mdx b/src/content/reference/en/p5 copy/p5.Camera.mdx
new file mode 100644
index 0000000000..cc2090e329
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Camera.mdx	
@@ -0,0 +1,659 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L723
+title: p5.Camera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>A class to describe a camera for viewing a 3D sketch.</p>
+
+  <p>Each <code>p5.Camera</code> object represents a camera that views a section
+  of 3D
+
+  space. It stores information about the camera’s position, orientation, and
+
+  projection.</p>
+
+  <p>In WebGL mode, the default camera is a <code>p5.Camera</code> object that
+  can be
+
+  controlled with the <a href="/reference/p5/camera/">camera()</a>,
+
+  <a href="/reference/p5/perspective/">perspective()</a>,
+
+  <a href="/reference/p5/ortho/">ortho()</a>, and
+
+  <a href="/reference/p5/frustum/">frustum()</a> functions. Additional cameras
+  can be
+
+  created with <a href="/reference/p5/createCamera/">createCamera()</a> and
+  activated
+
+  with <a href="/reference/p5/setCamera/">setCamera()</a>.</p>
+
+  <p>Note: <code>p5.Camera</code>’s methods operate in two coordinate
+  systems:</p>
+
+  <ul>
+
+  <li>The “world” coordinate system describes positions in terms of their
+
+  relationship to the origin along the x-, y-, and z-axes. For example,
+
+  calling <code>myCamera.setPosition()</code> places the camera in 3D space
+  using
+
+  "world" coordinates.</li>
+
+  <li>The "local" coordinate system describes positions from the camera's point
+
+  of view: left-right, up-down, and forward-backward. For example, calling
+
+  <code>myCamera.move()</code> moves the camera along its own axes.</li>
+
+  </ul>
+line: 723
+isConstructor: true
+params:
+  - name: rendererGL
+    description: |
+      <p>instance of WebGL renderer</p>
+    type: RendererGL
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+    let delta = 0.001;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Camera object.
+      cam = createCamera();
+
+      // Place the camera at the top-center.
+      cam.setPosition(0, -400, 800);
+
+      // Point the camera at the origin.
+      cam.lookAt(0, 0, 0);
+
+      describe(
+        'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn the camera left and right, called "panning".
+      cam.pan(delta);
+
+      // Switch directions every 120 frames.
+      if (frameCount % 120 === 0) {
+        delta *= -1;
+      }
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click to toggle between cameras.
+
+    let cam1;
+    let cam2;
+    let isDefaultCamera = true;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the first camera.
+      // Keep its default settings.
+      cam1 = createCamera();
+
+      // Create the second camera.
+      // Place it at the top-left.
+      // Point it at the origin.
+      cam2 = createCamera();
+      cam2.setPosition(400, -400, 800);
+      cam2.lookAt(0, 0, 0);
+
+      // Set the current camera to cam1.
+      setCamera(cam1);
+
+      describe(
+        'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the box.
+      box();
+    }
+
+    // Toggle the current camera when the user double-clicks.
+    function doubleClicked() {
+      if (isDefaultCamera === true) {
+        setCamera(cam2);
+        isDefaultCamera = false;
+      } else {
+        setCamera(cam1);
+        isDefaultCamera = true;
+      }
+    }
+    </code>
+    </div>
+methods:
+  perspective:
+    description: >
+      <p>Sets a perspective projection for the camera.</p>
+
+      <p>In a perspective projection, shapes that are further from the camera
+      appear
+
+      smaller than shapes that are near the camera. This technique, called
+
+      foreshortening, creates realistic 3D scenes. It’s applied by default in
+      new
+
+      <code>p5.Camera</code> objects.</p>
+
+      <p><code>myCamera.perspective()</code> changes the camera’s perspective by
+      changing its
+
+      viewing frustum. The frustum is the volume of space that’s visible to the
+
+      camera. The frustum’s shape is a pyramid with its top cut off. The camera
+
+      is placed where the top of the pyramid should be and points towards the
+
+      base of the pyramid. It views everything within the frustum.</p>
+
+      <p>The first parameter, <code>fovy</code>, is the camera’s vertical field
+      of view. It’s
+
+      an angle that describes how tall or narrow a view the camera has. For
+
+      example, calling <code>myCamera.perspective(0.5)</code> sets the camera’s
+      vertical
+
+      field of view to 0.5 radians. By default, <code>fovy</code> is calculated
+      based on the
+
+      sketch’s height and the camera’s default z-coordinate, which is 800. The
+
+      formula for the default <code>fovy</code> is <code>2 * atan(height / 2 /
+      800)</code>.</p>
+
+      <p>The second parameter, <code>aspect</code>, is the camera’s aspect
+      ratio. It’s a number
+
+      that describes the ratio of the top plane’s width to its height. For
+
+      example, calling <code>myCamera.perspective(0.5, 1.5)</code> sets the
+      camera’s field
+
+      of view to 0.5 radians and aspect ratio to 1.5, which would make shapes
+
+      appear thinner on a square canvas. By default, <code>aspect</code> is set
+      to
+
+      <code>width / height</code>.</p>
+
+      <p>The third parameter, <code>near</code>, is the distance from the camera
+      to the near
+
+      plane. For example, calling <code>myCamera.perspective(0.5, 1.5,
+      100)</code> sets the
+
+      camera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places
+
+      the near plane 100 pixels from the camera. Any shapes drawn less than 100
+
+      pixels from the camera won’t be visible. By default, <code>near</code> is
+      set to
+
+      <code>0.1 * 800</code>, which is 1/10th the default distance between the
+      camera and
+
+      the origin.</p>
+
+      <p>The fourth parameter, <code>far</code>, is the distance from the camera
+      to the far
+
+      plane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100,
+      10000)</code>
+
+      sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,
+
+      places the near plane 100 pixels from the camera, and places the far plane
+
+      10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels
+
+      from the camera won’t be visible. By default, <code>far</code> is set to
+      <code>10 * 800</code>,
+
+      which is 10 times the default distance between the camera and the
+      origin.</p>
+    path: p5.Camera/perspective
+  ortho:
+    description: >
+      <p>Sets an orthographic projection for the camera.</p>
+
+      <p>In an orthographic projection, shapes with the same size always appear
+      the
+
+      same size, regardless of whether they are near or far from the camera.</p>
+
+      <p><code>myCamera.ortho()</code> changes the camera’s perspective by
+      changing its viewing
+
+      frustum from a truncated pyramid to a rectangular prism. The frustum is
+      the
+
+      volume of space that’s visible to the camera. The camera is placed in
+      front
+
+      of the frustum and views everything within the frustum.
+      <code>myCamera.ortho()</code>
+
+      has six optional parameters to define the viewing frustum.</p>
+
+      <p>The first four parameters, <code>left</code>, <code>right</code>,
+      <code>bottom</code>, and <code>top</code>, set the
+
+      coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+      <code>myCamera.ortho(-100, 100, 200, -200)</code> creates a frustum that’s
+      200 pixels
+
+      wide and 400 pixels tall. By default, these dimensions are set based on
+
+      the sketch’s width and height, as in
+
+      <code>myCamera.ortho(-width / 2, width / 2, -height / 2, height /
+      2)</code>.</p>
+
+      <p>The last two parameters, <code>near</code> and <code>far</code>, set
+      the distance of the
+
+      frustum’s near and far plane from the camera. For example, calling
+
+      <code>myCamera.ortho(-100, 100, 200, -200, 50, 1000)</code> creates a
+      frustum that’s
+
+      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
+
+      ends 1,000 pixels from the camera. By default, <code>near</code> and
+      <code>far</code> are set to
+
+      0 and <code>max(width, height) + 800</code>, respectively.</p>
+    path: p5.Camera/ortho
+  frustum:
+    description: >
+      <p>Sets the camera's frustum.</p>
+
+      <p>In a frustum projection, shapes that are further from the camera appear
+
+      smaller than shapes that are near the camera. This technique, called
+
+      foreshortening, creates realistic 3D scenes.</p>
+
+      <p><code>myCamera.frustum()</code> changes the camera’s perspective by
+      changing its
+
+      viewing frustum. The frustum is the volume of space that’s visible to the
+
+      camera. The frustum’s shape is a pyramid with its top cut off. The camera
+
+      is placed where the top of the pyramid should be and points towards the
+
+      base of the pyramid. It views everything within the frustum.</p>
+
+      <p>The first four parameters, <code>left</code>, <code>right</code>,
+      <code>bottom</code>, and <code>top</code>, set the
+
+      coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+      <code>myCamera.frustum(-100, 100, 200, -200)</code> creates a frustum
+      that’s 200
+
+      pixels wide and 400 pixels tall. By default, these coordinates are set
+
+      based on the sketch’s width and height, as in
+
+      <code>myCamera.frustum(-width / 20, width / 20, height / 20, -height /
+      20)</code>.</p>
+
+      <p>The last two parameters, <code>near</code> and <code>far</code>, set
+      the distance of the
+
+      frustum’s near and far plane from the camera. For example, calling
+
+      <code>myCamera.frustum(-100, 100, 200, -200, 50, 1000)</code> creates a
+      frustum that’s
+
+      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
+      ends
+
+      1,000 pixels from the camera. By default, near is set to <code>0.1 *
+      800</code>, which
+
+      is 1/10th the default distance between the camera and the origin.
+      <code>far</code> is
+
+      set to <code>10 * 800</code>, which is 10 times the default distance
+      between the
+
+      camera and the origin.</p>
+    path: p5.Camera/frustum
+  roll:
+    description: >
+      <p>Rotates the camera in a clockwise/counter-clockwise direction.</p>
+
+      <p>Rolling rotates the camera without changing its orientation. The
+      rotation
+
+      happens in the camera’s "local" space.</p>
+
+      <p>The parameter, <code>angle</code>, is the angle the camera should
+      rotate. Passing a
+
+      positive angle, as in <code>myCamera.roll(0.001)</code>, rotates the
+      camera in counter-clockwise direction.
+
+      Passing a negative angle, as in <code>myCamera.roll(-0.001)</code>,
+      rotates the
+
+      camera in clockwise direction.</p>
+
+      <p>Note: Angles are interpreted based on the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Camera/roll
+  pan:
+    description: >
+      <p>Rotates the camera left and right.</p>
+
+      <p>Panning rotates the camera without changing its position. The rotation
+
+      happens in the camera’s "local" space.</p>
+
+      <p>The parameter, <code>angle</code>, is the angle the camera should
+      rotate. Passing a
+
+      positive angle, as in <code>myCamera.pan(0.001)</code>, rotates the camera
+      to the
+
+      right. Passing a negative angle, as in <code>myCamera.pan(-0.001)</code>,
+      rotates the
+
+      camera to the left.</p>
+
+      <p>Note: Angles are interpreted based on the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Camera/pan
+  tilt:
+    description: >
+      <p>Rotates the camera up and down.</p>
+
+      <p>Tilting rotates the camera without changing its position. The rotation
+
+      happens in the camera’s "local" space.</p>
+
+      <p>The parameter, <code>angle</code>, is the angle the camera should
+      rotate. Passing a
+
+      positive angle, as in <code>myCamera.tilt(0.001)</code>, rotates the
+      camera down.
+
+      Passing a negative angle, as in <code>myCamera.tilt(-0.001)</code>,
+      rotates the camera
+
+      up.</p>
+
+      <p>Note: Angles are interpreted based on the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Camera/tilt
+  lookAt:
+    description: >
+      <p>Points the camera at a location.</p>
+
+      <p><code>myCamera.lookAt()</code> changes the camera’s orientation without
+      changing its
+
+      position.</p>
+
+      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
+      the coordinates in "world" space
+
+      where the camera should point. For example, calling
+
+      <code>myCamera.lookAt(10, 20, 30)</code> points the camera at the
+      coordinates
+
+      <code>(10, 20, 30)</code>.</p>
+    path: p5.Camera/lookAt
+  camera:
+    description: >
+      <p>Sets the position and orientation of the camera.</p>
+
+      <p><code>myCamera.camera()</code> allows objects to be viewed from
+      different angles. It
+
+      has nine parameters that are all optional.</p>
+
+      <p>The first three parameters, <code>x</code>, <code>y</code>, and
+      <code>z</code>, are the coordinates of the
+
+      camera’s position in "world" space. For example, calling
+
+      <code>myCamera.camera(0, 0, 0)</code> places the camera at the origin
+      <code>(0, 0, 0)</code>. By
+
+      default, the camera is placed at <code>(0, 0, 800)</code>.</p>
+
+      <p>The next three parameters, <code>centerX</code>, <code>centerY</code>,
+      and <code>centerZ</code> are the
+
+      coordinates of the point where the camera faces in "world" space. For
+
+      example, calling <code>myCamera.camera(0, 0, 0, 10, 20, 30)</code> places
+      the camera
+
+      at the origin <code>(0, 0, 0)</code> and points it at <code>(10, 20,
+      30)</code>. By default, the
+
+      camera points at the origin <code>(0, 0, 0)</code>.</p>
+
+      <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
+      <code>upZ</code> are the components of
+
+      the "up" vector in "local" space. The "up" vector orients the camera’s
+
+      y-axis. For example, calling
+
+      <code>myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the
+      camera at the
+
+      origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
+      sets the "up" vector
+
+      to <code>(0, -1, 0)</code> which is like holding it upside-down. By
+      default, the "up"
+
+      vector is <code>(0, 1, 0)</code>.</p>
+    path: p5.Camera/camera
+  move:
+    description: >
+      <p>Moves the camera along its "local" axes without changing its
+      orientation.</p>
+
+      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
+      the distances the camera should
+
+      move. For example, calling <code>myCamera.move(10, 20, 30)</code> moves
+      the camera 10
+
+      pixels to the right, 20 pixels down, and 30 pixels backward in its "local"
+
+      space.</p>
+    path: p5.Camera/move
+  setPosition:
+    description: >
+      <p>Sets the camera’s position in "world" space without changing its
+
+      orientation.</p>
+
+      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
+      the coordinates where the camera
+
+      should be placed. For example, calling <code>myCamera.setPosition(10, 20,
+      30)</code>
+
+      places the camera at coordinates <code>(10, 20, 30)</code> in "world"
+      space.</p>
+    path: p5.Camera/setPosition
+  set:
+    description: >
+      <p>Sets the camera’s position, orientation, and projection by copying
+      another
+
+      camera.</p>
+
+      <p>The parameter, <code>cam</code>, is the <code>p5.Camera</code> object
+      to copy. For example, calling
+
+      <code>cam2.set(cam1)</code> will set <code>cam2</code> using
+      <code>cam1</code>’s configuration.</p>
+    path: p5.Camera/set
+  slerp:
+    description: >
+      <p>Sets the camera’s position and orientation to values that are
+      in-between
+
+      those of two other cameras.</p>
+
+      <p><code>myCamera.slerp()</code> uses spherical linear interpolation to
+      calculate a
+
+      position and orientation that’s in-between two other cameras. Doing so is
+
+      helpful for transitioning smoothly between two perspectives.</p>
+
+      <p>The first two parameters, <code>cam0</code> and <code>cam1</code>, are
+      the <code>p5.Camera</code> objects
+
+      that should be used to set the current camera.</p>
+
+      <p>The third parameter, <code>amt</code>, is the amount to interpolate
+      between <code>cam0</code> and
+
+      <code>cam1</code>. 0.0 keeps the camera’s position and orientation equal
+      to <code>cam0</code>’s,
+
+      0.5 sets them halfway between <code>cam0</code>’s and <code>cam1</code>’s
+      , and 1.0 sets the
+
+      position and orientation equal to <code>cam1</code>’s.</p>
+
+      <p>For example, calling <code>myCamera.slerp(cam0, cam1, 0.1)</code> sets
+      cam’s position
+
+      and orientation very close to <code>cam0</code>’s. Calling
+
+      <code>myCamera.slerp(cam0, cam1, 0.9)</code> sets cam’s position and
+      orientation very
+
+      close to <code>cam1</code>’s.</p>
+
+      <p>Note: All of the cameras must use the same projection.</p>
+    path: p5.Camera/slerp
+properties:
+  eyeX:
+    description: |
+      <p>The camera’s x-coordinate.</p>
+      <p>By default, the camera’s x-coordinate is set to 0 in "world" space.</p>
+    path: p5.Camera/eyeX
+  eyeY:
+    description: |
+      <p>The camera’s y-coordinate.</p>
+      <p>By default, the camera’s y-coordinate is set to 0 in "world" space.</p>
+    path: p5.Camera/eyeY
+  eyeZ:
+    description: >
+      <p>The camera’s z-coordinate.</p>
+
+      <p>By default, the camera’s z-coordinate is set to 800 in "world"
+      space.</p>
+    path: p5.Camera/eyeZ
+  centerX:
+    description: >
+      <p>The x-coordinate of the place where the camera looks.</p>
+
+      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
+      "world" space, so
+
+      <code>myCamera.centerX</code> is 0.</p>
+    path: p5.Camera/centerX
+  centerY:
+    description: >
+      <p>The y-coordinate of the place where the camera looks.</p>
+
+      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
+      "world" space, so
+
+      <code>myCamera.centerY</code> is 0.</p>
+    path: p5.Camera/centerY
+  centerZ:
+    description: >
+      <p>The y-coordinate of the place where the camera looks.</p>
+
+      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
+      "world" space, so
+
+      <code>myCamera.centerZ</code> is 0.</p>
+    path: p5.Camera/centerZ
+  upX:
+    description: >
+      <p>The x-component of the camera's "up" vector.</p>
+
+      <p>The camera's "up" vector orients its y-axis. By default, the "up"
+      vector is
+
+      <code>(0, 1, 0)</code>, so its x-component is 0 in "local" space.</p>
+    path: p5.Camera/upX
+  upY:
+    description: >
+      <p>The y-component of the camera's "up" vector.</p>
+
+      <p>The camera's "up" vector orients its y-axis. By default, the "up"
+      vector is
+
+      <code>(0, 1, 0)</code>, so its y-component is 1 in "local" space.</p>
+    path: p5.Camera/upY
+  upZ:
+    description: >
+      <p>The z-component of the camera's "up" vector.</p>
+
+      <p>The camera's "up" vector orients its y-axis. By default, the "up"
+      vector is
+
+      <code>(0, 1, 0)</code>, so its z-component is 0 in "local" space.</p>
+    path: p5.Camera/upZ
+chainable: false
+---
+
+
+# p5.Camera
diff --git a/src/content/reference/en/p5 copy/p5.Color.mdx b/src/content/reference/en/p5 copy/p5.Color.mdx
new file mode 100644
index 0000000000..b804e5ee95
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Color.mdx	
@@ -0,0 +1,116 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/p5.Color.js#L318
+title: p5.Color
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: >
+  <p>A class to describe a color.</p>
+
+  <p>Each <code>p5.Color</code> object stores the color mode
+
+  and level maxes that were active during its construction. These values are
+
+  used to interpret the arguments passed to the object's constructor. They
+
+  also determine output formatting such as when
+
+  <a href="/reference/p5/saturation/">saturation()</a> is called.</p>
+
+  <p>Color is stored internally as an array of ideal RGBA values in floating
+
+  point form, normalized from 0 to 1. These values are used to calculate the
+
+  closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+
+  are sent to the renderer.</p>
+
+  <p>When different color representations are calculated, the results are cached
+
+  for performance. These values are normalized, floating-point numbers.</p>
+
+  <p>Note: <a href="/reference/p5/color/">color()</a> is the recommended way to
+  create an
+
+  instance of this class.</p>
+line: 318
+isConstructor: true
+params:
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+  - name: vals
+    description: |
+      <p>an array containing the color values
+                                               for red, green, blue and alpha channel
+                                               or CSS color.</p>
+    type: 'Number[]|String'
+methods:
+  toString:
+    description: >
+      <p>Returns the color formatted as a <code>String</code>.</p>
+
+      <p>Calling <code>myColor.toString()</code> can be useful for debugging, as
+      in
+
+      <code>print(myColor.toString())</code>. It's also helpful for using p5.js
+      with other
+
+      libraries.</p>
+
+      <p>The parameter, <code>format</code>, is optional. If a format string is
+      passed, as in
+
+      <code>myColor.toString('#rrggbb')</code>, it will determine how the color
+      string is
+
+      formatted. By default, color strings are formatted as <code>'rgba(r, g, b,
+      a)'</code>.</p>
+    path: p5.Color/toString
+  setRed:
+    description: >
+      <p>Sets the red component of a color.</p>
+
+      <p>The range depends on the <a
+      href="/reference/p5/colorMode/">colorMode()</a>. In the
+
+      default RGB mode it's between 0 and 255.</p>
+    path: p5.Color/setRed
+  setGreen:
+    description: >
+      <p>Sets the green component of a color.</p>
+
+      <p>The range depends on the <a
+      href="/reference/p5/colorMode/">colorMode()</a>. In the
+
+      default RGB mode it's between 0 and 255.</p>
+    path: p5.Color/setGreen
+  setBlue:
+    description: >
+      <p>Sets the blue component of a color.</p>
+
+      <p>The range depends on the <a
+      href="/reference/p5/colorMode/">colorMode()</a>. In the
+
+      default RGB mode it's between 0 and 255.</p>
+    path: p5.Color/setBlue
+  setAlpha:
+    description: >
+      <p>Sets the alpha (transparency) value of a color.</p>
+
+      <p>The range depends on the
+
+      <a href="/reference/p5/colorMode/">colorMode()</a>. In the default RGB
+      mode it's
+
+      between 0 and 255.</p>
+    path: p5.Color/setAlpha
+chainable: false
+---
+
+
+# p5.Color
diff --git a/src/content/reference/en/p5 copy/p5.Element.mdx b/src/content/reference/en/p5 copy/p5.Element.mdx
new file mode 100644
index 0000000000..c07b10ae79
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Element.mdx	
@@ -0,0 +1,545 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Element.js#L9
+title: p5.Element
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>A class to describe an
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/"
+  target="_blank">HTML element</a>.</p>
+
+  <p>Sketches can use many elements. Common elements include the drawing canvas,
+
+  buttons, sliders, webcam feeds, and so on.</p>
+
+  <p>All elements share the methods of the <code>p5.Element</code> class.
+  They're created
+
+  with functions such as <a
+  href="/reference/p5/createCanvas/">createCanvas()</a> and
+
+  <a href="/reference/p5/createButton/">createButton()</a>.</p>
+line: 9
+isConstructor: true
+params:
+  - name: elt
+    description: |
+      <p>wrapped DOM element.</p>
+    type: HTMLElement
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a button element and
+      // place it beneath the canvas.
+      let btn = createButton('change');
+      btn.position(0, 100);
+
+      // Call randomColor() when
+      // the button is pressed.
+      btn.mousePressed(randomColor);
+
+      describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+methods:
+  parent:
+    description: >
+      <p>Attaches the element to a parent element.</p>
+
+      <p>For example, a <code><div></div></code> element may be used as a box to
+
+      hold two pieces of text, a header and a paragraph. The
+
+      <code><div></div></code> is the parent element of both the header and
+
+      paragraph.</p>
+
+      <p>The parameter <code>parent</code> can have one of three types.
+      <code>parent</code> can be a
+
+      string with the parent element's ID, as in
+
+      <code>myElement.parent('container')</code>. It can also be another
+
+      <a href="/reference/p5/p5.Element">p5.Element</a> object, as in
+
+      <code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be
+      an <code>HTMLElement</code>
+
+      object, as in <code>myElement.parent(anotherElement)</code>.</p>
+
+      <p>Calling <code>myElement.parent()</code> without an argument returns the
+      element's
+
+      parent.</p>
+    path: p5.Element/parent
+  id:
+    description: >
+      <p>Sets the element's ID using a given string.</p>
+
+      <p>Calling <code>myElement.id()</code> without an argument returns its ID
+      as a string.</p>
+    path: p5.Element/id
+  class:
+    description: >
+      <p>Adds a
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class/"
+      target="_blank">class attribute</a>
+
+      to the element using a given string.</p>
+
+      <p>Calling <code>myElement.class()</code> without an argument returns a
+      string with its current classes.</p>
+    path: p5.Element/class
+  mousePressed:
+    description: >
+      <p>Calls a function when the mouse is pressed over the element.</p>
+
+      <p>Calling <code>myElement.mousePressed(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: p5.Element/mousePressed
+  doubleClicked:
+    description: >
+      <p>Calls a function when the mouse is pressed twice over the element.</p>
+
+      <p>Calling <code>myElement.doubleClicked(false)</code> disables the
+      function.</p>
+    path: p5.Element/doubleClicked
+  mouseWheel:
+    description: >
+      <p>Calls a function when the mouse wheel scrolls over the element.</p>
+
+      <p>The callback function, <code>fxn</code>, is passed an
+      <code>event</code> object. <code>event</code> has
+
+      two numeric properties, <code>deltaY</code> and <code>deltaX</code>.
+      <code>event.deltaY</code> is
+
+      negative if the mouse wheel rotates away from the user. It's positive if
+
+      the mouse wheel rotates toward the user. <code>event.deltaX</code> is
+      positive if
+
+      the mouse wheel moves to the right. It's negative if the mouse wheel moves
+
+      to the left.</p>
+
+      <p>Calling <code>myElement.mouseWheel(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseWheel
+  mouseReleased:
+    description: >
+      <p>Calls a function when the mouse is released over the element.</p>
+
+      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: p5.Element/mouseReleased
+  mouseClicked:
+    description: >
+      <p>Calls a function when the mouse is pressed and released over the
+      element.</p>
+
+      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: p5.Element/mouseClicked
+  mouseMoved:
+    description: >
+      <p>Calls a function when the mouse moves over the element.</p>
+
+      <p>Calling <code>myElement.mouseMoved(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseMoved
+  mouseOver:
+    description: >
+      <p>Calls a function when the mouse moves onto the element.</p>
+
+      <p>Calling <code>myElement.mouseOver(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseOver
+  mouseOut:
+    description: >
+      <p>Calls a function when the mouse moves off the element.</p>
+
+      <p>Calling <code>myElement.mouseOut(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseOut
+  touchStarted:
+    description: >
+      <p>Calls a function when the element is touched.</p>
+
+      <p>Calling <code>myElement.touchStarted(false)</code> disables the
+      function.</p>
+
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: p5.Element/touchStarted
+  touchMoved:
+    description: >
+      <p>Calls a function when the user touches the element and moves.</p>
+
+      <p>Calling <code>myElement.touchMoved(false)</code> disables the
+      function.</p>
+
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: p5.Element/touchMoved
+  touchEnded:
+    description: >
+      <p>Calls a function when the user stops touching the element.</p>
+
+      <p>Calling <code>myElement.touchMoved(false)</code> disables the
+      function.</p>
+
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: p5.Element/touchEnded
+  dragOver:
+    description: >
+      <p>Calls a function when a file is dragged over the element.</p>
+
+      <p>Calling <code>myElement.dragOver(false)</code> disables the
+      function.</p>
+    path: p5.Element/dragOver
+  dragLeave:
+    description: >
+      <p>Calls a function when a file is dragged off the element.</p>
+
+      <p>Calling <code>myElement.dragLeave(false)</code> disables the
+      function.</p>
+    path: p5.Element/dragLeave
+  addClass:
+    description: |
+      <p>Adds a class to the element.</p>
+    path: p5.Element/addClass
+  removeClass:
+    description: |
+      <p>Removes a class from the element.</p>
+    path: p5.Element/removeClass
+  hasClass:
+    description: |
+      <p>Checks if a class is already applied to element.</p>
+    path: p5.Element/hasClass
+  toggleClass:
+    description: |
+      <p>Toggles whether a class is applied to the element.</p>
+    path: p5.Element/toggleClass
+  child:
+    description: >
+      <p>Attaches the element as a child of another element.</p>
+
+      <p><code>myElement.child()</code> accepts either a string ID, DOM node, or
+
+      <a href="/reference/p5/p5.Element">p5.Element</a>. For example,
+
+      <code>myElement.child(otherElement)</code>. If no argument is provided, an
+      array of
+
+      children DOM nodes is returned.</p>
+    path: p5.Element/child
+  center:
+    description: >
+      <p>Centers the element either vertically, horizontally, or both.</p>
+
+      <p><code>center()</code> will center the element relative to its parent or
+      according to
+
+      the page's body if the element has no parent.</p>
+
+      <p>If no argument is passed, as in <code>myElement.center()</code> the
+      element is aligned
+
+      both vertically and horizontally.</p>
+    path: p5.Element/center
+  html:
+    description: >
+      <p>Sets the inner HTML of the element, replacing any existing HTML.</p>
+
+      <p>The second parameter, <code>append</code>, is optional. If
+      <code>true</code> is passed, as in
+
+      <code>myElement.html('hi', true)</code>, the HTML is appended instead of
+      replacing
+
+      existing HTML.</p>
+
+      <p>If no arguments are passed, as in <code>myElement.html()</code>, the
+      element's inner
+
+      HTML is returned.</p>
+    path: p5.Element/html
+  position:
+    description: >
+      <p>Sets the element's position.</p>
+
+      <p>The first two parameters, <code>x</code> and <code>y</code>, set the
+      element's position relative
+
+      to the top-left corner of the web page.</p>
+
+      <p>The third parameter, <code>positionType</code>, is optional. It sets
+      the element's
+
+      <a target="_blank"
+      href="https://developer.mozilla.org/en-US/docs/Web/CSS/position/">positioning
+      scheme</a>.
+
+      <code>positionType</code> is a string that can be either
+      <code>'static'</code>, <code>'fixed'</code>,
+
+      <code>'relative'</code>, <code>'sticky'</code>, <code>'initial'</code>, or
+      <code>'inherit'</code>.</p>
+
+      <p>If no arguments passed, as in <code>myElement.position()</code>, the
+      method returns
+
+      the element's position in an object, as in <code>{ x: 0, y: 0
+      }</code>.</p>
+    path: p5.Element/position
+  style:
+    description: >
+      <p>Applies a style to the element by adding a
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax/"
+      target="_blank">CSS declaration</a>.</p>
+
+      <p>The first parameter, <code>property</code>, is a string. If the name of
+      a style
+
+      property is passed, as in <code>myElement.style('color')</code>, the
+      method returns
+
+      the current value as a string or <code>null</code> if it hasn't been set.
+      If a
+
+      <code>property:style</code> string is passed, as in
+
+      <code>myElement.style('color:deeppink')</code>, the method sets the style
+      <code>property</code>
+
+      to <code>value</code>.</p>
+
+      <p>The second parameter, <code>value</code>, is optional. It sets the
+      property's value.
+
+      <code>value</code> can be a string, as in
+
+      <code>myElement.style('color', 'deeppink')</code>, or a
+
+      <a href="/reference/p5/p5.Color">p5.Color</a> object, as in
+
+      <code>myElement.style('color', myColor)</code>.</p>
+    path: p5.Element/style
+  attribute:
+    description: >
+      <p>Adds an
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes"
+      target="_blank">attribute</a>
+
+      to the element.</p>
+
+      <p>This method is useful for advanced tasks. Most commonly-used
+      attributes,
+
+      such as <code>id</code>, can be set with their dedicated methods. For
+      example,
+
+      <code>nextButton.id('next')</code> sets an element's <code>id</code>
+      attribute. Calling
+
+      <code>nextButton.attribute('id', 'next')</code> has the same effect.</p>
+
+      <p>The first parameter, <code>attr</code>, is the attribute's name as a
+      string. Calling
+
+      <code>myElement.attribute('align')</code> returns the attribute's current
+      value as a
+
+      string or <code>null</code> if it hasn't been set.</p>
+
+      <p>The second parameter, <code>value</code>, is optional. It's a string
+      used to set the
+
+      attribute's value. For example, calling
+
+      <code>myElement.attribute('align', 'center')</code> sets the element's
+      horizontal
+
+      alignment to <code>center</code>.</p>
+    path: p5.Element/attribute
+  removeAttribute:
+    description: >
+      <p>Removes an attribute from the element.</p>
+
+      <p>The parameter <code>attr</code> is the attribute's name as a string.
+      For example,
+
+      calling <code>myElement.removeAttribute('align')</code> removes its
+      <code>align</code>
+
+      attribute if it's been set.</p>
+    path: p5.Element/removeAttribute
+  value:
+    description: >
+      <p>Returns or sets the element's value.</p>
+
+      <p>Calling <code>myElement.value()</code> returns the element's current
+      value.</p>
+
+      <p>The parameter, <code>value</code>, is an optional number or string. If
+      provided,
+
+      as in <code>myElement.value(123)</code>, it's used to set the element's
+      value.</p>
+    path: p5.Element/value
+  show:
+    description: |
+      <p>Shows the current element.</p>
+    path: p5.Element/show
+  hide:
+    description: |
+      <p>Hides the current element.</p>
+    path: p5.Element/hide
+  size:
+    description: >
+      <p>Sets the element's width and height.</p>
+
+      <p>Calling <code>myElement.size()</code> without an argument returns the
+      element's size
+
+      as an object with the properties <code>width</code> and
+      <code>height</code>. For example,
+       <code>{ width: 20, height: 10 }</code>.</p>
+      <p>The first parameter, <code>width</code>, is optional. It's a number
+      used to set the
+
+      element's width. Calling <code>myElement.size(10)</code></p>
+
+      <p>The second parameter, 'height<code>, is also optional. It's a number
+      used to set the element's height. For example, calling
+      </code>myElement.size(20, 10)` sets the element's width to 20 pixels and
+      height
+
+      to 10 pixels.</p>
+
+      <p>The constant <code>AUTO</code> can be used to adjust one dimension at a
+      time while
+
+      maintaining the aspect ratio, which is <code>width / height</code>. For
+      example,
+
+      consider an element that's 200 pixels wide and 100 pixels tall. Calling
+
+      <code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and
+      height to 10
+
+      pixels.</p>
+
+      <p>Note: In the case of elements that need to load data, such as images,
+      wait
+
+      to call <code>myElement.size()</code> until after the data loads.</p>
+    path: p5.Element/size
+  remove:
+    description: |
+      <p>Removes the element, stops all audio/video streams, and removes all
+      callback functions.</p>
+    path: p5.Element/remove
+  drop:
+    description: >
+      <p>Calls a function when the user drops a file on the element.</p>
+
+      <p>The first parameter, <code>callback</code>, is a function to call once
+      the file loads.
+
+      The callback function should have one parameter, <code>file</code>, that's
+      a
+
+      <a href="/reference/p5/p5.File">p5.File</a> object. If the user drops
+      multiple files on
+
+      the element, <code>callback</code>, is called once for each file.</p>
+
+      <p>The second parameter, <code>fxn</code>, is a function to call when the
+      browser detects
+
+      one or more dropped files. The callback function should have one
+
+      parameter, <code>event</code>, that's a
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/">DragEvent</a>.</p>
+    path: p5.Element/drop
+  draggable:
+    description: >
+      <p>Makes the element draggable.</p>
+
+      <p>The parameter, <code>elmnt</code>, is optional. If another
+
+      <a href="/reference/p5/p5.Element">p5.Element</a> object is passed, as in
+
+      <code>myElement.draggable(otherElement)</code>, the other element will
+      become draggable.</p>
+    path: p5.Element/draggable
+properties:
+  elt:
+    description: >
+      <p>The element's underlying <code>HTMLElement</code> object.</p>
+
+      <p>The
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
+      target="_blank">HTMLElement</a>
+
+      object's properties and methods can be used directly.</p>
+    path: p5.Element/elt
+  width:
+    description: |
+      <p>A <code>Number</code> property that stores the element's width.</p>
+    path: p5.Element/width
+  height:
+    description: |
+      <p>A <code>Number</code> property that stores the element's height.</p>
+    path: p5.Element/height
+chainable: false
+---
+
+
+# p5.Element
diff --git a/src/content/reference/en/p5 copy/p5.File.mdx b/src/content/reference/en/p5 copy/p5.File.mdx
new file mode 100644
index 0000000000..78675c7a98
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.File.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L5482
+title: p5.File
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>A class to describe a file.</p>
+  <p><code>p5.File</code> objects are used by
+  <a href="/reference/p5.Element/drop/">myElement.drop()</a> and
+  created by
+  <a href="/reference/p5/createFileInput/">createFileInput</a>.</p>
+line: 5482
+isConstructor: true
+params:
+  - name: file
+    description: |
+      <p>wrapped file.</p>
+    type: File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a file input and place it beneath the canvas.
+      // Call displayInfo() when the file loads.
+      let input = createFileInput(displayInfo);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
+    }
+
+    // Display the p5.File's info once it loads.
+    function displayInfo(file) {
+      background(200);
+
+      // Display the p5.File's name.
+      text(file.name, 10, 10, 80, 40);
+
+      // Display the p5.File's type and subtype.
+      text(`${file.type}/${file.subtype}`, 10, 70);
+
+      // Display the p5.File's size in bytes.
+      text(file.size, 10, 90);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Use the file input to select an image to
+    // load and display.
+    let img;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a file input and place it beneath the canvas.
+      // Call handleImage() when the file image loads.
+      let input = createFileInput(handleImage);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the image if it's ready.
+      if (img) {
+        image(img, 0, 0, width, height);
+      }
+    }
+
+    // Use the p5.File's data once it loads.
+    function handleImage(file) {
+      // Check the p5.File's type.
+      if (file.type === 'image') {
+        // Create an image using using the p5.File's data.
+        img = createImg(file.data, '');
+
+        // Hide the image element so it doesn't appear twice.
+        img.hide();
+      } else {
+        img = null;
+      }
+    }
+    </code>
+    </div>
+properties:
+  file:
+    description: >
+      <p>Underlying
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/File/"
+      target="_blank">File</a>
+
+      object. All <code>File</code> properties and methods are accessible.</p>
+    path: p5.File/file
+  type:
+    description: >
+      <p>The file
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
+      target="_blank">MIME type</a>
+
+      as a string.</p>
+
+      <p>For example, <code>'image'</code> and <code>'text'</code> are both MIME
+      types.</p>
+    path: p5.File/type
+  subtype:
+    description: >
+      <p>The file subtype as a string.</p>
+
+      <p>For example, a file with an <code>'image'</code>
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
+      target="_blank">MIME type</a>
+
+      may have a subtype such as <code>png</code> or <code>jpeg</code>.</p>
+    path: p5.File/subtype
+  name:
+    description: |
+      <p>The file name as a string.</p>
+    path: p5.File/name
+  size:
+    description: |
+      <p>The number of bytes in the file.</p>
+    path: p5.File/size
+  data:
+    description: |
+      <p>A string containing the file's data.</p>
+      <p>Data can be either image data, text contents, or a parsed object in the
+      case of JSON and <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
+    path: p5.File/data
+chainable: false
+---
+
+
+# p5.File
diff --git a/src/content/reference/en/p5 copy/p5.Font.mdx b/src/content/reference/en/p5 copy/p5.Font.mdx
new file mode 100644
index 0000000000..615d0406ee
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Font.mdx	
@@ -0,0 +1,146 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/p5.Font.js#L13
+title: p5.Font
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/p5.Font.js
+description: |
+  <p>A class to describe fonts.</p>
+line: 13
+isConstructor: true
+params:
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Creates a p5.Font object.
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the text.
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+
+      // Display the text.
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a gray background.');
+    }
+    </code>
+    </div>
+methods:
+  textBounds:
+    description: >
+      <p>Returns the bounding box for a string of text written using the
+      font.</p>
+
+      <p>The bounding box is the smallest rectangle that can contain a string of
+
+      text. <code>font.textBounds()</code> returns an object with the bounding
+      box's
+
+      location and size. For example, calling <code>font.textBounds('p5*js', 5,
+      20)</code>
+
+      returns an object in the format
+
+      <code>{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }</code>. The <code>x</code> and
+      <code>y</code> properties are
+
+      always the coordinates of the bounding box's top-left corner.</p>
+
+      <p>The first parameter, <code>str</code>, is a string of text. The second
+      and third
+
+      parameters, <code>x</code> and <code>y</code>, are the text's position. By
+      default, they set the
+
+      coordinates of the bounding box's bottom-left corner. See
+
+      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
+      text.</p>
+
+      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
+      font size used to
+
+      determine the bounding box. By default, <code>font.textBounds()</code>
+      will use the
+
+      current <a href="/reference/p5/textSize/">textSize()</a>.</p>
+    path: p5.Font/textBounds
+  textToPoints:
+    description: >
+      <p>Returns an array of points outlining a string of text written using the
+
+      font.</p>
+
+      <p>Each point object in the array has three properties that describe the
+
+      point's location and orientation, called its path angle. For example,
+
+      <code>{ x: 10, y: 20, alpha: 450 }</code>.</p>
+
+      <p>The first parameter, <code>str</code>, is a string of text. The second
+      and third
+
+      parameters, <code>x</code> and <code>y</code>, are the text's position. By
+      default, they set the
+
+      coordinates of the bounding box's bottom-left corner. See
+
+      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
+      text.</p>
+
+      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
+      text's font
+
+      size. By default, <code>font.textToPoints()</code> will use the current
+
+      <a href="/reference/p5/textSize/">textSize()</a>.</p>
+
+      <p>The fifth parameter, <code>options</code>, is also optional.
+      <code>font.textToPoints()</code>
+
+      expects an object with the following properties:</p>
+
+      <p><code>sampleFactor</code> is the ratio of the text's path length to the
+      number of
+
+      samples. It defaults to 0.1. Higher values produce more points along the
+
+      path and are more precise.</p>
+
+      <p><code>simplifyThreshold</code> removes collinear points if it's set to
+      a number other
+
+      than 0. The value represents the threshold angle to use when determining
+
+      whether two edges are collinear.</p>
+    path: p5.Font/textToPoints
+properties:
+  font:
+    description: |
+      <p>The font's underlying
+      <a href="https://opentype.js.org/" target="_blank">opentype.js</a>
+      font object.</p>
+    path: p5.Font/font
+chainable: false
+---
+
+
+# p5.Font
diff --git a/src/content/reference/en/p5 copy/p5.Framebuffer.mdx b/src/content/reference/en/p5 copy/p5.Framebuffer.mdx
new file mode 100644
index 0000000000..8100f48199
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Framebuffer.mdx	
@@ -0,0 +1,443 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Framebuffer.js#L76
+title: p5.Framebuffer
+module: Rendering
+file: src/webgl/p5.Framebuffer.js
+description: >
+  <p>A class to describe a high-performance drawing surface for textures.</p>
+
+  <p>Each <code>p5.Framebuffer</code> object provides a dedicated drawing
+  surface called
+
+  a <em>framebuffer</em>. They're similar to
+
+  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects but can run much
+  faster.
+
+  Performance is improved because the framebuffer shares the same WebGL
+
+  context as the canvas used to create it.</p>
+
+  <p><code>p5.Framebuffer</code> objects have all the drawing features of the
+  main
+
+  canvas. Drawing instructions meant for the framebuffer must be placed
+
+  between calls to
+
+  <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
+
+  <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>. The resulting
+  image
+
+  can be applied as a texture by passing the <code>p5.Framebuffer</code> object
+  to the
+
+  <a href="/reference/p5/texture/">texture()</a> function, as in
+  <code>texture(myBuffer)</code>.
+
+  It can also be displayed on the main canvas by passing it to the
+
+  <a href="/reference/p5/image/">image()</a> function, as in
+  <code>image(myBuffer, 0, 0)</code>.</p>
+
+  <p>Note: <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a> is
+  the
+
+  recommended way to create an instance of this class.</p>
+line: 76
+isConstructor: true
+params:
+  - name: target
+    description: |
+      <p>sketch instance or
+                                     <a href="#/p5.Graphics">p5.Graphics</a>
+                                     object.</p>
+    type: p5.Graphics|p5
+  - name: settings
+    description: |
+      <p>configuration options.</p>
+    type: Object
+    optional: true
+methods:
+  resize:
+    description: >
+      <p>Resizes the framebuffer to a given width and height.</p>
+
+      <p>The parameters, <code>width</code> and <code>height</code>, set the
+      dimensions of the
+
+      framebuffer. For example, calling <code>myBuffer.resize(300, 500)</code>
+      resizes
+
+      the framebuffer to 300×500 pixels, then sets <code>myBuffer.width</code>
+      to 300
+
+      and <code>myBuffer.height</code> 500.</p>
+    path: p5.Framebuffer/resize
+  pixelDensity:
+    description: >
+      <p>Sets the framebuffer's pixel density or returns its current
+      density.</p>
+
+      <p>Computer displays are grids of little lights called pixels. A display's
+
+      pixel density describes how many pixels it packs into an area. Displays
+
+      with smaller pixels have a higher pixel density and create sharper
+
+      images.</p>
+
+      <p>The parameter, <code>density</code>, is optional. If a number is
+      passed, as in
+
+      <code>myBuffer.pixelDensity(1)</code>, it sets the framebuffer's pixel
+      density. By
+
+      default, the framebuffer's pixel density will match that of the canvas
+
+      where it was created. All canvases default to match the display's pixel
+
+      density.</p>
+
+      <p>Calling <code>myBuffer.pixelDensity()</code> without an argument
+      returns its current
+
+      pixel density.</p>
+    path: p5.Framebuffer/pixelDensity
+  autoSized:
+    description: >
+      <p>Toggles the framebuffer's autosizing mode or returns the current
+      mode.</p>
+
+      <p>By default, the framebuffer automatically resizes to match the canvas
+
+      that created it. Calling <code>myBuffer.autoSized(false)</code> disables
+      this
+
+      behavior and calling <code>myBuffer.autoSized(true)</code> re-enables
+      it.</p>
+
+      <p>Calling <code>myBuffer.autoSized()</code> without an argument returns
+      <code>true</code> if
+
+      the framebuffer automatically resizes and <code>false</code> if not.</p>
+    path: p5.Framebuffer/autoSized
+  createCamera:
+    description: >
+      <p>Creates a new
+
+      <a href="/reference/p5/p5.Camera">p5.Camera</a> object to use with the
+      framebuffer.</p>
+
+      <p>The new camera is initialized with a default position <code>(0, 0,
+      800)</code> and a
+
+      default perspective projection. Its properties can be controlled with
+
+      <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
+      <code>myCamera.lookAt(0, 0, 0)</code>.</p>
+
+      <p>Framebuffer cameras should be created between calls to
+
+      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
+
+      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> like so:</p>
+
+      <pre><code class="language-js">let myCamera;
+
+
+      myBuffer.begin();
+
+
+      // Create the camera for the framebuffer.
+
+      myCamera = myBuffer.createCamera();
+
+
+      myBuffer.end();
+
+      </code></pre>
+
+      <p>Calling <a href="/reference/p5/setCamera/">setCamera()</a> updates the
+
+      framebuffer's projection using the camera.
+
+      <a href="/reference/p5/resetMatrix/">resetMatrix()</a> must also be called
+      for the
+
+      view to change properly:</p>
+
+      <pre><code class="language-js">myBuffer.begin();
+
+
+      // Set the camera for the framebuffer.
+
+      setCamera(myCamera);
+
+
+      // Reset all transformations.
+
+      resetMatrix();
+
+
+      // Draw stuff...
+
+
+      myBuffer.end();
+
+      </code></pre>
+    path: p5.Framebuffer/createCamera
+  remove:
+    description: >
+      <p>Deletes the framebuffer from GPU memory.</p>
+
+      <p>Calling <code>myBuffer.remove()</code> frees the GPU memory used by the
+      framebuffer.
+
+      The framebuffer also uses a bit of memory on the CPU which can be freed
+
+      like so:</p>
+
+      <pre><code class="language-js">// Delete the framebuffer from GPU memory.
+
+      myBuffer.remove();
+
+
+      // Delete the framebuffer from CPU memory.
+
+      myBuffer = undefined;
+
+      </code></pre>
+
+      <p>Note: All variables that reference the framebuffer must be assigned
+
+      the value <code>undefined</code> to delete the framebuffer from CPU
+      memory. If any
+
+      variable still refers to the framebuffer, then it won't be garbage
+
+      collected.</p>
+    path: p5.Framebuffer/remove
+  begin:
+    description: >
+      <p>Begins drawing shapes to the framebuffer.</p>
+
+      <p><code>myBuffer.begin()</code> and <a
+      href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>
+
+      allow shapes to be drawn to the framebuffer. <code>myBuffer.begin()</code>
+      begins
+
+      drawing to the framebuffer and
+
+      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> stops drawing
+      to the
+
+      framebuffer. Changes won't be visible until the framebuffer is displayed
+
+      as an image or texture.</p>
+    path: p5.Framebuffer/begin
+  end:
+    description: >
+      <p>Stops drawing shapes to the framebuffer.</p>
+
+      <p><a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
+      <code>myBuffer.end()</code>
+
+      allow shapes to be drawn to the framebuffer.
+
+      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> begins
+      drawing to
+
+      the framebuffer and <code>myBuffer.end()</code> stops drawing to the
+      framebuffer.
+
+      Changes won't be visible until the framebuffer is displayed as an image
+
+      or texture.</p>
+    path: p5.Framebuffer/end
+  draw:
+    description: >
+      <p>Draws to the framebuffer by calling a function that contains drawing
+
+      instructions.</p>
+
+      <p>The parameter, <code>callback</code>, is a function with the drawing
+      instructions
+
+      for the framebuffer. For example, calling
+      <code>myBuffer.draw(myFunction)</code>
+
+      will call a function named <code>myFunction()</code> to draw to the
+      framebuffer.
+
+      Doing so has the same effect as the following:</p>
+
+      <pre><code class="language-js">myBuffer.begin();
+
+      myFunction();
+
+      myBuffer.end();
+
+      </code></pre>
+    path: p5.Framebuffer/draw
+  loadPixels:
+    description: >
+      <p>Loads the current value of each pixel in the framebuffer into its
+
+      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
+
+      <p><code>myBuffer.loadPixels()</code> must be called before reading from
+      or writing to
+
+      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>.</p>
+    path: p5.Framebuffer/loadPixels
+  get:
+    description: >
+      <p>Gets a pixel or a region of pixels from the framebuffer.</p>
+
+      <p><code>myBuffer.get()</code> is easy to use but it's not as fast as
+
+      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>. Use
+
+      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a> to read
+      many pixel
+
+      values.</p>
+
+      <p>The version of <code>myBuffer.get()</code> with no parameters returns
+      the entire
+
+      framebuffer as a a <a href="/reference/p5/p5.Image">p5.Image</a>
+      object.</p>
+
+      <p>The version of <code>myBuffer.get()</code> with two parameters
+      interprets them as
+
+      coordinates. It returns an array with the <code>[R, G, B, A]</code> values
+      of the
+
+      pixel at the given point.</p>
+
+      <p>The version of <code>myBuffer.get()</code> with four parameters
+      interprets them as
+
+      coordinates and dimensions. It returns a subsection of the framebuffer as
+
+      a <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two
+      parameters are
+
+      the coordinates for the upper-left corner of the subsection. The last two
+
+      parameters are the width and height of the subsection.</p>
+    path: p5.Framebuffer/get
+  updatePixels:
+    description: >
+      <p>Updates the framebuffer with the RGBA values in the
+
+      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
+
+      <p><code>myBuffer.updatePixels()</code> only needs to be called after
+      changing values
+
+      in the <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>
+      array. Such
+
+      changes can be made directly after calling
+
+      <a
+      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>.</p>
+    path: p5.Framebuffer/updatePixels
+properties:
+  pixels:
+    description: >
+      <p>An array containing the color of each pixel in the framebuffer.</p>
+
+      <p><a
+      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>
+      must be
+
+      called before accessing the <code>myBuffer.pixels</code> array.
+
+      <a
+      href="/reference/p5.Framebuffer/updatePixels/">myBuffer.updatePixels()</a>
+
+      must be called after any changes are made.</p>
+
+      <p>Note: Updating pixels via this property is slower than drawing to the
+
+      framebuffer directly. Consider using a
+
+      <a href="/reference/p5/p5.Shader">p5.Shader</a> object instead of looping
+      over
+
+      <code>myBuffer.pixels</code>.</p>
+    path: p5.Framebuffer/pixels
+  color:
+    description: >
+      <p>An object that stores the framebuffer's color data.</p>
+
+      <p>Each framebuffer uses a
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
+      target="_blank">WebGLTexture</a>
+
+      object internally to store its color data. The <code>myBuffer.color</code>
+      property
+
+      makes it possible to pass this data directly to other functions. For
+
+      example, calling <code>texture(myBuffer.color)</code> or
+
+      <code>myShader.setUniform('colorTexture', myBuffer.color)</code>  may be
+      helpful for
+
+      advanced use cases.</p>
+
+      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
+
+      images and videos. It's easy to flip a framebuffer's y-coordinates as
+
+      needed when applying it as a texture. For example, calling
+
+      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
+      framebuffer.</p>
+    path: p5.Framebuffer/color
+  depth:
+    description: >
+      <p>An object that stores the framebuffer's depth data.</p>
+
+      <p>Each framebuffer uses a
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
+      target="_blank">WebGLTexture</a>
+
+      object internally to store its depth data. The <code>myBuffer.depth</code>
+      property
+
+      makes it possible to pass this data directly to other functions. For
+
+      example, calling <code>texture(myBuffer.depth)</code> or
+
+      <code>myShader.setUniform('depthTexture', myBuffer.depth)</code>  may be
+      helpful for
+
+      advanced use cases.</p>
+
+      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
+
+      images and videos. It's easy to flip a framebuffer's y-coordinates as
+
+      needed when applying it as a texture. For example, calling
+
+      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
+      framebuffer.</p>
+    path: p5.Framebuffer/depth
+chainable: false
+---
+
+
+# p5.Framebuffer
diff --git a/src/content/reference/en/p5 copy/p5.Geometry.mdx b/src/content/reference/en/p5 copy/p5.Geometry.mdx
new file mode 100644
index 0000000000..0faa7daf7a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Geometry.mdx	
@@ -0,0 +1,793 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Geometry.js#L13
+title: p5.Geometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: >
+  <p>A class to describe a 3D shape.</p>
+
+  <p>Each <code>p5.Geometry</code> object represents a 3D shape as a set of
+  connected
+
+  points called <em>vertices</em>. All 3D shapes are made by connecting vertices
+  to
+
+  form triangles that are stitched together. Each triangular patch on the
+
+  geometry's surface is called a <em>face</em>. The geometry stores information
+
+  about its vertices and faces for use with effects such as lighting and
+
+  texture mapping.</p>
+
+  <p>The first parameter, <code>detailX</code>, is optional. If a number is
+  passed, as in
+
+  <code>new p5.Geometry(24)</code>, it sets the number of triangle subdivisions
+  to use
+
+  along the geometry's x-axis. By default, <code>detailX</code> is 1.</p>
+
+  <p>The second parameter, <code>detailY</code>, is also optional. If a number
+  is passed,
+
+  as in <code>new p5.Geometry(24, 16)</code>, it sets the number of triangle
+
+  subdivisions to use along the geometry's y-axis. By default,
+  <code>detailX</code> is
+
+  1.</p>
+
+  <p>The third parameter, <code>callback</code>, is also optional. If a function
+  is passed,
+
+  as in <code>new p5.Geometry(24, 16, createShape)</code>, it will be called
+  once to add
+
+  vertices to the new 3D shape.</p>
+line: 13
+isConstructor: true
+params:
+  - name: detailX
+    description: |
+      <p>number of vertices along the x-axis.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of vertices along the y-axis.</p>
+    type: Integer
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the geometry is created.</p>
+    type: Function
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Geometry object.
+      myGeometry = new p5.Geometry();
+
+      // Create p5.Vector objects to position the vertices.
+      let v0 = createVector(-40, 0, 0);
+      let v1 = createVector(0, -40, 0);
+      let v2 = createVector(40, 0, 0);
+
+      // Add the vertices to the p5.Geometry object's vertices array.
+      myGeometry.vertices.push(v0, v1, v2);
+
+      describe('A white triangle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Geometry object using a callback function.
+      myGeometry = new p5.Geometry(1, 1, createShape);
+
+      describe('A white triangle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+
+    function createShape() {
+      // Create p5.Vector objects to position the vertices.
+      let v0 = createVector(-40, 0, 0);
+      let v1 = createVector(0, -40, 0);
+      let v2 = createVector(40, 0, 0);
+
+      // "this" refers to the p5.Geometry object being created.
+
+      // Add the vertices to the p5.Geometry object's vertices array.
+      this.vertices.push(v0, v1, v2);
+
+      // Add an array to list which vertices belong to the face.
+      // Vertices are listed in clockwise "winding" order from
+      // left to top to right.
+      this.faces.push([0, 1, 2]);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Geometry object using a callback function.
+      myGeometry = new p5.Geometry(1, 1, createShape);
+
+      describe('A white triangle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+
+    function createShape() {
+      // Create p5.Vector objects to position the vertices.
+      let v0 = createVector(-40, 0, 0);
+      let v1 = createVector(0, -40, 0);
+      let v2 = createVector(40, 0, 0);
+
+      // "this" refers to the p5.Geometry object being created.
+
+      // Add the vertices to the p5.Geometry object's vertices array.
+      this.vertices.push(v0, v1, v2);
+
+      // Add an array to list which vertices belong to the face.
+      // Vertices are listed in clockwise "winding" order from
+      // left to top to right.
+      this.faces.push([0, 1, 2]);
+
+      // Compute the surface normals to help with lighting.
+      this.computeNormals();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.
+    // https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/
+    // CC-BY-SA 4.0
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      // Set detailX to 48 and detailY to 2.
+      // >>> try changing them.
+      myGeometry = new p5.Geometry(48, 2, createShape);
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      strokeWeight(0.2);
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+
+    function createShape() {
+      // "this" refers to the p5.Geometry object being created.
+
+      // Define the Möbius strip with a few parameters.
+      let spread = 0.1;
+      let radius = 30;
+      let stripWidth = 15;
+      let xInterval = 4 * PI / this.detailX;
+      let yOffset = -stripWidth / 2;
+      let yInterval = stripWidth / this.detailY;
+
+      for (let j = 0; j <= this.detailY; j += 1) {
+        // Calculate the "vertical" point along the strip.
+        let v = yOffset + yInterval * j;
+
+        for (let i = 0; i <= this.detailX; i += 1) {
+          // Calculate the angle of rotation around the strip.
+          let u = i * xInterval;
+
+          // Calculate the coordinates of the vertex.
+          let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;
+          let y = (radius + v * cos(u / 2)) * sin(u);
+          if (u < TWO_PI) {
+            y += sin(u) * spread;
+          } else {
+            y -= sin(u) * spread;
+          }
+          let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;
+
+          // Create a p5.Vector object to position the vertex.
+          let vert = createVector(x, y, z);
+
+          // Add the vertex to the p5.Geometry object's vertices array.
+          this.vertices.push(vert);
+        }
+      }
+
+      // Compute the faces array.
+      this.computeFaces();
+
+      // Compute the surface normals to help with lighting.
+      this.computeNormals();
+    }
+    </code>
+    </div>
+methods:
+  calculateBoundingBox:
+    description: >
+      <p>Calculates the position and size of the smallest box that contains the
+      geometry.</p>
+
+      <p>A bounding box is the smallest rectangular prism that contains the
+      entire
+
+      geometry. It's defined by the box's minimum and maximum coordinates along
+
+      each axis, as well as the size (length) and offset (center).</p>
+
+      <p>Calling <code>myGeometry.calculateBoundingBox()</code> returns an
+      object with four
+
+      properties that describe the bounding box:</p>
+
+      <pre><code class="language-js">// Get myGeometry's bounding box.
+
+      let bbox = myGeometry.calculateBoundingBox();
+
+
+      // Print the bounding box to the console.
+
+      console.log(bbox);
+
+
+      // {
+
+      //  // The minimum coordinate along each axis.
+
+      //  min: { x: -1, y: -2, z: -3 },
+
+      //
+
+      //  // The maximum coordinate along each axis.
+
+      //  max: { x: 1, y: 2, z: 3},
+
+      //
+
+      //  // The size (length) along each axis.
+
+      //  size: { x: 2, y: 4, z: 6},
+
+      //
+
+      //  // The offset (center) along each axis.
+
+      //  offset: { x: 0, y: 0, z: 0}
+
+      // }
+
+      </code></pre>
+    path: p5.Geometry/calculateBoundingBox
+  clearColors:
+    description: >
+      <p>Removes the geometry’s internal colors.</p>
+
+      <p><code>p5.Geometry</code> objects can be created with "internal colors"
+      assigned to
+
+      vertices or the entire shape. When a geometry has internal colors,
+
+      <a href="/reference/p5/fill/">fill()</a> has no effect. Calling
+
+      <code>myGeometry.clearColors()</code> allows the
+
+      <a href="/reference/p5/fill/">fill()</a> function to apply color to the
+      geometry.</p>
+    path: p5.Geometry/clearColors
+  saveObj:
+    description: >
+      <p>The <code>saveObj()</code> function exports <code>p5.Geometry</code>
+      objects as
+
+      3D models in the Wavefront .obj file format.
+
+      This way, you can use the 3D shapes you create in p5.js in other software
+
+      for rendering, animation, 3D printing, or more.</p>
+
+      <p>The exported .obj file will include the faces and vertices of the
+      <code>p5.Geometry</code>,
+
+      as well as its texture coordinates and normals, if it has them.</p>
+    path: p5.Geometry/saveObj
+  saveStl:
+    description: >
+      <p>The <code>saveStl()</code> function exports <code>p5.Geometry</code>
+      objects as
+
+      3D models in the STL stereolithography file format.
+
+      This way, you can use the 3D shapes you create in p5.js in other software
+
+      for rendering, animation, 3D printing, or more.</p>
+
+      <p>The exported .stl file will include the faces, vertices, and normals of
+      the <code>p5.Geometry</code>.</p>
+
+      <p>By default, this method saves a text-based .stl file. Alternatively,
+      you can save a more compact
+
+      but less human-readable binary .stl file by passing <code>{ binary: true
+      }</code> as a second parameter.</p>
+    path: p5.Geometry/saveStl
+  flipU:
+    description: >
+      <p>Flips the geometry’s texture u-coordinates.</p>
+
+      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
+      the geometry
+
+      needs a way to map the points on its surface to the pixels in a
+      rectangular
+
+      image that's used as a texture. The geometry's vertex at coordinates
+
+      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
+      <code>(u, v)</code>.</p>
+
+      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
+      stores the
+
+      <code>(u, v)</code> coordinates for each vertex in the order it was added
+      to the
+
+      geometry. Calling <code>myGeometry.flipU()</code> flips a geometry's
+      u-coordinates
+
+      so that the texture appears mirrored horizontally.</p>
+
+      <p>For example, a plane's four vertices are added clockwise starting from
+      the
+
+      top-left corner. Here's how calling <code>myGeometry.flipU()</code> would
+      change a
+
+      plane's texture coordinates:</p>
+
+      <pre><code class="language-js">// Print the original texture coordinates.
+
+      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
+
+      console.log(myGeometry.uvs);
+
+
+      // Flip the u-coordinates.
+
+      myGeometry.flipU();
+
+
+      // Print the flipped texture coordinates.
+
+      // Output: [1, 0, 0, 0, 1, 1, 0, 1]
+
+      console.log(myGeometry.uvs);
+
+
+      // Notice the swaps:
+
+      // Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]
+
+      // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
+
+      </code></pre>
+    path: p5.Geometry/flipU
+  flipV:
+    description: >
+      <p>Flips the geometry’s texture v-coordinates.</p>
+
+      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
+      the geometry
+
+      needs a way to map the points on its surface to the pixels in a
+      rectangular
+
+      image that's used as a texture. The geometry's vertex at coordinates
+
+      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
+      <code>(u, v)</code>.</p>
+
+      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
+      stores the
+
+      <code>(u, v)</code> coordinates for each vertex in the order it was added
+      to the
+
+      geometry. Calling <code>myGeometry.flipV()</code> flips a geometry's
+      v-coordinates
+
+      so that the texture appears mirrored vertically.</p>
+
+      <p>For example, a plane's four vertices are added clockwise starting from
+      the
+
+      top-left corner. Here's how calling <code>myGeometry.flipV()</code> would
+      change a
+
+      plane's texture coordinates:</p>
+
+      <pre><code class="language-js">// Print the original texture coordinates.
+
+      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
+
+      console.log(myGeometry.uvs);
+
+
+      // Flip the v-coordinates.
+
+      myGeometry.flipV();
+
+
+      // Print the flipped texture coordinates.
+
+      // Output: [0, 1, 1, 1, 0, 0, 1, 0]
+
+      console.log(myGeometry.uvs);
+
+
+      // Notice the swaps:
+
+      // Left vertices: [0, 0] <--> [1, 0]
+
+      // Right vertices: [1, 0] <--> [1, 1]
+
+      </code></pre>
+    path: p5.Geometry/flipV
+  computeFaces:
+    description: >
+      <p>Computes the geometry's faces using its vertices.</p>
+
+      <p>All 3D shapes are made by connecting sets of points called
+      <em>vertices</em>. A
+
+      geometry's surface is formed by connecting vertices to form triangles that
+
+      are stitched together. Each triangular patch on the geometry's surface is
+
+      called a <em>face</em>. <code>myGeometry.computeFaces()</code> performs
+      the math needed to
+
+      define each face based on the distances between vertices.</p>
+
+      <p>The geometry's vertices are stored as <a
+      href="/reference/p5/p5.Vector">p5.Vector</a>
+
+      objects in the <a
+      href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a>
+
+      array. The geometry's first vertex is the
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
+      <code>myGeometry.vertices[0]</code>,
+
+      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
+      is
+
+      <code>myGeometry.vertices[2]</code>, and so on.</p>
+
+      <p>Calling <code>myGeometry.computeFaces()</code> fills the
+
+      <a href="/reference/p5.Geometry/faces/">myGeometry.faces</a> array with
+      three-element
+
+      arrays that list the vertices that form each face. For example, a geometry
+
+      made from a rectangle has two faces because a rectangle is made by joining
+
+      two triangles. <a
+      href="/reference/p5.Geometry/faces/">myGeometry.faces</a> for a
+
+      rectangle would be the two-dimensional array
+
+      <code>[[0, 1, 2], [2, 1, 3]]</code>. The first face,
+      <code>myGeometry.faces[0]</code>, is the
+
+      array <code>[0, 1, 2]</code> because it's formed by connecting
+
+      <code>myGeometry.vertices[0]</code>,
+      <code>myGeometry.vertices[1]</code>,and
+
+      <code>myGeometry.vertices[2]</code>. The second face,
+      <code>myGeometry.faces[1]</code>, is the
+
+      array <code>[2, 1, 3]</code> because it's formed by connecting
+
+      <code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>,
+      and
+
+      <code>myGeometry.vertices[3]</code>.</p>
+
+      <p>Note: <code>myGeometry.computeFaces()</code> only works when geometries
+      have four or more vertices.</p>
+    path: p5.Geometry/computeFaces
+  computeNormals:
+    description: >
+      <p>Calculates the normal vector for each vertex on the geometry.</p>
+
+      <p>All 3D shapes are made by connecting sets of points called
+      <em>vertices</em>. A
+
+      geometry's surface is formed by connecting vertices to create triangles
+
+      that are stitched together. Each triangular patch on the geometry's
+
+      surface is called a <em>face</em>.
+      <code>myGeometry.computeNormals()</code> performs the
+
+      math needed to orient each face. Orientation is important for lighting
+
+      and other effects.</p>
+
+      <p>A face's orientation is defined by its <em>normal vector</em> which
+      points out
+
+      of the face and is normal (perpendicular) to the surface. Calling
+
+      <code>myGeometry.computeNormals()</code> first calculates each face's
+      normal vector.
+
+      Then it calculates the normal vector for each vertex by averaging the
+
+      normal vectors of the faces surrounding the vertex. The vertex normals
+
+      are stored as <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in
+      the
+
+      <a
+      href="/reference/p5.Geometry/vertexNormals/">myGeometry.vertexNormals</a>
+      array.</p>
+
+      <p>The first parameter, <code>shadingType</code>, is optional. Passing the
+      constant
+
+      <code>FLAT</code>, as in <code>myGeometry.computeNormals(FLAT)</code>,
+      provides neighboring
+
+      faces with their own copies of the vertices they share. Surfaces appear
+
+      tiled with flat shading. Passing the constant <code>SMOOTH</code>, as in
+
+      <code>myGeometry.computeNormals(SMOOTH)</code>, makes neighboring faces
+      reuse their
+
+      shared vertices. Surfaces appear smoother with smooth shading. By
+
+      default, <code>shadingType</code> is <code>FLAT</code>.</p>
+
+      <p>The second parameter, <code>options</code>, is also optional. If an
+      object with a
+
+      <code>roundToPrecision</code> property is passed, as in
+
+      <code>myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })</code>,
+      it sets the
+
+      number of decimal places to use for calculations. By default,
+
+      <code>roundToPrecision</code> uses 3 decimal places.</p>
+    path: p5.Geometry/computeNormals
+  normalize:
+    description: >
+      <p>Transforms the geometry's vertices to fit snugly within a 100×100×100
+      box
+
+      centered at the origin.</p>
+
+      <p>Calling <code>myGeometry.normalize()</code> translates the geometry's
+      vertices so that
+
+      they're centered at the origin <code>(0, 0, 0)</code>. Then it scales the
+      vertices so
+
+      that they fill a 100×100×100 box. As a result, small geometries will grow
+
+      and large geometries will shrink.</p>
+
+      <p>Note: <code>myGeometry.normalize()</code> only works when called in the
+
+      <a href="/reference/p5/setup/">setup()</a> function.</p>
+    path: p5.Geometry/normalize
+properties:
+  vertices:
+    description: >
+      <p>An array with the geometry's vertices.</p>
+
+      <p>The geometry's vertices are stored as
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
+      <code>myGeometry.vertices</code>
+
+      array. The geometry's first vertex is the
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
+      <code>myGeometry.vertices[0]</code>,
+
+      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
+      is
+
+      <code>myGeometry.vertices[2]</code>, and so on.</p>
+    path: p5.Geometry/vertices
+  vertexNormals:
+    description: >
+      <p>An array with the vectors that are normal to the geometry's
+      vertices.</p>
+
+      <p>A face's orientation is defined by its <em>normal vector</em> which
+      points out
+
+      of the face and is normal (perpendicular) to the surface. Calling
+
+      <code>myGeometry.computeNormals()</code> first calculates each face's
+      normal
+
+      vector. Then it calculates the normal vector for each vertex by
+
+      averaging the normal vectors of the faces surrounding the vertex. The
+
+      vertex normals are stored as <a
+      href="/reference/p5/p5.Vector">p5.Vector</a>
+
+      objects in the <code>myGeometry.vertexNormals</code> array.</p>
+    path: p5.Geometry/vertexNormals
+  faces:
+    description: >
+      <p>An array that lists which of the geometry's vertices form each of its
+
+      faces.</p>
+
+      <p>All 3D shapes are made by connecting sets of points called
+      <em>vertices</em>. A
+
+      geometry's surface is formed by connecting vertices to form triangles
+
+      that are stitched together. Each triangular patch on the geometry's
+
+      surface is called a <em>face</em>.</p>
+
+      <p>The geometry's vertices are stored as
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
+
+      <a href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a> array.
+      The
+
+      geometry's first vertex is the <a
+      href="/reference/p5/p5.Vector">p5.Vector</a>
+
+      object at <code>myGeometry.vertices[0]</code>, its second vertex is
+
+      <code>myGeometry.vertices[1]</code>, its third vertex is
+      <code>myGeometry.vertices[2]</code>,
+
+      and so on.</p>
+
+      <p>For example, a geometry made from a rectangle has two faces because a
+
+      rectangle is made by joining two triangles. <code>myGeometry.faces</code>
+      for a
+
+      rectangle would be the two-dimensional array <code>[[0, 1, 2], [2, 1,
+      3]]</code>.
+
+      The first face, <code>myGeometry.faces[0]</code>, is the array <code>[0,
+      1, 2]</code> because
+
+      it's formed by connecting <code>myGeometry.vertices[0]</code>,
+
+      <code>myGeometry.vertices[1]</code>,and
+      <code>myGeometry.vertices[2]</code>. The second face,
+
+      <code>myGeometry.faces[1]</code>, is the array <code>[2, 1, 3]</code>
+      because it's formed by
+
+      connecting <code>myGeometry.vertices[2]</code>,
+      <code>myGeometry.vertices[1]</code>,and
+
+      <code>myGeometry.vertices[3]</code>.</p>
+    path: p5.Geometry/faces
+  uvs:
+    description: >
+      <p>An array that lists the texture coordinates for each of the geometry's
+
+      vertices.</p>
+
+      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
+      the geometry
+
+      needs a way to map the points on its surface to the pixels in a
+
+      rectangular image that's used as a texture. The geometry's vertex at
+
+      coordinates <code>(x, y, z)</code> maps to the texture image's pixel at
+      coordinates
+
+      <code>(u, v)</code>.</p>
+
+      <p>The <code>myGeometry.uvs</code> array stores the <code>(u, v)</code>
+      coordinates for each
+
+      vertex in the order it was added to the geometry. For example, the
+
+      first vertex, <code>myGeometry.vertices[0]</code>, has its <code>(u,
+      v)</code> coordinates
+
+      stored at <code>myGeometry.uvs[0]</code> and
+      <code>myGeometry.uvs[1]</code>.</p>
+    path: p5.Geometry/uvs
+chainable: false
+---
+
+
+# p5.Geometry
diff --git a/src/content/reference/en/p5 copy/p5.Graphics.mdx b/src/content/reference/en/p5 copy/p5.Graphics.mdx
new file mode 100644
index 0000000000..d0b7c3aff8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Graphics.mdx	
@@ -0,0 +1,261 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Graphics.js#L10
+title: p5.Graphics
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Graphics.js
+description: >
+  <p>A class to describe a drawing surface that's separate from the main
+  canvas.</p>
+
+  <p>Each <code>p5.Graphics</code> object provides a dedicated drawing surface
+  called a
+
+  <em>graphics buffer</em>. Graphics buffers are helpful when drawing should
+  happen
+
+  offscreen. For example, separate scenes can be drawn offscreen and
+
+  displayed only when needed.</p>
+
+  <p><code>p5.Graphics</code> objects have nearly all the drawing features of
+  the main
+
+  canvas. For example, calling the method <code>myGraphics.circle(50, 50,
+  20)</code>
+
+  draws to the graphics buffer. The resulting image can be displayed on the
+
+  main canvas by passing the <code>p5.Graphics</code> object to the
+
+  <a href="/reference/p5/image/">image()</a> function, as in
+  <code>image(myGraphics, 0, 0)</code>.</p>
+
+  <p>Note: <a href="/reference/p5/createGraphics/">createGraphics()</a> is the
+  recommended
+
+  way to create an instance of this class.</p>
+line: 10
+isConstructor: true
+params:
+  - name: width
+    description: |
+      <p>width of the graphics buffer in pixels.</p>
+    type: Number
+  - name: height
+    description: |
+      <p>height of the graphics buffer in pixels.</p>
+    type: Number
+  - name: renderer
+    description: |
+      <p>renderer to use, either P2D or WEBGL.</p>
+    type: Constant
+  - name: pInst
+    description: |
+      <p>sketch instance.</p>
+    type: P5
+    optional: true
+  - name: canvas
+    description: |
+      <p>existing <code>&lt;canvas&gt;</code> element to use.</p>
+    type: HTMLCanvasElement
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Graphics object.
+      pg = createGraphics(50, 50);
+
+      // Draw to the p5.Graphics object.
+      pg.background(100);
+      pg.circle(25, 25, 20);
+
+      describe('A dark gray square with a white circle at its center drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display the p5.Graphics object.
+      image(pg, 25, 25);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the canvas to display the graphics buffer.
+
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Graphics object.
+      pg = createGraphics(50, 50);
+
+      describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the background color.
+      let bg = frameCount % 255;
+
+      // Draw to the p5.Graphics object.
+      pg.background(bg);
+
+      // Display the p5.Graphics object while
+      // the user presses the mouse.
+      if (mouseIsPressed === true) {
+        image(pg, 25, 25);
+      }
+    }
+    </code>
+    </div>
+methods:
+  reset:
+    description: >
+      <p>Resets the graphics buffer's transformations and lighting.</p>
+
+      <p>By default, the main canvas resets certain transformation and lighting
+
+      values each time <a href="/reference/p5/draw/">draw()</a> executes.
+      <code>p5.Graphics</code>
+
+      objects must reset these values manually by calling
+      <code>myGraphics.reset()</code>.</p>
+    path: p5.Graphics/reset
+  remove:
+    description: >
+      <p>Removes the graphics buffer from the web page.</p>
+
+      <p>Calling <code>myGraphics.remove()</code> removes the graphics buffer's
+
+      <code><canvas></code> element from the web page. The graphics buffer also
+      uses
+
+      a bit of memory on the CPU that can be freed like so:</p>
+
+      <pre><code class="language-js">// Remove the graphics buffer from the web
+      page.
+
+      myGraphics.remove();
+
+
+      // Delete the graphics buffer from CPU memory.
+
+      myGraphics = undefined;
+
+      </code></pre>
+
+      <p>Note: All variables that reference the graphics buffer must be assigned
+
+      the value <code>undefined</code> to delete the graphics buffer from CPU
+      memory. If any
+
+      variable still refers to the graphics buffer, then it won't be garbage
+
+      collected.</p>
+    path: p5.Graphics/remove
+  createFramebuffer:
+    description: >
+      <p>Creates a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+      object with
+
+      the same WebGL context as the graphics buffer.</p>
+
+      <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
+      separate drawing
+
+      surfaces that can be used as textures in WebGL mode. They're similar to
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally
+      run much
+
+      faster when used as textures. Creating a
+
+      <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object in the
+      same context
+
+      as the graphics buffer makes this speedup possible.</p>
+
+      <p>The parameter, <code>options</code>, is optional. An object can be
+      passed to configure
+
+      the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
+      available
+
+      properties are:</p>
+
+      <ul>
+
+      <li><code>format</code>: data format of the texture, either
+      <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or
+      <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li>
+
+      <li><code>channels</code>: whether to store <code>RGB</code> or
+      <code>RGBA</code> color channels. Default is to match the graphics buffer
+      which is <code>RGBA</code>.</li>
+
+      <li><code>depth</code>: whether to include a depth buffer. Default is
+      <code>true</code>.</li>
+
+      <li><code>depthFormat</code>: data format of depth information, either
+      <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
+      <code>FLOAT</code>.</li>
+
+      <li><code>stencil</code>: whether to include a stencil buffer for masking.
+      <code>depth</code> must be <code>true</code> for this feature to work.
+      Defaults to the value of <code>depth</code> which is
+      <code>true</code>.</li>
+
+      <li><code>antialias</code>: whether to perform anti-aliasing. If set to
+      <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will
+      be used by default. The number of samples can also be set, as in <code>{
+      antialias: 4 }</code>. Default is to match <a
+      href="/reference/p5/setAttributes/">setAttributes()</a> which is
+      <code>false</code> (<code>true</code> in Safari).</li>
+
+      <li><code>width</code>: width of the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
+      to always match the graphics buffer width.</li>
+
+      <li><code>height</code>: height of the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
+      to always match the graphics buffer height.</li>
+
+      <li><code>density</code>: pixel density of the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
+      to always match the graphics buffer pixel density.</li>
+
+      <li><code>textureFiltering</code>: how to read values from the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
+      <code>LINEAR</code> (nearby pixels will be interpolated) or
+      <code>NEAREST</code> (no interpolation). Generally, use
+      <code>LINEAR</code> when using the texture as an image and
+      <code>NEAREST</code> if reading the texture as data. Default is
+      <code>LINEAR</code>.</li>
+
+      </ul>
+
+      <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
+      attributes are set, they won't
+
+      automatically match the graphics buffer and must be changed manually.</p>
+    path: p5.Graphics/createFramebuffer
+chainable: false
+---
+
+
+# p5.Graphics
diff --git a/src/content/reference/en/p5 copy/p5.Image.mdx b/src/content/reference/en/p5 copy/p5.Image.mdx
new file mode 100644
index 0000000000..63e2a668fe
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Image.mdx	
@@ -0,0 +1,519 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/p5.Image.js#L21
+title: p5.Image
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>A class to describe an image.</p>
+
+  <p>Images are rectangular grids of pixels that can be displayed and
+  modified.</p>
+
+  <p>Existing images can be loaded by calling
+
+  <a href="/reference/p5/loadImage/">loadImage()</a>. Blank images can be
+  created by
+
+  calling <a href="/reference/p5/createImage/">createImage()</a>.
+  <code>p5.Image</code> objects
+
+  have methods for common tasks such as applying filters and modifying
+
+  pixel values.</p>
+line: 21
+isConstructor: true
+params:
+  - name: width
+    description: ''
+    type: Number
+  - name: height
+    description: ''
+    type: Number
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      describe('An image of a brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Apply the GRAY filter.
+      img.filter(GRAY);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      describe('A grayscale image of a brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the image's pixels.
+      img.loadPixels();
+
+      // Set the pixels to black.
+      for (let x = 0; x < img.width; x += 1) {
+        for (let y = 0; y < img.height; y += 1) {
+          img.set(x, y, 0);
+        }
+      }
+
+      // Update the image.
+      img.updatePixels();
+
+      // Display the image.
+      image(img, 17, 17);
+
+      describe('A black square drawn in the middle of a gray square.');
+    }
+    </code>
+    </div>
+methods:
+  pixelDensity:
+    description: |
+      <p>Gets or sets the pixel density for high pixel density displays.</p>
+      <p>By default, the density will be set to 1.</p>
+      <p>Call this method with no arguments to get the default density, or pass
+      in a number to set the density. If a non-positive number is provided,
+      it defaults to 1.</p>
+    path: p5.Image/pixelDensity
+  loadPixels:
+    description: >
+      <p>Loads the current value of each pixel in the image into the
+      <code>img.pixels</code>
+
+      array.</p>
+
+      <p><code>img.loadPixels()</code> must be called before reading or
+      modifying pixel
+
+      values.</p>
+    path: p5.Image/loadPixels
+  updatePixels:
+    description: >
+      <p>Updates the canvas with the RGBA values in the
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a> array.</p>
+
+      <p><code>img.updatePixels()</code> only needs to be called after changing
+      values in
+
+      the <a href="/reference/p5.Image/pixels/">img.pixels</a> array. Such
+      changes can be
+
+      made directly after calling
+
+      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a> or by
+      calling
+
+      <a href="/reference/p5.Image/set/">img.set()</a>.</p>
+
+      <p>The optional parameters <code>x</code>, <code>y</code>,
+      <code>width</code>, and <code>height</code> define a
+
+      subsection of the image to update. Doing so can improve performance in
+
+      some cases.</p>
+
+      <p>If the image was loaded from a GIF, then calling
+      <code>img.updatePixels()</code>
+
+      will update the pixels in current frame.</p>
+    path: p5.Image/updatePixels
+  get:
+    description: >
+      <p>Gets a pixel or a region of pixels from the image.</p>
+
+      <p><code>img.get()</code> is easy to use but it's not as fast as
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a> to read many pixel
+      values.</p>
+
+      <p>The version of <code>img.get()</code> with no parameters returns the
+      entire image.</p>
+
+      <p>The version of <code>img.get()</code> with two parameters, as in
+      <code>img.get(10, 20)</code>,
+
+      interprets them as coordinates. It returns an array with the
+
+      <code>[R, G, B, A]</code> values of the pixel at the given point.</p>
+
+      <p>The version of <code>img.get()</code> with four parameters, as in
+
+      <code>img,get(10, 20, 50, 90)</code>, interprets them as
+
+      coordinates and dimensions. The first two parameters are the coordinates
+
+      of the upper-left corner of the subsection. The last two parameters are
+
+      the width and height of the subsection. It returns a subsection of the
+
+      canvas in a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+      <p>Use <code>img.get()</code> instead of <a
+      href="/reference/p5/get/">get()</a> to work directly
+
+      with images.</p>
+    path: p5.Image/get
+  set:
+    description: >
+      <p>Sets the color of one or more pixels within an image.</p>
+
+      <p><code>img.set()</code> is easy to use but it's not as fast as
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a> to set many pixel
+      values.</p>
+
+      <p><code>img.set()</code> interprets the first two parameters as x- and
+      y-coordinates. It
+
+      interprets the last parameter as a grayscale value, a <code>[R, G, B,
+      A]</code> pixel
+
+      array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or another
+
+      <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+      <p><a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> must
+      be called
+
+      after using <code>img.set()</code> for changes to appear.</p>
+    path: p5.Image/set
+  resize:
+    description: >
+      <p>Resizes the image to a given width and height.</p>
+
+      <p>The image's original aspect ratio can be kept by passing 0 for either
+
+      <code>width</code> or <code>height</code>. For example, calling
+      <code>img.resize(50, 0)</code> on an image
+
+      that was 500 × 300 pixels will resize it to 50 × 30 pixels.</p>
+    path: p5.Image/resize
+  copy:
+    description: >
+      <p>Copies pixels from a source image to this image.</p>
+
+      <p>The first parameter, <code>srcImage</code>, is an optional
+
+      <a href="/reference/p5/p5.Image">p5.Image</a> object to copy. If a source
+      image isn't
+
+      passed, then <code>img.copy()</code> can copy a region of this image to
+      another
+
+      region.</p>
+
+      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+      <code>sw</code>, and <code>sh</code> determine the region
+
+      to copy from the source image. <code>(sx, sy)</code> is the top-left
+      corner of the
+
+      region. <code>sw</code> and <code>sh</code> are the region's width and
+      height.</p>
+
+      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+      <code>dw</code>, and <code>dh</code> determine the region
+
+      of this image to copy into. <code>(dx, dy)</code> is the top-left corner
+      of the
+
+      region. <code>dw</code> and <code>dh</code> are the region's width and
+      height.</p>
+
+      <p>Calling <code>img.copy()</code> will scale pixels from the source
+      region if it isn't
+
+      the same size as the destination region.</p>
+    path: p5.Image/copy
+  mask:
+    description: >
+      <p>Masks part of the image with another.</p>
+
+      <p><code>img.mask()</code> uses another <a
+      href="/reference/p5/p5.Image">p5.Image</a> object's
+
+      alpha channel as the alpha channel for this image. Masks are cumulative
+
+      and can't be removed once applied. If the mask has a different
+
+      pixel density from this image, the mask will be scaled.</p>
+    path: p5.Image/mask
+  filter:
+    description: >
+      <p>Applies an image filter to the image.</p>
+
+      <p>The preset options are:</p>
+
+      <p><code>INVERT</code>
+
+      Inverts the colors in the image. No parameter is used.</p>
+
+      <p><code>GRAY</code>
+
+      Converts the image to grayscale. No parameter is used.</p>
+
+      <p><code>THRESHOLD</code>
+
+      Converts the image to black and white. Pixels with a grayscale value
+
+      above a given threshold are converted to white. The rest are converted to
+
+      black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+
+      value is specified, 0.5 is used.</p>
+
+      <p><code>OPAQUE</code>
+
+      Sets the alpha channel to be entirely opaque. No parameter is used.</p>
+
+      <p><code>POSTERIZE</code>
+
+      Limits the number of colors in the image. Each color channel is limited to
+
+      the number of colors specified. Values between 2 and 255 are valid, but
+
+      results are most noticeable with lower values. The default value is 4.</p>
+
+      <p><code>BLUR</code>
+
+      Blurs the image. The level of blurring is specified by a blur radius.
+      Larger
+
+      values increase the blur. The default value is 4. A gaussian blur is used
+
+      in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code>
+      mode.</p>
+
+      <p><code>ERODE</code>
+
+      Reduces the light areas. No parameter is used.</p>
+
+      <p><code>DILATE</code>
+
+      Increases the light areas. No parameter is used.</p>
+    path: p5.Image/filter
+  blend:
+    description: >
+      <p>Copies a region of pixels from another image into this one.</p>
+
+      <p>The first parameter, <code>srcImage</code>, is the
+
+      <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
+
+      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+      <code>sw</code>, and <code>sh</code> determine the region
+
+      to blend from the source image. <code>(sx, sy)</code> is the top-left
+      corner of the
+
+      region. <code>sw</code> and <code>sh</code> are the regions width and
+      height.</p>
+
+      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+      <code>dw</code>, and <code>dh</code> determine the region
+
+      of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner
+      of the
+
+      region. <code>dw</code> and <code>dh</code> are the regions width and
+      height.</p>
+
+      <p>The tenth parameter, <code>blendMode</code>, sets the effect used to
+      blend the images'
+
+      colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
+      <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
+
+      <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
+      <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
+
+      <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
+      <code>ADD</code>, or <code>NORMAL</code>.</p>
+    path: p5.Image/blend
+  save:
+    description: >
+      <p>Saves the image to a file.</p>
+
+      <p>By default, <code>img.save()</code> saves the image as a PNG image
+      called
+
+      <code>untitled.png</code>.</p>
+
+      <p>The first parameter, <code>filename</code>, is optional. It's a string
+      that sets the
+
+      file's name. If a file extension is included, as in
+
+      <code>img.save('drawing.png')</code>, then the image will be saved using
+      that
+
+      format.</p>
+
+      <p>The second parameter, <code>extension</code>, is also optional. It sets
+      the files format.
+
+      Either <code>'png'</code> or <code>'jpg'</code> can be used. For example,
+      <code>img.save('drawing', 'jpg')</code>
+
+      saves the canvas to a file called <code>drawing.jpg</code>.</p>
+
+      <p>Note: The browser will either save the file immediately or prompt the
+      user
+
+      with a dialogue window.</p>
+
+      <p>The image will only be downloaded as an animated GIF if it was loaded
+
+      from a GIF file. See <a href="/reference/p5/saveGif/">saveGif()</a> to
+      create new
+
+      GIFs.</p>
+    path: p5.Image/save
+  reset:
+    description: |
+      <p>Restarts an animated GIF at its first frame.</p>
+    path: p5.Image/reset
+  getCurrentFrame:
+    description: |
+      <p>Gets the index of the current frame in an animated GIF.</p>
+    path: p5.Image/getCurrentFrame
+  setFrame:
+    description: |
+      <p>Sets the current frame in an animated GIF.</p>
+    path: p5.Image/setFrame
+  numFrames:
+    description: |
+      <p>Returns the number of frames in an animated GIF.</p>
+    path: p5.Image/numFrames
+  play:
+    description: |
+      <p>Plays an animated GIF that was paused with
+      <a href="/reference/p5.Image/pause/">img.pause()</a>.</p>
+    path: p5.Image/play
+  pause:
+    description: |
+      <p>Pauses an animated GIF.</p>
+      <p>The GIF can be resumed by calling
+      <a href="/reference/p5.Image/play/">img.play()</a>.</p>
+    path: p5.Image/pause
+  delay:
+    description: >
+      <p>Changes the delay between frames in an animated GIF.</p>
+
+      <p>The first parameter, <code>delay</code>, is the length of the delay in
+      milliseconds.</p>
+
+      <p>The second parameter, <code>index</code>, is optional. If provided,
+      only the frame
+
+      at <code>index</code> will have its delay modified. All other frames will
+      keep
+
+      their default delay.</p>
+    path: p5.Image/delay
+properties:
+  width:
+    description: |
+      <p>The image's width in pixels.</p>
+    path: p5.Image/width
+  height:
+    description: |
+      <p>The image's height in pixels.</p>
+    path: p5.Image/height
+  pixels:
+    description: >
+      <p>An array containing the color of each pixel in the image.</p>
+
+      <p>Colors are stored as numbers representing red, green, blue, and alpha
+
+      (RGBA) values. <code>img.pixels</code> is a one-dimensional array for
+      performance
+
+      reasons.</p>
+
+      <p>Each pixel occupies four elements in the pixels array, one for each
+
+      RGBA value. For example, the pixel at coordinates (0, 0) stores its
+
+      RGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>,
+      <code>img.pixels[2]</code>,
+
+      and <code>img.pixels[3]</code>, respectively. The next pixel at
+      coordinates (1, 0)
+
+      stores its RGBA values at <code>img.pixels[4]</code>,
+      <code>img.pixels[5]</code>,
+
+      <code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The
+      <code>img.pixels</code> array
+
+      for a 100×100 <a href="/reference/p5/p5.Image">p5.Image</a> object has
+
+      100 × 100 × 4 = 40,000 elements.</p>
+
+      <p>Accessing the RGBA values for a pixel in the image requires a little
+
+      math as shown in the examples below. The
+
+      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a>
+
+      method must be called before accessing the <code>img.pixels</code> array.
+      The
+
+      <a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> method
+      must be
+
+      called after any changes are made.</p>
+    path: p5.Image/pixels
+chainable: false
+---
+
+
+# p5.Image
diff --git a/src/content/reference/en/p5 copy/p5.MediaElement.mdx b/src/content/reference/en/p5 copy/p5.MediaElement.mdx
new file mode 100644
index 0000000000..ee05412502
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.MediaElement.mdx	
@@ -0,0 +1,258 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L4099
+title: p5.MediaElement
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>A class to handle audio and video.</p>
+
+  <p><code>p5.MediaElement</code> extends <a
+  href="/reference/p5/p5.Element">p5.Element</a> with
+
+  methods to handle audio and video. <code>p5.MediaElement</code> objects are
+  created by
+
+  calling <a href="/reference/p5/createVideo/">createVideo</a>,
+
+  <a href="/reference/p5/createAudio/">createAudio</a>, and
+
+  <a href="/reference/p5/createCapture/">createCapture</a>.</p>
+line: 4099
+isConstructor: true
+params:
+  - name: elt
+    description: |
+      <p>DOM node that is wrapped</p>
+    type: String
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    let capture;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.MediaElement using createCapture().
+      capture = createCapture(VIDEO);
+      capture.hide();
+
+      describe('A webcam feed with inverted colors.');
+    }
+
+    function draw() {
+      // Display the video stream and invert the colors.
+      image(capture, 0, 0, width, width * capture.height / capture.width);
+      filter(INVERT);
+    }
+    </code>
+    </div>
+methods:
+  play:
+    description: |
+      <p>Plays audio or video from a media element.</p>
+    path: p5.MediaElement/play
+  stop:
+    description: >
+      <p>Stops a media element and sets its current time to 0.</p>
+
+      <p>Calling <code>media.play()</code> will restart playing audio/video from
+      the beginning.</p>
+    path: p5.MediaElement/stop
+  pause:
+    description: >
+      <p>Pauses a media element.</p>
+
+      <p>Calling <code>media.play()</code> will resume playing audio/video from
+      the moment it paused.</p>
+    path: p5.MediaElement/pause
+  loop:
+    description: |
+      <p>Plays the audio/video repeatedly in a loop.</p>
+    path: p5.MediaElement/loop
+  noLoop:
+    description: |
+      <p>Stops the audio/video from playing in a loop.</p>
+      <p>The media will stop when it finishes playing.</p>
+    path: p5.MediaElement/noLoop
+  autoplay:
+    description: >
+      <p>Sets the audio/video to play once it's loaded.</p>
+
+      <p>The parameter, <code>shouldAutoplay</code>, is optional. Calling
+
+      <code>media.autoplay()</code> without an argument causes the media to play
+
+      automatically. If <code>true</code> is passed, as in
+      <code>media.autoplay(true)</code>, the
+
+      media will automatically play. If <code>false</code> is passed, as in
+
+      <code>media.autoPlay(false)</code>, it won't play automatically.</p>
+    path: p5.MediaElement/autoplay
+  volume:
+    description: >
+      <p>Sets the audio/video volume.</p>
+
+      <p>Calling <code>media.volume()</code> without an argument returns the
+      current volume
+
+      as a number in the range 0 (off) to 1 (maximum).</p>
+
+      <p>The parameter, <code>val</code>, is optional. It's a number that sets
+      the volume
+
+      from 0 (off) to 1 (maximum). For example, calling
+      <code>media.volume(0.5)</code>
+
+      sets the volume to half of its maximum.</p>
+    path: p5.MediaElement/volume
+  speed:
+    description: >
+      <p>Sets the audio/video playback speed.</p>
+
+      <p>The parameter, <code>val</code>, is optional. It's a number that sets
+      the playback
+
+      speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
+
+      plays it at double speed, and so on. -1 plays the media at normal speed
+
+      in reverse.</p>
+
+      <p>Calling <code>media.speed()</code> returns the current speed as a
+      number.</p>
+
+      <p>Note: Not all browsers support backward playback. Even if they do,
+
+      playback might not be smooth.</p>
+    path: p5.MediaElement/speed
+  time:
+    description: >
+      <p>Sets the media element's playback time.</p>
+
+      <p>The parameter, <code>time</code>, is optional. It's a number that
+      specifies the
+
+      time, in seconds, to jump to when playback begins.</p>
+
+      <p>Calling <code>media.time()</code> without an argument returns the
+      number of seconds
+
+      the audio/video has played.</p>
+
+      <p>Note: Time resets to 0 when looping media restarts.</p>
+    path: p5.MediaElement/time
+  duration:
+    description: |
+      <p>Returns the audio/video's duration in seconds.</p>
+    path: p5.MediaElement/duration
+  onended:
+    description: >
+      <p>Calls a function when the audio/video reaches the end of its
+      playback.</p>
+
+      <p>The element is passed as an argument to the callback function.</p>
+
+      <p>Note: The function won't be called if the media is looping.</p>
+    path: p5.MediaElement/onended
+  connect:
+    description: >
+      <p>Sends the element's audio to an output.</p>
+
+      <p>The parameter, <code>audioNode</code>, can be an <code>AudioNode</code>
+      or an object from the
+
+      <code>p5.sound</code> library.</p>
+
+      <p>If no element is provided, as in <code>myElement.connect()</code>, the
+      element
+
+      connects to the main output. All connections are removed by the
+
+      <code>.disconnect()</code> method.</p>
+
+      <p>Note: This method is meant to be used with the p5.sound.js addon
+      library.</p>
+    path: p5.MediaElement/connect
+  disconnect:
+    description: >
+      <p>Disconnect all Web Audio routing, including to the main output.</p>
+
+      <p>This is useful if you want to re-route the output through audio
+      effects,
+
+      for example.</p>
+    path: p5.MediaElement/disconnect
+  showControls:
+    description: >
+      <p>Show the default
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
+      target="_blank">HTMLMediaElement</a>
+
+      controls.</p>
+
+      <p>Note: The controls vary between web browsers.</p>
+    path: p5.MediaElement/showControls
+  hideControls:
+    description: >
+      <p>Hide the default
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
+      target="_blank">HTMLMediaElement</a>
+
+      controls.</p>
+    path: p5.MediaElement/hideControls
+  addCue:
+    description: >
+      <p>Schedules a function to call when the audio/video reaches a specific
+      time
+
+      during its playback.</p>
+
+      <p>The first parameter, <code>time</code>, is the time, in seconds, when
+      the function
+
+      should run. This value is passed to <code>callback</code> as its first
+      argument.</p>
+
+      <p>The second parameter, <code>callback</code>, is the function to call at
+      the specified
+
+      cue time.</p>
+
+      <p>The third parameter, <code>value</code>, is optional and can be any
+      type of value.
+
+      <code>value</code> is passed to <code>callback</code>.</p>
+
+      <p>Calling <code>media.addCue()</code> returns an ID as a string. This is
+      useful for
+
+      removing the cue later.</p>
+    path: p5.MediaElement/addCue
+  removeCue:
+    description: |
+      <p>Removes a callback based on its ID.</p>
+    path: p5.MediaElement/removeCue
+  clearCues:
+    description: |
+      <p>Removes all functions scheduled with <code>media.addCue()</code>.</p>
+    path: p5.MediaElement/clearCues
+properties:
+  src:
+    description: |
+      <p>Path to the media element's source as a string.</p>
+    path: p5.MediaElement/src
+chainable: false
+---
+
+
+# p5.MediaElement
diff --git a/src/content/reference/en/p5 copy/p5.NumberDict.mdx b/src/content/reference/en/p5 copy/p5.NumberDict.mdx
new file mode 100644
index 0000000000..d385eb1468
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.NumberDict.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L415
+title: p5.NumberDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>A simple Dictionary class for Numbers.</p>
+line: 415
+isConstructor: true
+methods:
+  add:
+    description: |
+      <p>Add the given number to the value currently stored at the given key.
+      The sum then replaces the value previously stored in the Dictionary.</p>
+    path: p5.NumberDict/add
+  sub:
+    description: >
+      <p>Subtract the given number from the value currently stored at the given
+      key.
+
+      The difference then replaces the value previously stored in the
+      Dictionary.</p>
+    path: p5.NumberDict/sub
+  mult:
+    description: >
+      <p>Multiply the given number with the value currently stored at the given
+      key.
+
+      The product then replaces the value previously stored in the
+      Dictionary.</p>
+    path: p5.NumberDict/mult
+  div:
+    description: >
+      <p>Divide the given number with the value currently stored at the given
+      key.
+
+      The quotient then replaces the value previously stored in the
+      Dictionary.</p>
+    path: p5.NumberDict/div
+  minValue:
+    description: |
+      <p>Return the lowest number currently stored in the Dictionary.</p>
+    path: p5.NumberDict/minValue
+  maxValue:
+    description: |
+      <p>Return the highest number currently stored in the Dictionary.</p>
+    path: p5.NumberDict/maxValue
+  minKey:
+    description: |
+      <p>Return the lowest key currently used in the Dictionary.</p>
+    path: p5.NumberDict/minKey
+  maxKey:
+    description: |
+      <p>Return the highest key currently used in the Dictionary.</p>
+    path: p5.NumberDict/maxKey
+chainable: false
+---
+
+
+# p5.NumberDict
diff --git a/src/content/reference/en/p5 copy/p5.PrintWriter.mdx b/src/content/reference/en/p5 copy/p5.PrintWriter.mdx
new file mode 100644
index 0000000000..7662b4f910
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.PrintWriter.mdx	
@@ -0,0 +1,35 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1565
+title: p5.PrintWriter
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>A class to describe a print stream.</p>
+
+  <p>Each <code>p5.PrintWriter</code> object provides a way to save a sequence
+  of text
+
+  data, called the <em>print stream</em>, to the user's computer. It's a
+  low-level
+
+  object that enables precise control of text output. Functions such as
+
+  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
+
+  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
+  file
+
+  saving.</p>
+
+  <p>Note: <a href="/reference/p5/createWriter/">createWriter()</a> is the
+  recommended way
+
+  to make an instance of this class.</p>
+line: 1565
+---
+
+
+# p5.PrintWriter
diff --git a/src/content/reference/en/p5 copy/p5.Renderer.mdx b/src/content/reference/en/p5 copy/p5.Renderer.mdx
new file mode 100644
index 0000000000..5fa9dd1cd1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Renderer.mdx	
@@ -0,0 +1,34 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Renderer.js#L10
+title: p5.Renderer
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Renderer.js
+description: |
+  <p>Main graphics and rendering context, as well as the base API
+  implementation for p5.js "core". To be used as the superclass for
+  Renderer2D and Renderer3D classes, respectively.</p>
+line: 10
+isConstructor: true
+params:
+  - name: elt
+    description: |
+      <p>DOM node that is wrapped</p>
+    type: HTMLElement
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance</p>
+    type: P5
+    optional: true
+  - name: isMainCanvas
+    description: |
+      <p>whether we're using it as main canvas</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# p5.Renderer
diff --git a/src/content/reference/en/p5 copy/p5.Shader.mdx b/src/content/reference/en/p5 copy/p5.Shader.mdx
new file mode 100644
index 0000000000..1730091ac1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Shader.mdx	
@@ -0,0 +1,433 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Shader.js#L11
+title: p5.Shader
+module: 3D
+submodule: Material
+file: src/webgl/p5.Shader.js
+description: >
+  <p>A class to describe a shader program.</p>
+
+  <p>Each <code>p5.Shader</code> object contains a shader program that runs on
+  the graphics
+
+  processing unit (GPU). Shaders can process many pixels or vertices at the
+
+  same time, making them fast for many graphics tasks. They’re written in a
+
+  language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.</p>
+
+  <p>A shader program consists of two files, a vertex shader and a fragment
+
+  shader. The vertex shader affects where 3D geometry is drawn on the screen
+
+  and the fragment shader affects color. Once the <code>p5.Shader</code> object
+  is
+
+  created, it can be used with the <a href="/reference/p5/shader/">shader()</a>
+
+  function, as in <code>shader(myShader)</code>.</p>
+
+  <p>A shader can optionally describe <em>hooks,</em> which are functions in
+  GLSL that
+
+  users may choose to provide to customize the behavior of the shader. For the
+
+  vertex or the fragment shader, users can pass in an object where each key is
+
+  the type and name of a hook function, and each value is a string with the
+
+  parameter list and default implementation of the hook. For example, to let
+  users
+
+  optionally run code at the start of the vertex shader, the options object
+  could
+
+  include:</p>
+
+  <pre><code class="language-js">{
+    vertex: {
+      'void beforeVertex': '() {}'
+    }
+  }
+
+  </code></pre>
+
+  <p>Then, in your vertex shader source, you can run a hook by calling a
+  function
+
+  with the same name prefixed by <code>HOOK_</code>:</p>
+
+  <pre><code class="language-glsl">void main() {
+    HOOK_beforeVertex();
+    // Add the rest of your shader code here!
+  }
+
+  </code></pre>
+
+  <p>Note: <a href="/reference/p5/createShader/">createShader()</a>,
+
+  <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, and
+
+  <a href="/reference/p5/loadShader/">loadShader()</a> are the recommended ways
+  to
+
+  create an instance of this class.</p>
+line: 11
+isConstructor: true
+params:
+  - name: renderer
+    description: |
+      <p>WebGL context for this shader.</p>
+    type: p5.RendererGL
+  - name: vertSrc
+    description: |
+      <p>source code for the vertex shader program.</p>
+    type: String
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader program.</p>
+    type: String
+  - name: options
+    description: >
+      <p>An optional object describing how this shader can
+
+      be augmented with hooks. It can include:</p>
+
+      <ul>
+
+      <li><code>vertex</code>: An object describing the available vertex shader
+      hooks.</li>
+
+      <li><code>fragment</code>: An object describing the available frament
+      shader hooks.</li>
+
+      </ul>
+    type: Object
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+
+    void main() {
+      // Set each pixel's RGBA value to yellow.
+      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let myShader = createShader(vertSrc, fragSrc);
+
+      // Apply the p5.Shader object.
+      shader(myShader);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A yellow square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates between 0 and 2.
+      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+    </code>
+    </div>
+methods:
+  inspectHooks:
+    description: >
+      <p>Logs the hooks available in this shader, and their current
+      implementation.</p>
+
+      <p>Each shader may let you override bits of its behavior. Each bit is
+      called
+
+      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
+      affects the
+
+      position of vertices, or in the <em>fragment</em> shader, if it affects
+      the pixel
+
+      color. This method logs those values to the console, letting you know what
+
+      you are able to use in a call to
+
+      <a href="/reference/p5.Shader/modify/"><code>modify()</code></a>.</p>
+
+      <p>For example, this shader will produce the following output:</p>
+
+      <pre><code class="language-js">myShader = baseMaterialShader().modify({
+        declarations: 'uniform float time;',
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+
+      myShader.inspectHooks();
+
+      </code></pre>
+
+      <pre><code>==== Vertex shader hooks: ====
+
+      void beforeVertex() {}
+
+      vec3 getLocalPosition(vec3 position) { return position; }
+
+      [MODIFIED] vec3 getWorldPosition(vec3 pos) {
+            pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+            return pos;
+          }
+      vec3 getLocalNormal(vec3 normal) { return normal; }
+
+      vec3 getWorldNormal(vec3 normal) { return normal; }
+
+      vec2 getUV(vec2 uv) { return uv; }
+
+      vec4 getVertexColor(vec4 color) { return color; }
+
+      void afterVertex() {}
+
+
+      ==== Fragment shader hooks: ====
+
+      void beforeFragment() {}
+
+      Inputs getPixelInputs(Inputs inputs) { return inputs; }
+
+      vec4 combineColors(ColorComponents components) {
+                      vec4 color = vec4(0.);
+                      color.rgb += components.diffuse * components.baseColor;
+                      color.rgb += components.ambient * components.ambientColor;
+                      color.rgb += components.specular * components.specularColor;
+                      color.rgb += components.emissive;
+                      color.a = components.opacity;
+                      return color;
+                    }
+      vec4 getFinalColor(vec4 color) { return color; }
+
+      void afterFragment() {}
+
+      </code></pre>
+    path: p5.Shader/inspectHooks
+  modify:
+    description: >
+      <p>Returns a new shader, based on the original, but with custom snippets
+
+      of shader code replacing default behaviour.</p>
+
+      <p>Each shader may let you override bits of its behavior. Each bit is
+      called
+
+      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
+      affects the
+
+      position of vertices, or in the <em>fragment</em> shader, if it affects
+      the pixel
+
+      color. You can inspect the different hooks available by calling
+
+      <a
+      href="/reference/p5.Shader/inspectHooks/"><code>yourShader.inspectHooks()</code></a>.
+      You can
+
+      also read the reference for the default material, normal material, color,
+      line, and point shaders to
+
+      see what hooks they have available.</p>
+
+      <p><code>modify()</code> takes one parameter, <code>hooks</code>, an
+      object with the hooks you want
+
+      to override. Each key of the <code>hooks</code> object is the name
+
+      of a hook, and the value is a string with the GLSL code for your hook.</p>
+
+      <p>If you supply functions that aren't existing hooks, they will get added
+      at the start of
+
+      the shader as helper functions so that you can use them in your hooks.</p>
+
+      <p>To add new <a href="/reference/p5.Shader/setUniform/">uniforms</a> to
+      your shader, you can pass in a <code>uniforms</code> object containing
+
+      the type and name of the uniform as the key, and a default value or
+      function returning
+
+      a default value as its value. These will be automatically set when the
+      shader is set
+
+      with <code>shader(yourShader)</code>.</p>
+
+      <p>You can also add a <code>declarations</code> key, where the value is a
+      GLSL string declaring
+
+      custom uniform variables, globals, and functions shared
+
+      between hooks. To add declarations just in a vertex or fragment shader,
+      add
+
+      <code>vertexDeclarations</code> and <code>fragmentDeclarations</code>
+      keys.</p>
+    path: p5.Shader/modify
+  copyToContext:
+    description: >
+      <p>Copies the shader from one drawing context to another.</p>
+
+      <p>Each <code>p5.Shader</code> object must be compiled by calling
+
+      <a href="/reference/p5/shader/">shader()</a> before it can run.
+      Compilation happens
+
+      in a drawing context which is usually the main canvas or an instance of
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>. A shader can only be
+      used in the
+
+      context where it was compiled. The <code>copyToContext()</code> method
+      compiles the
+
+      shader again and copies it to another drawing context where it can be
+
+      reused.</p>
+
+      <p>The parameter, <code>context</code>, is the drawing context where the
+      shader will be
+
+      used. The shader can be copied to an instance of
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>, as in
+
+      <code>myShader.copyToContext(pg)</code>. The shader can also be copied
+      from a
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object to the main
+      canvas using
+
+      the <code>window</code> variable, as in
+      <code>myShader.copyToContext(window)</code>.</p>
+
+      <p>Note: A <a href="/reference/p5/p5.Shader">p5.Shader</a> object created
+      with
+
+      <a href="/reference/p5/createShader/">createShader()</a>,
+
+      <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, or
+
+      <a href="/reference/p5/loadShader/">loadShader()</a>
+
+      can be used directly with a <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+
+      object created with
+
+      <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a>. Both
+      objects
+
+      have the same context as the main canvas.</p>
+    path: p5.Shader/copyToContext
+  setUniform:
+    description: >
+      <p>Sets the shader’s uniform (global) variables.</p>
+
+      <p>Shader programs run on the computer’s graphics processing unit (GPU).
+
+      They live in part of the computer’s memory that’s completely separate
+
+      from the sketch that runs them. Uniforms are global variables within a
+
+      shader program. They provide a way to pass values from a sketch running
+
+      on the CPU to a shader program running on the GPU.</p>
+
+      <p>The first parameter, <code>uniformName</code>, is a string with the
+      uniform’s name.
+
+      For the shader above, <code>uniformName</code> would be
+      <code>'r'</code>.</p>
+
+      <p>The second parameter, <code>data</code>, is the value that should be
+      used to set the
+
+      uniform. For example, calling <code>myShader.setUniform('r', 0.5)</code>
+      would set
+
+      the <code>r</code> uniform in the shader above to <code>0.5</code>. data
+      should match the
+
+      uniform’s type. Numbers, strings, booleans, arrays, and many types of
+
+      images can all be passed to a shader with <code>setUniform()</code>.</p>
+    path: p5.Shader/setUniform
+chainable: false
+---
+
+
+# p5.Shader
diff --git a/src/content/reference/en/p5 copy/p5.StringDict.mdx b/src/content/reference/en/p5 copy/p5.StringDict.mdx
new file mode 100644
index 0000000000..5ca466e5d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.StringDict.mdx	
@@ -0,0 +1,15 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L397
+title: p5.StringDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>A simple Dictionary class for Strings.</p>
+line: 397
+---
+
+
+# p5.StringDict
diff --git a/src/content/reference/en/p5 copy/p5.Table.mdx b/src/content/reference/en/p5 copy/p5.Table.mdx
new file mode 100644
index 0000000000..41ad72b0d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Table.mdx	
@@ -0,0 +1,213 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.Table.js#L33
+title: p5.Table
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p><a href="/reference/p5/p5.Table">Table</a> objects store data with multiple
+  rows and columns, much
+
+  like in a traditional spreadsheet. Tables can be generated from
+
+  scratch, dynamically, or using data from an existing file.</p>
+line: 33
+isConstructor: true
+params:
+  - name: rows
+    description: |
+      <p>An array of p5.TableRow objects</p>
+    type: 'p5.TableRow[]'
+    optional: true
+methods:
+  addRow:
+    description: >
+      <p>Use <a href="/reference/p5/addRow/">addRow()</a> to add a new row of
+      data to a <a href="/reference/p5/p5.Table">p5.Table</a> object. By
+      default,
+
+      an empty row is created. Typically, you would store a reference to
+
+      the new row in a TableRow object (see newRow in the example above),
+
+      and then set individual values using <a
+      href="/reference/p5/set/">set()</a>.</p>
+
+      <p>If a <a href="/reference/p5/p5.TableRow">p5.TableRow</a> object is
+      included as a parameter, then that row is
+
+      duplicated and added to the table.</p>
+    path: p5.Table/addRow
+  removeRow:
+    description: |
+      <p>Removes a row from the table object.</p>
+    path: p5.Table/removeRow
+  getRow:
+    description: >
+      <p>Returns a reference to the specified <a
+      href="/reference/p5/p5.TableRow">p5.TableRow</a>. The reference
+
+      can then be used to get and set values of the selected row.</p>
+    path: p5.Table/getRow
+  getRows:
+    description: >
+      <p>Gets all rows from the table. Returns an array of <a
+      href="/reference/p5/p5.TableRow">p5.TableRow</a>s.</p>
+    path: p5.Table/getRows
+  findRow:
+    description: |
+      <p>Finds the first row in the Table that contains the value
+      provided, and returns a reference to that row. Even if
+      multiple rows are possible matches, only the first matching
+      row is returned. The column to search may be specified by
+      either its ID or title.</p>
+    path: p5.Table/findRow
+  findRows:
+    description: |
+      <p>Finds the rows in the Table that contain the value
+      provided, and returns references to those rows. Returns an
+      Array, so for must be used to iterate through all the rows,
+      as shown in the example above. The column to search may be
+      specified by either its ID or title.</p>
+    path: p5.Table/findRows
+  matchRow:
+    description: |
+      <p>Finds the first row in the Table that matches the regular
+      expression provided, and returns a reference to that row.
+      Even if multiple rows are possible matches, only the first
+      matching row is returned. The column to search may be
+      specified by either its ID or title.</p>
+    path: p5.Table/matchRow
+  matchRows:
+    description: |
+      <p>Finds the rows in the Table that match the regular expression provided,
+      and returns references to those rows. Returns an array, so for must be
+      used to iterate through all the rows, as shown in the example. The
+      column to search may be specified by either its ID or title.</p>
+    path: p5.Table/matchRows
+  getColumn:
+    description: |
+      <p>Retrieves all values in the specified column, and returns them
+      as an array. The column may be specified by either its ID or title.</p>
+    path: p5.Table/getColumn
+  clearRows:
+    description: |
+      <p>Removes all rows from a Table. While all rows are removed,
+      columns and column titles are maintained.</p>
+    path: p5.Table/clearRows
+  addColumn:
+    description: >
+      <p>Use <a href="/reference/p5/addColumn/">addColumn()</a> to add a new
+      column to a <a href="/reference/p5/p5.Table">Table</a> object.
+
+      Typically, you will want to specify a title, so the column
+
+      may be easily referenced later by name. (If no title is
+
+      specified, the new column's title will be null.)</p>
+    path: p5.Table/addColumn
+  getColumnCount:
+    description: |
+      <p>Returns the total number of columns in a Table.</p>
+    path: p5.Table/getColumnCount
+  getRowCount:
+    description: |
+      <p>Returns the total number of rows in a Table.</p>
+    path: p5.Table/getRowCount
+  removeTokens:
+    description: |
+      <p>Removes any of the specified characters (or "tokens").</p>
+      <p>If no column is specified, then the values in all columns and
+      rows are processed. A specific column may be referenced by
+      either its ID or title.</p>
+    path: p5.Table/removeTokens
+  trim:
+    description: |
+      <p>Trims leading and trailing whitespace, such as spaces and tabs,
+      from String table values. If no column is specified, then the
+      values in all columns and rows are trimmed. A specific column
+      may be referenced by either its ID or title.</p>
+    path: p5.Table/trim
+  removeColumn:
+    description: >
+      <p>Use <a href="/reference/p5/removeColumn/">removeColumn()</a> to remove
+      an existing column from a Table
+
+      object. The column to be removed may be identified by either
+
+      its title (a String) or its index value (an int).
+
+      removeColumn(0) would remove the first column, removeColumn(1)
+
+      would remove the second column, and so on.</p>
+    path: p5.Table/removeColumn
+  set:
+    description: |
+      <p>Stores a value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: p5.Table/set
+  setNum:
+    description: |
+      <p>Stores a Float value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: p5.Table/setNum
+  setString:
+    description: |
+      <p>Stores a String value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: p5.Table/setString
+  get:
+    description: |
+      <p>Retrieves a value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: p5.Table/get
+  getNum:
+    description: |
+      <p>Retrieves a Float value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: p5.Table/getNum
+  getString:
+    description: |
+      <p>Retrieves a String value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: p5.Table/getString
+  getObject:
+    description: |
+      <p>Retrieves all table data and returns as an object. If a column name is
+      passed in, each row object will be stored with that attribute as its
+      title.</p>
+    path: p5.Table/getObject
+  getArray:
+    description: >
+      <p>Retrieves all table data and returns it as a multidimensional
+      array.</p>
+    path: p5.Table/getArray
+properties:
+  columns:
+    description: >
+      <p>An array containing the names of the columns in the table, if the
+      "header" the table is
+
+      loaded with the "header" parameter.</p>
+    path: p5.Table/columns
+  rows:
+    description: >
+      <p>An array containing the <a
+      href="/reference/p5/p5.Table">p5.TableRow</a> objects that make up the
+
+      rows of the table. The same result as calling <a
+      href="/reference/p5/getRows/">getRows()</a></p>
+    path: p5.Table/rows
+chainable: false
+---
+
+
+# p5.Table
diff --git a/src/content/reference/en/p5 copy/p5.TableRow.mdx b/src/content/reference/en/p5 copy/p5.TableRow.mdx
new file mode 100644
index 0000000000..00081f9654
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.TableRow.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.TableRow.js#L9
+title: p5.TableRow
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>A TableRow object represents a single row of data values,
+  stored in columns, from a table.</p>
+  <p>A Table Row contains both an ordered array, and an unordered
+  JSON object.</p>
+line: 9
+isConstructor: true
+params:
+  - name: str
+    description: |
+      <p>optional: populate the row with a
+                                  string of values, separated by the
+                                  separator</p>
+    type: String
+    optional: true
+  - name: separator
+    description: |
+      <p>comma separated values (csv) by default</p>
+    type: String
+    optional: true
+methods:
+  set:
+    description: |
+      <p>Stores a value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/set
+  setNum:
+    description: |
+      <p>Stores a Float value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/setNum
+  setString:
+    description: |
+      <p>Stores a String value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/setString
+  get:
+    description: |
+      <p>Retrieves a value from the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/get
+  getNum:
+    description: |
+      <p>Retrieves a Float value from the TableRow's specified
+      column. The column may be specified by either its ID or
+      title.</p>
+    path: p5.TableRow/getNum
+  getString:
+    description: |
+      <p>Retrieves an String value from the TableRow's specified
+      column. The column may be specified by either its ID or
+      title.</p>
+    path: p5.TableRow/getString
+chainable: false
+---
+
+
+# p5.TableRow
diff --git a/src/content/reference/en/p5 copy/p5.TypedDict.mdx b/src/content/reference/en/p5 copy/p5.TypedDict.mdx
new file mode 100644
index 0000000000..2bcb7b5752
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.TypedDict.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L82
+title: p5.TypedDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Base class for all p5.Dictionary types. Specifically
+   typed Dictionary classes inherit from this class.</p>
+line: 82
+isConstructor: true
+methods:
+  size:
+    description: >
+      <p>Returns the number of key-value pairs currently stored in the
+      Dictionary.</p>
+    path: p5.TypedDict/size
+  hasKey:
+    description: |
+      <p>Returns true if the given key exists in the Dictionary,
+      otherwise returns false.</p>
+    path: p5.TypedDict/hasKey
+  get:
+    description: |
+      <p>Returns the value stored at the given key.</p>
+    path: p5.TypedDict/get
+  set:
+    description: >
+      <p>Updates the value associated with the given key in case it already
+      exists
+
+      in the Dictionary. Otherwise a new key-value pair is added.</p>
+    path: p5.TypedDict/set
+  create:
+    description: |
+      <p>Creates a new key-value pair in the Dictionary.</p>
+    path: p5.TypedDict/create
+  clear:
+    description: |
+      <p>Removes all previously stored key-value pairs from the Dictionary.</p>
+    path: p5.TypedDict/clear
+  remove:
+    description: >
+      <p>Removes the key-value pair stored at the given key from the
+      Dictionary.</p>
+    path: p5.TypedDict/remove
+  print:
+    description: >
+      <p>Logs the set of items currently stored in the Dictionary to the
+      console.</p>
+    path: p5.TypedDict/print
+  saveTable:
+    description: |
+      <p>Converts the Dictionary into a CSV file for local download.</p>
+    path: p5.TypedDict/saveTable
+  saveJSON:
+    description: |
+      <p>Converts the Dictionary into a JSON file for local download.</p>
+    path: p5.TypedDict/saveJSON
+chainable: false
+---
+
+
+# p5.TypedDict
diff --git a/src/content/reference/en/p5 copy/p5.Vector.mdx b/src/content/reference/en/p5 copy/p5.Vector.mdx
new file mode 100644
index 0000000000..ff67d7562c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Vector.mdx	
@@ -0,0 +1,673 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/p5.Vector.js#L11
+title: p5.Vector
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>A class to describe a two or three-dimensional vector.</p>
+
+  <p>A vector can be thought of in different ways. In one view, a vector is like
+
+  an arrow pointing in space. Vectors have both magnitude (length) and
+
+  direction.</p>
+
+  <p><code>p5.Vector</code> objects are often used to program motion because
+  they simplify
+
+  the math. For example, a moving ball has a position and a velocity.
+
+  Position describes where the ball is in space. The ball's position vector
+
+  extends from the origin to the ball's center. Velocity describes the ball's
+
+  speed and the direction it's moving. If the ball is moving straight up, its
+
+  velocity vector points straight up. Adding the ball's velocity vector to
+
+  its position vector moves it, as in <code>pos.add(vel)</code>. Vector math
+  relies on
+
+  methods inside the <code>p5.Vector</code> class.</p>
+
+  <p>Note: <a href="/reference/p5/createVector/">createVector()</a> is the
+  recommended way
+
+  to make an instance of this class.</p>
+line: 11
+isConstructor: true
+params:
+  - name: x
+    description: |
+      <p>x component of the vector.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y component of the vector.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z component of the vector.</p>
+    type: Number
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create p5.Vector objects.
+      let p1 = createVector(25, 25);
+      let p2 = createVector(75, 75);
+
+      // Style the points.
+      strokeWeight(5);
+
+      // Draw the first point using a p5.Vector.
+      point(p1);
+
+      // Draw the second point using a p5.Vector's components.
+      point(p2.x, p2.y);
+
+      describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pos;
+    let vel;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create p5.Vector objects.
+      pos = createVector(50, 100);
+      vel = createVector(0, -1);
+
+      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Add velocity to position.
+      pos.add(vel);
+
+      // If the dot reaches the top of the canvas,
+      // restart from the bottom.
+      if (pos.y < 0) {
+        pos.y = 100;
+      }
+
+      // Draw the dot.
+      strokeWeight(5);
+      point(pos);
+    }
+    </code>
+    </div>
+methods:
+  toString:
+    description: >
+      <p>Returns a string representation of a vector.</p>
+
+      <p>Calling <code>toString()</code> is useful for printing vectors to the
+      console while
+
+      debugging.</p>
+    path: p5.Vector/toString
+  set:
+    description: >
+      <p>Sets the vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components.</p>
+
+      <p><code>set()</code> can use separate numbers, as in <code>v.set(1, 2,
+      3)</code>, a
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.set(v2)</code>, or an
+
+      array of numbers, as in <code>v.set([1, 2, 3])</code>.</p>
+
+      <p>If a value isn't provided for a component, it will be set to 0. For
+
+      example, <code>v.set(4, 5)</code> sets <code>v.x</code> to 4,
+      <code>v.y</code> to 5, and <code>v.z</code> to 0.
+
+      Calling <code>set()</code> with no arguments, as in <code>v.set()</code>,
+      sets all the vector's
+
+      components to 0.</p>
+    path: p5.Vector/set
+  copy:
+    description: >
+      <p>Returns a copy of the <a href="/reference/p5/p5.Vector">p5.Vector</a>
+      object.</p>
+    path: p5.Vector/copy
+  add:
+    description: >
+      <p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components.</p>
+
+      <p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2,
+      3)</code>,
+
+      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.add(v2)</code>, or
+
+      an array of numbers, as in <code>v.add([1, 2, 3])</code>.</p>
+
+      <p>If a value isn't provided for a component, it won't change. For
+
+      example, <code>v.add(4, 5)</code> adds 4 to <code>v.x</code>, 5 to
+      <code>v.y</code>, and 0 to <code>v.z</code>.
+
+      Calling <code>add()</code> with no arguments, as in <code>v.add()</code>,
+      has no effect.</p>
+
+      <p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
+      v1)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/add
+  rem:
+    description: >
+      <p>Performs modulo (remainder) division with a vector's <code>x</code>,
+      <code>y</code>, and <code>z</code>
+
+      components.</p>
+
+      <p><code>rem()</code> can use separate numbers, as in <code>v.rem(1, 2,
+      3)</code>,
+
+      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.rem(v2)</code>, or
+
+      an array of numbers, as in <code>v.rem([1, 2, 3])</code>.</p>
+
+      <p>If only one value is provided, as in <code>v.rem(2)</code>, then all
+      the components
+
+      will be set to their values modulo 2. If two values are provided, as in
+
+      <code>v.rem(2, 3)</code>, then <code>v.z</code> won't change. Calling
+      <code>rem()</code> with no
+
+      arguments, as in <code>v.rem()</code>, has no effect.</p>
+
+      <p>The static version of <code>rem()</code>, as in <code>p5.Vector.rem(v2,
+      v1)</code>, returns a
+
+      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
+      change the
+
+      originals.</p>
+    path: p5.Vector/rem
+  sub:
+    description: >
+      <p>Subtracts from a vector's <code>x</code>, <code>y</code>, and
+      <code>z</code> components.</p>
+
+      <p><code>sub()</code> can use separate numbers, as in <code>v.sub(1, 2,
+      3)</code>, another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.sub(v2)</code>, or an array
+
+      of numbers, as in <code>v.sub([1, 2, 3])</code>.</p>
+
+      <p>If a value isn't provided for a component, it won't change. For
+
+      example, <code>v.sub(4, 5)</code> subtracts 4 from <code>v.x</code>, 5
+      from <code>v.y</code>, and 0 from <code>v.z</code>.
+
+      Calling <code>sub()</code> with no arguments, as in <code>v.sub()</code>,
+      has no effect.</p>
+
+      <p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2,
+      v1)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/sub
+  mult:
+    description: >
+      <p>Multiplies a vector's <code>x</code>, <code>y</code>, and
+      <code>z</code> components.</p>
+
+      <p><code>mult()</code> can use separate numbers, as in <code>v.mult(1, 2,
+      3)</code>, another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.mult(v2)</code>, or an array
+
+      of numbers, as in <code>v.mult([1, 2, 3])</code>.</p>
+
+      <p>If only one value is provided, as in <code>v.mult(2)</code>, then all
+      the components
+
+      will be multiplied by 2. If a value isn't provided for a component, it
+
+      won't change. For example, <code>v.mult(4, 5)</code> multiplies
+      <code>v.x</code> by 4, <code>v.y</code> by 5,
+
+      and <code>v.z</code> by 1. Calling <code>mult()</code> with no arguments,
+      as in <code>v.mult()</code>, has
+
+      no effect.</p>
+
+      <p>The static version of <code>mult()</code>, as in
+      <code>p5.Vector.mult(v, 2)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/mult
+  div:
+    description: >
+      <p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components.</p>
+
+      <p><code>div()</code> can use separate numbers, as in <code>v.div(1, 2,
+      3)</code>, another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.div(v2)</code>, or an array
+
+      of numbers, as in <code>v.div([1, 2, 3])</code>.</p>
+
+      <p>If only one value is provided, as in <code>v.div(2)</code>, then all
+      the components
+
+      will be divided by 2. If a value isn't provided for a component, it
+
+      won't change. For example, <code>v.div(4, 5)</code> divides
+      <code>v.x</code> by, <code>v.y</code> by 5,
+
+      and <code>v.z</code> by 1. Calling <code>div()</code> with no arguments,
+      as in <code>v.div()</code>, has
+
+      no effect.</p>
+
+      <p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v,
+      2)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/div
+  mag:
+    description: >
+      <p>Calculates the magnitude (length) of the vector.</p>
+
+      <p>Use <a href="/reference/p5/mag/">mag()</a> to calculate the magnitude
+      of a 2D vector
+
+      using components as in <code>mag(x, y)</code>.</p>
+    path: p5.Vector/mag
+  magSq:
+    description: |
+      <p>Calculates the magnitude (length) of the vector squared.</p>
+    path: p5.Vector/magSq
+  dot:
+    description: >
+      <p>Calculates the dot product of two vectors.</p>
+
+      <p>The dot product is a number that describes the overlap between two
+      vectors.
+
+      Visually, the dot product can be thought of as the "shadow" one vector
+
+      casts on another. The dot product's magnitude is largest when two vectors
+
+      point in the same or opposite directions. Its magnitude is 0 when two
+
+      vectors form a right angle.</p>
+
+      <p>The version of <code>dot()</code> with one parameter interprets it as
+      another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+
+      <p>The version of <code>dot()</code> with multiple parameters interprets
+      them as the
+
+      <code>x</code>, <code>y</code>, and <code>z</code> components of another
+      vector.</p>
+
+      <p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1,
+      v2)</code>, is the same
+
+      as calling <code>v1.dot(v2)</code>.</p>
+    path: p5.Vector/dot
+  cross:
+    description: >
+      <p>Calculates the cross product of two vectors.</p>
+
+      <p>The cross product is a vector that points straight out of the plane
+      created
+
+      by two vectors. The cross product's magnitude is the area of the
+      parallelogram
+
+      formed by the original two vectors.</p>
+
+      <p>The static version of <code>cross()</code>, as in
+      <code>p5.Vector.cross(v1, v2)</code>, is the same
+
+      as calling <code>v1.cross(v2)</code>.</p>
+    path: p5.Vector/cross
+  dist:
+    description: >
+      <p>Calculates the distance between two points represented by vectors.</p>
+
+      <p>A point's coordinates can be represented by the components of a vector
+
+      that extends from the origin to the point.</p>
+
+      <p>The static version of <code>dist()</code>, as in
+      <code>p5.Vector.dist(v1, v2)</code>, is the same
+
+      as calling <code>v1.dist(v2)</code>.</p>
+
+      <p>Use <a href="/reference/p5/dist/">dist()</a> to calculate the distance
+      between points
+
+      using coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>
+    path: p5.Vector/dist
+  normalize:
+    description: >
+      <p>Scales the components of a <a
+      href="/reference/p5/p5.Vector">p5.Vector</a> object so
+
+      that its magnitude is 1.</p>
+
+      <p>The static version of <code>normalize()</code>,  as in
+      <code>p5.Vector.normalize(v)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/normalize
+  limit:
+    description: >
+      <p>Limits a vector's magnitude to a maximum value.</p>
+
+      <p>The static version of <code>limit()</code>, as in
+      <code>p5.Vector.limit(v, 5)</code>, returns a
+
+      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
+      change the
+
+      original.</p>
+    path: p5.Vector/limit
+  setMag:
+    description: >
+      <p>Sets a vector's magnitude to a given value.</p>
+
+      <p>The static version of <code>setMag()</code>, as in
+      <code>p5.Vector.setMag(v, 10)</code>, returns
+
+      a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
+      change the
+
+      original.</p>
+    path: p5.Vector/setMag
+  heading:
+    description: >
+      <p>Calculates the angle a 2D vector makes with the positive x-axis.</p>
+
+      <p>By convention, the positive x-axis has an angle of 0. Angles increase
+      in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>heading()</code> returns angles
+
+      in the units of the current <a
+      href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+      <p>The static version of <code>heading()</code>, as in
+      <code>p5.Vector.heading(v)</code>, works the
+
+      same way.</p>
+    path: p5.Vector/heading
+  setHeading:
+    description: >
+      <p>Rotates a 2D vector to a specific angle without changing its
+      magnitude.</p>
+
+      <p>By convention, the positive x-axis has an angle of 0. Angles increase
+      in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>setHeading()</code> uses
+
+      the units of the current <a
+      href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Vector/setHeading
+  rotate:
+    description: >
+      <p>Rotates a 2D vector by an angle without changing its magnitude.</p>
+
+      <p>By convention, the positive x-axis has an angle of 0. Angles increase
+      in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>rotate()</code> uses
+
+      the units of the current <a
+      href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+      <p>The static version of <code>rotate()</code>, as in
+      <code>p5.Vector.rotate(v, PI)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/rotate
+  angleBetween:
+    description: >
+      <p>Calculates the angle between two vectors.</p>
+
+      <p>The angles returned are signed, which means that
+
+      <code>v1.angleBetween(v2) === -v2.angleBetween(v1)</code>.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>angleBetween()</code> returns
+
+      angles in the units of the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Vector/angleBetween
+  lerp:
+    description: >
+      <p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code>
+      components that are proportionally the
+
+      same distance between two vectors.</p>
+
+      <p>The <code>amt</code> parameter is the amount to interpolate between the
+      old vector and
+
+      the new vector. 0.0 keeps all components equal to the old vector's, 0.5 is
+
+      halfway between, and 1.0 sets all components equal to the new
+      vector's.</p>
+
+      <p>The static version of <code>lerp()</code>, as in
+      <code>p5.Vector.lerp(v0, v1, 0.5)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/lerp
+  slerp:
+    description: >
+      <p>Calculates a new heading and magnitude that are between two
+      vectors.</p>
+
+      <p>The <code>amt</code> parameter is the amount to interpolate between the
+      old vector and
+
+      the new vector. 0.0 keeps the heading and magnitude equal to the old
+
+      vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
+
+      magnitude equal to the new vector's.</p>
+
+      <p><code>slerp()</code> differs from <a
+      href="/reference/p5.Vector/lerp/">lerp()</a> because
+
+      it interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets
+      <code>v0</code>'s
+
+      magnitude to a value halfway between its original magnitude and
+      <code>v1</code>'s.
+
+      Calling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>
+
+      <p>The static version of <code>slerp()</code>, as in
+      <code>p5.Vector.slerp(v0, v1, 0.5)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/slerp
+  reflect:
+    description: >
+      <p>Reflects a vector about a line in 2D or a plane in 3D.</p>
+
+      <p>The orientation of the line or plane is described by a normal vector
+      that
+
+      points away from the shape.</p>
+
+      <p>The static version of <code>reflect()</code>, as in
+      <code>p5.Vector.reflect(v, n)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/reflect
+  array:
+    description: |
+      <p>Returns the vector's components as an array of numbers.</p>
+    path: p5.Vector/array
+  equals:
+    description: >
+      <p>Checks whether all the vector's components are equal to another
+      vector's.</p>
+
+      <p><code>equals()</code> returns <code>true</code> if the vector's
+      components are all the same as another
+
+      vector's and <code>false</code> if not.</p>
+
+      <p>The version of <code>equals()</code> with one parameter interprets it
+      as another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+
+      <p>The version of <code>equals()</code> with multiple parameters
+      interprets them as the
+
+      components of another vector. Any missing parameters are assigned the
+      value
+
+      0.</p>
+
+      <p>The static version of <code>equals()</code>, as in
+      <code>p5.Vector.equals(v0, v1)</code>,
+
+      interprets both parameters as <a
+      href="/reference/p5/p5.Vector">p5.Vector</a> objects.</p>
+    path: p5.Vector/equals
+  fromAngle:
+    description: |
+      <p>Creates a new 2D vector from an angle.</p>
+    path: p5.Vector/fromAngle
+  fromAngles:
+    description: |
+      <p>Creates a new 3D vector from a pair of ISO spherical angles.</p>
+    path: p5.Vector/fromAngles
+  random2D:
+    description: |
+      <p>Creates a new 2D unit vector with a random heading.</p>
+    path: p5.Vector/random2D
+  random3D:
+    description: |
+      <p>Creates a new 3D unit vector with a random heading.</p>
+    path: p5.Vector/random3D
+  clampToZero:
+    description: >
+      <p>Replaces the components of a <a
+      href="/reference/p5/p5.Vector">p5.Vector</a> that are very close to zero
+      with zero.</p>
+
+      <p>In computers, handling numbers with decimals can give slightly
+      imprecise answers due to the way those numbers are represented.
+
+      This can make it hard to check if a number is zero, as it may be close but
+      not exactly zero.
+
+      This method rounds very close numbers to zero to make those checks
+      easier</p>
+
+      <p><a
+      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON/">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON</a></p>
+    path: p5.Vector/clampToZero
+properties:
+  x:
+    description: |
+      <p>The x component of the vector</p>
+    path: p5.Vector/x
+  'y':
+    description: |
+      <p>The y component of the vector</p>
+    path: p5.Vector/y
+  z:
+    description: |
+      <p>The z component of the vector</p>
+    path: p5.Vector/z
+chainable: false
+---
+
+
+# p5.Vector
diff --git a/src/content/reference/en/p5 copy/p5.XML.mdx b/src/content/reference/en/p5 copy/p5.XML.mdx
new file mode 100644
index 0000000000..71904fded2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.XML.mdx	
@@ -0,0 +1,321 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.XML.js#L9
+title: p5.XML
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: >
+  <p>A class to describe an XML object.</p>
+
+  <p>Each <code>p5.XML</code> object provides an easy way to interact with XML
+  data.
+
+  Extensible Markup Language
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
+  target="_blank">XML</a>)
+
+  is a standard format for sending data between applications. Like HTML, the
+
+  XML format is based on tags and attributes, as in
+
+  <code><time units="s">1234</time></code>.</p>
+
+  <p>Note: Use <a href="/reference/p5/loadXML/">loadXML()</a> to load external
+  XML files.</p>
+line: 9
+isConstructor: true
+example:
+  - |-
+
+    <div>
+    <code>
+    let myXML;
+
+    // Load the XML and create a p5.XML object.
+    function preload() {
+      myXML = loadXML('/assets/animals.xml');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get an array with all mammal tags.
+      let mammals = myXML.getChildren('mammal');
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(14);
+
+      // Iterate over the mammals array.
+      for (let i = 0; i < mammals.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Get the mammal's common name.
+        let name = mammals[i].getContent();
+
+        // Display the mammal's name.
+        text(name, 20, y);
+      }
+
+      describe(
+        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+methods:
+  getParent:
+    description: >
+      <p>Returns the element's parent element as a new <a
+      href="/reference/p5/p5.XML">p5.XML</a>
+
+      object.</p>
+    path: p5.XML/getParent
+  getName:
+    description: >
+      <p>Returns the element's name as a <code>String</code>.</p>
+
+      <p>An XML element's name is given by its tag. For example, the element
+
+      <code><language>JavaScript</language></code> has the name
+      <code>language</code>.</p>
+    path: p5.XML/getName
+  setName:
+    description: >
+      <p>Sets the element's tag name.</p>
+
+      <p>An XML element's name is given by its tag. For example, the element
+
+      <code><language>JavaScript</language></code> has the name
+      <code>language</code>.</p>
+
+      <p>The parameter, <code>name</code>, is the element's new name as a
+      string. For example,
+
+      calling <code>myXML.setName('planet')</code> will make the element's new
+      tag name
+
+      <code><planet></planet></code>.</p>
+    path: p5.XML/setName
+  hasChildren:
+    description: >
+      <p>Returns <code>true</code> if the element has child elements and
+      <code>false</code> if not.</p>
+    path: p5.XML/hasChildren
+  listChildren:
+    description: |
+      <p>Returns an array with the names of the element's child elements as
+      <code>String</code>s.</p>
+    path: p5.XML/listChildren
+  getChildren:
+    description: >
+      <p>Returns an array with the element's child elements as new
+
+      <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
+
+      <p>The parameter, <code>name</code>, is optional. If a string is passed,
+      as in
+
+      <code>myXML.getChildren('cat')</code>, then the method will only return
+      child elements
+
+      with the tag <code><cat></code>.</p>
+    path: p5.XML/getChildren
+  getChild:
+    description: >
+      <p>Returns the first matching child element as a new
+
+      <a href="/reference/p5/p5.XML">p5.XML</a> object.</p>
+
+      <p>The parameter, <code>name</code>, is optional. If a string is passed,
+      as in
+
+      <code>myXML.getChild('cat')</code>, then the first child element with the
+      tag
+
+      <code><cat></code> will be returned. If a number is passed, as in
+
+      <code>myXML.getChild(1)</code>, then the child element at that index will
+      be returned.</p>
+    path: p5.XML/getChild
+  addChild:
+    description: >
+      <p>Adds a new child element and returns a reference to it.</p>
+
+      <p>The parameter, <code>child</code>, is the <a
+      href="/reference/p5/p5.XML">p5.XML</a> object to add
+
+      as a child element. For example, calling
+      <code>myXML.addChild(otherXML)</code> inserts
+
+      <code>otherXML</code> as a child element of <code>myXML</code>.</p>
+    path: p5.XML/addChild
+  removeChild:
+    description: >
+      <p>Removes the first matching child element.</p>
+
+      <p>The parameter, <code>name</code>, is the child element to remove. If a
+      string is
+
+      passed, as in <code>myXML.removeChild('cat')</code>, then the first child
+      element
+
+      with the tag <code><cat></code> will be removed. If a number is passed, as
+      in
+
+      <code>myXML.removeChild(1)</code>, then the child element at that index
+      will be
+
+      removed.</p>
+    path: p5.XML/removeChild
+  getAttributeCount:
+    description: |
+      <p>Returns the number of attributes the element has.</p>
+    path: p5.XML/getAttributeCount
+  listAttributes:
+    description: >
+      <p>Returns an <code>Array</code> with the names of the element's
+      attributes.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/listAttributes
+  hasAttribute:
+    description: >
+      <p>Returns <code>true</code> if the element has a given attribute and
+      <code>false</code> if not.</p>
+
+      <p>The parameter, <code>name</code>, is a string with the name of the
+      attribute being
+
+      checked.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/hasAttribute
+  getNum:
+    description: >
+      <p>Return an attribute's value as a <code>Number</code>.</p>
+
+      <p>The first parameter, <code>name</code>, is a string with the name of
+      the attribute
+
+      being checked. For example, calling <code>myXML.getNum('id')</code>
+      returns the
+
+      element's <code>id</code> attribute as a number.</p>
+
+      <p>The second parameter, <code>defaultValue</code>, is optional. If a
+      number is passed,
+
+      as in <code>myXML.getNum('id', -1)</code>, it will be returned if the
+      attribute
+
+      doesn't exist or can't be converted to a number.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/getNum
+  getString:
+    description: >
+      <p>Return an attribute's value as a string.</p>
+
+      <p>The first parameter, <code>name</code>, is a string with the name of
+      the attribute
+
+      being checked. For example, calling <code>myXML.getString('color')</code>
+      returns the
+
+      element's <code>id</code> attribute as a string.</p>
+
+      <p>The second parameter, <code>defaultValue</code>, is optional. If a
+      string is passed,
+
+      as in <code>myXML.getString('color', 'deeppink')</code>, it will be
+      returned if the
+
+      attribute doesn't exist.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/getString
+  setAttribute:
+    description: >
+      <p>Sets an attribute to a given value.</p>
+
+      <p>The first parameter, <code>name</code>, is a string with the name of
+      the attribute
+
+      being set.</p>
+
+      <p>The second parameter, <code>value</code>, is the attribute's new value.
+      For example,
+
+      calling <code>myXML.setAttribute('id', 123)</code> sets the
+      <code>id</code> attribute to the
+
+      value 123.</p>
+    path: p5.XML/setAttribute
+  getContent:
+    description: >
+      <p>Returns the element's content as a <code>String</code>.</p>
+
+      <p>The parameter, <code>defaultValue</code>, is optional. If a string is
+      passed, as in
+
+      <code>myXML.getContent('???')</code>, it will be returned if the element
+      has no
+
+      content.</p>
+    path: p5.XML/getContent
+  setContent:
+    description: >
+      <p>Sets the element's content.</p>
+
+      <p>An element's content is the text between its tags. For example, the
+      element
+
+      <code><language>JavaScript</language></code> has the content
+      <code>JavaScript</code>.</p>
+
+      <p>The parameter, <code>content</code>, is a string with the element's new
+      content.</p>
+    path: p5.XML/setContent
+  serialize:
+    description: >
+      <p>Returns the element as a <code>String</code>.</p>
+
+      <p><code>myXML.serialize()</code> is useful for sending the element over
+      the network or
+
+      saving it to a file.</p>
+    path: p5.XML/serialize
+chainable: false
+---
+
+
+# p5.XML
diff --git a/src/content/reference/en/p5 copy/p5.mdx b/src/content/reference/en/p5 copy/p5.mdx
new file mode 100644
index 0000000000..c51b8f8bff
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L12
+title: p5
+module: IO
+submodule: Output
+file: src/core/main.js
+description: >
+  <p>This is the p5 instance constructor.</p>
+
+  <p>A p5 instance holds all the properties and methods related to
+
+  a p5 sketch.  It expects an incoming sketch closure and it can also
+
+  take an optional node parameter for attaching the generated p5 canvas
+
+  to a node.  The sketch closure takes the newly created p5 instance as
+
+  its sole argument and may optionally set <a
+  href="/reference/p5/preload/">preload()</a>,
+
+  <a href="/reference/p5/setup/">setup()</a>, and/or
+
+  <a href="/reference/p5/draw/">draw()</a> properties on it for running a
+  sketch.</p>
+
+  <p>A p5 sketch can run in "global" or "instance" mode:
+
+  "global"   - all properties and methods are attached to the window
+
+  "instance" - all properties and methods are bound to this p5 object</p>
+line: 12
+isConstructor: true
+params:
+  - name: sketch
+    description: |
+      <p>a closure that can set optional <a href="#/p5/preload">preload()</a>,
+                                   <a href="#/p5/setup">setup()</a>, and/or <a href="#/p5/draw">draw()</a> properties on the
+                                   given p5 instance</p>
+    type: Function(p5)
+  - name: node
+    description: |
+      <p>element to attach canvas to</p>
+    type: HTMLElement
+    optional: true
+chainable: false
+---
+
+
+# p5
diff --git a/src/content/reference/en/p5 copy/pAccelerationX.mdx b/src/content/reference/en/p5 copy/pAccelerationX.mdx
new file mode 100644
index 0000000000..ab1f3e49d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pAccelerationX.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L90
+title: pAccelerationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationX always contains the acceleration of the
+  device along the x axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 90
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# pAccelerationX
diff --git a/src/content/reference/en/p5 copy/pAccelerationY.mdx b/src/content/reference/en/p5 copy/pAccelerationY.mdx
new file mode 100644
index 0000000000..188ae8f77c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pAccelerationY.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L100
+title: pAccelerationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationY always contains the acceleration of the
+  device along the y axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 100
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# pAccelerationY
diff --git a/src/content/reference/en/p5 copy/pAccelerationZ.mdx b/src/content/reference/en/p5 copy/pAccelerationZ.mdx
new file mode 100644
index 0000000000..f291e6b707
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pAccelerationZ.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L110
+title: pAccelerationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationZ always contains the acceleration of the
+  device along the z axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 110
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# pAccelerationZ
diff --git a/src/content/reference/en/p5 copy/pRotationX.mdx b/src/content/reference/en/p5 copy/pRotationX.mdx
new file mode 100644
index 0000000000..03d80f8ae5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pRotationX.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L234
+title: pRotationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable pRotationX always contains the rotation of the
+
+  device along the x axis in the frame previous to the current frame.
+
+  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
+  DEGREES,
+
+  the value will be -180 to 180. If it is set to RADIANS, the value will
+
+  be -PI to PI.</p>
+
+  <p>pRotationX can also be used with rotationX to determine the rotate
+
+  direction of the device along the X-axis.</p>
+line: 234
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationX - pRotationX < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    // Simple range conversion to make things simpler.
+    // This is not absolutely necessary but the logic
+    // will be different in that case.
+
+    let rX = rotationX + 180;
+    let pRX = pRotationX + 180;
+
+    if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
+      rotateDirection = 'clockwise';
+    } else if (rX - pRX < 0 || rX - pRX > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pRotationX
diff --git a/src/content/reference/en/p5 copy/pRotationY.mdx b/src/content/reference/en/p5 copy/pRotationY.mdx
new file mode 100644
index 0000000000..3a15f47f43
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pRotationY.mdx	
@@ -0,0 +1,62 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L278
+title: pRotationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable pRotationY always contains the rotation of the
+
+  device along the y axis in the frame previous to the current frame.
+
+  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
+  DEGREES,
+
+  the value will be -90 to 90. If it is set to RADIANS, the value will
+
+  be -PI/2 to PI/2.</p>
+
+  <p>pRotationY can also be used with rotationY to determine the rotate
+
+  direction of the device along the Y-axis.</p>
+line: 278
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationY - pRotationY < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    // Simple range conversion to make things simpler.
+    // This is not absolutely necessary but the logic
+    // will be different in that case.
+
+    let rY = rotationY + 180;
+    let pRY = pRotationY + 180;
+
+    if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
+      rotateDirection = 'clockwise';
+    } else if (rY - pRY < 0 || rY - pRY > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pRotationY
diff --git a/src/content/reference/en/p5 copy/pRotationZ.mdx b/src/content/reference/en/p5 copy/pRotationZ.mdx
new file mode 100644
index 0000000000..4ae6d5e63f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pRotationZ.mdx	
@@ -0,0 +1,58 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L321
+title: pRotationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable pRotationZ always contains the rotation of the
+
+  device along the z axis in the frame previous to the current frame.
+
+  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
+  DEGREES,
+
+  the value will be 0 to 360. If it is set to RADIANS, the value will
+
+  be 0 to 2*PI.</p>
+
+  <p>pRotationZ can also be used with rotationZ to determine the rotate
+
+  direction of the device along the Z-axis.</p>
+line: 321
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationZ - pRotationZ < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    if (
+      (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
+      rotationZ - pRotationZ < -270
+    ) {
+      rotateDirection = 'clockwise';
+    } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pRotationZ
diff --git a/src/content/reference/en/p5 copy/paletteLerp.mdx b/src/content/reference/en/p5 copy/paletteLerp.mdx
new file mode 100644
index 0000000000..54e8c9f885
--- /dev/null
+++ b/src/content/reference/en/p5 copy/paletteLerp.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1079
+title: paletteLerp
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Blends multiple colors to find a color between them.</p>
+
+  <p>The <code>amt</code> parameter specifies the amount to interpolate between
+  the color
+
+  stops which are colors at each <code>amt</code> value "location" with
+  <code>amt</code> values
+
+  that are between 2 color stops interpolating between them based on its
+  relative
+
+  distance to both.</p>
+
+  <p>The way that colors are interpolated depends on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 1079
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(400, 400);
+    }
+
+    function draw() {
+      // The background goes from white to red to green to blue fill
+      background(paletteLerp([
+        ['white', 0],
+        ['red', 0.05],
+        ['green', 0.25],
+        ['blue', 1]
+      ], millis() / 10000 % 1));
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: colors_stops
+    description: |
+      <p>color stops to interpolate from</p>
+    type: '[p5.Color, Number][]'
+  - name: amt
+    description: |
+      <p>number to use to interpolate relative to color stops</p>
+    type: Number
+return:
+  description: interpolated color.
+  type: p5.Color
+chainable: false
+---
+
+
+# paletteLerp
diff --git a/src/content/reference/en/p5 copy/panorama.mdx b/src/content/reference/en/p5 copy/panorama.mdx
new file mode 100644
index 0000000000..97ee1fd9ca
--- /dev/null
+++ b/src/content/reference/en/p5 copy/panorama.mdx	
@@ -0,0 +1,76 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1021
+title: panorama
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates an immersive 3D background.</p>
+
+  <p><code>panorama()</code> transforms images containing 360˚ content, such as
+  maps or
+
+  HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
+
+  space requires changing the camera's perspective with functions such as
+
+  <a href="/reference/p5/orbitControl/">orbitControl()</a> or
+
+  <a href="/reference/p5/camera/">camera()</a>.</p>
+line: 1021
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(100 ,100 ,WEBGL);
+
+      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
+    }
+
+    function draw() {
+      // Add the panorama.
+      panorama(img);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Use the image as a light source.
+      imageLight(img);
+
+      // Style the sphere.
+      noStroke();
+      specularMaterial(50);
+      shininess(200);
+      metalness(100);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: img
+    description: |
+      <p>360˚ image to use as the background.</p>
+    type: p5.Image
+chainable: false
+---
+
+
+# panorama
diff --git a/src/content/reference/en/p5 copy/perspective.mdx b/src/content/reference/en/p5 copy/perspective.mdx
new file mode 100644
index 0000000000..21cca35746
--- /dev/null
+++ b/src/content/reference/en/p5 copy/perspective.mdx	
@@ -0,0 +1,194 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L148
+title: perspective
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets a perspective projection for the current camera in a 3D sketch.</p>
+
+  <p>In a perspective projection, shapes that are further from the camera appear
+
+  smaller than shapes that are near the camera. This technique, called
+
+  foreshortening, creates realistic 3D scenes. It’s applied by default in
+
+  WebGL mode.</p>
+
+  <p><code>perspective()</code> changes the camera’s perspective by changing its
+  viewing
+
+  frustum. The frustum is the volume of space that’s visible to the camera.
+
+  Its shape is a pyramid with its top cut off. The camera is placed where
+
+  the top of the pyramid should be and views everything between the frustum’s
+
+  top (near) plane and its bottom (far) plane.</p>
+
+  <p>The first parameter, <code>fovy</code>, is the camera’s vertical field of
+  view. It’s
+
+  an angle that describes how tall or narrow a view the camera has. For
+
+  example, calling <code>perspective(0.5)</code> sets the camera’s vertical
+  field of
+
+  view to 0.5 radians. By default, <code>fovy</code> is calculated based on the
+  sketch’s
+
+  height and the camera’s default z-coordinate, which is 800. The formula for
+
+  the default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>
+
+  <p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio.
+  It’s a number
+
+  that describes the ratio of the top plane’s width to its height. For
+
+  example, calling <code>perspective(0.5, 1.5)</code> sets the camera’s field of
+  view to
+
+  0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner
+
+  on a square canvas. By default, aspect is set to <code>width /
+  height</code>.</p>
+
+  <p>The third parameter, <code>near</code>, is the distance from the camera to
+  the near
+
+  plane. For example, calling <code>perspective(0.5, 1.5, 100)</code> sets the
+  camera’s
+
+  field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
+
+  plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
+
+  from the camera won’t be visible. By default, near is set to <code>0.1 *
+  800</code>,
+
+  which is 1/10th the default distance between the camera and the origin.</p>
+
+  <p>The fourth parameter, <code>far</code>, is the distance from the camera to
+  the far
+
+  plane. For example, calling <code>perspective(0.5, 1.5, 100, 10000)</code>
+  sets the
+
+  camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
+
+  near plane 100 pixels from the camera, and places the far plane 10,000
+
+  pixels from the camera. Any shapes drawn more than 10,000 pixels from the
+
+  camera won’t be visible. By default, far is set to <code>10 * 800</code>,
+  which is 10
+
+  times the default distance between the camera and the origin.</p>
+
+  <p>Note: <code>perspective()</code> can only be used in WebGL mode.</p>
+line: 148
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to squeeze the box.
+
+    let isSqueezed = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Place the camera at the top-right.
+      camera(400, -400, 800);
+
+      if (isSqueezed === true) {
+        // Set fovy to 0.2.
+        // Set aspect to 1.5.
+        perspective(0.2, 1.5);
+      }
+
+      // Draw the box.
+      box();
+    }
+
+    // Change the camera's perspective when the user double-clicks.
+    function doubleClicked() {
+      isSqueezed = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Place the camera at the top-right.
+      camera(400, -400, 800);
+
+      // Set fovy to 0.2.
+      // Set aspect to 1.5.
+      // Set near to 600.
+      // Set far to 1200.
+      perspective(0.2, 1.5, 600, 1200);
+
+      // Move the origin away from the camera.
+      let x = -frameCount;
+      let y = frameCount;
+      let z = -2 * frameCount;
+      translate(x, y, z);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fovy
+    description: |
+      <p>camera frustum vertical field of view. Defaults to
+                                <code>2 * atan(height / 2 / 800)</code>.</p>
+    type: Number
+    optional: true
+  - name: aspect
+    description: |
+      <p>camera frustum aspect ratio. Defaults to
+                                <code>width / height</code>.</p>
+    type: Number
+    optional: true
+  - name: near
+    description: |
+      <p>distance from the camera to the near clipping plane.
+                                Defaults to <code>0.1 * 800</code>.</p>
+    type: Number
+    optional: true
+  - name: far
+    description: |
+      <p>distance from the camera to the far clipping plane.
+                                Defaults to <code>10 * 800</code>.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# perspective
diff --git a/src/content/reference/en/p5 copy/pixelDensity.mdx b/src/content/reference/en/p5 copy/pixelDensity.mdx
new file mode 100644
index 0000000000..808ebab227
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pixelDensity.mdx	
@@ -0,0 +1,90 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1005
+title: pixelDensity
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Sets the pixel density or returns the current density.</p>
+
+  <p>Computer displays are grids of little lights called <em>pixels</em>. A
+
+  display's <em>pixel density</em> describes how many pixels it packs into an
+
+  area. Displays with smaller pixels have a higher pixel density and create
+
+  sharper images.</p>
+
+  <p><code>pixelDensity()</code> sets the pixel scaling for high pixel density
+  displays.
+
+  By default, the pixel density is set to match the display's density.
+
+  Calling <code>pixelDensity(1)</code> turn this off.</p>
+
+  <p>Calling <code>pixelDensity()</code> without an argument returns the current
+  pixel
+
+  density.</p>
+line: 1005
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 1.
+      pixelDensity(1);
+
+      // Create a canvas and draw
+      // a circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A fuzzy white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 3.
+      pixelDensity(3);
+
+      // Create a canvas, paint the
+      // background, and draw a
+      // circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A sharp white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1005
+    params:
+      - name: val
+        description: |
+          <p>desired pixel density.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1059
+    params: []
+    return:
+      description: current pixel density of the sketch.
+      type: Number
+chainable: true
+---
+
+
+# pixelDensity
diff --git a/src/content/reference/en/p5 copy/pixels.mdx b/src/content/reference/en/p5 copy/pixels.mdx
new file mode 100644
index 0000000000..7185d708bf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pixels.mdx	
@@ -0,0 +1,173 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L12
+title: pixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>An array containing the color of each pixel on the canvas.</p>
+
+  <p>Colors are stored as numbers representing red, green, blue, and alpha
+
+  (RGBA) values. <code>pixels</code> is a one-dimensional array for performance
+  reasons.</p>
+
+  <p>Each pixel occupies four elements in the <code>pixels</code> array, one for
+  each RGBA
+
+  value. For example, the pixel at coordinates (0, 0) stores its RGBA values
+
+  at <code>pixels[0]</code>, <code>pixels[1]</code>, <code>pixels[2]</code>, and
+  <code>pixels[3]</code>, respectively.
+
+  The next pixel at coordinates (1, 0) stores its RGBA values at
+  <code>pixels[4]</code>,
+
+  <code>pixels[5]</code>, <code>pixels[6]</code>, and <code>pixels[7]</code>.
+  And so on. The <code>pixels</code> array
+
+  for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.</p>
+
+  <p>Some displays use several smaller pixels to set the color at a single
+
+  point. The <a href="/reference/p5/pixelDensity/">pixelDensity()</a> function
+  returns
+
+  the pixel density of the canvas. High density displays often have a
+
+  <a href="/reference/p5/pixelDensity/">pixelDensity()</a> of 2. On such a
+  display, the
+
+  <code>pixels</code> array for a 100×100 canvas has 200 × 200 × 4 =
+
+  160,000 elements.</p>
+
+  <p>Accessing the RGBA values for a point on the canvas requires a little math
+
+  as shown below. The <a href="/reference/p5/loadPixels/">loadPixels()</a>
+  function
+
+  must be called before accessing the <code>pixels</code> array. The
+
+  <a href="/reference/p5/updatePixels/">updatePixels()</a> function must be
+  called
+
+  after any changes are made.</p>
+line: 12
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Set the dot's coordinates.
+      let x = 50;
+      let y = 50;
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Set the pixel(s) at the center of the canvas black.
+      for (let i = 0; i < d; i += 1) {
+        for (let j = 0; j < d; j += 1) {
+          let index = 4 * ((y * d + j) * width * d + (x * d + i));
+          // Red.
+          pixels[index] = 0;
+          // Green.
+          pixels[index + 1] = 0;
+          // Blue.
+          pixels[index + 2] = 0;
+          // Alpha.
+          pixels[index + 3] = 255;
+        }
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A black dot in the middle of a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Make the top half of the canvas red.
+      for (let i = 0; i < halfImage; i += 4) {
+        // Red.
+        pixels[i] = 255;
+        // Green.
+        pixels[i + 1] = 0;
+        // Blue.
+        pixels[i + 2] = 0;
+        // Alpha.
+        pixels[i + 3] = 255;
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A red rectangle drawn above a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let pink = color(255, 102, 204);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Make the top half of the canvas red.
+      for (let i = 0; i < halfImage; i += 4) {
+        pixels[i] = red(pink);
+        pixels[i + 1] = green(pink);
+        pixels[i + 2] = blue(pink);
+        pixels[i + 3] = alpha(pink);
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A pink rectangle drawn above a gray rectangle.');
+    }
+    </code>
+    </div>
+class: p5
+type: 'Number[]'
+---
+
+
+# pixels
diff --git a/src/content/reference/en/p5 copy/plane.mdx b/src/content/reference/en/p5 copy/plane.mdx
new file mode 100644
index 0000000000..eefeb29b7a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/plane.mdx	
@@ -0,0 +1,152 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L866
+title: plane
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a plane.</p>
+
+  <p>A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
+
+  similar to a rectangle and offers advanced drawing features in WebGL mode.</p>
+
+  <p>The first parameter, <code>width</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>plane(20)</code>, it sets the plane’s width and height. By default,
+  <code>width</code> is
+
+  50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>plane(20, 30)</code>, it sets the plane’s height. By default,
+  <code>height</code> is
+
+  set to the plane’s <code>width</code>.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>plane(20, 30, 5)</code> it sets the number of triangle
+  subdivisions to use
+
+  along the x-axis. All 3D shapes are made by connecting triangles to form
+
+  their surfaces. By default, <code>detailX</code> is 1.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>plane(20, 30, 5, 7)</code> it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailY</code> is 1.</p>
+
+  <p>Note: <code>plane()</code> can only be used in WebGL mode.</p>
+line: 866
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white plane on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the plane.
+      plane();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white plane on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the plane.
+      // Set its width and height to 30.
+      plane(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white plane on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the plane.
+      // Set its width to 30 and height to 50.
+      plane(30, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width of the plane.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the plane.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# plane
diff --git a/src/content/reference/en/p5 copy/pmouseX.mdx b/src/content/reference/en/p5 copy/pmouseX.mdx
new file mode 100644
index 0000000000..5f5e8ff7f7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pmouseX.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L333
+title: pmouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's previous
+  horizontal
+
+  position.</p>
+
+  <p><code>pmouseX</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. Its value is
+
+  <a href="/reference/p5/mouseX/">mouseX</a> from the previous frame. For
+  example, if
+
+  the mouse was 50 pixels from the left edge of the canvas during the last
+
+  frame, then <code>pmouseX</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>pmouseX</code> will hold
+  the
+
+  x-coordinate of the last touch point.</p>
+
+  <p>Note: <code>pmouseX</code> is reset to the current <a
+  href="/reference/p5/mouseX/">mouseX</a>
+
+  value at the start of each touch event.</p>
+line: 333
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      line(pmouseX, pmouseY, mouseX, mouseY);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let pmx = pmouseX - 50;
+      let pmy = pmouseY - 50;
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Draw the line.
+      line(pmx, pmy, mx, my);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pmouseX
diff --git a/src/content/reference/en/p5 copy/pmouseY.mdx b/src/content/reference/en/p5 copy/pmouseY.mdx
new file mode 100644
index 0000000000..558747e43f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pmouseY.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L398
+title: pmouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's previous
+  vertical
+
+  position.</p>
+
+  <p><code>pmouseY</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. Its value is
+
+  <a href="/reference/p5/mouseY/">mouseY</a> from the previous frame. For
+  example, if
+
+  the mouse was 50 pixels from the top edge of the canvas during the last
+
+  frame, then <code>pmouseY</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>pmouseY</code> will hold
+  the
+
+  y-coordinate of the last touch point.</p>
+
+  <p>Note: <code>pmouseY</code> is reset to the current <a
+  href="/reference/p5/mouseY/">mouseY</a>
+
+  value at the start of each touch event.</p>
+line: 398
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      line(pmouseX, pmouseY, mouseX, mouseY);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let pmx = pmouseX - 50;
+      let pmy = pmouseY - 50;
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Draw the line.
+      line(pmx, pmy, mx, my);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pmouseY
diff --git a/src/content/reference/en/p5 copy/point.mdx b/src/content/reference/en/p5 copy/point.mdx
new file mode 100644
index 0000000000..7912c06cbb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/point.mdx	
@@ -0,0 +1,229 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L721
+title: point
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a single point in space.</p>
+
+  <p>A point's default width is one pixel. To color a point, use the
+
+  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
+  use the
+
+  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A point
+
+  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
+  won't
+
+  affect the point's color.</p>
+
+  <p>The version of <code>point()</code> with two parameters allows the point's
+  location to
+
+  be set with its x- and y-coordinates, as in <code>point(10, 20)</code>.</p>
+
+  <p>The version of <code>point()</code> with three parameters allows the point
+  to be drawn
+
+  in 3D space with x-, y-, and z-coordinates, as in <code>point(10, 20,
+  30)</code>.
+
+  Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
+
+  <p>The version of <code>point()</code> with one parameter allows the point's
+  location to
+
+  be set with a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+line: 721
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+
+      // Making point to 5 pixels
+      strokeWeight(5);
+
+
+      // Top-left.
+      point(30, 20);
+
+      // Top-right.
+      point(85, 20);
+
+      // Bottom-right.
+      point(85, 75);
+
+      // Bottom-left.
+      point(30, 75);
+
+      describe(
+        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+
+      // Making point to 5 pixels.
+      strokeWeight(5);
+
+
+      // Top-left.
+      point(30, 20);
+
+      // Top-right.
+      point(70, 20);
+
+      // Style the next points.
+      stroke('purple');
+      strokeWeight(10);
+
+      // Bottom-right.
+      point(70, 80);
+
+      // Bottom-left.
+      point(30, 80);
+
+      describe(
+        'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+
+      // Making point to 5 pixels.
+      strokeWeight(5);
+
+
+      // Top-left.
+      let a = createVector(30, 20);
+      point(a);
+
+      // Top-right.
+      let b = createVector(70, 20);
+      point(b);
+
+      // Bottom-right.
+      let c = createVector(70, 80);
+      point(c);
+
+      // Bottom-left.
+      let d = createVector(30, 80);
+      point(d);
+
+      describe(
+        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Two purple points drawn on a gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the points.
+      stroke('purple');
+      strokeWeight(10);
+
+      // Top-left.
+      point(-20, -30);
+
+      // Bottom-right.
+      point(20, 30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Two purple points drawn on a gray canvas. The scene spins slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Style the points.
+      stroke('purple');
+      strokeWeight(10);
+
+      // Top-left.
+      point(-20, -30, 0);
+
+      // Bottom-right.
+      point(20, 30, -50);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 721
+    params:
+      - name: x
+        description: |
+          <p>the x-coordinate.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>the y-coordinate.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>the z-coordinate (for WebGL mode).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 900
+    params:
+      - name: coordinateVector
+        description: |
+          <p>the coordinate vector.</p>
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# point
diff --git a/src/content/reference/en/p5 copy/pointLight.mdx b/src/content/reference/en/p5 copy/pointLight.mdx
new file mode 100644
index 0000000000..c6f10715b9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pointLight.mdx	
@@ -0,0 +1,329 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L683
+title: pointLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines from a point in all directions.</p>
+
+  <p>Point lights are like light bulbs that shine in all directions. They can be
+
+  placed at different positions to achieve different lighting effects. A
+
+  maximum of 5 point lights can be active at once.</p>
+
+  <p>There are four ways to call <code>pointLight()</code> with parameters to
+  set the
+
+  light’s color and position.</p>
+
+  <p>The first way to call <code>pointLight()</code> has six parameters. The
+  first three
+
+  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
+  light’s color using the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The last three parameters,
+  <code>x</code>,
+
+  <code>y</code>, and <code>z</code>, set the light’s position. For example,
+
+  <code>pointLight(255, 0, 0, 50, 0, 0)</code> creates a red <code>(255, 0,
+  0)</code> light that
+
+  shines from the coordinates <code>(50, 0, 0)</code>.</p>
+
+  <p>The second way to call <code>pointLight()</code> has four parameters. The
+  first three
+
+  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
+  light’s color using the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter,
+  position sets
+
+  the light’s position using a <a href="/reference/p5/p5.Vector">p5.Vector</a>
+  object.
+
+  For example, <code>pointLight(255, 0, 0, lightPos)</code> creates a red
+  <code>(255, 0, 0)</code>
+
+  light that shines from the position set by the <code>lightPos</code>
+  vector.</p>
+
+  <p>The third way to call <code>pointLight()</code> has four parameters. The
+  first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
+  the light’s position. For
+
+  example, <code>directionalLight(myColor, 50, 0, 0)</code> creates a light that
+  shines
+
+  from the coordinates <code>(50, 0, 0)</code> with the color value of
+  <code>myColor</code>.</p>
+
+  <p>The fourth way to call <code>pointLight()</code> has two parameters. The
+  first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  second parameter, <code>position</code>, sets the light’s position using a
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
+
+  <code>directionalLight(myColor, lightPos)</code> creates a light that shines
+  from the
+
+  position set by the <code>lightPos</code> vector with the color value of
+  <code>myColor</code>.</p>
+line: 683
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to turn on the point light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the light.
+      if (isLit === true) {
+        // Add a red point light from above.
+        // Use RGB values and XYZ coordinates.
+        pointLight(255, 0, 0, 0, -150, 0);
+      }
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the point light when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red point light from above.
+      // Use a p5.Color object and XYZ directions.
+      let c = color(255, 0, 0);
+      pointLight(c, 0, -150, 0);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red point light from above.
+      // Use a p5.Color object and a p5.Vector object.
+      let c = color(255, 0, 0);
+      let lightPos = createVector(0, -150, 0);
+      pointLight(c, lightPos);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red point light that points to the center of the scene.
+      // Use a p5.Color object and a p5.Vector object.
+      let c = color(255, 0, 0);
+      let lightPos = createVector(0, 0, 65);
+      pointLight(c, lightPos);
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw a sphere up and to the left.
+      push();
+      translate(-25, -25, 25);
+      sphere(10);
+      pop();
+
+      // Draw a box up and to the right.
+      push();
+      translate(25, -25, 25);
+      sphere(10);
+      pop();
+
+      // Draw a sphere down and to the left.
+      push();
+      translate(-25, 25, 25);
+      sphere(10);
+      pop();
+
+      // Draw a box down and to the right.
+      push();
+      translate(25, 25, 25);
+      sphere(10);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 683
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: x
+        description: |
+          <p>x-coordinate of the light.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the light.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the light.</p>
+        type: Number
+    chainable: 1
+  - line: 890
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: position
+        description: |
+          <p>position of the light as a
+                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
+        type: p5.Vector
+    chainable: 1
+  - line: 900
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                                                   an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+    chainable: 1
+  - line: 910
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: position
+        description: ''
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# pointLight
diff --git a/src/content/reference/en/p5 copy/pop.mdx b/src/content/reference/en/p5 copy/pop.mdx
new file mode 100644
index 0000000000..72b5c1db21
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pop.mdx	
@@ -0,0 +1,20 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L553
+title: pop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: "<p>Ends a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
+line: 553
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
+class: p5
+chainable: false
+---
+
+
+# pop
diff --git a/src/content/reference/en/p5 copy/pow.mdx b/src/content/reference/en/p5 copy/pow.mdx
new file mode 100644
index 0000000000..18201ec3c2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pow.mdx	
@@ -0,0 +1,67 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L815
+title: pow
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates exponential expressions such as <var>2<sup>3</sup></var>.</p>
+  <p>For example, <code>pow(2, 3)</code> evaluates the expression
+  2 × 2 × 2. <code>pow(2, -3)</code> evaluates 1 ÷
+  (2 × 2 × 2).</p>
+line: 815
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the base of the exponent.
+      let base = 3;
+
+      // Top-left.
+      let d = pow(base, 1);
+      circle(10, 10, d);
+
+      // Left-center.
+      d = pow(base, 2);
+      circle(20, 20, d);
+
+      // Right-center.
+      d = pow(base, 3);
+      circle(40, 40, d);
+
+      // Bottom-right.
+      d = pow(base, 4);
+      circle(80, 80, d);
+
+      describe('A series of circles that grow exponentially from top left to bottom right.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>base of the exponential expression.</p>
+    type: Number
+  - name: e
+    description: |
+      <p>power by which to raise the base.</p>
+    type: Number
+return:
+  description: n^e.
+  type: Number
+chainable: false
+---
+
+
+# pow
diff --git a/src/content/reference/en/p5 copy/preload.mdx b/src/content/reference/en/p5 copy/preload.mdx
new file mode 100644
index 0000000000..66d5db4378
--- /dev/null
+++ b/src/content/reference/en/p5 copy/preload.mdx	
@@ -0,0 +1,70 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L41
+title: preload
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>A function that's called once to load assets before the sketch runs.</p>
+
+  <p>Declaring the function <code>preload()</code> sets a code block to run once
+
+  automatically before <a href="/reference/p5/setup/">setup()</a> or
+
+  <a href="/reference/p5/draw/">draw()</a>. It's used to load assets including
+
+  multimedia files, fonts, data, and 3D models:</p>
+
+  <pre><code class="language-js">function preload() {
+    // Code to run before the rest of the sketch.
+  }
+
+  </code></pre>
+
+  <p>Functions such as <a href="/reference/p5/loadImage/">loadImage()</a>,
+
+  <a href="/reference/p5/loadFont/">loadFont()</a>,
+
+  <a href="/reference/p5/loadJSON/">loadJSON()</a>, and
+
+  <a href="/reference/p5/loadModel/">loadModel()</a> are guaranteed to either
+
+  finish loading or raise an error if they're called within
+  <code>preload()</code>.
+
+  Doing so ensures that assets are available when the sketch begins
+
+  running.</p>
+line: 41
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe('A red brick wall.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# preload
diff --git a/src/content/reference/en/p5 copy/print.mdx b/src/content/reference/en/p5 copy/print.mdx
new file mode 100644
index 0000000000..50137586ae
--- /dev/null
+++ b/src/content/reference/en/p5 copy/print.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L21
+title: print
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Displays text in the web browser's console.</p>
+
+  <p><code>print()</code> is helpful for printing values while debugging. Each
+  call to
+
+  <code>print()</code> creates a new line of text.</p>
+
+  <p>Note: Call <code>print('\n')</code> to print a blank line. Calling
+  <code>print()</code> without
+
+  an argument opens the browser's dialog for printing documents.</p>
+line: 21
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Prints "hello, world" to the console.
+      print('hello, world');
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let name = 'ada';
+      // Prints "hello, ada" to the console.
+      print(`hello, ${name}`);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: contents
+    description: |
+      <p>content to print to the console.</p>
+    type: Any
+chainable: false
+---
+
+
+# print
diff --git a/src/content/reference/en/p5 copy/push.mdx b/src/content/reference/en/p5 copy/push.mdx
new file mode 100644
index 0000000000..ee1a386cee
--- /dev/null
+++ b/src/content/reference/en/p5 copy/push.mdx	
@@ -0,0 +1,20 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L269
+title: push
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: "<p>Begins a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
+line: 269
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
+class: p5
+chainable: false
+---
+
+
+# push
diff --git a/src/content/reference/en/p5 copy/pwinMouseX.mdx b/src/content/reference/en/p5 copy/pwinMouseX.mdx
new file mode 100644
index 0000000000..cb869aea71
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pwinMouseX.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L545
+title: pwinMouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's previous horizontal
+  position
+
+  within the browser.</p>
+
+  <p><code>pwinMouseX</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. Its value is
+
+  <a href="/reference/p5/winMouseX/">winMouseX</a> from the previous frame. For
+
+  example, if the mouse was 50 pixels from
+
+  the left edge of the browser during the last frame, then
+  <code>pwinMouseX</code> will
+
+  be 50.</p>
+
+  <p>On a touchscreen device, <code>pwinMouseX</code> will hold the x-coordinate
+  of the most
+
+  recent touch point. <code>pwinMouseX</code> is reset to the current
+
+  <a href="/reference/p5/winMouseX/">winMouseX</a> value at the start of each
+  touch
+
+  event.</p>
+
+  <p>Note: Use <a href="/reference/p5/pmouseX/">pmouseX</a> to track the mouse’s
+  previous
+
+  x-coordinate within the canvas.</p>
+line: 545
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's diameter.
+      let d = winMouseX - pwinMouseX;
+
+      // Draw the circle.
+      circle(50, 50, d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create the canvas and set its position.
+      let cnv = createCanvas(100, 100);
+      cnv.position(20, 20);
+
+      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display pwinMouseX.
+      text(pwinMouseX, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pwinMouseX
diff --git a/src/content/reference/en/p5 copy/pwinMouseY.mdx b/src/content/reference/en/p5 copy/pwinMouseY.mdx
new file mode 100644
index 0000000000..2f36580a23
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pwinMouseY.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L616
+title: pwinMouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's previous vertical
+  position
+
+  within the browser.</p>
+
+  <p><code>pwinMouseY</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. Its value is
+
+  <a href="/reference/p5/winMouseY/">winMouseY</a> from the previous frame. For
+
+  example, if the mouse was 50 pixels from
+
+  the top edge of the browser during the last frame, then
+  <code>pwinMouseY</code> will
+
+  be 50.</p>
+
+  <p>On a touchscreen device, <code>pwinMouseY</code> will hold the y-coordinate
+  of the most
+
+  recent touch point. <code>pwinMouseY</code> is reset to the current
+
+  <a href="/reference/p5/winMouseY/">winMouseY</a> value at the start of each
+  touch
+
+  event.</p>
+
+  <p>Note: Use <a href="/reference/p5/pmouseY/">pmouseY</a> to track the mouse’s
+  previous
+
+  y-coordinate within the canvas.</p>
+line: 616
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's diameter.
+      let d = winMouseY - pwinMouseY;
+
+      // Draw the circle.
+      circle(50, 50, d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create the canvas and set its position.
+      let cnv = createCanvas(100, 100);
+      cnv.position(20, 20);
+
+      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display pwinMouseY.
+      text(pwinMouseY, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pwinMouseY
diff --git a/src/content/reference/en/p5 copy/quad.mdx b/src/content/reference/en/p5 copy/quad.mdx
new file mode 100644
index 0000000000..fbc09fa0a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/quad.mdx	
@@ -0,0 +1,233 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L928
+title: quad
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a quadrilateral (four-sided shape).</p>
+
+  <p>Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
+
+  first pair of parameters <code>(x1, y1)</code> sets the quad's first point.
+  The next
+
+  three pairs of parameters set the coordinates for its next three points
+
+  <code>(x2, y2)</code>, <code>(x3, y3)</code>, and <code>(x4, y4)</code>.
+  Points should be added in either
+
+  clockwise or counter-clockwise order.</p>
+
+  <p>The version of <code>quad()</code> with twelve parameters allows the quad
+  to be drawn
+
+  in 3D space. Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
+
+  <p>The thirteenth and fourteenth parameters are optional. In WebGL mode, they
+
+  set the number of segments used to draw the quadrilateral in the x- and
+
+  y-directions. They're both 2 by default.</p>
+line: 928
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(20, 20, 80, 20, 80, 80, 20, 80);
+
+      describe('A white square with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(20, 30, 80, 30, 80, 70, 20, 70);
+
+      describe('A white rectangle with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(50, 62, 86, 50, 50, 38, 14, 50);
+
+      describe('A white rhombus with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(20, 50, 80, 30, 80, 70, 20, 70);
+
+      describe('A white trapezoid with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      quad(-30, -30, 30, -30, 30, 30, -30, 30);
+
+      describe('A white square with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A wavy white surface spins around on gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the quad.
+      quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 928
+    params:
+      - name: x1
+        description: |
+          <p>the x-coordinate of the first point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>the y-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>the x-coordinate of the second point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>the y-coordinate of the second point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>the x-coordinate of the third point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>the y-coordinate of the third point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>the x-coordinate of the fourth point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>the y-coordinate of the fourth point.</p>
+        type: Number
+      - name: detailX
+        description: |
+          <p>number of segments in the x-direction.</p>
+        type: Integer
+        optional: true
+      - name: detailY
+        description: |
+          <p>number of segments in the y-direction.</p>
+        type: Integer
+        optional: true
+    chainable: 1
+  - line: 1048
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>the z-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>the z-coordinate of the second point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>the z-coordinate of the third point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>the z-coordinate of the fourth point.</p>
+        type: Number
+      - name: detailX
+        description: ''
+        type: Integer
+        optional: true
+      - name: detailY
+        description: ''
+        type: Integer
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# quad
diff --git a/src/content/reference/en/p5 copy/quadraticVertex.mdx b/src/content/reference/en/p5 copy/quadraticVertex.mdx
new file mode 100644
index 0000000000..e319e38769
--- /dev/null
+++ b/src/content/reference/en/p5 copy/quadraticVertex.mdx	
@@ -0,0 +1,303 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1600
+title: quadraticVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a quadratic Bézier curve segment to a custom shape.</p>
+
+  <p><code>quadraticVertex()</code> adds a curved segment to custom shapes. The
+  Bézier
+
+  curve segments it creates are similar to those made by the
+
+  <a href="/reference/p5/bezierVertex/">bezierVertex()</a> function.
+
+  <code>quadraticVertex()</code> must be called between the
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
+  uses
+
+  the previous vertex as the first anchor point, so there must be at least
+
+  one call to <a href="/reference/p5/vertex/">vertex()</a> before
+  <code>quadraticVertex()</code> can
+
+  be used.</p>
+
+  <p>The first two parameters, <code>cx</code> and <code>cy</code>, set the
+  curve’s control point.
+
+  The control point "pulls" the curve towards its.</p>
+
+  <p>The last two parameters, <code>x3</code>, and <code>y3</code>, set the last
+  anchor point. The
+
+  last anchor point is where the curve ends.</p>
+
+  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
+  and
+
+  z-coordinates.</p>
+
+  <p>Note: <code>quadraticVertex()</code> won’t work when an argument is passed
+  to
+
+  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 1600
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the curve.
+      noFill();
+
+      // Draw the curve.
+      beginShape();
+      vertex(20, 20);
+      quadraticVertex(80, 20, 50, 50);
+      endShape();
+
+      describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the curve.
+      noFill();
+      beginShape();
+      vertex(20, 20);
+      quadraticVertex(80, 20, 50, 50);
+      endShape();
+
+      // Draw red lines from the anchor points to the control point.
+      stroke(255, 0, 0);
+      line(20, 20, 80, 20);
+      line(50, 50, 80, 20);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(20, 20);
+      point(50, 50);
+
+      // Draw the control point in red.
+      stroke(255, 0, 0);
+      point(80, 20);
+
+      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the top-right corner
+    // and drag to change the curve's shape.
+
+    let x2 = 80;
+    let y2 = 20;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+
+      // Draw the curve.
+      beginShape();
+      vertex(20, 20);
+      quadraticVertex(x2, y2, 50, 50);
+      endShape();
+
+      // Draw red lines from the anchor points to the control point.
+      stroke(255, 0, 0);
+      line(20, 20, x2, y2);
+      line(50, 50, x2, y2);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(20, 20);
+      point(50, 50);
+
+      // Draw the control point in red.
+      stroke(255, 0, 0);
+      point(x2, y2);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x2, y2) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x2 = mouseX;
+        y2 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the curved segments.
+      vertex(20, 20);
+      quadraticVertex(80, 20, 50, 50);
+      quadraticVertex(20, 80, 80, 80);
+
+      // Add the straight segments.
+      vertex(80, 10);
+      vertex(20, 10);
+      vertex(20, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A white puzzle piece drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the first puzzle piece.
+      noStroke();
+      fill(255);
+
+      // Draw the first puzzle piece.
+      beginShape();
+      vertex(-30, -30, 0);
+      quadraticVertex(30, -30, 0, 0, 0, 0);
+      quadraticVertex(-30, 30, 0, 30, 30, 0);
+      vertex(30, -40, 0);
+      vertex(-30, -40, 0);
+      vertex(-30, -30, 0);
+      endShape();
+
+      // Style the second puzzle piece.
+      stroke(255);
+      noFill();
+
+      // Draw the second puzzle piece.
+      beginShape();
+      vertex(-30, -30, -20);
+      quadraticVertex(30, -30, -20, 0, 0, -20);
+      quadraticVertex(-30, 30, -20, 30, 30, -20);
+      vertex(30, -40, -20);
+      vertex(-30, -40, -20);
+      vertex(-30, -30, -20);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1600
+    params:
+      - name: cx
+        description: |
+          <p>x-coordinate of the control point.</p>
+        type: Number
+      - name: cy
+        description: |
+          <p>y-coordinate of the control point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the anchor point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the anchor point.</p>
+        type: Number
+    chainable: 1
+  - line: 1832
+    params:
+      - name: cx
+        description: ''
+        type: Number
+      - name: cy
+        description: ''
+        type: Number
+      - name: cz
+        description: |
+          <p>z-coordinate of the control point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the anchor point.</p>
+        type: Number
+chainable: true
+---
+
+
+# quadraticVertex
diff --git a/src/content/reference/en/p5 copy/radians.mdx b/src/content/reference/en/p5 copy/radians.mdx
new file mode 100644
index 0000000000..da0adc1ff7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/radians.mdx	
@@ -0,0 +1,53 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L521
+title: radians
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: |
+  <p>Converts an angle measured in degrees to its value in radians.</p>
+  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
+  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
+  <p>The same angle can be expressed in with either unit. For example, 90° is a
+  quarter of a full rotation. The same angle is 2 × π ÷ 4
+  (about 1.57) radians.</p>
+line: 521
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the angle conversion.
+      let deg = 45;
+      let rad = radians(deg);
+
+      // Display the angle conversion.
+      text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
+
+      describe('The text "45˚ = 0.785 rad".');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: degrees
+    description: |
+      <p>degree value to convert to radians.</p>
+    type: Number
+return:
+  description: converted angle.
+  type: Number
+chainable: false
+---
+
+
+# radians
diff --git a/src/content/reference/en/p5 copy/random.mdx b/src/content/reference/en/p5 copy/random.mdx
new file mode 100644
index 0000000000..aef8e546e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/random.mdx	
@@ -0,0 +1,48 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L86
+title: random
+module: Math
+submodule: Random
+file: src/math/random.js
+description: "<p>Returns a random number or a random element from an array.</p>\n<p><code>random()</code> follows uniform distribution, which means that all outcomes are\nequally likely. When <code>random()</code> is used to generate numbers, all\nnumbers in the output range are equally likely to be returned. When\n<code>random()</code> is used to select elements from an array, all elements are\nequally likely to be chosen.</p>\n<p>By default, <code>random()</code> produces different results each time a sketch runs.\nThe <a href=\"/reference/p5/randomSeed/\">randomSeed()</a> function can be used to\ngenerate the same sequence of numbers or choices each time a sketch runs.</p>\n<p>The version of <code>random()</code> with no parameters returns a random number from 0\nup to but not including 1.</p>\n<p>The version of <code>random()</code> with one parameter works one of two ways. If the\nargument passed is a number, <code>random()</code> returns a random number from 0 up\nto but not including the number. For example, calling <code>random(5)</code> returns\nvalues between 0 and 5. If the argument passed is an array, <code>random()</code>\nreturns a random element from that array. For example, calling\n<code>random(['\U0001F981', '\U0001F42F', '\U0001F43B'])</code> returns either a lion, tiger, or bear emoji.</p>\n<p>The version of <code>random()</code> with two parameters returns a random number from\na given range. The arguments passed set the range's lower and upper bounds.\nFor example, calling <code>random(-5, 10.2)</code> returns values from -5 up to but\nnot including 10.2.</p>\n"
+line: 86
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(0, 100);\n  let y = random(0, 100);\n\n  // Draw a point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Create an array of emoji strings.\n  let animals = ['\U0001F981', '\U0001F42F', '\U0001F43B'];\n\n  // Choose a random element from the array.\n  let choice = random(animals);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(20);\n\n  // Display the emoji.\n  text(choice, 50, 50);\n\n  describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 45 and 55.\n  let x = random(45, 55);\n  let y = random(45, 55);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n  // Update x and y randomly.\n  x += random(-1, 1);\n  y += random(-1, 1);\n\n  // Draw the point.\n  point(x, y);\n}\n</code>\n</div>"
+class: p5
+return:
+  description: random number.
+  type: Number
+overloads:
+  - line: 86
+    params:
+      - name: min
+        description: |
+          <p>lower bound (inclusive).</p>
+        type: Number
+        optional: true
+      - name: max
+        description: |
+          <p>upper bound (exclusive).</p>
+        type: Number
+        optional: true
+    return:
+      description: random number.
+      type: Number
+  - line: 259
+    params:
+      - name: choices
+        description: |
+          <p>array to choose from.</p>
+        type: Array
+    return:
+      description: random element from the array.
+      type: '*'
+chainable: false
+---
+
+
+# random
diff --git a/src/content/reference/en/p5 copy/randomGaussian.mdx b/src/content/reference/en/p5 copy/randomGaussian.mdx
new file mode 100644
index 0000000000..24893f378b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/randomGaussian.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L292
+title: randomGaussian
+module: Math
+submodule: Random
+file: src/math/random.js
+description: >
+  <p>Returns a random number fitting a Gaussian, or normal, distribution.</p>
+
+  <p>Normal distributions look like bell curves when plotted. Values from a
+
+  normal distribution cluster around a central value called the mean. The
+
+  cluster's standard deviation describes its spread.</p>
+
+  <p>By default, <code>randomGaussian()</code> produces different results each
+  time a
+
+  sketch runs. The <a href="/reference/p5/randomSeed/">randomSeed()</a> function
+  can be
+
+  used to generate the same sequence of numbers each time a sketch runs.</p>
+
+  <p>There's no minimum or maximum value that <code>randomGaussian()</code>
+  might return.
+
+  Values far from the mean are very unlikely and values near the mean are
+
+  very likely.</p>
+
+  <p>The version of <code>randomGaussian()</code> with no parameters returns
+  values with a
+
+  mean of 0 and standard deviation of 1.</p>
+
+  <p>The version of <code>randomGaussian()</code> with one parameter interprets
+  the
+
+  argument passed as the mean. The standard deviation is 1.</p>
+
+  <p>The version of <code>randomGaussian()</code> with two parameters interprets
+  the first
+
+  argument passed as the mean and the second as the standard deviation.</p>
+line: 292
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
+    }
+
+    function draw() {
+      // Style the circles.
+      noStroke();
+      fill(0, 10);
+
+      // Uniform distribution between 0 and 100.
+      let x = random(100);
+      let y = 25;
+      circle(x, y, 5);
+
+      // Gaussian distribution with a mean of 50 and sd of 1.
+      x = randomGaussian(50);
+      y = 50;
+      circle(x, y, 5);
+
+      // Gaussian distribution with a mean of 50 and sd of 10.
+      x = randomGaussian(50, 10);
+      y = 75;
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mean
+    description: |
+      <p>mean.</p>
+    type: Number
+    optional: true
+  - name: sd
+    description: |
+      <p>standard deviation.</p>
+    type: Number
+    optional: true
+return:
+  description: random number.
+  type: Number
+chainable: false
+---
+
+
+# randomGaussian
diff --git a/src/content/reference/en/p5 copy/randomSeed.mdx b/src/content/reference/en/p5 copy/randomSeed.mdx
new file mode 100644
index 0000000000..dbd1a6ae3d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/randomSeed.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L37
+title: randomSeed
+module: Math
+submodule: Random
+file: src/math/random.js
+description: >
+  <p>Sets the seed value for the <a href="/reference/p5/random/">random()</a>
+  and
+
+  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> functions.</p>
+
+  <p>By default, <a href="/reference/p5/random/">random()</a> and
+
+  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> produce different
+
+  results each time a sketch is run. Calling <code>randomSeed()</code> with a
+  constant
+
+  argument, such as <code>randomSeed(99)</code>, makes these functions produce
+  the same
+
+  results each time a sketch is run.</p>
+line: 37
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get random coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the white circle.
+      circle(x, y, 10);
+
+      // Set a random seed for consistency.
+      randomSeed(99);
+
+      // Get random coordinates.
+      x = random(0, 100);
+      y = random(0, 100);
+
+      // Draw the black circle.
+      fill(0);
+      circle(x, y, 10);
+
+      describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: seed
+    description: |
+      <p>seed value.</p>
+    type: Number
+chainable: false
+---
+
+
+# randomSeed
diff --git a/src/content/reference/en/p5 copy/rect.mdx b/src/content/reference/en/p5 copy/rect.mdx
new file mode 100644
index 0000000000..6876ab536d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rect.mdx	
@@ -0,0 +1,209 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1091
+title: rect
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a rectangle.</p>
+
+  <p>A rectangle is a four-sided shape defined by the <code>x</code>,
+  <code>y</code>, <code>w</code>, and <code>h</code>
+
+  parameters. <code>x</code> and <code>y</code> set the location of its top-left
+  corner. <code>w</code> sets
+
+  its width and <code>h</code> sets its height. Every angle in the rectangle
+  measures
+
+  90˚. See <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to
+  define
+
+  rectangles.</p>
+
+  <p>The version of <code>rect()</code> with five parameters creates a rounded
+  rectangle. The
+
+  fifth parameter sets the radius for all four corners.</p>
+
+  <p>The version of <code>rect()</code> with eight parameters also creates a
+  rounded
+
+  rectangle. Each of the last four parameters set the radius of a corner. The
+
+  radii start with the top-left corner and move clockwise around the
+
+  rectangle. If any of these parameters are omitted, they are set to the
+
+  value of the last radius that was set.</p>
+line: 1091
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rect(30, 20, 55, 55);
+
+      describe('A white square with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rect(30, 20, 55, 40);
+
+      describe('A white rectangle with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give all corners a radius of 20.
+      rect(30, 20, 55, 50, 20);
+
+      describe('A white rectangle with a black outline and round edges on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give each corner a unique radius.
+      rect(30, 20, 55, 50, 20, 15, 10, 5);
+
+      describe('A white rectangle with a black outline and round edges of different radii.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      rect(-20, -30, 55, 55);
+
+      describe('A white square with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square spins around on gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the rectangle.
+      rect(-20, -30, 55, 55);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1091
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the rectangle.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the rectangle.</p>
+        type: Number
+      - name: w
+        description: |
+          <p>width of the rectangle.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>height of the rectangle.</p>
+        type: Number
+        optional: true
+      - name: tl
+        description: |
+          <p>optional radius of top-left corner.</p>
+        type: Number
+        optional: true
+      - name: tr
+        description: |
+          <p>optional radius of top-right corner.</p>
+        type: Number
+        optional: true
+      - name: br
+        description: |
+          <p>optional radius of bottom-right corner.</p>
+        type: Number
+        optional: true
+      - name: bl
+        description: |
+          <p>optional radius of bottom-left corner.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1214
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: w
+        description: ''
+        type: Number
+      - name: h
+        description: ''
+        type: Number
+      - name: detailX
+        description: |
+          <p>number of segments in the x-direction (for WebGL mode).</p>
+        type: Integer
+        optional: true
+      - name: detailY
+        description: |
+          <p>number of segments in the y-direction (for WebGL mode).</p>
+        type: Integer
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# rect
diff --git a/src/content/reference/en/p5 copy/rectMode.mdx b/src/content/reference/en/p5 copy/rectMode.mdx
new file mode 100644
index 0000000000..5d444cb16e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rectMode.mdx	
@@ -0,0 +1,142 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L184
+title: rectMode
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Changes where rectangles and squares are drawn.</p>
+
+  <p>By default, the first two parameters of
+
+  <a href="/reference/p5/rect/">rect()</a> and <a
+  href="/reference/p5/square/">square()</a>,
+
+  are the x- and y-coordinates of the shape's upper left corner. The next
+  parameters set
+
+  the shape's width and height. This is the same as calling
+
+  <code>rectMode(CORNER)</code>.</p>
+
+  <p><code>rectMode(CORNERS)</code> also uses the first two parameters as the
+  location of
+
+  one of the corners. The next parameters are the location of the opposite
+
+  corner. This mode only works for <a href="/reference/p5/rect/">rect()</a>.</p>
+
+  <p><code>rectMode(CENTER)</code> uses the first two parameters as the x- and
+
+  y-coordinates of the shape's center. The next parameters are its width and
+
+  height.</p>
+
+  <p><code>rectMode(RADIUS)</code> also uses the first two parameters as the x-
+  and
+
+  y-coordinates of the shape's center. The next parameters are
+
+  half of the shape's width and height.</p>
+
+  <p>The argument passed to <code>rectMode()</code> must be written in ALL CAPS
+  because the
+
+  constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and
+  <code>CORNERS</code> are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 184
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(CORNER);
+      fill(255);
+      rect(25, 25, 50, 50);
+
+      rectMode(CORNERS);
+      fill(100);
+      rect(25, 25, 50, 50);
+
+      describe('A small gray square drawn at the top-left corner of a white square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(RADIUS);
+      fill(255);
+      rect(50, 50, 30, 30);
+
+      rectMode(CENTER);
+      fill(100);
+      rect(50, 50, 30, 30);
+
+      describe('A small gray square drawn at the center of a white square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(CORNER);
+      fill(255);
+      square(25, 25, 50);
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(RADIUS);
+      fill(255);
+      square(50, 50, 30);
+
+      rectMode(CENTER);
+      fill(100);
+      square(50, 50, 30);
+
+      describe('A small gray square drawn at the center of a white square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either CORNER, CORNERS, CENTER, or RADIUS</p>
+    type: Constant
+chainable: true
+---
+
+
+# rectMode
diff --git a/src/content/reference/en/p5 copy/red.mdx b/src/content/reference/en/p5 copy/red.mdx
new file mode 100644
index 0000000000..819478b246
--- /dev/null
+++ b/src/content/reference/en/p5 copy/red.mdx	
@@ -0,0 +1,158 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1279
+title: red
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the red value of a color.</p>
+
+  <p><code>red()</code> extracts the red value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>red()</code> returns a color's red value in the range 0
+
+  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  RGB, it
+
+  returns the red value in the given range.</p>
+line: 1279
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let c = color(175, 100, 220);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 175.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [175, 100, 220];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 175.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgb(175, 100, 220)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 175.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Create a p5.Color object.
+      let c = color(69, 39, 86);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 69.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the red value.
+  type: Number
+chainable: false
+---
+
+
+# red
diff --git a/src/content/reference/en/p5 copy/redraw.mdx b/src/content/reference/en/p5 copy/redraw.mdx
new file mode 100644
index 0000000000..6519f322f0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/redraw.mdx	
@@ -0,0 +1,117 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L838
+title: redraw
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Runs the code in <a href="/reference/p5/draw/">draw()</a> once.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
+
+  <a href="/reference/p5/draw/">draw()</a> from repeating. Calling
+  <code>redraw()</code> will
+
+  execute the code in the <a href="/reference/p5/draw/">draw()</a> function a
+  set
+
+  number of times.</p>
+
+  <p>The parameter, <code>n</code>, is optional. If a number is passed, as in
+  <code>redraw(5)</code>,
+
+  then the draw loop will run the given number of times. By default,
+  <code>n</code> is
+
+  1.</p>
+line: 838
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click the canvas to move the circle.
+
+    let x = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe(
+        'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle.
+      circle(x, 50, 20);
+
+      // Increment x.
+      x += 5;
+    }
+
+    // Run the draw loop when the user double-clicks.
+    function doubleClicked() {
+      redraw();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click the canvas to move the circle.
+
+    let x = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe(
+        'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle.
+      circle(x, 50, 20);
+
+      // Increment x.
+      x += 5;
+    }
+
+    // Run the draw loop three times when the user double-clicks.
+    function doubleClicked() {
+      redraw(3);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: >
+      <p>number of times to run <a href="#/p5/draw">draw()</a>. Defaults to
+      1.</p>
+    type: Integer
+    optional: true
+chainable: false
+---
+
+
+# redraw
diff --git a/src/content/reference/en/p5 copy/remove.mdx b/src/content/reference/en/p5 copy/remove.mdx
new file mode 100644
index 0000000000..552822f5a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/remove.mdx	
@@ -0,0 +1,57 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L559
+title: remove
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>Removes the sketch from the web page.</p>
+
+  <p>Calling <code>remove()</code> stops the draw loop and removes any HTML
+  elements
+
+  created by the sketch, including the canvas. A new sketch can be
+
+  created by using the <a href="/reference/p5/p5/">p5()</a> constructor, as in
+
+  <code>new p5()</code>.</p>
+line: 559
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to remove the canvas.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      // Paint the background repeatedly.
+      background(200);
+
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+
+    // Remove the sketch when the user double-clicks.
+    function doubleClicked() {
+      remove();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# remove
diff --git a/src/content/reference/en/p5 copy/removeElements.mdx b/src/content/reference/en/p5 copy/removeElements.mdx
new file mode 100644
index 0000000000..51e712026b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/removeElements.mdx	
@@ -0,0 +1,85 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L256
+title: removeElements
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Removes all elements created by p5.js, including any event handlers.</p>
+
+  <p>There are two exceptions:
+
+  canvas elements created by <a
+  href="/reference/p5/createCanvas/">createCanvas()</a>
+
+  and <a href="/reference/p5/p5.Renderer">p5.Render</a> objects created by
+
+  <a href="/reference/p5/createGraphics/">createGraphics()</a>.</p>
+line: 256
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a paragraph element and place
+      // it in the middle of the canvas.
+      let p = createP('p5*js');
+      p.position(25, 25);
+
+      describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
+    }
+
+    // Remove all elements when the mouse is pressed.
+    function mousePressed() {
+      removeElements();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a paragraph element and place
+      // it at the top of the canvas.
+      let p = createP('p5*js');
+      p.position(25, 25);
+
+      // Create a slider element and place it
+      // beneath the canvas.
+      slider = createSlider(0, 255, 200);
+      slider.position(0, 100);
+
+      describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
+    }
+
+    function draw() {
+      // Use the slider value to change the background color.
+      let g = slider.value();
+      background(g);
+    }
+
+    // Remove all elements when the mouse is double-clicked.
+    function doubleClicked() {
+      removeElements();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# removeElements
diff --git a/src/content/reference/en/p5 copy/removeItem.mdx b/src/content/reference/en/p5 copy/removeItem.mdx
new file mode 100644
index 0000000000..ba091b00b4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/removeItem.mdx	
@@ -0,0 +1,97 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L380
+title: removeItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Removes an item from the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs.</p>
+
+  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
+  values in
+
+  <code>localStorage</code> and <code>removeItem()</code> makes it easy to
+  delete them.</p>
+
+  <p>The parameter, <code>key</code>, is the name of the value to remove as a
+  string. For
+
+  example, calling <code>removeItem('size')</code> removes the item with the key
+  <code>size</code>.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 380
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to remove an item from localStorage.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe(
+        'The text "Feist: 1234" written in black on a gray background. The text "Feist: null" appears when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+
+    // Remove the word from localStorage when the user double-clicks.
+    function doubleClicked() {
+      removeItem('score');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: key
+    description: |
+      <p>name of the value to remove.</p>
+    type: String
+chainable: false
+---
+
+
+# removeItem
diff --git a/src/content/reference/en/p5 copy/requestPointerLock.mdx b/src/content/reference/en/p5 copy/requestPointerLock.mdx
new file mode 100644
index 0000000000..621ce063ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/requestPointerLock.mdx	
@@ -0,0 +1,85 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1880
+title: requestPointerLock
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>Locks the mouse pointer to its current position and makes it invisible.</p>
+
+  <p><code>requestPointerLock()</code> allows the mouse to move forever without
+  leaving the
+
+  screen. Calling <code>requestPointerLock()</code> locks the values of
+
+  <a href="/reference/p5/mouseX/">mouseX</a>, <a
+  href="/reference/p5/mouseY/">mouseY</a>,
+
+  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
+  href="/reference/p5/pmouseY/">pmouseY</a>.
+
+  <a href="/reference/p5/movedX/">movedX</a> and <a
+  href="/reference/p5/movedY/">movedY</a>
+
+  continue updating and can be used to get the distance the mouse moved since
+
+  the last frame was drawn. Calling
+
+  <a href="/reference/p5/exitPointerLock/">exitPointerLock()</a> resumes
+  updating the
+
+  mouse system variables.</p>
+
+  <p>Note: Most browsers require an input, such as a click, before calling
+
+  <code>requestPointerLock()</code>. It’s recommended to call
+  <code>requestPointerLock()</code> in
+
+  an event function such as <a
+  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
+line: 1880
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let score = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the text "Score: X" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Update the score.
+      score -= movedY;
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the score.
+      text(`Score: ${score}`, 50, 50);
+    }
+
+    // Lock the pointer when the user double-clicks.
+    function doubleClicked() {
+      requestPointerLock();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# requestPointerLock
diff --git a/src/content/reference/en/p5 copy/resetMatrix.mdx b/src/content/reference/en/p5 copy/resetMatrix.mdx
new file mode 100644
index 0000000000..af797b49db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/resetMatrix.mdx	
@@ -0,0 +1,52 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L246
+title: resetMatrix
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: |
+  <p>Clears all transformations applied to the coordinate system.</p>
+line: 246
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a blue circle at the coordinates (25, 25).
+      fill('blue');
+      circle(25, 25, 20);
+
+      // Clear all transformations.
+      // The origin is now at the top-left corner.
+      resetMatrix();
+
+      // Draw a red circle at the coordinates (25, 25).
+      fill('red');
+      circle(25, 25, 20);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# resetMatrix
diff --git a/src/content/reference/en/p5 copy/resetShader.mdx b/src/content/reference/en/p5 copy/resetShader.mdx
new file mode 100644
index 0000000000..850ca0773c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/resetShader.mdx	
@@ -0,0 +1,95 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1628
+title: resetShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: |
+  <p>Restores the default shaders.</p>
+  <p><code>resetShader()</code> deactivates any shaders previously applied by
+  <a href="/reference/p5/shader/">shader()</a>.</p>
+  <p>Note: Shaders can only be used in WebGL mode.</p>
+line: 1628
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    uniform mat4 uProjectionMatrix;
+    uniform mat4 uModelViewMatrix;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 position = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * position;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision mediump float;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vec2 uv = vTexCoord;
+      vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+      gl_FragColor = vec4(color, 1.0);
+    }
+    `;
+
+    let myShader;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      myShader = createShader(vertSrc, fragSrc);
+
+      describe(
+        'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a box using the p5.Shader.
+      // shader() sets the active shader to myShader.
+      shader(myShader);
+      push();
+      translate(-25, 0, 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(width / 4);
+      pop();
+
+      // Draw a box using the default fill shader.
+      // resetShader() restores the default fill shader.
+      resetShader();
+      fill(255, 0, 0);
+      push();
+      translate(25, 0, 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(width / 4);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# resetShader
diff --git a/src/content/reference/en/p5 copy/resizeCanvas.mdx b/src/content/reference/en/p5 copy/resizeCanvas.mdx
new file mode 100644
index 0000000000..fde0561563
--- /dev/null
+++ b/src/content/reference/en/p5 copy/resizeCanvas.mdx	
@@ -0,0 +1,133 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L221
+title: resizeCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Resizes the canvas to a given width and height.</p>
+
+  <p><code>resizeCanvas()</code> immediately clears the canvas and calls
+
+  <a href="/reference/p5/redraw/">redraw()</a>. It's common to call
+  <code>resizeCanvas()</code>
+
+  within the body of <a href="/reference/p5/windowResized/">windowResized()</a>
+  like
+
+  so:</p>
+
+  <pre><code class="language-js">function windowResized() {
+    resizeCanvas(windowWidth, windowHeight);
+  }
+
+  </code></pre>
+
+  <p>The first two parameters, <code>width</code> and <code>height</code>, set
+  the dimensions of the
+
+  canvas. They also the values of the <a href="/reference/p5/width/">width</a>
+  and
+
+  <a href="/reference/p5/height/">height</a> system variables. For example,
+  calling
+
+  <code>resizeCanvas(300, 500)</code> resizes the canvas to 300×500 pixels, then
+  sets
+
+  <a href="/reference/p5/width/">width</a> to 300 and
+
+  <a href="/reference/p5/height/">height</a> 500.</p>
+
+  <p>The third parameter, <code>noRedraw</code>, is optional. If
+  <code>true</code> is passed, as in
+
+  <code>resizeCanvas(300, 500, true)</code>, then the canvas will be canvas to
+  300×500
+
+  pixels but the <a href="/reference/p5/redraw/">redraw()</a> function won't be
+  called
+
+  immediately. By default, <a href="/reference/p5/redraw/">redraw()</a> is
+  called
+
+  immediately when <code>resizeCanvas()</code> finishes executing.</p>
+line: 221
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to resize the canvas.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(180);
+
+      // Draw a circle at the center of the canvas.
+      circle(width / 2, height / 2, 20);
+    }
+
+    // Resize the canvas when the user double-clicks.
+    function doubleClicked() {
+      resizeCanvas(50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Resize the web browser to change the canvas size.
+
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+
+      describe('A white circle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(180);
+
+      // Draw a circle at the center of the canvas.
+      circle(width / 2, height / 2, 20);
+    }
+
+    // Always resize the canvas to fill the browser window.
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width of the canvas.</p>
+    type: Number
+  - name: height
+    description: |
+      <p>height of the canvas.</p>
+    type: Number
+  - name: noRedraw
+    description: |
+      <p>whether to delay calling
+                                   <a href="#/p5/redraw">redraw()</a>. Defaults
+                                   to <code>false</code>.</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# resizeCanvas
diff --git a/src/content/reference/en/p5 copy/reverse.mdx b/src/content/reference/en/p5 copy/reverse.mdx
new file mode 100644
index 0000000000..bf7a6571ac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/reverse.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L141
+title: reverse
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Reverses the order of an array, maps to Array.reverse()</p>
+line: 141
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">array.reverse()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    function setup() {
+      let myArray = ['A', 'B', 'C'];
+      print(myArray); // ['A','B','C']
+
+      reverse(myArray);
+      print(myArray); // ['C','B','A']
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to reverse</p>
+    type: Array
+return:
+  description: the reversed list
+  type: Array
+chainable: false
+---
+
+
+# reverse
diff --git a/src/content/reference/en/p5 copy/rotate.mdx b/src/content/reference/en/p5 copy/rotate.mdx
new file mode 100644
index 0000000000..bbb4f8e5f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotate.mdx	
@@ -0,0 +1,226 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L289
+title: rotate
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system.</p>
+
+  <p>By default, the positive x-axis points to the right and the positive y-axis
+
+  points downward. The <code>rotate()</code> function changes this orientation
+  by
+
+  rotating the coordinate system about the origin. Everything drawn after
+
+  <code>rotate()</code> is called will appear to be rotated.</p>
+
+  <p>The first parameter, <code>angle</code>, is the amount to rotate. For
+  example, calling
+
+  <code>rotate(1)</code> rotates the coordinate system clockwise 1 radian which
+  is
+
+  nearly 57˚. <code>rotate()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>The second parameter, <code>axis</code>, is optional. It's used to orient
+  3D rotations
+
+  in WebGL mode. If a <a href="/reference/p5/p5.Vector">p5.Vector</a> is passed,
+  as in
+
+  <code>rotate(QUARTER_PI, myVector)</code>, then the coordinate system will
+  rotate
+
+  <code>QUARTER_PI</code> radians about <code>myVector</code>. If an array of
+  vector components is
+
+  passed, as in <code>rotate(QUARTER_PI, [1, 0, 0])</code>, then the coordinate
+  system
+
+  will rotate <code>QUARTER_PI</code> radians about a vector with the components
+
+  <code>[1, 0, 0]</code>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotate(1)</code>
+
+  twice has the same effect as calling <code>rotate(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotate(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 289
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn.
+      rotate(QUARTER_PI);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotate(QUARTER_PI / 2);
+
+      // Rotate the coordinate system another 1/16 turn.
+      rotate(QUARTER_PI / 2);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe(
+        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn.
+      rotate(45);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotate(angle);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A cube on a gray background. The cube's front face points to the top-right.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn about
+      // the axis [1, 1, 0].
+      let axis = createVector(1, 1, 0);
+      rotate(QUARTER_PI, axis);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A cube on a gray background. The cube's front face points to the top-right.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn about
+      // the axis [1, 1, 0].
+      let axis = [1, 1, 0];
+      rotate(QUARTER_PI, axis);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+  - name: axis
+    description: |
+      <p>axis to rotate about in 3D.</p>
+    type: 'p5.Vector|Number[]'
+    optional: true
+chainable: true
+---
+
+
+# rotate
diff --git a/src/content/reference/en/p5 copy/rotateX.mdx b/src/content/reference/en/p5 copy/rotateX.mdx
new file mode 100644
index 0000000000..c519976bce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotateX.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L470
+title: rotateX
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system about the x-axis in WebGL mode.</p>
+
+  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
+  calling
+
+  <code>rotateX(1)</code> rotates the coordinate system about the x-axis by 1
+  radian.
+
+  <code>rotateX()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotateX(1)</code>
+
+  twice has the same effect as calling <code>rotateX(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotateX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 470
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateX(QUARTER_PI);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateX(QUARTER_PI / 2);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateX(QUARTER_PI / 2);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateX(45);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotateX(angle);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# rotateX
diff --git a/src/content/reference/en/p5 copy/rotateY.mdx b/src/content/reference/en/p5 copy/rotateY.mdx
new file mode 100644
index 0000000000..c7976c5a44
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotateY.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L606
+title: rotateY
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system about the y-axis in WebGL mode.</p>
+
+  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
+  calling
+
+  <code>rotateY(1)</code> rotates the coordinate system about the y-axis by 1
+  radian.
+
+  <code>rotateY()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotateY(1)</code>
+
+  twice has the same effect as calling <code>rotateY(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotateY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 606
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateY(QUARTER_PI);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateY(QUARTER_PI / 2);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateY(QUARTER_PI / 2);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateY(45);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotateY(angle);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# rotateY
diff --git a/src/content/reference/en/p5 copy/rotateZ.mdx b/src/content/reference/en/p5 copy/rotateZ.mdx
new file mode 100644
index 0000000000..317bd7fe88
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotateZ.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L742
+title: rotateZ
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system about the z-axis in WebGL mode.</p>
+
+  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
+  calling
+
+  <code>rotateZ(1)</code> rotates the coordinate system about the z-axis by 1
+  radian.
+
+  <code>rotateZ()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotateZ(1)</code>
+
+  twice has the same effect as calling <code>rotateZ(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotateZ(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 742
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateZ(QUARTER_PI);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateZ(QUARTER_PI / 2);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateZ(QUARTER_PI / 2);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateZ(45);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotateZ(angle);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# rotateZ
diff --git a/src/content/reference/en/p5 copy/rotationX.mdx b/src/content/reference/en/p5 copy/rotationX.mdx
new file mode 100644
index 0000000000..98dfd287dc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotationX.mdx	
@@ -0,0 +1,45 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L131
+title: rotationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationX always contains the rotation of the
+  device along the x axis. If the sketch <a href="/reference/p5/angleMode/">
+  angleMode()</a> is set to DEGREES, the value will be -180 to 180. If
+  it is set to RADIANS, the value will be -PI to PI.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 131
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      //rotateZ(radians(rotationZ));
+      rotateX(radians(rotationX));
+      //rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# rotationX
diff --git a/src/content/reference/en/p5 copy/rotationY.mdx b/src/content/reference/en/p5 copy/rotationY.mdx
new file mode 100644
index 0000000000..f06a033bb7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotationY.mdx	
@@ -0,0 +1,45 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L164
+title: rotationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationY always contains the rotation of the
+  device along the y axis. If the sketch <a href="/reference/p5/angleMode/">
+  angleMode()</a> is set to DEGREES, the value will be -90 to 90. If
+  it is set to RADIANS, the value will be -PI/2 to PI/2.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 164
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      //rotateZ(radians(rotationZ));
+      //rotateX(radians(rotationX));
+      rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# rotationY
diff --git a/src/content/reference/en/p5 copy/rotationZ.mdx b/src/content/reference/en/p5 copy/rotationZ.mdx
new file mode 100644
index 0000000000..47d6d965aa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotationZ.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L197
+title: rotationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationZ always contains the rotation of the
+  device along the z axis. If the sketch <a href="/reference/p5/angleMode/">
+  angleMode()</a> is set to DEGREES, the value will be 0 to 360. If
+  it is set to RADIANS, the value will be 0 to 2*PI.</p>
+  <p>Unlike rotationX and rotationY, this variable is available for devices
+  with a built-in compass only.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 197
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      rotateZ(radians(rotationZ));
+      //rotateX(radians(rotationX));
+      //rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# rotationZ
diff --git a/src/content/reference/en/p5 copy/round.mdx b/src/content/reference/en/p5 copy/round.mdx
new file mode 100644
index 0000000000..3f6efea6eb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/round.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L861
+title: round
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the integer closest to a number.</p>
+
+  <p>For example, <code>round(133.8)</code> returns the value 134.</p>
+
+  <p>The second parameter, <code>decimals</code>, is optional. It sets the
+  number of
+
+  decimal places to use when rounding. For example, <code>round(12.34, 1)</code>
+  returns
+
+  12.3. <code>decimals</code> is 0 by default.</p>
+line: 861
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Round a number.
+      let x = round(4.2);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the rounded number.
+      text(x, 50, 50);
+
+      describe('The number 4 written in middle of the canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Round a number to 2 decimal places.
+      let x = round(12.782383, 2);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the rounded number.
+      text(x, 50, 50);
+
+      describe('The number 12.78 written in middle of canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to round.</p>
+    type: Number
+  - name: decimals
+    description: |
+      <p>number of decimal places to round to, default is 0.</p>
+    type: Number
+    optional: true
+return:
+  description: rounded number.
+  type: Integer
+chainable: false
+---
+
+
+# round
diff --git a/src/content/reference/en/p5 copy/sampleRate.mdx b/src/content/reference/en/p5 copy/sampleRate.mdx
new file mode 100644
index 0000000000..3608ee22be
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sampleRate.mdx	
@@ -0,0 +1,26 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L811
+title: sampleRate
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a number representing the sample rate, in samples per second,
+  of all sound objects in this audio context. It is determined by the
+  sampling rate of your operating system's sound card, and it is not
+  currently possile to change.
+  It is often 44100, or twice the range of human hearing.</p>
+line: 811
+isConstructor: false
+itemtype: method
+class: p5
+return:
+  description: samplerate samples per second
+  type: Number
+chainable: false
+---
+
+
+# sampleRate
diff --git a/src/content/reference/en/p5 copy/saturation.mdx b/src/content/reference/en/p5 copy/saturation.mdx
new file mode 100644
index 0000000000..7552fe927d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saturation.mdx	
@@ -0,0 +1,201 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1415
+title: saturation
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the saturation value of a color.</p>
+
+  <p><code>saturation()</code> extracts the saturation value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>Saturation is scaled differently in HSB and HSL. By default,
+  <code>saturation()</code>
+
+  returns a color's HSL saturation in the range 0 to 100. If the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
+  returns the
+
+  saturation value in the given mode.</p>
+line: 1415
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a p5.Color object.
+      let c = color(0, 50, 100);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 50.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a color array.
+      let c = [0, 50, 100];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 100.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 100.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a p5.Color object.
+      let c = color(0, 100, 75);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 100.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color with values in the range 0-255.
+      colorMode(HSL, 255);
+
+      // Create a p5.Color object.
+      let c = color(0, 255, 191.5);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 255.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the saturation value
+  type: Number
+chainable: false
+---
+
+
+# saturation
diff --git a/src/content/reference/en/p5 copy/save.mdx b/src/content/reference/en/p5 copy/save.mdx
new file mode 100644
index 0000000000..fb8b67cd74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/save.mdx	
@@ -0,0 +1,140 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1835
+title: save
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Saves a given element(image, text, json, csv, wav, or html) to the client's
+
+  computer. The first parameter can be a pointer to element we want to save.
+
+  The element can be one of <a href="/reference/p5/p5.Element">p5.Element</a>,an
+  Array of
+
+  Strings, an Array of JSON, a JSON object, a <a
+  href="/reference/p5/p5.Table">p5.Table
+
+  </a>, a <a href="/reference/p5/p5.Image">p5.Image</a>, or a p5.SoundFile
+  (requires
+
+  p5.sound). The second parameter is a filename (including extension).The
+
+  third parameter is for options specific to this type of object. This method
+
+  will save a file that fits the given parameters.
+
+  If it is called without specifying an element, by default it will save the
+
+  whole canvas as an image file. You can optionally specify a filename as
+
+  the first parameter in such a case.
+
+  <strong>Note that it is not recommended to
+
+  call this method within draw, as it will open a new save dialog on every
+
+  render.</strong></p>
+line: 1835
+isConstructor: false
+itemtype: method
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Saves the canvas as an image
+     cnv = createCanvas(300, 300);
+     save(cnv, 'myCanvas.jpg');
+
+     // Saves the canvas as an image by default
+     save('myCanvas.jpg');
+     describe('An example for saving a canvas as an image.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves p5.Image as an image
+     img = createImage(10, 10);
+     save(img, 'myImage.png');
+     describe('An example for saving a p5.Image element as an image.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves p5.Renderer object as an image
+     obj = createGraphics(100, 100);
+     save(obj, 'myObject.png');
+     describe('An example for saving a p5.Renderer element.');
+     </code></div>
+
+     <div class="norender"><code>
+     let myTable = new p5.Table();
+     // Saves table as html file
+     save(myTable, 'myTable.html');
+
+     // Comma Separated Values
+     save(myTable, 'myTable.csv');
+
+     // Tab Separated Values
+     save(myTable, 'myTable.tsv');
+
+     describe(`An example showing how to save a table in formats of
+     HTML, CSV and TSV.`);
+     </code></div>
+
+     <div class="norender"><code>
+     let myJSON = { a: 1, b: true };
+
+     // Saves pretty JSON
+     save(myJSON, 'my.json');
+
+     // Optimizes JSON filesize
+     save(myJSON, 'my.json', true);
+
+     describe('An example for saving JSON to a txt file with some extra arguments.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves array of strings to text file with line breaks after each item
+     let arrayOfStrings = ['a', 'b'];
+     save(arrayOfStrings, 'my.txt');
+     describe(`An example for saving an array of strings to text file
+     with line breaks.`);
+     </code></div>
+class: p5
+params:
+  - name: objectOrFilename
+    description: |
+      <p>If filename is provided, will
+                                                 save canvas as an image with
+                                                 either png or jpg extension
+                                                 depending on the filename.
+                                                 If object is provided, will
+                                                 save depending on the object
+                                                 and filename (see examples
+                                                 above).</p>
+    type: Object|String
+    optional: true
+  - name: filename
+    description: |
+      <p>If an object is provided as the first
+                                   parameter, then the second parameter
+                                   indicates the filename,
+                                   and should include an appropriate
+                                   file extension (see examples above).</p>
+    type: String
+    optional: true
+  - name: options
+    description: |
+      <p>Additional options depend on
+                                filetype. For example, when saving JSON,
+                                <code>true</code> indicates that the
+                                output will be optimized for filesize,
+                                rather than readability.</p>
+    type: Boolean|String
+    optional: true
+chainable: false
+---
+
+
+# save
diff --git a/src/content/reference/en/p5 copy/saveCanvas.mdx b/src/content/reference/en/p5 copy/saveCanvas.mdx
new file mode 100644
index 0000000000..159bf101ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveCanvas.mdx	
@@ -0,0 +1,166 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L153
+title: saveCanvas
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Saves the current canvas as an image.</p>
+
+  <p>By default, <code>saveCanvas()</code> saves the canvas as a PNG image
+  called
+
+  <code>untitled.png</code>.</p>
+
+  <p>The first parameter, <code>filename</code>, is optional. It's a string that
+  sets the
+
+  file's name. If a file extension is included, as in
+
+  <code>saveCanvas('drawing.png')</code>, then the image will be saved using
+  that
+
+  format.</p>
+
+  <p>The second parameter, <code>extension</code>, is also optional. It sets the
+  files format.
+
+  Either <code>'png'</code>, <code>'webp'</code>, or <code>'jpg'</code> can be
+  used. For example, <code>saveCanvas('drawing', 'jpg')</code>
+
+  saves the canvas to a file called <code>drawing.jpg</code>.</p>
+
+  <p>Note: The browser will either save the file immediately or prompt the user
+
+  with a dialogue window.</p>
+line: 153
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(255);
+
+      // Save the canvas to 'untitled.png'.
+      saveCanvas();
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas('myCanvas.jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas('myCanvas', 'jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'untitled.png'.
+      saveCanvas(cnv);
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas(cnv, 'myCanvas.jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas(cnv, 'myCanvas', 'jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 153
+    params:
+      - name: selectedCanvas
+        description: |
+          <p>reference to a
+                                                                   specific HTML5 canvas element.</p>
+        type: p5.Framebuffer|p5.Element|HTMLCanvasElement
+      - name: filename
+        description: |
+          <p>file name. Defaults to 'untitled'.</p>
+        type: String
+        optional: true
+      - name: extension
+        description: >
+          <p>file extension, either 'png', 'webp', or 'jpg'. Defaults to
+          'png'.</p>
+        type: String
+        optional: true
+  - line: 267
+    params:
+      - name: filename
+        description: ''
+        type: String
+        optional: true
+      - name: extension
+        description: ''
+        type: String
+        optional: true
+chainable: false
+---
+
+
+# saveCanvas
diff --git a/src/content/reference/en/p5 copy/saveFrames.mdx b/src/content/reference/en/p5 copy/saveFrames.mdx
new file mode 100644
index 0000000000..72b8d7d987
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveFrames.mdx	
@@ -0,0 +1,175 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L561
+title: saveFrames
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Captures a sequence of frames from the canvas that can be saved as
+  images.</p>
+
+  <p><code>saveFrames()</code> creates an array of frame objects. Each frame is
+  stored as
+
+  an object with its file type, file name, and image data as a string. For
+
+  example, the first saved frame might have the following properties:</p>
+
+  <p><code>{ ext: 'png', filename: 'frame0', imageData:
+  'data:image/octet-stream;base64, abc123' }</code>.</p>
+
+  <p>The first parameter, <code>filename</code>, sets the prefix for the file
+  names. For
+
+  example, setting the prefix to <code>'frame'</code> would generate the image
+  files
+
+  <code>frame0.png</code>, <code>frame1.png</code>, and so on.</p>
+
+  <p>The second parameter, <code>extension</code>, sets the file type to either
+  <code>'png'</code> or
+
+  <code>'jpg'</code>.</p>
+
+  <p>The third parameter, <code>duration</code>, sets the duration to record in
+  seconds.
+
+  The maximum duration is 15 seconds.</p>
+
+  <p>The fourth parameter, <code>framerate</code>, sets the number of frames to
+  record per
+
+  second. The maximum frame rate value is 22. Limits are placed on
+  <code>duration</code>
+
+  and <code>framerate</code> to avoid using too much memory. Recording large
+  canvases
+
+  can easily crash sketches or even web browsers.</p>
+
+  <p>The fifth parameter, <code>callback</code>, is optional. If a function is
+  passed,
+
+  image files won't be saved by default. The callback function can be used
+
+  to process an array containing the data for each captured frame. The array
+
+  of image data contains a sequence of objects with three properties for each
+
+  frame: <code>imageData</code>, <code>filename</code>, and
+  <code>extension</code>.</p>
+
+  <p>Note: Frames are downloaded as individual image files by default.</p>
+line: 561
+isConstructor: false
+itemtype: method
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A square repeatedly changes color from blue to pink.');
+    }
+
+
+    function draw() {
+      let r = frameCount % 255;
+      let g = 50;
+      let b = 100;
+      background(r, g, b);
+    }
+
+
+    // Save the frames when the user presses the 's' key.
+
+    function keyPressed() {
+      if (key === 's') {
+        saveFrames('frame', 'png', 1, 5);
+      }
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A square repeatedly changes color from blue to pink.');
+    }
+
+
+    function draw() {
+      let r = frameCount % 255;
+      let g = 50;
+      let b = 100;
+      background(r, g, b);
+    }
+
+
+    // Print 5 frames when the user presses the mouse.
+
+    function mousePressed() {
+      saveFrames('frame', 'png', 1, 5, printFrames);
+    }
+
+
+    // Prints an array of objects containing raw image data, filenames, and
+    extensions.
+
+    function printFrames(frames) {
+      for (let frame of frames) {
+        print(frame);
+      }
+    }
+
+    </code>
+
+    </div>
+class: p5
+params:
+  - name: filename
+    description: |
+      <p>prefix of file name.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>file extension, either 'jpg' or 'png'.</p>
+    type: String
+  - name: duration
+    description: >
+      <p>duration in seconds to record. This parameter will be constrained to be
+      less or equal to 15.</p>
+    type: Number
+  - name: framerate
+    description: >
+      <p>number of frames to save per second. This parameter will be constrained
+      to be less or equal to 22.</p>
+    type: Number
+  - name: callback
+    description: |
+      <p>callback function that will be executed
+                                       to handle the image data. This function
+                                       should accept an array as argument. The
+                                       array will contain the specified number of
+                                       frames of objects. Each object has three
+                                       properties: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>
+    type: Function(Array)
+    optional: true
+chainable: false
+---
+
+
+# saveFrames
diff --git a/src/content/reference/en/p5 copy/saveGif.mdx b/src/content/reference/en/p5 copy/saveGif.mdx
new file mode 100644
index 0000000000..9b520993ac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveGif.mdx	
@@ -0,0 +1,119 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L204
+title: saveGif
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Generates a gif from a sketch and saves it to a file.</p>
+
+  <p><code>saveGif()</code> may be called in <a
+  href="/reference/p5/setup/">setup()</a> or at any
+
+  point while a sketch is running.</p>
+
+  <p>The first parameter, <code>fileName</code>, sets the gif's file name.</p>
+
+  <p>The second parameter, <code>duration</code>, sets the gif's duration in
+  seconds.</p>
+
+  <p>The third parameter, <code>options</code>, is optional. If an object is
+  passed,
+
+  <code>saveGif()</code> will use its properties to customize the gif.
+  <code>saveGif()</code>
+
+  recognizes the properties <code>delay</code>, <code>units</code>,
+  <code>silent</code>,
+
+  <code>notificationDuration</code>, and <code>notificationID</code>.</p>
+line: 204
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the circle.
+      let c = frameCount % 255;
+      fill(c);
+
+      // Display the circle.
+      circle(50, 50, 25);
+    }
+
+    // Save a 5-second gif when the user presses the 's' key.
+    function keyPressed() {
+      if (key === 's') {
+        saveGif('mySketch', 5);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the circle.
+      let c = frameCount % 255;
+      fill(c);
+
+      // Display the circle.
+      circle(50, 50, 25);
+    }
+
+    // Save a 5-second gif when the user presses the 's' key.
+    // Wait 1 second after the key press before recording.
+    function keyPressed() {
+      if (key === 's') {
+        saveGif('mySketch', 5, { delay: 1 });
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: filename
+    description: |
+      <p>file name of gif.</p>
+    type: String
+  - name: duration
+    description: |
+      <p>duration in seconds to capture from the sketch.</p>
+    type: Number
+  - name: options
+    description: |
+      <p>an object that can contain five more properties:
+                       <code>delay</code>, a Number specifying how much time to wait before recording;
+                       <code>units</code>, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
+                       <code>silent</code>, a Boolean that defines presence of progress notifications. By default it’s <code>false</code>;
+                       <code>notificationDuration</code>, a Number that defines how long in seconds the final notification
+                       will live. By default it's <code>0</code>, meaning the notification will never be removed;
+                       <code>notificationID</code>, a String that specifies the id of the notification's DOM element. By default it’s <code>'progressBar’</code>.</p>
+    type: Object
+    optional: true
+chainable: false
+---
+
+
+# saveGif
diff --git a/src/content/reference/en/p5 copy/saveJSON.mdx b/src/content/reference/en/p5 copy/saveJSON.mdx
new file mode 100644
index 0000000000..d5e664d0b2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveJSON.mdx	
@@ -0,0 +1,170 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1979
+title: saveJSON
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Saves an <code>Object</code> or <code>Array</code> to a JSON file.</p>
+
+  <p>JavaScript Object Notation
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
+  target="_blank">JSON</a>)
+
+  is a standard format for sending data between applications. The format is
+
+  based on JavaScript objects which have keys and values. JSON files store
+
+  data in an object with strings as keys. Values can be strings, numbers,
+
+  Booleans, arrays, <code>null</code>, or other objects.</p>
+
+  <p>The first parameter, <code>json</code>, is the data to save. The data can
+  be an array,
+
+  as in <code>[1, 2, 3]</code>, or an object, as in
+
+  <code>{ x: 50, y: 50, color: 'deeppink' }</code>.</p>
+
+  <p>The second parameter, <code>filename</code>, is a string that sets the
+  file's name.
+
+  For example, calling <code>saveJSON([1, 2, 3], 'data.json')</code> saves the
+  array
+
+  <code>[1, 2, 3]</code> to a file called <code>data.json</code> on the user's
+  computer.</p>
+
+  <p>The third parameter, <code>optimize</code>, is optional. If
+  <code>true</code> is passed, as in
+
+  <code>saveJSON([1, 2, 3], 'data.json', true)</code>, then all unneeded
+  whitespace will
+
+  be removed to reduce the file size.</p>
+
+  <p>Note: The browser will either save the file immediately or prompt the user
+
+  with a dialogue window.</p>
+line: 1979
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        let data = [1, 2, 3];
+
+        // Save the JSON file.
+        saveJSON(data, 'numbers.json');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an object.
+        let data = { x: mouseX, y: mouseY };
+
+        // Save the JSON file.
+        saveJSON(data, 'state.json');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an object.
+        let data = { x: mouseX, y: mouseY };
+
+        // Save the JSON file and reduce its size.
+        saveJSON(data, 'state.json', true);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: json
+    description: |
+      <p>data to save.</p>
+    type: Array|Object
+  - name: filename
+    description: |
+      <p>name of the file to be saved.</p>
+    type: String
+  - name: optimize
+    description: |
+      <p>whether to trim unneeded whitespace. Defaults
+                                   to <code>true</code>.</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# saveJSON
diff --git a/src/content/reference/en/p5 copy/saveSound.mdx b/src/content/reference/en/p5 copy/saveSound.mdx
new file mode 100644
index 0000000000..3e8e7d0667
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveSound.mdx	
@@ -0,0 +1,35 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L1145
+title: saveSound
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Save a p5.SoundFile as a .wav file. The browser will prompt the user
+
+  to download the file to their device.
+
+  For uploading audio to a server, use
+
+  <a
+  href="/docs/reference/#/p5.SoundFile/saveBlob/"><code>p5.SoundFile.saveBlob</code></a>.</p>
+line: 1145
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: soundFile
+    description: |
+      <p>p5.SoundFile that you wish to save</p>
+    type: p5.SoundFile
+  - name: fileName
+    description: |
+      <p>name of the resulting .wav file.</p>
+    type: String
+chainable: false
+---
+
+
+# saveSound
diff --git a/src/content/reference/en/p5 copy/saveStrings.mdx b/src/content/reference/en/p5 copy/saveStrings.mdx
new file mode 100644
index 0000000000..36c6c448a2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveStrings.mdx	
@@ -0,0 +1,185 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2118
+title: saveStrings
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Saves an <code>Array</code> of <code>String</code>s to a file, one per
+  line.</p>
+
+  <p>The first parameter, <code>list</code>, is an array with the strings to
+  save.</p>
+
+  <p>The second parameter, <code>filename</code>, is a string that sets the
+  file's name.
+
+  For example, calling <code>saveStrings(['0', '01', '011'], 'data.txt')</code>
+  saves
+
+  the array <code>['0', '01', '011']</code> to a file called
+  <code>data.txt</code> on the user's
+
+  computer.</p>
+
+  <p>The third parameter, <code>extension</code>, is optional. If a string is
+  passed, as in
+
+  <code>saveStrings(['0', '01', '0</code>1'], 'data', 'txt')`, the second
+  parameter will
+
+  be interpreted as the file name and the third parameter as the extension.</p>
+
+  <p>The fourth parameter, <code>isCRLF</code>, is also optional, If
+  <code>true</code> is passed, as
+
+  in <code>saveStrings(['0', '01', '011'], 'data', 'txt', true)</code>, then two
+
+  characters, <code>\r\n</code> , will be added to the end of each string to
+  create new
+
+  lines in the saved file. <code>\r</code> is a carriage return (CR) and
+  <code>\n</code> is a line
+
+  feed (LF). By default, only <code>\n</code> (line feed) is added to each
+  string in
+
+  order to create new lines.</p>
+
+  <p>Note: The browser will either save the file immediately or prompt the user
+
+  with a dialogue window.</p>
+line: 2118
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        let data = ['0', '01', '011'];
+
+        // Save the text file.
+        saveStrings(data, 'data.txt');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        // ASCII art courtesy Wikipedia:
+        // https://en.wikipedia.org/wiki/ASCII_art
+        let data = [' (\\_/) ', "(='.'=)", '(")_(")'];
+
+        // Save the text file.
+        saveStrings(data, 'cat', 'txt');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        //   +--+
+        //  /  /|
+        // +--+ +
+        // |  |/
+        // +--+
+        let data = ['  +--+', ' /  /|', '+--+ +', '|  |/', '+--+'];
+
+        // Save the text file.
+        // Use CRLF for line endings.
+        saveStrings(data, 'box', 'txt', true);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>data to save.</p>
+    type: 'String[]'
+  - name: filename
+    description: |
+      <p>name of file to be saved.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>format to use for the file.</p>
+    type: String
+    optional: true
+  - name: isCRLF
+    description: |
+      <p>whether to add <code>\r\n</code> to the end of each
+                                  string. Defaults to <code>false</code>.</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# saveStrings
diff --git a/src/content/reference/en/p5 copy/saveTable.mdx b/src/content/reference/en/p5 copy/saveTable.mdx
new file mode 100644
index 0000000000..dd6e64ea4d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveTable.mdx	
@@ -0,0 +1,70 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2275
+title: saveTable
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Writes the contents of a <a href="/reference/p5/p5.Table">Table</a> object
+  to a file. Defaults to a
+
+  text file with comma-separated-values ('csv') but can also
+
+  use tab separation ('tsv'), or generate an HTML table ('html').
+
+  The file saving process and location of the saved file will
+
+  vary between web browsers.</p>
+line: 2275
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+     let table;
+
+     function setup() {
+     table = new p5.Table();
+
+     table.addColumn('id');
+     table.addColumn('species');
+     table.addColumn('name');
+
+     let newRow = table.addRow();
+     newRow.setNum('id', table.getRowCount() - 1);
+     newRow.setString('species', 'Panthera leo');
+     newRow.setString('name', 'Lion');
+
+     // To save, un-comment next line then click 'run'
+     // saveTable(table, 'new.csv');
+
+     describe('no image displayed');
+     }
+
+     // Saves the following to a file called 'new.csv':
+     // id,species,name
+     // 0,Panthera leo,Lion
+     </code></div>
+class: p5
+params:
+  - name: Table
+    description: |
+      <p>the <a href="#/p5.Table">Table</a> object to save to a file</p>
+    type: p5.Table
+  - name: filename
+    description: |
+      <p>the filename to which the Table should be saved</p>
+    type: String
+  - name: options
+    description: |
+      <p>can be one of "tsv", "csv", or "html"</p>
+    type: String
+    optional: true
+chainable: false
+---
+
+
+# saveTable
diff --git a/src/content/reference/en/p5 copy/scale.mdx b/src/content/reference/en/p5 copy/scale.mdx
new file mode 100644
index 0000000000..a459477d80
--- /dev/null
+++ b/src/content/reference/en/p5 copy/scale.mdx	
@@ -0,0 +1,231 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L878
+title: scale
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Scales the coordinate system.</p>
+
+  <p>By default, shapes are drawn at their original scale. A rectangle that's 50
+
+  pixels wide appears to take up half the width of a 100 pixel-wide canvas.
+
+  The <code>scale()</code> function can shrink or stretch the coordinate system
+  so that
+
+  shapes appear at different sizes. There are two ways to call
+  <code>scale()</code> with
+
+  parameters that set the scale factor(s).</p>
+
+  <p>The first way to call <code>scale()</code> uses numbers to set the amount
+  of scaling.
+
+  The first parameter, <code>s</code>, sets the amount to scale each axis. For
+  example,
+
+  calling <code>scale(2)</code> stretches the x-, y-, and z-axes by a factor of
+  2. The
+
+  next two parameters, <code>y</code> and <code>z</code>, are optional. They set
+  the amount to
+
+  scale the y- and z-axes. For example, calling <code>scale(2, 0.5, 1)</code>
+  stretches
+
+  the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
+
+  leaves the z-axis unchanged.</p>
+
+  <p>The second way to call <code>scale()</code> uses a <a
+  href="/reference/p5/p5.Vector">p5.Vector</a>
+
+  object to set the scale factors. For example, calling
+  <code>scale(myVector)</code>
+
+  uses the x-, y-, and z-components of <code>myVector</code> to set the amount
+  of
+
+  scaling along the x-, y-, and z-axes. Doing so is the same as calling
+
+  <code>scale(myVector.x, myVector.y, myVector.z)</code>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>scale(1)</code>
+
+  twice has the same effect as calling <code>scale(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>scale(2)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to grow continuously.</p>
+line: 878
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Scale the coordinate system by a factor of 0.5.
+      scale(0.5);
+
+      // Draw a square at (30, 20).
+      // It appears at (15, 10) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle and a square drawn in white on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Scale the coordinate system by factors of
+      // 0.5 along the x-axis and
+      // 1.3 along the y-axis.
+      scale(0.5, 1.3);
+
+      // Draw a square at (30, 20).
+      // It appears as a rectangle at (15, 26) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle and a square drawn in white on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Create a p5.Vector object.
+      let v = createVector(0.5, 1.3);
+
+      // Scale the coordinate system by factors of
+      // 0.5 along the x-axis and
+      // 1.3 along the y-axis.
+      scale(v);
+
+      // Draw a square at (30, 20).
+      // It appears as a rectangle at (15, 26) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw the red sphere.
+      fill('red');
+      box();
+
+      // Scale the coordinate system by factors of
+      // 0.5 along the x-axis and
+      // 1.3 along the y-axis and
+      // 2 along the z-axis.
+      scale(0.5, 1.3, 2);
+
+      // Draw the blue sphere.
+      fill('blue');
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 878
+    params:
+      - name: s
+        description: |
+          <p>amount to scale along the positive x-axis.</p>
+        type: 'Number|p5.Vector|Number[]'
+      - name: 'y'
+        description: >
+          <p>amount to scale along the positive y-axis. Defaults to
+          <code>s</code>.</p>
+        type: Number
+        optional: true
+      - name: z
+        description: >
+          <p>amount to scale along the positive z-axis. Defaults to
+          <code>y</code>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1039
+    params:
+      - name: scales
+        description: |
+          <p>vector whose components should be used to scale.</p>
+        type: 'p5.Vector|Number[]'
+    chainable: 1
+chainable: true
+---
+
+
+# scale
diff --git a/src/content/reference/en/p5 copy/second.mdx b/src/content/reference/en/p5 copy/second.mdx
new file mode 100644
index 0000000000..e29042801c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/second.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L277
+title: second
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current second as a number from 0–59.</p>
+line: 277
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current second.
+      let s = second();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the second.
+      text(`Current second: ${s}`, 10, 50, 80);
+
+      describe(`The text 'Current second: ${s}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current second between 0 and 59.
+  type: Integer
+chainable: false
+---
+
+
+# second
diff --git a/src/content/reference/en/p5 copy/select.mdx b/src/content/reference/en/p5 copy/select.mdx
new file mode 100644
index 0000000000..0ace11ab0d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/select.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L21
+title: select
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Searches the page for the first element that matches the given
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
+  target="_blank">CSS selector string</a>.</p>
+
+  <p>The selector string can be an ID, class, tag name, or a combination.
+
+  <code>select()</code> returns a <a
+  href="/reference/p5/p5.Element">p5.Element</a> object if it
+
+  finds a match and <code>null</code> if not.</p>
+
+  <p>The second parameter, <code>container</code>, is optional. It specifies a
+  container to
+
+  search within. <code>container</code> can be CSS selector string, a
+
+  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
+  target="_blank">HTMLElement</a> object.</p>
+line: 21
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      // Select the canvas by its tag.
+      let cnv = select('canvas');
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      // Add a class attribute to the canvas.
+      cnv.class('pinkborder');
+
+      background(200);
+
+      // Select the canvas by its class.
+      cnv = select('.pinkborder');
+
+      // Style its border.
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      // Set the canvas' ID.
+      cnv.id('mycanvas');
+
+      background(200);
+
+      // Select the canvas by its ID.
+      cnv = select('#mycanvas');
+
+      // Style its border.
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: selectors
+    description: |
+      <p>CSS selector string of element to search for.</p>
+    type: String
+  - name: container
+    description: |
+      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
+    type: String|p5.Element|HTMLElement
+    optional: true
+return:
+  description: <a href="#/p5.Element">p5.Element</a> containing the element.
+  type: p5.Element|null
+chainable: false
+---
+
+
+# select
diff --git a/src/content/reference/en/p5 copy/selectAll.mdx b/src/content/reference/en/p5 copy/selectAll.mdx
new file mode 100644
index 0000000000..ccd1f3329f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/selectAll.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L109
+title: selectAll
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Searches the page for all elements that matches the given
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
+  target="_blank">CSS selector string</a>.</p>
+
+  <p>The selector string can be an ID, class, tag name, or a combination.
+
+  <code>selectAll()</code> returns an array of <a
+  href="/reference/p5/p5.Element">p5.Element</a>
+
+  objects if it finds any matches and an empty array if none are found.</p>
+
+  <p>The second parameter, <code>container</code>, is optional. It specifies a
+  container to
+
+  search within. <code>container</code> can be CSS selector string, a
+
+  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
+  target="_blank">HTMLElement</a> object.</p>
+line: 109
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create three buttons.
+      createButton('1');
+      createButton('2');
+      createButton('3');
+
+      // Select the buttons by their tag.
+      let buttons = selectAll('button');
+
+      // Position the buttons.
+      for (let i = 0; i < 3; i += 1) {
+        buttons[i].position(0, i * 30);
+      }
+
+      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create three buttons and position them.
+      let b1 = createButton('1');
+      b1.position(0, 0);
+      let b2 = createButton('2');
+      b2.position(0, 30);
+      let b3 = createButton('3');
+      b3.position(0, 60);
+
+      // Add a class attribute to each button.
+      b1.class('btn');
+      b2.class('btn btn-pink');
+      b3.class('btn');
+
+      // Select the buttons by their class.
+      let buttons = selectAll('.btn');
+      let pinkButtons = selectAll('.btn-pink');
+
+      // Style the selected buttons.
+      buttons.forEach(setFont);
+      pinkButtons.forEach(setColor);
+
+      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
+    }
+
+    // Set a button's font to Comic Sans MS.
+    function setFont(btn) {
+      btn.style('font-family', 'Comic Sans MS');
+    }
+
+    // Set a button's background and font color.
+    function setColor(btn) {
+      btn.style('background', 'deeppink');
+      btn.style('color', 'white');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: selectors
+    description: |
+      <p>CSS selector string of element to search for.</p>
+    type: String
+  - name: container
+    description: |
+      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
+    type: String|p5.Element|HTMLElement
+    optional: true
+return:
+  description: >-
+    array of <a href="#/p5.Element">p5.Element</a>s containing any elements
+    found.
+  type: 'p5.Element[]'
+chainable: false
+---
+
+
+# selectAll
diff --git a/src/content/reference/en/p5 copy/set.mdx b/src/content/reference/en/p5 copy/set.mdx
new file mode 100644
index 0000000000..caa9e75a66
--- /dev/null
+++ b/src/content/reference/en/p5 copy/set.mdx	
@@ -0,0 +1,157 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L997
+title: set
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Sets the color of a pixel or draws an image to the canvas.</p>
+
+  <p><code>set()</code> is easy to use but it's not as fast as
+
+  <a href="/reference/p5/pixels/">pixels</a>. Use <a
+  href="/reference/p5/pixels/">pixels</a>
+
+  to set many pixel values.</p>
+
+  <p><code>set()</code> interprets the first two parameters as x- and
+  y-coordinates. It
+
+  interprets the last parameter as a grayscale value, a <code>[R, G, B,
+  A]</code> pixel
+
+  array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object. If an image is passed,
+  the first
+
+  two parameters set the coordinates for the image's upper-left corner,
+
+  regardless of the current <a
+  href="/reference/p5/imageMode/">imageMode()</a>.</p>
+
+  <p><a href="/reference/p5/updatePixels/">updatePixels()</a> must be called
+  after using
+
+  <code>set()</code> for changes to appear.</p>
+line: 997
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set four pixels to black.
+      set(30, 20, 0);
+      set(85, 20, 0);
+      set(85, 75, 0);
+      set(30, 75, 0);
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Four black dots arranged in a square drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let black = color(0);
+
+      // Set four pixels to black.
+      set(30, 20, black);
+      set(85, 20, black);
+      set(85, 75, black);
+      set(30, 75, black);
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Four black dots arranged in a square drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Draw a horizontal color gradient.
+      for (let x = 0; x < 100; x += 1) {
+        for (let y = 0; y < 100; y += 1) {
+          // Calculate the grayscale value.
+          let c = map(x, 0, 100, 0, 255);
+
+          // Set the pixel using the grayscale value.
+          set(x, y, c);
+        }
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A horizontal color gradient from black to white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the image to set all pixels.
+      set(0, 0, img);
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('An image of a mountain landscape.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the pixel.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the pixel.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>grayscale value | pixel array |
+                                     <a href="#/p5.Color">p5.Color</a> object | <a href="#/p5.Image">p5.Image</a> to copy.</p>
+    type: 'Number|Number[]|Object'
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5 copy/setAttributes.mdx b/src/content/reference/en/p5 copy/setAttributes.mdx
new file mode 100644
index 0000000000..368bc49c6c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setAttributes.mdx	
@@ -0,0 +1,163 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.RendererGL.js#L118
+title: setAttributes
+module: Rendering
+submodule: Rendering
+file: src/webgl/p5.RendererGL.js
+description: |
+  <p>Set attributes for the WebGL Drawing context.
+  This is a way of adjusting how the WebGL
+  renderer works to fine-tune the display and performance.</p>
+  <p>Note that this will reinitialize the drawing context
+  if called after the WebGL canvas is made.</p>
+  <p>If an object is passed as the parameter, all attributes
+  not declared in the object will be set to defaults.</p>
+  <p>The available attributes are:
+  <br>
+  alpha - indicates if the canvas contains an alpha buffer
+  default is true</br></p>
+  <p>depth - indicates whether the drawing buffer has a depth buffer
+  of at least 16 bits - default is true</p>
+  <p>stencil - indicates whether the drawing buffer has a stencil buffer
+  of at least 8 bits</p>
+  <p>antialias - indicates whether or not to perform anti-aliasing
+  default is false (true in Safari)</p>
+  <p>premultipliedAlpha - indicates that the page compositor will assume
+  the drawing buffer contains colors with pre-multiplied alpha
+  default is true</p>
+  <p>preserveDrawingBuffer - if true the buffers will not be cleared and
+  and will preserve their values until cleared or overwritten by author
+  (note that p5 clears automatically on draw loop)
+  default is true</p>
+  <p>perPixelLighting - if true, per-pixel lighting will be used in the
+  lighting shader otherwise per-vertex lighting is used.
+  default is true.</p>
+  <p>version - either 1 or 2, to specify which WebGL version to ask for. By
+  default, WebGL 2 will be requested. If WebGL2 is not available, it will
+  fall back to WebGL 1. You can check what version is used with by looking at
+  the global <code>webglVersion</code> property.</p>
+line: 118
+isConstructor: false
+itemtype: method
+alt: a rotating cube with smoother edges
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      push();
+      rotateZ(frameCount * 0.02);
+      rotateX(frameCount * 0.02);
+      rotateY(frameCount * 0.02);
+      fill(0, 0, 0);
+      box(50);
+      pop();
+    }
+    </code>
+    </div>
+    <br>
+    Now with the antialias attribute set to true.
+    <br>
+    <div>
+    <code>
+    function setup() {
+      setAttributes('antialias', true);
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      push();
+      rotateZ(frameCount * 0.02);
+      rotateX(frameCount * 0.02);
+      rotateY(frameCount * 0.02);
+      fill(0, 0, 0);
+      box(50);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // press the mouse button to disable perPixelLighting
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      fill(255);
+    }
+
+    let lights = [
+      { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+      { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+      { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+      { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+      { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+      { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+    ];
+
+    function draw() {
+      let t = millis() / 1000 + 1000;
+      background(0);
+      directionalLight(color('#222'), 1, 1, 1);
+
+      for (let i = 0; i < lights.length; i++) {
+        let light = lights[i];
+        pointLight(
+          color(light.c),
+          p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+        );
+      }
+
+      specularMaterial(255);
+      sphere(width * 0.1);
+
+      rotateX(t * 0.77);
+      rotateY(t * 0.83);
+      rotateZ(t * 0.91);
+      torus(width * 0.3, width * 0.07, 24, 10);
+    }
+
+    function mousePressed() {
+      setAttributes('perPixelLighting', false);
+      noStroke();
+      fill(255);
+    }
+    function mouseReleased() {
+      setAttributes('perPixelLighting', true);
+      noStroke();
+      fill(255);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 118
+    params:
+      - name: key
+        description: |
+          <p>Name of attribute</p>
+        type: String
+      - name: value
+        description: |
+          <p>New value of named attribute</p>
+        type: Boolean
+  - line: 262
+    params:
+      - name: obj
+        description: |
+          <p>object with key-value pairs</p>
+        type: Object
+chainable: false
+---
+
+
+# setAttributes
diff --git a/src/content/reference/en/p5 copy/setBPM.mdx b/src/content/reference/en/p5 copy/setBPM.mdx
new file mode 100644
index 0000000000..d2e94a6c5d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setBPM.mdx	
@@ -0,0 +1,29 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L9084
+title: setBPM
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the global tempo, in beats per minute, for all
+  p5.Parts. This method will impact all active p5.Parts.</p>
+line: 9084
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: BPM
+    description: |
+      <p>Beats Per Minute</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>Seconds from now</p>
+    type: Number
+chainable: false
+---
+
+
+# setBPM
diff --git a/src/content/reference/en/p5 copy/setCamera.mdx b/src/content/reference/en/p5 copy/setCamera.mdx
new file mode 100644
index 0000000000..bd4727d474
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setCamera.mdx	
@@ -0,0 +1,81 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L3897
+title: setCamera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets the current (active) camera of a 3D sketch.</p>
+
+  <p><code>setCamera()</code> allows for switching between multiple cameras
+  created with
+
+  <a href="/reference/p5/createCamera/">createCamera()</a>.</p>
+
+  <p>Note: <code>setCamera()</code> can only be used in WebGL mode.</p>
+line: 3897
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to toggle between cameras.
+
+    let cam1;
+    let cam2;
+    let usingCam1 = true;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the first camera.
+      // Keep its default settings.
+      cam1 = createCamera();
+
+      // Create the second camera.
+      // Place it at the top-left.
+      // Point it at the origin.
+      cam2 = createCamera();
+      cam2.setPosition(400, -400, 800);
+      cam2.lookAt(0, 0, 0);
+
+      // Set the current camera to cam1.
+      setCamera(cam1);
+
+      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the box.
+      box();
+    }
+
+    // Toggle the current camera when the user double-clicks.
+    function doubleClicked() {
+      if (usingCam1 === true) {
+        setCamera(cam2);
+        usingCam1 = false;
+      } else {
+        setCamera(cam1);
+        usingCam1 = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: cam
+    description: |
+      <p>camera that should be made active.</p>
+    type: p5.Camera
+chainable: false
+---
+
+
+# setCamera
diff --git a/src/content/reference/en/p5 copy/setMoveThreshold.mdx b/src/content/reference/en/p5 copy/setMoveThreshold.mdx
new file mode 100644
index 0000000000..3b90fb5f4d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setMoveThreshold.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L417
+title: setMoveThreshold
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>
+  function is used to set the movement threshold for
+
+  the <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function. The
+  default threshold is set to 0.5.</p>
+line: 417
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // You will need to move the device incrementally further
+    // the closer the square's color gets to white in order to change the value.
+
+    let value = 0;
+    let threshold = 0.5;
+    function setup() {
+      setMoveThreshold(threshold);
+    }
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device moves`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      threshold = threshold + 0.1;
+      if (value > 255) {
+        value = 0;
+        threshold = 30;
+      }
+      setMoveThreshold(threshold);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>The threshold value</p>
+    type: Number
+chainable: false
+---
+
+
+# setMoveThreshold
diff --git a/src/content/reference/en/p5 copy/setShakeThreshold.mdx b/src/content/reference/en/p5 copy/setShakeThreshold.mdx
new file mode 100644
index 0000000000..30af9eadb0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setShakeThreshold.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L459
+title: setShakeThreshold
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>
+  function is used to set the movement threshold for
+
+  the <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function. The
+  default threshold is set to 30.</p>
+line: 459
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // You will need to shake the device more firmly
+    // the closer the box's fill gets to white in order to change the value.
+
+    let value = 0;
+    let threshold = 30;
+    function setup() {
+      setShakeThreshold(threshold);
+    }
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device is being shaked`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      threshold = threshold + 5;
+      if (value > 255) {
+        value = 0;
+        threshold = 30;
+      }
+      setShakeThreshold(threshold);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>The threshold value</p>
+    type: Number
+chainable: false
+---
+
+
+# setShakeThreshold
diff --git a/src/content/reference/en/p5 copy/setup.mdx b/src/content/reference/en/p5 copy/setup.mdx
new file mode 100644
index 0000000000..6a71ea6a0f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setup.mdx	
@@ -0,0 +1,111 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L87
+title: setup
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>A function that's called once when the sketch begins running.</p>
+
+  <p>Declaring the function <code>setup()</code> sets a code block to run once
+
+  automatically when the sketch starts running. It's used to perform
+
+  setup tasks such as creating the canvas and initializing variables:</p>
+
+  <pre><code class="language-js">function setup() {
+    // Code to run once at the start of the sketch.
+  }
+
+  </code></pre>
+
+  <p>Code placed in <code>setup()</code> will run once before code placed in
+
+  <a href="/reference/p5/draw/">draw()</a> begins looping. If the
+
+  <a href="/reference/p5/preload/">preload()</a> is declared, then
+  <code>setup()</code> will
+
+  run immediately after <a href="/reference/p5/preload/">preload()</a> finishes
+
+  loading assets.</p>
+
+  <p>Note: <code>setup()</code> doesn’t have to be declared, but it’s common
+  practice to do so.</p>
+line: 87
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A white circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Paint the background once.
+      background(200);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+      );
+    }
+
+    function draw() {
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe(
+        'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'
+      );
+    }
+
+    function draw() {
+      // Style the circle.
+      noStroke();
+
+      // Draw the circle.
+      circle(mouseX, mouseY, 10);
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# setup
diff --git a/src/content/reference/en/p5 copy/shader.mdx b/src/content/reference/en/p5 copy/shader.mdx
new file mode 100644
index 0000000000..c8213d9261
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shader.mdx	
@@ -0,0 +1,244 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L682
+title: shader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the <a href="/reference/p5/p5.Shader">p5.Shader</a> object to apply
+  while drawing.</p>
+
+  <p>Shaders are programs that run on the graphics processing unit (GPU). They
+
+  can process many pixels or vertices at the same time, making them fast for
+
+  many graphics tasks. They’re written in a language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.
+
+  <a href="/reference/p5/p5.Shader">p5.Shader</a> objects can be created using
+  the
+
+  <a href="/reference/p5/createShader/">createShader()</a> and
+
+  <a href="/reference/p5/loadShader/">loadShader()</a> functions.</p>
+
+  <p>The parameter, <code>s</code>, is the <a
+  href="/reference/p5/p5.Shader">p5.Shader</a> object to
+
+  apply. For example, calling <code>shader(myShader)</code> applies
+  <code>myShader</code> to
+
+  process each pixel on the canvas. The shader will be used for:</p>
+
+  <ul>
+
+  <li>Fills when a texture is enabled if it includes a uniform
+  <code>sampler2D</code>.</li>
+
+  <li>Fills when lights are enabled if it includes the attribute
+  <code>aNormal</code>, or if it has any of the following uniforms:
+  <code>uUseLighting</code>, <code>uAmbientLightCount</code>,
+  <code>uDirectionalLightCount</code>, <code>uPointLightCount</code>,
+  <code>uAmbientColor</code>, <code>uDirectionalDiffuseColors</code>,
+  <code>uDirectionalSpecularColors</code>, <code>uPointLightLocation</code>,
+  <code>uPointLightDiffuseColors</code>, <code>uPointLightSpecularColors</code>,
+  <code>uLightingDirection</code>, or <code>uSpecular</code>.</li>
+
+  <li>Fills whenever there are no lights or textures.</li>
+
+  <li>Strokes if it includes the uniform <code>uStrokeWeight</code>.</li>
+
+  </ul>
+
+  <p>The source code from a <a href="/reference/p5/p5.Shader">p5.Shader</a>
+  object's
+
+  fragment and vertex shaders will be compiled the first time it's passed to
+
+  <code>shader()</code>. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compileShader/"
+  target="_blank">MDN</a>
+
+  for more information about compiling shaders.</p>
+
+  <p>Calling <a href="/reference/p5/resetShader/">resetShader()</a> restores a
+  sketch’s
+
+  default shaders.</p>
+
+  <p>Note: Shaders can only be used in WebGL mode.</p>
+line: 682
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+
+    void main() {
+      // Set each pixel's RGBA value to yellow.
+      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let shaderProgram = createShader(vertSrc, fragSrc);
+
+      // Apply the p5.Shader object.
+      shader(shaderProgram);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A yellow square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates between 0 and 2.
+      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let redGreen;
+    let orangeBlue;
+    let showRedGreen = false;
+
+    // Load the shader and create two separate p5.Shader objects.
+    function preload() {
+      redGreen = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
+      orangeBlue = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Initialize the redGreen shader.
+      shader(redGreen);
+
+      // Set the redGreen shader's center and background color.
+      redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+      redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+
+      // Initialize the orangeBlue shader.
+      shader(orangeBlue);
+
+      // Set the orangeBlue shader's center and background color.
+      orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+      orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+
+      describe(
+        'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'
+      );
+    }
+
+    function draw() {
+      // Update the offset values for each shader.
+      // Move orangeBlue vertically.
+      // Move redGreen horizontally.
+      orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);
+      redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);
+
+      if (showRedGreen === true) {
+        shader(redGreen);
+      } else {
+        shader(orangeBlue);
+      }
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a quad as a drawing surface.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+
+    // Toggle between shaders when the user double-clicks.
+    function doubleClicked() {
+      showRedGreen = !showRedGreen;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: s
+    description: |
+      <p><a href="#/p5.Shader">p5.Shader</a> object
+                           to apply.</p>
+    type: p5.Shader
+chainable: true
+---
+
+
+# shader
diff --git a/src/content/reference/en/p5 copy/shearX.mdx b/src/content/reference/en/p5 copy/shearX.mdx
new file mode 100644
index 0000000000..244fea83e2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shearX.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1069
+title: shearX
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Shears the x-axis so that shapes appear skewed.</p>
+
+  <p>By default, the x- and y-axes are perpendicular. The <code>shearX()</code>
+  function
+
+  transforms the coordinate system so that x-coordinates are translated while
+
+  y-coordinates are fixed.</p>
+
+  <p>The first parameter, <code>angle</code>, is the amount to shear. For
+  example, calling
+
+  <code>shearX(1)</code> transforms all x-coordinates using the formula
+
+  <code>x = x + y * tan(angle)</code>. <code>shearX()</code> interprets angle
+  values using the
+
+  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+
+  <code>shearX(1)</code> twice has the same effect as calling
+  <code>shearX(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and
+
+  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
+
+  transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>shearX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't
+
+  cause shapes to shear continuously.</p>
+line: 1069
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the x-axis.
+      shearX(QUARTER_PI);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the x-axis.
+      shearX(45);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle to shear by in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# shearX
diff --git a/src/content/reference/en/p5 copy/shearY.mdx b/src/content/reference/en/p5 copy/shearY.mdx
new file mode 100644
index 0000000000..007a8b4bfa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shearY.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1146
+title: shearY
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Shears the y-axis so that shapes appear skewed.</p>
+
+  <p>By default, the x- and y-axes are perpendicular. The <code>shearY()</code>
+  function
+
+  transforms the coordinate system so that y-coordinates are translated while
+
+  x-coordinates are fixed.</p>
+
+  <p>The first parameter, <code>angle</code>, is the amount to shear. For
+  example, calling
+
+  <code>shearY(1)</code> transforms all y-coordinates using the formula
+
+  <code>y = y + x * tan(angle)</code>. <code>shearY()</code> interprets angle
+  values using the
+
+  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+
+  <code>shearY(1)</code> twice has the same effect as calling
+  <code>shearY(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and
+
+  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
+
+  transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>shearY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't
+
+  cause shapes to shear continuously.</p>
+line: 1146
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the y-axis.
+      shearY(QUARTER_PI);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the y-axis.
+      shearY(45);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle to shear by in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# shearY
diff --git a/src/content/reference/en/p5 copy/shininess.mdx b/src/content/reference/en/p5 copy/shininess.mdx
new file mode 100644
index 0000000000..a093e246c8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shininess.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2998
+title: shininess
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the amount of gloss ("shininess") of a
+
+  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
+
+  <p>Shiny materials focus reflected light more than dull materials.
+
+  <code>shininess()</code> affects the way materials reflect light sources
+  including
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>,
+
+  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
+
+  <p>The parameter, <code>shine</code>, is a number that sets the amount of
+  shininess.
+
+  <code>shine</code> must be greater than 1, which is its default value.</p>
+line: 2998
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn on a red ambient light.
+      ambientLight(255, 0, 0);
+
+      // Get the mouse's coordinates.
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Turn on a white point light that follows the mouse.
+      pointLight(255, 255, 255, mx, my, 50);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a specular material with a grayscale value.
+      specularMaterial(255);
+
+      // Draw the left sphere with low shininess.
+      translate(-25, 0, 0);
+      shininess(10);
+      sphere(20);
+
+      // Draw the right sphere with high shininess.
+      translate(50, 0, 0);
+      shininess(100);
+      sphere(20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: shine
+    description: |
+      <p>amount of shine.</p>
+    type: Number
+chainable: true
+---
+
+
+# shininess
diff --git a/src/content/reference/en/p5 copy/shorten.mdx b/src/content/reference/en/p5 copy/shorten.mdx
new file mode 100644
index 0000000000..a1018f7fb8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shorten.mdx	
@@ -0,0 +1,44 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L161
+title: shorten
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Decreases an array by one element and returns the shortened array,
+  maps to Array.pop().</p>
+line: 161
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">array.pop()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = ['A', 'B', 'C'];
+      print(myArray); // ['A', 'B', 'C']
+      let newArray = shorten(myArray);
+      print(myArray); // ['A','B','C']
+      print(newArray); // ['A','B']
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to shorten</p>
+    type: Array
+return:
+  description: shortened Array
+  type: Array
+chainable: false
+---
+
+
+# shorten
diff --git a/src/content/reference/en/p5 copy/shuffle.mdx b/src/content/reference/en/p5 copy/shuffle.mdx
new file mode 100644
index 0000000000..a4ead252ef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shuffle.mdx	
@@ -0,0 +1,132 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L185
+title: shuffle
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: >
+  <p>Shuffles the elements of an array.</p>
+
+  <p>The first parameter, <code>array</code>, is the array to be shuffled. For
+  example,
+
+  calling <code>shuffle(myArray)</code> will shuffle the elements of
+  <code>myArray</code>. By
+
+  default, the original array won’t be modified. Instead, a copy will be
+
+  created, shuffled, and returned.</p>
+
+  <p>The second parameter, <code>modify</code>, is optional. If
+  <code>true</code> is passed, as in
+
+  <code>shuffle(myArray, true)</code>, then the array will be shuffled in place
+  without
+
+  making a copy.</p>
+line: 185
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of colors.
+      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+
+      // Create a shuffled copy of the array.
+      let shuffledColors = shuffle(colors);
+
+      // Draw  a row of circles using the original array.
+      for (let i = 0; i < colors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 12.5;
+
+        // Style the circle.
+        let c = colors[i];
+        fill(c);
+
+        // Draw the circle.
+        circle(x, 33, 10);
+      }
+
+      // Draw  a row of circles using the original array.
+      for (let i = 0; i < shuffledColors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 12.5;
+
+        // Style the circle.
+        let c = shuffledColors[i];
+        fill(c);
+
+        // Draw the circle.
+        circle(x, 67, 10);
+      }
+
+      describe(
+        'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of colors.
+      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+
+      // Shuffle the array.
+      shuffle(colors, true);
+
+      // Draw  a row of circles using the original array.
+      for (let i = 0; i < colors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 12.5;
+
+        // Style the circle.
+        let c = colors[i];
+        fill(c);
+
+        // Draw the circle.
+        circle(x, 50, 10);
+      }
+
+      describe(
+        'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: array
+    description: |
+      <p>array to shuffle.</p>
+    type: Array
+  - name: bool
+    description: >
+      <p>if <code>true</code>, shuffle the original array in place. Defaults to
+      <code>false</code>.</p>
+    type: Boolean
+    optional: true
+return:
+  description: shuffled array.
+  type: Array
+chainable: false
+---
+
+
+# shuffle
diff --git a/src/content/reference/en/p5 copy/sin.mdx b/src/content/reference/en/p5 copy/sin.mdx
new file mode 100644
index 0000000000..7f0cba972d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sin.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L363
+title: sin
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the sine of an angle.</p>
+
+  <p><code>sin()</code> is useful for many geometric tasks in creative coding.
+  The values
+
+  returned oscillate between -1 and 1 as the input angle increases.
+  <code>sin()</code>
+
+  calculates the sine of an angle, using radians by default, or according to
+
+  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+  DEGREES).</p>
+line: 363
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white ball on a string oscillates up and down.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 50;
+      let y = 30 * sin(frameCount * 0.05) + 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form a wave pattern.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 30 * sin(x * 0.1) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form an infinity symbol.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.1) + 50;
+      let y = 10 * sin(frameCount * 0.2) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>the angle, in radians by default, or according to
+
+      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+      DEGREES).</p>
+    type: Number
+return:
+  description: sine of the angle.
+  type: Number
+chainable: false
+---
+
+
+# sin
diff --git a/src/content/reference/en/p5 copy/smooth.mdx b/src/content/reference/en/p5 copy/smooth.mdx
new file mode 100644
index 0000000000..2c42bda62c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/smooth.mdx	
@@ -0,0 +1,94 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L303
+title: smooth
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Draws certain features with smooth (antialiased) edges.</p>
+
+  <p><code>smooth()</code> is active by default. In 2D mode,
+
+  <a href="/reference/p5/noSmooth/">noSmooth()</a> is helpful for scaling up
+  images
+
+  without blurring. The functions don't affect shapes or fonts.</p>
+
+  <p>In WebGL mode, <a href="/reference/p5/noSmooth/">noSmooth()</a> causes all
+  shapes to
+
+  be drawn with jagged (aliased) edges. The functions don't affect images or
+
+  fonts.</p>
+line: 303
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let heart;
+
+    // Load a pixelated heart image from an image data string.
+    function preload() {
+      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Antialiased hearts.
+      image(heart, 10, 10);
+      image(heart, 20, 10, 16, 16);
+      image(heart, 40, 10, 32, 32);
+
+      // Aliased hearts.
+      noSmooth();
+      image(heart, 10, 60);
+      image(heart, 20, 60, 16, 16);
+      image(heart, 40, 60, 32, 32);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A white circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Disable smoothing.
+      noSmooth();
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A pixelated white circle on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# smooth
diff --git a/src/content/reference/en/p5 copy/sort.mdx b/src/content/reference/en/p5 copy/sort.mdx
new file mode 100644
index 0000000000..c2249d926a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sort.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L300
+title: sort
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Sorts an array of numbers from smallest to largest, or puts an array of
+  words in alphabetical order. The original array is not modified; a
+  re-ordered array is returned. The count parameter states the number of
+  elements to sort. For example, if there are 12 elements in an array and
+  count is set to 5, only the first 5 elements in the array will be sorted.</p>
+line: 300
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">array.sort()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let words = ['banana', 'apple', 'pear', 'lime'];
+      print(words); // ['banana', 'apple', 'pear', 'lime']
+      let count = 4; // length of array
+
+      words = sort(words, count);
+      print(words); // ['apple', 'banana', 'lime', 'pear']
+    }
+    </code></div>
+    <div class = 'norender'><code>
+    function setup() {
+      let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+      print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+      let count = 5; // Less than the length of the array
+
+      numbers = sort(numbers, count);
+      print(numbers); // [1,2,5,6,14,9,8,12]
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to sort</p>
+    type: Array
+  - name: count
+    description: |
+      <p>number of elements to sort, starting from 0</p>
+    type: Integer
+    optional: true
+return:
+  description: the sorted list
+  type: Array
+chainable: false
+---
+
+
+# sort
diff --git a/src/content/reference/en/p5 copy/soundFormats.mdx b/src/content/reference/en/p5 copy/soundFormats.mdx
new file mode 100644
index 0000000000..6bc28fe726
--- /dev/null
+++ b/src/content/reference/en/p5 copy/soundFormats.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L925
+title: soundFormats
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>List the SoundFile formats that you will include. LoadSound
+  will search your directory for these extensions, and will pick
+  a format that is compatable with the client's web browser.
+  <a href="http://media.io/">Here</a> is a free online file
+  converter.</p>
+line: 925
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    function preload() {
+      // set the global sound formats
+      soundFormats('mp3', 'ogg');
+
+      // load either beatbox.mp3, or .ogg, depending on browser
+      mySound = loadSound('/assets/beatbox.mp3');
+    }
+
+    function setup() {
+         let cnv = createCanvas(100, 100);
+         background(220);
+         text('sound loaded! tap to play', 10, 20, width - 20);
+         cnv.mousePressed(function() {
+           mySound.play();
+         });
+       }
+    </code></div>
+class: p5
+params:
+  - name: formats
+    description: |
+      <p>i.e. 'mp3', 'wav', 'ogg'</p>
+    type: String
+    optional: true
+    multiple: true
+chainable: false
+---
+
+
+# soundFormats
diff --git a/src/content/reference/en/p5 copy/soundOut.mdx b/src/content/reference/en/p5 copy/soundOut.mdx
new file mode 100644
index 0000000000..2f418a829c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/soundOut.mdx	
@@ -0,0 +1,26 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L782
+title: soundOut
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p><code>p5.soundOut</code> is the p5.sound final output bus. It sends output
+  to
+
+  the destination of this window's web audio context. It contains
+
+  Web Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),
+
+  and Gain Nodes for <code>.input</code> and <code>.output</code>.</p>
+line: 782
+isConstructor: false
+itemtype: property
+class: p5
+type: Object
+---
+
+
+# soundOut
diff --git a/src/content/reference/en/p5 copy/specularColor.mdx b/src/content/reference/en/p5 copy/specularColor.mdx
new file mode 100644
index 0000000000..b23e834ca7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/specularColor.mdx	
@@ -0,0 +1,308 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L205
+title: specularColor
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Sets the specular color for lights.</p>
+
+  <p><code>specularColor()</code> affects lights that bounce off a surface in a
+  preferred
+
+  direction. These lights include
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>, and
+
+  <a href="/reference/p5/spotLight/">spotLight()</a>. The function helps to
+  create
+
+  highlights on <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects that
+  are
+
+  styled with <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.
+  If a
+
+  geometry does not use
+
+  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>, then
+
+  <code>specularColor()</code> will have no effect.</p>
+
+  <p>Note: <code>specularColor()</code> doesn’t affect lights that bounce in all
+
+  directions, including <a href="/reference/p5/ambientLight/">ambientLight()</a>
+  and
+
+  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
+
+  <p>There are three ways to call <code>specularColor()</code> with optional
+  parameters to
+
+  set the specular highlight color.</p>
+
+  <p>The first way to call <code>specularColor()</code> has two optional
+  parameters, <code>gray</code>
+
+  and <code>alpha</code>. Grayscale and alpha values between 0 and 255, as in
+
+  <code>specularColor(50)</code> or <code>specularColor(50, 80)</code>, can be
+  passed to set the
+
+  specular highlight color.</p>
+
+  <p>The second way to call <code>specularColor()</code> has one optional
+  parameter,
+
+  <code>color</code>. A <a href="/reference/p5/p5.Color">p5.Color</a> object, an
+  array of color
+
+  values, or a CSS color string can be passed to set the specular highlight
+
+  color.</p>
+
+  <p>The third way to call <code>specularColor()</code> has four optional
+  parameters, <code>v1</code>,
+
+  <code>v2</code>, <code>v3</code>, and <code>alpha</code>. RGBA, HSBA, or HSLA
+  values, as in
+
+  <code>specularColor(255, 0, 0, 80)</code>, can be passed to set the specular
+  highlight
+
+  color. Color values will be interpreted using the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 205
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // No specular color.
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to add a point light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the sphere.
+      noStroke();
+      specularColor(100);
+      specularMaterial(255, 255, 255);
+
+      // Control the light.
+      if (isLit === true) {
+        // Add a white point light from the top-right.
+        pointLight(255, 255, 255, 30, -20, 40);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the point light when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a specular highlight.
+      // Use a p5.Color object.
+      let c = color('dodgerblue');
+      specularColor(c);
+
+      // Add a white point light from the top-right.
+      pointLight(255, 255, 255, 30, -20, 40);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a white specular material.
+      specularMaterial(255, 255, 255);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a specular highlight.
+      // Use a CSS color string.
+      specularColor('#1E90FF');
+
+      // Add a white point light from the top-right.
+      pointLight(255, 255, 255, 30, -20, 40);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a white specular material.
+      specularMaterial(255, 255, 255);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a specular highlight.
+      // Use RGB values.
+      specularColor(30, 144, 255);
+
+      // Add a white point light from the top-right.
+      pointLight(255, 255, 255, 30, -20, 40);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a white specular material.
+      specularMaterial(255, 255, 255);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 205
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+    chainable: 1
+  - line: 423
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 and 255.</p>
+        type: Number
+    chainable: 1
+  - line: 429
+    params:
+      - name: value
+        description: |
+          <p>color as a CSS string.</p>
+        type: String
+    chainable: 1
+  - line: 435
+    params:
+      - name: values
+        description: |
+          <p>color as an array of RGBA, HSBA, or HSLA
+                                          values.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 442
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# specularColor
diff --git a/src/content/reference/en/p5 copy/specularMaterial.mdx b/src/content/reference/en/p5 copy/specularMaterial.mdx
new file mode 100644
index 0000000000..57e8977cf5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/specularMaterial.mdx	
@@ -0,0 +1,311 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2743
+title: specularMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the specular color of shapes’ surface material.</p>
+
+  <p>The <code>specularMaterial()</code> color sets the components of light
+  color that
+
+  glossy coats on shapes will reflect. For example, calling
+
+  <code>specularMaterial(255, 255, 0)</code> would cause a shape to reflect red
+  and
+
+  green light, but not blue light.</p>
+
+  <p>Unlike <a href="/reference/p5/ambientMaterial/">ambientMaterial()</a>,
+
+  <code>specularMaterial()</code> will reflect the full color of light sources
+  including
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>,
+
+  and <a href="/reference/p5/spotLight/">spotLight()</a>. This is what gives it
+  shapes
+
+  their "shiny" appearance. The material’s shininess can be controlled by the
+
+  <a href="/reference/p5/shininess/">shininess()</a> function.</p>
+
+  <p><code>specularMaterial()</code> can be called three ways with different
+  parameters to
+
+  set the material’s color.</p>
+
+  <p>The first way to call <code>specularMaterial()</code> has one parameter,
+  <code>gray</code>.
+
+  Grayscale values between 0 and 255, as in <code>specularMaterial(50)</code>,
+  can be
+
+  passed to set the material’s color. Higher grayscale values make shapes
+
+  appear brighter.</p>
+
+  <p>The second way to call <code>specularMaterial()</code> has one parameter,
+  <code>color</code>. A
+
+  <a href="/reference/p5/p5.Color">p5.Color> object, an array of color values,
+  or a CSS
+
+  color string, as in <code>specularMaterial('magenta')</code>, can be passed to
+  set the
+
+  material’s color.</a></p>
+
+  <p>The third way to call <code>specularMaterial()</code> has four parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
+  HSBA, or HSLA values can be
+
+  passed to set the material’s colors, as in <code>specularMaterial(255, 0,
+  0)</code> or
+
+  <code>specularMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
+  using
+
+  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 2743
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy coat if the user has double-clicked.
+      if (isGlossy === true) {
+        specularMaterial(255);
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy green coat if the user has double-clicked.
+      if (isGlossy === true) {
+        specularMaterial(0, 255, 0);
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy green coat if the user has double-clicked.
+      if (isGlossy === true) {
+        // Create a p5.Color object.
+        let c = color('green');
+        specularMaterial(c);
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy green coat if the user has double-clicked.
+      if (isGlossy === true) {
+        specularMaterial('#00FF00');
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2743
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 (black) and 255 (white).</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha value in the current current
+                                   <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2966
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in
+                                          the current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value
+                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value
+                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2978
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                     an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+    chainable: 1
+chainable: true
+---
+
+
+# specularMaterial
diff --git a/src/content/reference/en/p5 copy/sphere.mdx b/src/content/reference/en/p5 copy/sphere.mdx
new file mode 100644
index 0000000000..c2ceca44ad
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sphere.mdx	
@@ -0,0 +1,165 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1227
+title: sphere
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a sphere.</p>
+
+  <p>A sphere is a 3D shape with triangular faces that connect to form a round
+
+  surface. Spheres with few faces look like crystals. Spheres with many faces
+
+  have smooth surfaces and look like balls.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>sphere(20)</code>, it sets the radius of the sphere. By default,
+  <code>radius</code> is 50.</p>
+
+  <p>The second parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>sphere(20, 5)</code>, it sets the number of triangle subdivisions
+  to use
+
+  along the x-axis. All 3D shapes are made by connecting triangles to form
+
+  their surfaces. By default, <code>detailX</code> is 24.</p>
+
+  <p>The third parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>sphere(20, 5, 2)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailY</code> is 16.</p>
+
+  <p>Note: <code>sphere()</code> can only be used in WebGL mode.</p>
+line: 1227
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      sphere();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      // Set its radius to 30.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      // Set its radius to 30.
+      // Set its detailX to 6.
+      sphere(30, 6);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      // Set its radius to 30.
+      // Set its detailX to 24.
+      // Set its detailY to 4.
+      sphere(30, 24, 4);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the sphere. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# sphere
diff --git a/src/content/reference/en/p5 copy/splice.mdx b/src/content/reference/en/p5 copy/splice.mdx
new file mode 100644
index 0000000000..866bc4ddef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/splice.mdx	
@@ -0,0 +1,58 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L346
+title: splice
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Inserts a value or an array of values into an existing array. The first
+  parameter specifies the initial array to be modified, and the second
+  parameter defines the data to be inserted. The third parameter is an index
+  value which specifies the array position from which to insert data.
+  (Remember that array index numbering starts at zero, so the first position
+  is 0, the second position is 1, and so on.)</p>
+line: 346
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">array.splice()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = [0, 1, 2, 3, 4];
+      let insArray = ['A', 'B', 'C'];
+      print(myArray); // [0, 1, 2, 3, 4]
+      print(insArray); // ['A','B','C']
+
+      splice(myArray, insArray, 3);
+      print(myArray); // [0,1,2,'A','B','C',3,4]
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to splice into</p>
+    type: Array
+  - name: value
+    description: |
+      <p>value to be spliced in</p>
+    type: Any
+  - name: position
+    description: |
+      <p>in the array from which to insert data</p>
+    type: Integer
+return:
+  description: the list
+  type: Array
+chainable: false
+---
+
+
+# splice
diff --git a/src/content/reference/en/p5 copy/split.mdx b/src/content/reference/en/p5 copy/split.mdx
new file mode 100644
index 0000000000..60b7944313
--- /dev/null
+++ b/src/content/reference/en/p5 copy/split.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L690
+title: split
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Splits a <code>String</code> into pieces and returns an array containing
+  the pieces.</p>
+
+  <p>The first parameter, <code>value</code>, is the string to split.</p>
+
+  <p>The second parameter, <code>delim</code>, is the character(s) that should
+  be used to
+
+  split the string. For example, calling
+
+  <code>split('rock...paper...scissors', '...')</code> would return the array
+
+  <code>['rock', 'paper', 'scissors']</code> because there are three periods
+  <code>...</code>
+
+  between each word.</p>
+line: 690
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock...paper...scissors';
+
+      // Split the string at each ...
+      let words = split(string, '...');
+
+      // Print the array to the console:
+      // ["rock", "paper", "scissors"]
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", and "scissors" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>the String to be split</p>
+    type: String
+  - name: delim
+    description: |
+      <p>the String used to separate the data</p>
+    type: String
+return:
+  description: Array of Strings
+  type: 'String[]'
+chainable: false
+---
+
+
+# split
diff --git a/src/content/reference/en/p5 copy/splitTokens.mdx b/src/content/reference/en/p5 copy/splitTokens.mdx
new file mode 100644
index 0000000000..95d6ef4f8e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/splitTokens.mdx	
@@ -0,0 +1,180 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L751
+title: splitTokens
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Splits a <code>String</code> into pieces and returns an array containing
+  the pieces.</p>
+
+  <p><code>splitTokens()</code> is an enhanced version of
+
+  <a href="/reference/p5/split/">split()</a>. It can split a string when any
+  characters
+
+  from a list are detected.</p>
+
+  <p>The first parameter, <code>value</code>, is the string to split.</p>
+
+  <p>The second parameter, <code>delim</code>, is optional. It sets the
+  character(s) that
+
+  should be used to split the string. <code>delim</code> can be a single string,
+  as in
+
+  <code>splitTokens('rock...paper...scissors...shoot', '...')</code>, or an
+  array of
+
+  strings, as in
+
+  <code>splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])</code>. By
+  default,
+
+  if no <code>delim</code> characters are specified, then any whitespace
+  character is
+
+  used to split. Whitespace characters include tab (<code>\t</code>), line feed
+  (<code>\n</code>),
+
+  carriage return (<code>\r</code>), form feed (<code>\f</code>), and space.</p>
+line: 751
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock paper scissors shoot';
+
+      // Split the string at each space.
+      let words = splitTokens(string);
+
+      // Print the array to the console.
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 20;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock...paper...scissors...shoot';
+
+      // Split the string at each ...
+      let words = splitTokens(string, '...');
+
+      // Print the array to the console.
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 20;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock;paper,scissors...shoot';
+
+      // Split the string at each semicolon, comma, or ...
+      let words = splitTokens(string, [';', ',', '...']);
+
+      // Print the array to the console.
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 20;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>string to split.</p>
+    type: String
+  - name: delim
+    description: |
+      <p>character(s) to use for splitting the string.</p>
+    type: String
+    optional: true
+return:
+  description: separated strings.
+  type: 'String[]'
+chainable: false
+---
+
+
+# splitTokens
diff --git a/src/content/reference/en/p5 copy/spotLight.mdx b/src/content/reference/en/p5 copy/spotLight.mdx
new file mode 100644
index 0000000000..3d221dc8f4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/spotLight.mdx	
@@ -0,0 +1,398 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1272
+title: spotLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines from a point in one direction.</p>
+
+  <p>Spot lights are like flashlights that shine in one direction creating a
+
+  cone of light. The shape of the cone can be controlled using the angle and
+
+  concentration parameters. A maximum of 5 spot lights can be active at
+  once.</p>
+
+  <p>There are eight ways to call <code>spotLight()</code> with parameters to
+  set the
+
+  light’s color, position, direction. For example,
+
+  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)</code> creates a red <code>(255,
+  0, 0)</code> light
+
+  at the origin <code>(0, 0, 0)</code> that points to the right <code>(1, 0,
+  0)</code>.</p>
+
+  <p>The <code>angle</code> parameter is optional. It sets the radius of the
+  light cone.
+
+  For example, <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)</code>
+  creates a
+
+  red <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
+  points to the right
+
+  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians. By
+  default, <code>angle</code> is
+
+  <code>PI / 3</code> radians.</p>
+
+  <p>The <code>concentration</code> parameter is also optional. It focuses the
+  light
+
+  towards the center of the light cone. For example,
+
+  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)</code> creates a red
+
+  <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
+  points to the right
+
+  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians at
+  concentration of 50. By
+
+  default, <code>concentration</code> is 100.</p>
+line: 1272
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to adjust the spotlight.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Control the spotlight.
+      if (isLit === true) {
+        // Add a red spot light that shines into the screen.
+        // Set its angle to PI / 32 radians.
+        spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the spotlight when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to adjust the spotlight.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Control the spotlight.
+      if (isLit === true) {
+        // Add a red spot light that shines into the screen.
+        // Set its angle to PI / 3 radians (default).
+        // Set its concentration to 1000.
+        let c = color(255, 0, 0);
+        let position = createVector(0, 0, 100);
+        let direction = createVector(0, 0, -1);
+        spotLight(c, position, direction, PI / 3, 1000);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the spotlight when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1272
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: x
+        description: |
+          <p>x-coordinate of the light.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the light.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the light.</p>
+        type: Number
+      - name: rx
+        description: |
+          <p>x-component of light direction between -1 and 1.</p>
+        type: Number
+      - name: ry
+        description: |
+          <p>y-component of light direction between -1 and 1.</p>
+        type: Number
+      - name: rz
+        description: |
+          <p>z-component of light direction between -1 and 1.</p>
+        type: Number
+      - name: angle
+        description: |
+          <p>angle of the light cone. Defaults to <code>PI / 3</code>.</p>
+        type: Number
+        optional: true
+      - name: concentration
+        description: |
+          <p>concentration of the light. Defaults to 100.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1399
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                                                       an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+      - name: position
+        description: >
+          <p>position of the light as a <a href="#/p5.Vector">p5.Vector</a>
+          object.</p>
+        type: p5.Vector
+      - name: direction
+        description: >
+          <p>direction of light as a <a href="#/p5.Vector">p5.Vector</a>
+          object.</p>
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1408
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: position
+        description: ''
+        type: p5.Vector
+      - name: direction
+        description: ''
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1418
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+      - name: direction
+        description: ''
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1428
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: position
+        description: ''
+        type: p5.Vector
+      - name: rx
+        description: ''
+        type: Number
+      - name: ry
+        description: ''
+        type: Number
+      - name: rz
+        description: ''
+        type: Number
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1438
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+      - name: direction
+        description: ''
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1450
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: position
+        description: ''
+        type: p5.Vector
+      - name: rx
+        description: ''
+        type: Number
+      - name: ry
+        description: ''
+        type: Number
+      - name: rz
+        description: ''
+        type: Number
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1462
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+      - name: rx
+        description: ''
+        type: Number
+      - name: ry
+        description: ''
+        type: Number
+      - name: rz
+        description: ''
+        type: Number
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+chainable: true
+---
+
+
+# spotLight
diff --git a/src/content/reference/en/p5 copy/sq.mdx b/src/content/reference/en/p5 copy/sq.mdx
new file mode 100644
index 0000000000..da0f2c4024
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sq.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L928
+title: sq
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the square of a number.</p>
+
+  <p>Squaring a number means multiplying the number by itself. For example,
+
+  <code>sq(3)</code> evaluates 3 × 3 which is 9. <code>sq(-3)</code> evaluates
+  -3 × -3
+
+  which is also 9. Multiplying two negative numbers produces a positive
+
+  number. The value returned by <code>sq()</code> is always positive.</p>
+line: 928
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = sq(3);
+      circle(33, 33, d);
+
+      // Bottom-right.
+      d = sq(6);
+      circle(67, 67, d);
+
+      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that get higher quickly from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 0.01 * sq(x);
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to square.</p>
+    type: Number
+return:
+  description: squared number.
+  type: Number
+chainable: false
+---
+
+
+# sq
diff --git a/src/content/reference/en/p5 copy/sqrt.mdx b/src/content/reference/en/p5 copy/sqrt.mdx
new file mode 100644
index 0000000000..5e239f6fe4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sqrt.mdx	
@@ -0,0 +1,84 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L988
+title: sqrt
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the square root of a number.</p>
+
+  <p>A number's square root can be multiplied by itself to produce the original
+
+  number. For example, <code>sqrt(9)</code> returns 3 because 3 × 3 = 9.
+  <code>sqrt()</code>
+
+  always returns a positive value. <code>sqrt()</code> doesn't work with
+  negative arguments
+
+  such as <code>sqrt(-9)</code>.</p>
+line: 988
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = sqrt(16);
+      circle(33, 33, d);
+
+      // Bottom-right.
+      d = sqrt(1600);
+      circle(67, 67, d);
+
+      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that get higher slowly from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 5 * sqrt(x);
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>non-negative number to square root.</p>
+    type: Number
+return:
+  description: square root of number.
+  type: Number
+chainable: false
+---
+
+
+# sqrt
diff --git a/src/content/reference/en/p5 copy/square.mdx b/src/content/reference/en/p5 copy/square.mdx
new file mode 100644
index 0000000000..1e94a0087d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/square.mdx	
@@ -0,0 +1,163 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1229
+title: square
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a square.</p>
+
+  <p>A square is a four-sided shape defined by the <code>x</code>,
+  <code>y</code>, and <code>s</code>
+
+  parameters. <code>x</code> and <code>y</code> set the location of its top-left
+  corner. <code>s</code> sets
+
+  its width and height. Every angle in the square measures 90˚ and all its
+
+  sides are the same length. See <a
+  href="/reference/p5/rectMode/">rectMode()</a> for
+
+  other ways to define squares.</p>
+
+  <p>The version of <code>square()</code> with four parameters creates a rounded
+  square.
+
+  The fourth parameter sets the radius for all four corners.</p>
+
+  <p>The version of <code>square()</code> with seven parameters also creates a
+  rounded
+
+  square. Each of the last four parameters set the radius of a corner. The
+
+  radii start with the top-left corner and move clockwise around the
+
+  square. If any of these parameters are omitted, they are set to the
+
+  value of the last radius that was set.</p>
+line: 1229
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      square(30, 20, 55);
+
+      describe('A white square with a black outline in on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give all corners a radius of 20.
+      square(30, 20, 55, 20);
+
+      describe(
+        'A white square with a black outline and round edges on a gray canvas.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give each corner a unique radius.
+      square(30, 20, 55, 20, 15, 10, 5);
+
+      describe('A white square with a black outline and round edges of different radii.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      square(-20, -30, 55);
+
+      describe('A white square with a black outline in on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square spins around on gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the square.
+      square(-20, -30, 55);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the square.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the square.</p>
+    type: Number
+  - name: s
+    description: |
+      <p>side size of the square.</p>
+    type: Number
+  - name: tl
+    description: |
+      <p>optional radius of top-left corner.</p>
+    type: Number
+    optional: true
+  - name: tr
+    description: |
+      <p>optional radius of top-right corner.</p>
+    type: Number
+    optional: true
+  - name: br
+    description: |
+      <p>optional radius of bottom-right corner.</p>
+    type: Number
+    optional: true
+  - name: bl
+    description: |
+      <p>optional radius of bottom-left corner.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# square
diff --git a/src/content/reference/en/p5 copy/storeItem.mdx b/src/content/reference/en/p5 copy/storeItem.mdx
new file mode 100644
index 0000000000..8552634c5a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/storeItem.mdx	
@@ -0,0 +1,149 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L10
+title: storeItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Stores a value in the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs.</p>
+
+  <p><code>storeItem()</code> makes it easy to store values in
+  <code>localStorage</code> and
+
+  <a href="/reference/p5/getItem/">getItem()</a> makes it easy to retrieve
+  them.</p>
+
+  <p>The first parameter, <code>key</code>, is the name of the value to be
+  stored as a
+
+  string.</p>
+
+  <p>The second parameter, <code>value</code>, is the value to be stored. Values
+  can have
+
+  any type.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe('The text "Feist: 1234" written in black on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an object.
+      let p = { x: 50, y: 50 };
+
+      // Store the object.
+      storeItem('position', p);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let p = getItem('position');
+
+      // Draw the circle.
+      circle(p.x, p.y, 30);
+    }
+    </code>
+    </div>
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let c = color('deeppink');
+
+      // Store the object.
+      storeItem('color', c);
+
+      describe('A pink circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let c = getItem('color');
+
+      // Style the circle.
+      fill(c);
+
+      // Draw the circle.
+      circle(50, 50, 30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: key
+    description: |
+      <p>name of the value.</p>
+    type: String
+  - name: value
+    description: |
+      <p>value to be stored.</p>
+    type: String|Number|Boolean|Object|Array
+chainable: false
+---
+
+
+# storeItem
diff --git a/src/content/reference/en/p5 copy/str.mdx b/src/content/reference/en/p5 copy/str.mdx
new file mode 100644
index 0000000000..c487979761
--- /dev/null
+++ b/src/content/reference/en/p5 copy/str.mdx	
@@ -0,0 +1,135 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L232
+title: str
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Boolean</code> or <code>Number</code> to
+  <code>String</code>.</p>
+
+  <p><code>str()</code> converts values to strings. See the
+
+  <a href="/reference/p5/String/">String</a> reference page for guidance on
+  using
+
+  template literals instead.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a Boolean, as in
+
+  <code>str(false)</code> or <code>str(true)</code>, then the value will be
+  returned as a string,
+
+  as in <code>'false'</code> or <code>'true'</code>. If <code>n</code> is a
+  number, as in <code>str(123)</code>, then its
+
+  value will be returned as a string, as in <code>'123'</code>. If an array is
+  passed,
+
+  as in <code>str([12.34, 56.78])</code>, then an array of strings will be
+  returned.</p>
+line: 232
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a Boolean variable.
+      let original = false;
+
+      // Convert the Boolean to a string.
+      let converted = str(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "false : false" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 123;
+
+      // Convert the number to a string.
+      let converted = str(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "123 = 123" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = [12, 34, 56];
+
+      // Convert the numbers to strings.
+      let strings = str(original);
+
+      // Create an empty string variable.
+      let final = '';
+
+      // Concatenate all the strings.
+      for (let s of strings) {
+        final += s;
+      }
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the concatenated string.
+      text(final, 50, 50);
+
+      describe('The text "123456" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>value to convert.</p>
+    type: String|Boolean|Number
+return:
+  description: converted string.
+  type: String
+chainable: false
+---
+
+
+# str
diff --git a/src/content/reference/en/p5 copy/stroke.mdx b/src/content/reference/en/p5 copy/stroke.mdx
new file mode 100644
index 0000000000..bf086f9b66
--- /dev/null
+++ b/src/content/reference/en/p5 copy/stroke.mdx	
@@ -0,0 +1,311 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1373
+title: stroke
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Sets the color used to draw points, lines, and the outlines of shapes.</p>
+
+  <p>Calling <code>stroke(255, 165, 0)</code> or <code>stroke('orange')</code>
+  means all shapes drawn
+
+  after calling <code>stroke()</code> will be outlined with the color orange.
+  The way
+
+  these parameters are interpreted may be changed with the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
+
+  <p>The version of <code>stroke()</code> with one parameter interprets the
+  value one of
+
+  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
+  grayscale
+
+  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
+  color
+
+  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
+  provided to
+
+  set the stroke color.</p>
+
+  <p>The version of <code>stroke()</code> with two parameters interprets the
+  first one as a
+
+  grayscale value. The second parameter sets the alpha (transparency) value.</p>
+
+  <p>The version of <code>stroke()</code> with three parameters interprets them
+  as RGB, HSB,
+
+  or HSL colors, depending on the current <code>colorMode()</code>.</p>
+
+  <p>The version of <code>stroke()</code> with four parameters interprets them
+  as RGBA, HSBA,
+
+  or HSLA colors, depending on the current <code>colorMode()</code>. The last
+  parameter
+
+  sets the alpha (transparency) value.</p>
+line: 1373
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A grayscale value.
+      strokeWeight(4);
+      stroke(51);
+      square(20, 20, 60);
+
+      describe('A white square with a dark charcoal gray outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // R, G & B values.
+      stroke(255, 204, 0);
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a yellow outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // H, S & B values.
+      strokeWeight(4);
+      stroke(255, 204, 100);
+      square(20, 20, 60);
+
+      describe('A white square with a royal blue outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A CSS named color.
+      stroke('red');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a red outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Three-digit hex RGB notation.
+      stroke('#fae');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a pink outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Six-digit hex RGB notation.
+      stroke('#222222');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGB notation.
+      stroke('rgb(0, 255, 0)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A whiite square with a bright green outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGBA notation.
+      stroke('rgba(0, 255, 0, 0.25)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a soft green outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGB notation.
+      stroke('rgb(100%, 0%, 10%)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a red outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGBA notation.
+      stroke('rgba(100%, 0%, 100%, 0.5)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a dark fuchsia outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A p5.Color object.
+      stroke(color(0, 0, 255));
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a blue outline.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1373
+    params:
+      - name: v1
+        description: >
+          <p>red value if color mode is RGB or hue value if color mode is
+          HSB.</p>
+        type: Number
+      - name: v2
+        description: >
+          <p>green value if color mode is RGB or saturation value if color mode
+          is HSB.</p>
+        type: Number
+      - name: v3
+        description: >
+          <p>blue value if color mode is RGB or brightness value if color mode
+          is HSB.</p>
+        type: Number
+      - name: alpha
+        description: >
+          <p>alpha value, controls transparency (0 - transparent, 255 -
+          opaque).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1596
+    params:
+      - name: value
+        description: |
+          <p>a color string.</p>
+        type: String
+    chainable: 1
+  - line: 1602
+    params:
+      - name: gray
+        description: |
+          <p>a grayscale value.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1609
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue,
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 1616
+    params:
+      - name: color
+        description: |
+          <p>the stroke color.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# stroke
diff --git a/src/content/reference/en/p5 copy/strokeCap.mdx b/src/content/reference/en/p5 copy/strokeCap.mdx
new file mode 100644
index 0000000000..80965419ab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/strokeCap.mdx	
@@ -0,0 +1,67 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L388
+title: strokeCap
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the style for rendering the ends of lines.</p>
+
+  <p>The caps for line endings are either rounded (<code>ROUND</code>), squared
+
+  (<code>SQUARE</code>), or extended (<code>PROJECT</code>). The default cap is
+  <code>ROUND</code>.</p>
+
+  <p>The argument passed to <code>strokeCap()</code> must be written in ALL CAPS
+  because
+
+  the constants <code>ROUND</code>, <code>SQUARE</code>, and
+  <code>PROJECT</code> are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 388
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      strokeWeight(12);
+
+      // Top.
+      strokeCap(ROUND);
+      line(20, 30, 80, 30);
+
+      // Middle.
+      strokeCap(SQUARE);
+      line(20, 50, 80, 50);
+
+      // Bottom.
+      strokeCap(PROJECT);
+      line(20, 70, 80, 70);
+
+      describe(
+        'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: cap
+    description: |
+      <p>either ROUND, SQUARE, or PROJECT</p>
+    type: Constant
+chainable: true
+---
+
+
+# strokeCap
diff --git a/src/content/reference/en/p5 copy/strokeJoin.mdx b/src/content/reference/en/p5 copy/strokeJoin.mdx
new file mode 100644
index 0000000000..46a8a9206f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/strokeJoin.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L442
+title: strokeJoin
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the style of the joints that connect line segments.</p>
+
+  <p>Joints are either mitered (<code>MITER</code>), beveled
+  (<code>BEVEL</code>), or rounded
+
+  (<code>ROUND</code>). The default joint is <code>MITER</code> in 2D mode and
+  <code>ROUND</code> in WebGL
+
+  mode.</p>
+
+  <p>The argument passed to <code>strokeJoin()</code> must be written in ALL
+  CAPS because
+
+  the constants <code>MITER</code>, <code>BEVEL</code>, and <code>ROUND</code>
+  are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 442
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      noFill();
+      strokeWeight(10);
+      strokeJoin(MITER);
+
+      // Draw the line.
+      beginShape();
+      vertex(35, 20);
+      vertex(65, 50);
+      vertex(35, 80);
+      endShape();
+
+      describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      noFill();
+      strokeWeight(10);
+      strokeJoin(BEVEL);
+
+      // Draw the line.
+      beginShape();
+      vertex(35, 20);
+      vertex(65, 50);
+      vertex(35, 80);
+      endShape();
+
+      describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      noFill();
+      strokeWeight(10);
+      strokeJoin(ROUND);
+
+      // Draw the line.
+      beginShape();
+      vertex(35, 20);
+      vertex(65, 50);
+      vertex(35, 80);
+      endShape();
+
+      describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: join
+    description: |
+      <p>either MITER, BEVEL, or ROUND</p>
+    type: Constant
+chainable: true
+---
+
+
+# strokeJoin
diff --git a/src/content/reference/en/p5 copy/strokeWeight.mdx b/src/content/reference/en/p5 copy/strokeWeight.mdx
new file mode 100644
index 0000000000..82ebfc13d5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/strokeWeight.mdx	
@@ -0,0 +1,77 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L541
+title: strokeWeight
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the width of the stroke used for points, lines, and the outlines of
+
+  shapes.</p>
+
+  <p>Note: <code>strokeWeight()</code> is affected by transformations,
+  especially calls to
+
+  <a href="/reference/p5/scale/">scale()</a>.</p>
+line: 541
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      line(20, 20, 80, 20);
+
+      // Middle.
+      strokeWeight(4);
+      line(20, 40, 80, 40);
+
+      // Bottom.
+      strokeWeight(10);
+      line(20, 70, 80, 70);
+
+      describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      line(20, 20, 80, 20);
+
+      // Scale by a factor of 5.
+      scale(5);
+
+      // Bottom. Coordinates are adjusted for scaling.
+      line(4, 8, 16, 8);
+
+      describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: weight
+    description: |
+      <p>the weight of the stroke (in pixels).</p>
+    type: Number
+chainable: true
+---
+
+
+# strokeWeight
diff --git a/src/content/reference/en/p5 copy/subset.mdx b/src/content/reference/en/p5 copy/subset.mdx
new file mode 100644
index 0000000000..1cf7cb7f4e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/subset.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L381
+title: subset
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Extracts an array of elements from an existing array. The list parameter
+  defines the array from which the elements will be copied, and the start
+  and count parameters specify which elements to extract. If no count is
+  given, elements will be extracted from the start to the end of the array.
+  When specifying the start, remember that the first array element is 0.
+  This function does not change the source array.</p>
+line: 381
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">array.slice()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = [1, 2, 3, 4, 5];
+      print(myArray); // [1, 2, 3, 4, 5]
+
+      let sub1 = subset(myArray, 0, 3);
+      let sub2 = subset(myArray, 2, 2);
+      print(sub1); // [1,2,3]
+      print(sub2); // [3,4]
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to extract from</p>
+    type: Array
+  - name: start
+    description: |
+      <p>position to begin</p>
+    type: Integer
+  - name: count
+    description: |
+      <p>number of values to extract</p>
+    type: Integer
+    optional: true
+return:
+  description: Array of extracted elements
+  type: Array
+chainable: false
+---
+
+
+# subset
diff --git a/src/content/reference/en/p5 copy/tan.mdx b/src/content/reference/en/p5 copy/tan.mdx
new file mode 100644
index 0000000000..376d093f33
--- /dev/null
+++ b/src/content/reference/en/p5 copy/tan.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L445
+title: tan
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the tangent of an angle.</p>
+
+  <p><code>tan()</code> 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. <code>tan()</code> calculates the tan of an angle,
+  using radians
+
+  by default, or according to
+
+  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+  DEGREES).</p>
+line: 445
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 5 * tan(x * 0.1) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>the angle, in radians by default, or according to
+
+      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+      DEGREES).</p>
+    type: Number
+return:
+  description: tangent of the angle.
+  type: Number
+chainable: false
+---
+
+
+# tan
diff --git a/src/content/reference/en/p5 copy/text.mdx b/src/content/reference/en/p5 copy/text.mdx
new file mode 100644
index 0000000000..eea293bfd8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/text.mdx	
@@ -0,0 +1,96 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L182
+title: text
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Draws text to the canvas.</p>
+
+  <p>The first parameter, <code>str</code>, is the text to be drawn. The second
+  and third
+
+  parameters, <code>x</code> and <code>y</code>, set the coordinates of the
+  text's bottom-left
+
+  corner. See <a href="/reference/p5/textAlign/">textAlign()</a> for other ways
+  to
+
+  align text.</p>
+
+  <p>The fourth and fifth parameters, <code>maxWidth</code> and
+  <code>maxHeight</code>, are optional.
+
+  They set the dimensions of the invisible rectangle containing the text. By
+
+  default, they set its  maximum width and height. See
+
+  <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to define the
+
+  rectangular text box. Text will wrap to fit within the text box. Text
+
+  outside of the box won't be drawn.</p>
+
+  <p>Text can be styled a few ways. Call the <a
+  href="/reference/p5/fill/">fill()</a>
+
+  function to set the text's fill color. Call
+
+  <a href="/reference/p5/stroke/">stroke()</a> and
+
+  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> to set the text's
+  outline.
+
+  Call <a href="/reference/p5/textSize/">textSize()</a> and
+
+  <a href="/reference/p5/textFont/">textFont()</a> to set the text's size and
+  font,
+
+  respectively.</p>
+
+  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
+
+  <a href="/reference/p5/loadFont/">loadFont()</a>. Calling
+
+  <a href="/reference/p5/stroke/">stroke()</a> has no effect in
+  <code>WEBGL</code> mode.</p>
+line: 182
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  background(200);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in black in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('skyblue');\n  textSize(100);\n  text('\U0001F308', 0, 100);\n\n  describe('A rainbow in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  textSize(32);\n  fill(255);\n  stroke(0);\n  strokeWeight(4);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in white with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('black');\n  textSize(22);\n  fill('yellow');\n  text('rainbows', 6, 20);\n  fill('cornflowerblue');\n  text('rainbows', 6, 45);\n  fill('tomato');\n  text('rainbows', 6, 70);\n  fill('limegreen');\n  text('rainbows', 6, 95);\n\n  describe('The text \"rainbows\" written on several lines, each in a different color.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 10, 10, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  rectMode(CENTER);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 50, 50, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet font;\n\nfunction preload() {\n  font = loadFont('/assets/inconsolata.otf');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(font);\n  textSize(32);\n  textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n  background(0);\n  rotateY(frameCount / 30);\n  text('p5*js', 0, 0);\n\n  describe('The text \"p5*js\" written in white and spinning in 3D.');\n}\n</code>\n</div>"
+class: p5
+params:
+  - name: str
+    description: |
+      <p>text to be displayed.</p>
+    type: String|Object|Array|Number|Boolean
+  - name: x
+    description: |
+      <p>x-coordinate of the text box.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the text box.</p>
+    type: Number
+  - name: maxWidth
+    description: |
+      <p>maximum width of the text box. See
+                                 <a href="#/p5/rectMode">rectMode()</a> for
+                                 other options.</p>
+    type: Number
+    optional: true
+  - name: maxHeight
+    description: |
+      <p>maximum height of the text box. See
+                                 <a href="#/p5/rectMode">rectMode()</a> for
+                                 other options.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# text
diff --git a/src/content/reference/en/p5 copy/textAlign.mdx b/src/content/reference/en/p5 copy/textAlign.mdx
new file mode 100644
index 0000000000..3899f22842
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textAlign.mdx	
@@ -0,0 +1,135 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L11
+title: textAlign
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the way text is aligned when <a href="/reference/p5/text/">text()</a>
+  is called.</p>
+
+  <p>By default, calling <code>text('hi', 10, 20)</code> places the bottom-left
+  corner of
+
+  the text's bounding box at (10, 20).</p>
+
+  <p>The first parameter, <code>horizAlign</code>, changes the way
+
+  <a href="/reference/p5/text/">text()</a> interprets x-coordinates. By default,
+  the
+
+  x-coordinate sets the left edge of the bounding box. <code>textAlign()</code>
+  accepts
+
+  the following values for <code>horizAlign</code>: <code>LEFT</code>,
+  <code>CENTER</code>, or <code>RIGHT</code>.</p>
+
+  <p>The second parameter, <code>vertAlign</code>, is optional. It changes the
+  way
+
+  <a href="/reference/p5/text/">text()</a> interprets y-coordinates. By default,
+  the
+
+  y-coordinate sets the bottom edge of the bounding box.
+  <code>textAlign()</code>
+
+  accepts the following values for <code>vertAlign</code>: <code>TOP</code>,
+  <code>BOTTOM</code>, <code>CENTER</code>,
+
+  or <code>BASELINE</code>.</p>
+line: 11
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a vertical line.
+      strokeWeight(0.5);
+      line(50, 0, 50, 100);
+
+      // Top line.
+      textSize(16);
+      textAlign(RIGHT);
+      text('ABCD', 50, 30);
+
+      // Middle line.
+      textAlign(CENTER);
+      text('EFGH', 50, 50);
+
+      // Bottom line.
+      textAlign(LEFT);
+      text('IJKL', 50, 70);
+
+      describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      strokeWeight(0.5);
+
+      // First line.
+      line(0, 12, width, 12);
+      textAlign(CENTER, TOP);
+      text('TOP', 50, 12);
+
+      // Second line.
+      line(0, 37, width, 37);
+      textAlign(CENTER, CENTER);
+      text('CENTER', 50, 37);
+
+      // Third line.
+      line(0, 62, width, 62);
+      textAlign(CENTER, BASELINE);
+      text('BASELINE', 50, 62);
+
+      // Fourth line.
+      line(0, 97, width, 97);
+      textAlign(CENTER, BOTTOM);
+      text('BOTTOM', 50, 97);
+
+      describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 11
+    params:
+      - name: horizAlign
+        description: |
+          <p>horizontal alignment, either LEFT,
+                                     CENTER, or RIGHT.</p>
+        type: Constant
+      - name: vertAlign
+        description: |
+          <p>vertical alignment, either TOP,
+                                     BOTTOM, CENTER, or BASELINE.</p>
+        type: Constant
+        optional: true
+    chainable: 1
+  - line: 98
+    params: []
+    return:
+      description: ''
+      type: Object
+chainable: true
+---
+
+
+# textAlign
diff --git a/src/content/reference/en/p5 copy/textAscent.mdx b/src/content/reference/en/p5 copy/textAscent.mdx
new file mode 100644
index 0000000000..b81a657de6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textAscent.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L337
+title: textAscent
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Calculates the ascent of the current font at its current size.</p>
+  <p>The ascent represents the distance, in pixels, of the tallest character
+  above the baseline.</p>
+line: 337
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload()  {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup()  {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textFont(font);
+
+      // Different for each font.
+      let fontScale = 0.8;
+
+      let baseY = 75;
+      strokeWeight(0.5);
+
+      // Draw small text.
+      textSize(24);
+      text('dp', 0, baseY);
+
+      // Draw baseline and ascent.
+      let a = textAscent() * fontScale;
+      line(0, baseY, 23, baseY);
+      line(23, baseY - a, 23, baseY);
+
+      // Draw large text.
+      textSize(48);
+      text('dp', 45, baseY);
+
+      // Draw baseline and ascent.
+      a = textAscent() * fontScale;
+      line(45, baseY, 91, baseY);
+      line(91, baseY - a, 91, baseY);
+
+      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the "d".');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: ascent measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textAscent
diff --git a/src/content/reference/en/p5 copy/textDescent.mdx b/src/content/reference/en/p5 copy/textDescent.mdx
new file mode 100644
index 0000000000..15837acff3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textDescent.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L396
+title: textDescent
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Calculates the descent of the current font at its current size.</p>
+  <p>The descent represents the distance, in pixels, of the character with the
+  longest descender below the baseline.</p>
+line: 396
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload()  {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup()  {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the font.
+      textFont(font);
+
+      // Different for each font.
+      let fontScale = 0.9;
+
+      let baseY = 75;
+      strokeWeight(0.5);
+
+      // Draw small text.
+      textSize(24);
+      text('dp', 0, baseY);
+
+      // Draw baseline and descent.
+      let d = textDescent() * fontScale;
+      line(0, baseY, 23, baseY);
+      line(23, baseY, 23, baseY + d);
+
+      // Draw large text.
+      textSize(48);
+      text('dp', 45, baseY);
+
+      // Draw baseline and descent.
+      d = textDescent() * fontScale;
+      line(45, baseY, 91, baseY);
+      line(91, baseY, 91, baseY + d);
+
+      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the "p".');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: descent measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textDescent
diff --git a/src/content/reference/en/p5 copy/textFont.mdx b/src/content/reference/en/p5 copy/textFont.mdx
new file mode 100644
index 0000000000..e5e9fa8da1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textFont.mdx	
@@ -0,0 +1,127 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L335
+title: textFont
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Sets the font used by the <a href="/reference/p5/text/">text()</a>
+  function.</p>
+
+  <p>The first parameter, <code>font</code>, sets the font.
+  <code>textFont()</code> recognizes either
+
+  a <a href="/reference/p5/p5.Font">p5.Font</a> object or a string with the name
+  of a
+
+  system font. For example, <code>'Courier New'</code>.</p>
+
+  <p>The second parameter, <code>size</code>, is optional. It sets the font size
+  in pixels.
+
+  This has the same effect as calling <a
+  href="/reference/p5/textSize/">textSize()</a>.</p>
+
+  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
+
+  <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
+line: 335
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      textFont('Courier New');
+      textSize(24);
+      text('hi', 35, 55);
+
+      describe('The text "hi" written in a black, monospace font on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('black');
+      fill('palegreen');
+      textFont('Courier New', 10);
+      text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
+      text('>', 5, 70);
+
+      describe('A text prompt from a game is written in a green, monospace font on a black background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      textFont('Verdana');
+      let currentFont = textFont();
+      text(currentFont, 25, 50);
+
+      describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let fontRegular;
+    let fontItalic;
+    let fontBold;
+
+    function preload() {
+      fontRegular = loadFont('/assets/Regular.otf');
+      fontItalic = loadFont('/assets/Italic.ttf');
+      fontBold = loadFont('/assets/Bold.ttf');
+    }
+
+    function setup() {
+      background(200);
+      textFont(fontRegular);
+      text('I am Normal', 10, 30);
+      textFont(fontItalic);
+      text('I am Italic', 10, 50);
+      textFont(fontBold);
+      text('I am Bold', 10, 70);
+
+      describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current font or p5 Object.
+  type: Object
+overloads:
+  - line: 335
+    params: []
+    return:
+      description: current font or p5 Object.
+      type: Object
+  - line: 418
+    params:
+      - name: font
+        description: |
+          <p>font as a <a href="#/p5.Font">p5.Font</a> object or a string.</p>
+        type: Object|String
+      - name: size
+        description: |
+          <p>font size in pixels.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: false
+---
+
+
+# textFont
diff --git a/src/content/reference/en/p5 copy/textLeading.mdx b/src/content/reference/en/p5 copy/textLeading.mdx
new file mode 100644
index 0000000000..3b5a22d9a2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textLeading.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L107
+title: textLeading
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the spacing between lines of text when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>Note: Spacing is measured in pixels.</p>
+
+  <p>Calling <code>textLeading()</code> without an argument returns the current
+  spacing.</p>
+line: 107
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // "\n" starts a new line of text.
+      let lines = 'one\ntwo';
+
+      // Left.
+      text(lines, 10, 25);
+
+      // Right.
+      textLeading(30);
+      text(lines, 70, 25);
+
+      describe('The words "one" and "two" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 107
+    params:
+      - name: leading
+        description: |
+          <p>spacing between lines of text in units of pixels.</p>
+        type: Number
+    chainable: 1
+  - line: 142
+    params: []
+    return:
+      description: ''
+      type: Number
+chainable: true
+---
+
+
+# textLeading
diff --git a/src/content/reference/en/p5 copy/textOutput.mdx b/src/content/reference/en/p5 copy/textOutput.mdx
new file mode 100644
index 0000000000..62ea4cb4b5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textOutput.mdx	
@@ -0,0 +1,186 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L10
+title: textOutput
+module: Environment
+submodule: Environment
+file: src/accessibility/outputs.js
+description: >
+  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
+
+  <p><code>textOutput()</code> adds a general description, list of shapes, and
+
+  table of shapes to the web page. The general description includes the
+
+  canvas size, canvas color, and number of shapes. For example,
+
+  <code>Your output is a, 100 by 100 pixels, gray canvas containing the
+  following 2 shapes:</code>.</p>
+
+  <p>A list of shapes follows the general description. The list describes the
+
+  color, location, and area of each shape. For example,
+
+  <code>a red circle at middle covering 3% of the canvas</code>. Each shape can
+  be
+
+  selected to get more details.</p>
+
+  <p><code>textOutput()</code> uses its table of shapes as a list. The table
+  describes the
+
+  shape, color, location, coordinates and area. For example,
+
+  <code>red circle location = middle area = 3%</code>. This is different from
+
+  <a href="/reference/p5/gridOutput/">gridOutput()</a>, which uses its table as
+  a grid.</p>
+
+  <p>The <code>display</code> parameter is optional. It determines how the
+  description is
+
+  displayed. If <code>LABEL</code> is passed, as in
+  <code>textOutput(LABEL)</code>, the description
+
+  will be visible in a div element next to the canvas. Using <code>LABEL</code>
+  creates
+
+  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
+
+  development. If <code>FALLBACK</code> is passed, as in
+  <code>textOutput(FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+
+  <p><code>textOutput()</code> generates descriptions in English only. Text
+  drawn with
+
+  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
+  mode
+
+  and 3D shapes are not supported.</p>
+
+  <p>Use <a href="/reference/p5/describe/">describe()</a> and
+
+  <a href="/reference/p5/describeElement/">describeElement()</a> for more
+  control
+
+  over canvas descriptions.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Add the text description.
+      textOutput();
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Add the text description and
+      // display it for debugging.
+      textOutput(LABEL);
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the text description.
+      textOutput();
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the text description and
+      // display it for debugging.
+      textOutput(LABEL);
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: display
+    description: |
+      <p>either FALLBACK or LABEL.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# textOutput
diff --git a/src/content/reference/en/p5 copy/textSize.mdx b/src/content/reference/en/p5 copy/textSize.mdx
new file mode 100644
index 0000000000..df77510315
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textSize.mdx	
@@ -0,0 +1,65 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L151
+title: textSize
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the font size when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>Note: Font size is measured in pixels.</p>
+
+  <p>Calling <code>textSize()</code> without an argument returns the current
+  size.</p>
+line: 151
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      textSize(12);
+      text('Font Size 12', 10, 30);
+
+      // Middle.
+      textSize(14);
+      text('Font Size 14', 10, 60);
+
+      // Bottom.
+      textSize(16);
+      text('Font Size 16', 10, 90);
+
+      describe('The text "Font Size 12" drawn small, "Font Size 14" drawn medium, and "Font Size 16" drawn large.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 151
+    params:
+      - name: size
+        description: |
+          <p>size of the letters in units of pixels.</p>
+        type: Number
+    chainable: 1
+  - line: 188
+    params: []
+    return:
+      description: ''
+      type: Number
+chainable: true
+---
+
+
+# textSize
diff --git a/src/content/reference/en/p5 copy/textStyle.mdx b/src/content/reference/en/p5 copy/textStyle.mdx
new file mode 100644
index 0000000000..572ca0454c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textStyle.mdx	
@@ -0,0 +1,79 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L197
+title: textStyle
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the style for system fonts when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>The parameter, <code>style</code>, can be either <code>NORMAL</code>,
+  <code>ITALIC</code>, <code>BOLD</code>, or
+
+  <code>BOLDITALIC</code>.</p>
+
+  <p><code>textStyle()</code> may be overridden by CSS styling. This function
+  doesn't
+
+  affect fonts loaded with <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
+line: 197
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(12);
+      textAlign(CENTER);
+
+      // First row.
+      textStyle(NORMAL);
+      text('Normal', 50, 15);
+
+      // Second row.
+      textStyle(ITALIC);
+      text('Italic', 50, 40);
+
+      // Third row.
+      textStyle(BOLD);
+      text('Bold', 50, 65);
+
+      // Fourth row.
+      textStyle(BOLDITALIC);
+      text('Bold Italic', 50, 90);
+
+      describe('The words "Normal" displayed normally, "Italic" in italic, "Bold" in bold, and "Bold Italic" in bold italics.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 197
+    params:
+      - name: style
+        description: |
+          <p>styling for text, either NORMAL,
+                                     ITALIC, BOLD or BOLDITALIC.</p>
+        type: Constant
+    chainable: 1
+  - line: 244
+    params: []
+    return:
+      description: ''
+      type: String
+chainable: true
+---
+
+
+# textStyle
diff --git a/src/content/reference/en/p5 copy/textWidth.mdx b/src/content/reference/en/p5 copy/textWidth.mdx
new file mode 100644
index 0000000000..00721b0fee
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textWidth.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L253
+title: textWidth
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Calculates the maximum width of a string of text drawn when
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+line: 253
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(28);
+      strokeWeight(0.5);
+
+      // Calculate the text width.
+      let s = 'yoyo';
+      let w = textWidth(s);
+
+      // Display the text.
+      text(s, 22, 55);
+
+      // Underline the text.
+      line(22, 55, 22 + w, 55);
+
+      describe('The word "yoyo" underlined.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(28);
+      strokeWeight(0.5);
+
+      // Calculate the text width.
+      // "\n" starts a new line.
+      let s = 'yo\nyo';
+      let w = textWidth(s);
+
+      // Display the text.
+      text(s, 22, 55);
+
+      // Underline the text.
+      line(22, 55, 22 + w, 55);
+
+      describe('The word "yo" written twice, one copy beneath the other. The words are divided by a horizontal line.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: str
+    description: |
+      <p>string of text to measure.</p>
+    type: String
+return:
+  description: width measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textWidth
diff --git a/src/content/reference/en/p5 copy/textWrap.mdx b/src/content/reference/en/p5 copy/textWrap.mdx
new file mode 100644
index 0000000000..0ba2b556a7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textWrap.mdx	
@@ -0,0 +1,111 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L462
+title: textWrap
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the style for wrapping text when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>The parameter, <code>style</code>, can be one of the following values:</p>
+
+  <p><code>WORD</code> starts new lines of text at spaces. If a string of text
+  doesn't
+
+  have spaces, it may overflow the text box and the canvas. This is the
+
+  default style.</p>
+
+  <p><code>CHAR</code> starts new lines as needed to stay within the text
+  box.</p>
+
+  <p><code>textWrap()</code> only works when the maximum width is set for a text
+  box. For
+
+  example, calling <code>text('Have a wonderful day', 0, 10, 100)</code> sets
+  the
+
+  maximum width to 100 pixels.</p>
+
+  <p>Calling <code>textWrap()</code> without an argument returns the current
+  style.</p>
+line: 462
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(20);
+      textWrap(WORD);
+
+      // Display the text.
+      text('Have a wonderful day', 0, 10, 100);
+
+      describe('The text "Have a wonderful day" written across three lines.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(20);
+      textWrap(CHAR);
+
+      // Display the text.
+      text('Have a wonderful day', 0, 10, 100);
+
+      describe('The text "Have a wonderful day" written across two lines.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(20);
+      textWrap(CHAR);
+
+      // Display the text.
+      text('祝你有美好的一天', 0, 10, 100);
+
+      describe('The text "祝你有美好的一天" written across two lines.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: style
+    description: |
+      <p>text wrapping style, either WORD or CHAR.</p>
+    type: Constant
+return:
+  description: style
+  type: String
+chainable: false
+---
+
+
+# textWrap
diff --git a/src/content/reference/en/p5 copy/texture.mdx b/src/content/reference/en/p5 copy/texture.mdx
new file mode 100644
index 0000000000..7258f53ace
--- /dev/null
+++ b/src/content/reference/en/p5 copy/texture.mdx	
@@ -0,0 +1,207 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1716
+title: texture
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the texture that will be used on shapes.</p>
+
+  <p>A texture is like a skin that wraps around a shape. <code>texture()</code>
+  works with
+
+  built-in shapes, such as <a href="/reference/p5/square/">square()</a> and
+
+  <a href="/reference/p5/sphere/">sphere()</a>, and custom shapes created with
+
+  functions such as <a href="/reference/p5/buildGeometry/">buildGeometry()</a>.
+  To
+
+  texture a geometry created with <a
+  href="/reference/p5/beginShape/">beginShape()</a>,
+
+  uv coordinates must be passed to each
+
+  <a href="/reference/p5/vertex/">vertex()</a> call.</p>
+
+  <p>The parameter, <code>tex</code>, is the texture to apply.
+  <code>texture()</code> can use a range
+
+  of sources including images, videos, and offscreen renderers such as
+
+  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> and
+
+  <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects.</p>
+
+  <p>To texture a geometry created with <a
+  href="/reference/p5/beginShape/">beginShape()</a>,
+
+  you will need to specify uv coordinates in <a
+  href="/reference/p5/vertex/">vertex()</a>.</p>
+
+  <p>Note: <code>texture()</code> can only be used in WebGL mode.</p>
+line: 1716
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A spinning cube with an image of a ceiling on each face.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the x-, y-, and z-axes.
+      rotateZ(frameCount * 0.01);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Draw the box.
+      box(50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Graphics object.
+      pg = createGraphics(100, 100);
+
+      // Draw a circle to the p5.Graphics object.
+      pg.background(200);
+      pg.circle(50, 50, 30);
+
+      describe('A spinning cube with circle at the center of each face.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the x-, y-, and z-axes.
+      rotateZ(frameCount * 0.01);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Apply the p5.Graphics object as a texture.
+      texture(pg);
+
+      // Draw the box.
+      box(50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let vid;
+
+    // Load a video and create a p5.MediaElement object.
+    function preload() {
+      vid = createVideo('/assets/fingers.mov');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Hide the video.
+      vid.hide();
+
+      // Set the video to loop.
+      vid.loop();
+
+      describe('A rectangle with video as texture');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Apply the video as a texture.
+      texture(vid);
+
+      // Draw the rectangle.
+      rect(-40, -40, 80, 80);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let vid;
+
+    // Load a video and create a p5.MediaElement object.
+    function preload() {
+      vid = createVideo('/assets/fingers.mov');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Hide the video.
+      vid.hide();
+
+      // Set the video to loop.
+      vid.loop();
+
+      describe('A rectangle with video as texture');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Apply the video as a texture.
+      texture(vid);
+
+      // Draw a custom shape using uv coordinates.
+      beginShape();
+      vertex(-40, -40, 0, 0);
+      vertex(40, -40, 1, 0);
+      vertex(40, 40, 1, 1);
+      vertex(-40, 40, 0, 1);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: tex
+    description: |
+      <p>media to use as the texture.</p>
+    type: >-
+      p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
+chainable: true
+---
+
+
+# texture
diff --git a/src/content/reference/en/p5 copy/textureMode.mdx b/src/content/reference/en/p5 copy/textureMode.mdx
new file mode 100644
index 0000000000..397d1856b9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textureMode.mdx	
@@ -0,0 +1,254 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1903
+title: textureMode
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Changes the coordinate system used for textures when they’re applied to
+
+  custom shapes.</p>
+
+  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
+  shape needs a
+
+  way to map the points on its surface to the pixels in an image. Built-in
+
+  shapes such as <a href="/reference/p5/rect/">rect()</a> and
+
+  <a href="/reference/p5/box/">box()</a> already have these texture mappings
+  based on
+
+  their vertices. Custom shapes created with
+
+  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
+  passed as
+
+  uv coordinates.</p>
+
+  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
+  arguments,
+
+  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
+  <code>(x, y, z)</code>
+
+  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
+  the
+
+  corners of a rectangular image are mapped to the corners of a rectangle by
+  default:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  rect(0, 0, 30, 50);
+
+  </code></pre>
+
+  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
+
+  the same result could be achieved as follows:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+
+  // Top-left.
+
+  // u: 0, v: 0
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 300, v: 0
+
+  vertex(30, 0, 0, 300, 0);
+
+
+  // Bottom-right.
+
+  // u: 300, v: 500
+
+  vertex(30, 50, 0, 300, 500);
+
+
+  // Bottom-left.
+
+  // u: 0, v: 500
+
+  vertex(0, 50, 0, 0, 500);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p><code>textureMode()</code> changes the coordinate system for uv
+  coordinates.</p>
+
+  <p>The parameter, <code>mode</code>, accepts two possible constants. If
+  <code>NORMAL</code> is
+
+  passed, as in <code>textureMode(NORMAL)</code>, then the texture’s uv
+  coordinates can
+
+  be provided in the range 0 to 1 instead of the image’s dimensions. This can
+
+  be helpful for using the same code for multiple images of different sizes.
+
+  For example, the code snippet above could be rewritten as follows:</p>
+
+  <pre><code class="language-js">// Set the texture mode to use normalized
+  coordinates.
+
+  textureMode(NORMAL);
+
+
+  // Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+
+  // Top-left.
+
+  // u: 0, v: 0
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 1, v: 0
+
+  vertex(30, 0, 0, 1, 0);
+
+
+  // Bottom-right.
+
+  // u: 1, v: 1
+
+  vertex(30, 50, 0, 1, 1);
+
+
+  // Bottom-left.
+
+  // u: 0, v: 1
+
+  vertex(0, 50, 0, 0, 1);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p>By default, <code>mode</code> is <code>IMAGE</code>, which scales uv
+  coordinates to the
+
+  dimensions of the image. Calling <code>textureMode(IMAGE)</code> applies the
+  default.</p>
+
+  <p>Note: <code>textureMode()</code> can only be used in WebGL mode.</p>
+line: 1903
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('An image of a ceiling against a black background.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Draw the custom shape.
+      // Use the image's width and height as uv coordinates.
+      beginShape();
+      vertex(-30, -30, 0, 0);
+      vertex(30, -30, img.width, 0);
+      vertex(30, 30, img.width, img.height);
+      vertex(-30, 30, 0, img.height);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('An image of a ceiling against a black background.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Draw the custom shape.
+      // Use normalized uv coordinates.
+      beginShape();
+      vertex(-30, -30, 0, 0);
+      vertex(30, -30, 1, 0);
+      vertex(30, 30, 1, 1);
+      vertex(-30, 30, 0, 1);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either IMAGE or NORMAL.</p>
+    type: Constant
+chainable: false
+---
+
+
+# textureMode
diff --git a/src/content/reference/en/p5 copy/textureWrap.mdx b/src/content/reference/en/p5 copy/textureWrap.mdx
new file mode 100644
index 0000000000..6734a5325b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textureWrap.mdx	
@@ -0,0 +1,370 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2082
+title: textureWrap
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Changes the way textures behave when a shape’s uv coordinates go beyond the
+
+  texture.</p>
+
+  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
+  shape needs a
+
+  way to map the points on its surface to the pixels in an image. Built-in
+
+  shapes such as <a href="/reference/p5/rect/">rect()</a> and
+
+  <a href="/reference/p5/box/">box()</a> already have these texture mappings
+  based on
+
+  their vertices. Custom shapes created with
+
+  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
+  passed as
+
+  uv coordinates.</p>
+
+  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
+  arguments,
+
+  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
+  <code>(x, y, z)</code>
+
+  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
+  the
+
+  corners of a rectangular image are mapped to the corners of a rectangle by
+  default:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  rect(0, 0, 30, 50);
+
+  </code></pre>
+
+  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
+
+  the same result could be achieved as follows:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+
+  // Top-left.
+
+  // u: 0, v: 0
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 300, v: 0
+
+  vertex(30, 0, 0, 300, 0);
+
+
+  // Bottom-right.
+
+  // u: 300, v: 500
+
+  vertex(30, 50, 0, 300, 500);
+
+
+  // Bottom-left.
+
+  // u: 0, v: 500
+
+  vertex(0, 50, 0, 0, 500);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p><code>textureWrap()</code> controls how textures behave when their uv's go
+  beyond the
+
+  texture. Doing so can produce interesting visual effects such as tiling.
+
+  For example, the custom shape above could have u-coordinates are greater
+
+  than the image’s width:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 600
+
+  vertex(30, 0, 0, 600, 0);
+
+
+  // Bottom-right.
+
+  // u: 600
+
+  vertex(30, 50, 0, 600, 500);
+
+
+  vertex(0, 50, 0, 0, 500);
+
+  endShape();
+
+  </code></pre>
+
+  <p>The u-coordinates of 600 are greater than the texture image’s width of 300.
+
+  This creates interesting possibilities.</p>
+
+  <p>The first parameter, <code>wrapX</code>, accepts three possible constants.
+  If <code>CLAMP</code>
+
+  is passed, as in <code>textureWrap(CLAMP)</code>, the pixels at the edge of
+  the
+
+  texture will extend to the shape’s edges. If <code>REPEAT</code> is passed, as
+  in
+
+  <code>textureWrap(REPEAT)</code>, the texture will tile repeatedly until
+  reaching the
+
+  shape’s edges. If <code>MIRROR</code> is passed, as in
+  <code>textureWrap(MIRROR)</code>, the
+
+  texture will tile repeatedly until reaching the shape’s edges, flipping
+
+  its orientation between tiles. By default, textures <code>CLAMP</code>.</p>
+
+  <p>The second parameter, <code>wrapY</code>, is optional. It accepts the same
+  three
+
+  constants, <code>CLAMP</code>, <code>REPEAT</code>, and <code>MIRROR</code>.
+  If one of these constants is
+
+  passed, as in <code>textureWRAP(MIRROR, REPEAT)</code>, then the texture will
+  <code>MIRROR</code>
+
+  horizontally and <code>REPEAT</code> vertically. By default,
+  <code>wrapY</code> will be set to
+
+  the same value as <code>wrapX</code>.</p>
+
+  <p>Note: <code>textureWrap()</code> can only be used in WebGL mode.</p>
+line: 2082
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      // Note: CLAMP is the default mode.
+      textureWrap(CLAMP);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Four identical images of a landscape arranged in a grid.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      textureWrap(REPEAT);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      textureWrap(MIRROR);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      textureWrap(REPEAT, MIRROR);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: wrapX
+    description: |
+      <p>either CLAMP, REPEAT, or MIRROR</p>
+    type: Constant
+  - name: wrapY
+    description: |
+      <p>either CLAMP, REPEAT, or MIRROR</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# textureWrap
diff --git a/src/content/reference/en/p5 copy/tint.mdx b/src/content/reference/en/p5 copy/tint.mdx
new file mode 100644
index 0000000000..e99dee4431
--- /dev/null
+++ b/src/content/reference/en/p5 copy/tint.mdx	
@@ -0,0 +1,201 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1192
+title: tint
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Tints images using a color.</p>
+
+  <p>The version of <code>tint()</code> with one parameter interprets it one of
+  four ways.
+
+  If the parameter is a number, it's interpreted as a grayscale value. If the
+
+  parameter is a string, it's interpreted as a CSS color string. An array of
+
+  <code>[R, G, B, A]</code> values or a <a
+  href="/reference/p5/p5.Color">p5.Color</a> object can
+
+  also be used to set the tint color.</p>
+
+  <p>The version of <code>tint()</code> with two parameters uses the first one
+  as a
+
+  grayscale value and the second as an alpha value. For example, calling
+
+  <code>tint(255, 128)</code> will make an image 50% transparent.</p>
+
+  <p>The version of <code>tint()</code> with three parameters interprets them as
+  RGB or
+
+  HSB values, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The optional fourth
+  parameter
+
+  sets the alpha value. For example, <code>tint(255, 0, 0, 100)</code> will give
+  images
+
+  a red tint and make them transparent.</p>
+line: 1192
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left image.
+      image(img, 0, 0);
+
+      // Right image.
+      // Tint with a CSS color string.
+      tint('red');
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left image.
+      image(img, 0, 0);
+
+      // Right image.
+      // Tint with RGB values.
+      tint(255, 0, 0);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left.
+      image(img, 0, 0);
+
+      // Right.
+      // Tint with RGBA values.
+      tint(255, 0, 0, 100);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left.
+      image(img, 0, 0);
+
+      // Right.
+      // Tint with grayscale and alpha values.
+      tint(255, 180);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1192
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue or brightness.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+  - line: 1318
+    params:
+      - name: value
+        description: |
+          <p>CSS color string.</p>
+        type: String
+  - line: 1323
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+  - line: 1329
+    params:
+      - name: values
+        description: |
+          <p>array containing the red, green, blue &
+                                          alpha components of the color.</p>
+        type: 'Number[]'
+  - line: 1335
+    params:
+      - name: color
+        description: |
+          <p>the tint color</p>
+        type: p5.Color
+chainable: false
+---
+
+
+# tint
diff --git a/src/content/reference/en/p5 copy/torus.mdx b/src/content/reference/en/p5 copy/torus.mdx
new file mode 100644
index 0000000000..f0e2740d59
--- /dev/null
+++ b/src/content/reference/en/p5 copy/torus.mdx	
@@ -0,0 +1,200 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L2183
+title: torus
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a torus.</p>
+
+  <p>A torus is a 3D shape with triangular faces that connect to form a ring.
+
+  Toruses with few faces look flattened. Toruses with many faces have smooth
+
+  surfaces.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>torus(30)</code>, it sets the radius of the ring. By default,
+  <code>radius</code> is 50.</p>
+
+  <p>The second parameter, <code>tubeRadius</code>, is also optional. If a
+  <code>Number</code> is
+
+  passed, as in <code>torus(30, 15)</code>, it sets the radius of the tube. By
+  default,
+
+  <code>tubeRadius</code> is 10.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>torus(30, 15, 5)</code>, it sets the number of edges used to draw
+  the hole
+
+  of the torus. Using more edges makes the hole look more like a circle. By
+
+  default, <code>detailX</code> is 24.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>torus(30, 15, 5, 7)</code>, it sets the number of triangle
+  subdivisions to
+
+  use while filling in the torus’ height. By default, <code>detailY</code> is
+  16.</p>
+
+  <p>Note: <code>torus()</code> can only be used in WebGL mode.</p>
+line: 2183
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      torus();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30.
+      torus(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30 and tubeRadius to 15.
+      torus(30, 15);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30 and tubeRadius to 15.
+      // Set its detailX to 5.
+      torus(30, 15, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30 and tubeRadius to 15.
+      // Set its detailX to 5.
+      // Set its detailY to 3.
+      torus(30, 15, 5, 3);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the torus. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: tubeRadius
+    description: |
+      <p>radius of the tube. Defaults to 10.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of edges that form the hole. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# torus
diff --git a/src/content/reference/en/p5 copy/touchEnded.mdx b/src/content/reference/en/p5 copy/touchEnded.mdx
new file mode 100644
index 0000000000..aebb308dc1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touchEnded.mdx	
@@ -0,0 +1,196 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L468
+title: touchEnded
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>A function that's called once each time a screen touch ends.</p>
+
+  <p>Declaring the function <code>touchEnded()</code> sets a code block to run
+
+  automatically when the user stops touching a touchscreen device:</p>
+
+  <pre><code class="language-js">function touchEnded() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
+  the most
+
+  recent touch points when <code>touchEnded()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function touchEnded() {
+    // Paint over the background.
+    background(200);
+
+    // Mark each remaining touch point when the user stops
+    // a touch.
+    for (let touch of touches) {
+      circle(touch.x, touch.y, 40);
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, event, is optional. <code>touchEnded()</code> will be passed
+  a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
+  target="_blank">TouchEvent</a>
+
+  object with properties that describe the touch event:</p>
+
+  <pre><code class="language-js">function touchEnded(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a> will
+
+  run when the user’s touch ends if <code>touchEnded()</code> isn’t declared. If
+
+  <code>touchEnded()</code> is declared, then <code>touchEnded()</code> will run
+  when a user’s
+
+  touch ends and <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
+  won’t.</p>
+
+  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
+
+  <code>touchEnded()</code>, and <a
+  href="/reference/p5/touchMoved/">touchMoved()</a> are all
+
+  related. <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon
+  as the
+
+  user touches a touchscreen device. <code>touchEnded()</code> runs as soon as
+  the user
+
+  ends a touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs
+  repeatedly as
+
+  the user moves any touch points.</p>
+line: 468
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle colors when a touch ends.
+    function touchEnded() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let bgColor = 50;
+    let fillColor = 255;
+    let borderWidth = 0.5;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+      );
+    }
+
+    function draw() {
+      background(bgColor);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      fill(0);
+      noStroke();
+
+      // Display the number of touch points.
+      text(touches.length, 50, 20);
+
+      // Style the touch points.
+      fill(fillColor);
+      stroke(0);
+      strokeWeight(borderWidth);
+
+      // Display the touch points as circles.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+
+    // Set the background color to a random grayscale value.
+    function touchStarted() {
+      bgColor = random(80, 255);
+    }
+
+    // Set the fill color to a random grayscale value.
+    function touchEnded() {
+      fillColor = random(0, 255);
+    }
+
+    // Set the stroke weight.
+    function touchMoved() {
+      // Increment the border width.
+      borderWidth += 0.1;
+
+      // Reset the border width once it's too thick.
+      if (borderWidth > 20) {
+        borderWidth = 0.5;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>TouchEvent</code> argument.</p>
+    type: TouchEvent
+    optional: true
+chainable: false
+---
+
+
+# touchEnded
diff --git a/src/content/reference/en/p5 copy/touchMoved.mdx b/src/content/reference/en/p5 copy/touchMoved.mdx
new file mode 100644
index 0000000000..80c23b81f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touchMoved.mdx	
@@ -0,0 +1,198 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L295
+title: touchMoved
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>A function that's called when the user touches the screen and moves.</p>
+
+  <p>Declaring the function <code>touchMoved()</code> sets a code block to run
+
+  automatically when the user touches a touchscreen device and moves:</p>
+
+  <pre><code class="language-js">function touchMoved() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
+  the most
+
+  recent touch points when <code>touchMoved()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function touchMoved() {
+    // Paint over the background.
+    background(200);
+
+    // Mark each touch point while the user moves.
+    for (let touch of touches) {
+      circle(touch.x, touch.y, 40);
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, event, is optional. <code>touchMoved()</code> will be passed
+  a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
+  target="_blank">TouchEvent</a>
+
+  object with properties that describe the touch event:</p>
+
+  <pre><code class="language-js">function touchMoved(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <a
+  href="/reference/p5/mouseDragged/">mouseDragged()</a> will
+
+  run when the user’s touch points move if <code>touchMoved()</code> isn’t
+  declared. If
+
+  <code>touchMoved()</code> is declared, then <code>touchMoved()</code> will run
+  when a user’s
+
+  touch points move and <a href="/reference/p5/mouseDragged/">mouseDragged()</a>
+  won’t.</p>
+
+  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a>, and
+
+  <code>touchMoved()</code> are all related.
+
+  <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon as the
+  user
+
+  touches a touchscreen device. <a
+  href="/reference/p5/touchEnded/">touchEnded()</a>
+
+  runs as soon as the user ends a touch. <code>touchMoved()</code> runs
+  repeatedly as
+
+  the user moves any touch points.</p>
+line: 295
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function touchMoved() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let bgColor = 50;
+    let fillColor = 255;
+    let borderWidth = 0.5;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+      );
+    }
+
+    function draw() {
+      background(bgColor);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      fill(0);
+      noStroke();
+
+      // Display the number of touch points.
+      text(touches.length, 50, 20);
+
+      // Style the touch points.
+      fill(fillColor);
+      stroke(0);
+      strokeWeight(borderWidth);
+
+      // Display the touch points as circles.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+
+    // Set the background color to a random grayscale value.
+    function touchStarted() {
+      bgColor = random(80, 255);
+    }
+
+    // Set the fill color to a random grayscale value.
+    function touchEnded() {
+      fillColor = random(0, 255);
+    }
+
+    // Set the stroke weight.
+    function touchMoved() {
+      // Increment the border width.
+      borderWidth += 0.1;
+
+      // Reset the border width once it's too thick.
+      if (borderWidth > 20) {
+        borderWidth = 0.5;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional TouchEvent argument.</p>
+    type: TouchEvent
+    optional: true
+chainable: false
+---
+
+
+# touchMoved
diff --git a/src/content/reference/en/p5 copy/touchStarted.mdx b/src/content/reference/en/p5 copy/touchStarted.mdx
new file mode 100644
index 0000000000..fc33b1f1c5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touchStarted.mdx	
@@ -0,0 +1,197 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L125
+title: touchStarted
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>A function that's called once each time the user touches the screen.</p>
+
+  <p>Declaring a function called <code>touchStarted()</code> sets a code block
+  to run
+
+  automatically each time the user begins touching a touchscreen device:</p>
+
+  <pre><code class="language-js">function touchStarted() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
+  the most
+
+  recent touch points when <code>touchStarted()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function touchStarted() {
+    // Paint over the background.
+    background(200);
+
+    // Mark each touch point once with a circle.
+    for (let touch of touches) {
+      circle(touch.x, touch.y, 40);
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, event, is optional. <code>touchStarted()</code> will be
+  passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
+  target="_blank">TouchEvent</a>
+
+  object with properties that describe the touch event:</p>
+
+  <pre><code class="language-js">function touchStarted(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <a
+  href="/reference/p5/mousePressed/">mousePressed()</a> will
+
+  run when a user’s touch starts if <code>touchStarted()</code> isn’t declared.
+  If
+
+  <code>touchStarted()</code> is declared, then <code>touchStarted()</code> will
+  run when a user’s
+
+  touch starts and <a href="/reference/p5/mousePressed/">mousePressed()</a>
+  won’t.</p>
+
+  <p>Note: <code>touchStarted()</code>, <a
+  href="/reference/p5/touchEnded/">touchEnded()</a>, and
+
+  <a href="/reference/p5/touchMoved/">touchMoved()</a> are all related.
+
+  <code>touchStarted()</code> runs as soon as the user touches a touchscreen
+  device.
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> runs as soon as the user
+  ends a
+
+  touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs repeatedly as
+  the
+
+  user moves any touch points.</p>
+line: 125
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle colors with each touch.
+    function touchStarted() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let bgColor = 50;
+    let fillColor = 255;
+    let borderWidth = 0.5;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+      );
+    }
+
+    function draw() {
+      background(bgColor);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      fill(0);
+      noStroke();
+
+      // Display the number of touch points.
+      text(touches.length, 50, 20);
+
+      // Style the touch points.
+      fill(fillColor);
+      stroke(0);
+      strokeWeight(borderWidth);
+
+      // Display the touch points as circles.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+
+    // Set the background color to a random grayscale value.
+    function touchStarted() {
+      bgColor = random(80, 255);
+    }
+
+    // Set the fill color to a random grayscale value.
+    function touchEnded() {
+      fillColor = random(0, 255);
+    }
+
+    // Set the stroke weight.
+    function touchMoved() {
+      // Increment the border width.
+      borderWidth += 0.1;
+
+      // Reset the border width once it's too thick.
+      if (borderWidth > 20) {
+        borderWidth = 0.5;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>TouchEvent</code> argument.</p>
+    type: TouchEvent
+    optional: true
+chainable: false
+---
+
+
+# touchStarted
diff --git a/src/content/reference/en/p5 copy/touches.mdx b/src/content/reference/en/p5 copy/touches.mdx
new file mode 100644
index 0000000000..7ad03e1610
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touches.mdx	
@@ -0,0 +1,102 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L10
+title: touches
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>An <code>Array</code> of all the current touch points on a touchscreen
+  device.</p>
+
+  <p>The <code>touches</code> array is empty by default. When the user touches
+  their
+
+  screen, a new touch point is tracked and added to the array. Touch points
+
+  are <code>Objects</code> with the following properties:</p>
+
+  <pre><code class="language-js">// Iterate over the touches array.
+
+  for (let touch of touches) {
+    // x-coordinate relative to the top-left
+    // corner of the canvas.
+    console.log(touch.x);
+
+    // y-coordinate relative to the top-left
+    // corner of the canvas.
+    console.log(touch.y);
+
+    // x-coordinate relative to the top-left
+    // corner of the browser.
+    console.log(touch.winX);
+
+    // y-coordinate relative to the top-left
+    // corner of the browser.
+    console.log(touch.winY);
+
+    // ID number
+    console.log(touch.id);
+  }
+
+  </code></pre>
+line: 10
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. White circles appear where the user touches the square.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a circle at each touch point.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. Labels appear where the user touches the square, displaying the coordinates.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a label above each touch point.
+      for (let touch of touches) {
+        text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: 'Object[]'
+---
+
+
+# touches
diff --git a/src/content/reference/en/p5 copy/translate.mdx b/src/content/reference/en/p5 copy/translate.mdx
new file mode 100644
index 0000000000..dd725eb199
--- /dev/null
+++ b/src/content/reference/en/p5 copy/translate.mdx	
@@ -0,0 +1,241 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1223
+title: translate
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Translates the coordinate system.</p>
+
+  <p>By default, the origin <code>(0, 0)</code> is at the sketch's top-left
+  corner in 2D
+
+  mode and center in WebGL mode. The <code>translate()</code> function shifts
+  the origin
+
+  to a different position. Everything drawn after <code>translate()</code> is
+  called
+
+  will appear to be shifted. There are two ways to call <code>translate()</code>
+  with
+
+  parameters that set the origin's position.</p>
+
+  <p>The first way to call <code>translate()</code> uses numbers to set the
+  amount of
+
+  translation. The first two parameters, <code>x</code> and <code>y</code>, set
+  the amount to
+
+  translate along the positive x- and y-axes. For example, calling
+
+  <code>translate(20, 30)</code> translates the origin 20 pixels along the
+  x-axis and 30
+
+  pixels along the y-axis. The third parameter, <code>z</code>, is optional. It
+  sets the
+
+  amount to translate along the positive z-axis. For example, calling
+
+  <code>translate(20, 30, 40)</code> translates the origin 20 pixels along the
+  x-axis,
+
+  30 pixels along the y-axis, and 40 pixels along the z-axis.</p>
+
+  <p>The second way to call <code>translate()</code> uses a
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object to set the amount of
+
+  translation. For example, calling <code>translate(myVector)</code> uses the
+  x-, y-,
+
+  and z-components of <code>myVector</code> to set the amount to translate along
+  the x-,
+
+  y-, and z-axes. Doing so is the same as calling
+
+  <code>translate(myVector.x, myVector.y, myVector.z)</code>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+
+  <code>translate(10, 0)</code> twice has the same effect as calling
+
+  <code>translate(20, 0)</code> once. The <a
+  href="/reference/p5/push/">push()</a> and
+
+  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
+
+  transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>translate(10, 0)</code> inside the <a
+  href="/reference/p5/draw/">draw()</a> function won't
+
+  cause shapes to move continuously.</p>
+line: 1223
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw the red circle.
+      fill('red');
+      circle(0, 0, 40);
+
+      // Translate the origin to the right.
+      translate(25, 0);
+
+      // Draw the blue circle.
+      fill('blue');
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle moves slowly from left to right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the x-coordinate.
+      let x = frameCount * 0.2;
+
+      // Translate the origin.
+      translate(x, 50);
+
+      // Draw a circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a p5.Vector object.
+      let v = createVector(50, 50);
+
+      // Translate the origin by the vector.
+      translate(v);
+
+      // Draw a circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn on the lights.
+      lights();
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw the red sphere.
+      fill('red');
+      sphere(10);
+
+      // Translate the origin to the right.
+      translate(30, 0, 0);
+
+      // Draw the blue sphere.
+      fill('blue');
+      sphere(10);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1223
+    params:
+      - name: x
+        description: |
+          <p>amount to translate along the positive x-axis.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>amount to translate along the positive y-axis.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>amount to translate along the positive z-axis.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1394
+    params:
+      - name: vector
+        description: |
+          <p>vector by which to translate.</p>
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# translate
diff --git a/src/content/reference/en/p5 copy/triangle.mdx b/src/content/reference/en/p5 copy/triangle.mdx
new file mode 100644
index 0000000000..08f1afb223
--- /dev/null
+++ b/src/content/reference/en/p5 copy/triangle.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1385
+title: triangle
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a triangle.</p>
+
+  <p>A triangle is a three-sided shape defined by three points. The
+
+  first two parameters specify the triangle's first point <code>(x1, y1)</code>.
+  The
+
+  middle two parameters specify its second point <code>(x2, y2)</code>. And the
+  last two
+
+  parameters specify its third point <code>(x3, y3)</code>.</p>
+line: 1385
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      triangle(30, 75, 58, 20, 86, 75);
+
+      describe('A white triangle with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      triangle(-20, 25, 8, -30, 36, 25);
+
+      describe('A white triangle with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white triangle spins around on a gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the triangle.
+      triangle(-20, 25, 8, -30, 36, 25);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x1
+    description: |
+      <p>x-coordinate of the first point.</p>
+    type: Number
+  - name: y1
+    description: |
+      <p>y-coordinate of the first point.</p>
+    type: Number
+  - name: x2
+    description: |
+      <p>x-coordinate of the second point.</p>
+    type: Number
+  - name: y2
+    description: |
+      <p>y-coordinate of the second point.</p>
+    type: Number
+  - name: x3
+    description: |
+      <p>x-coordinate of the third point.</p>
+    type: Number
+  - name: y3
+    description: |
+      <p>y-coordinate of the third point.</p>
+    type: Number
+chainable: true
+---
+
+
+# triangle
diff --git a/src/content/reference/en/p5 copy/trim.mdx b/src/content/reference/en/p5 copy/trim.mdx
new file mode 100644
index 0000000000..a782306725
--- /dev/null
+++ b/src/content/reference/en/p5 copy/trim.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L916
+title: trim
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Removes whitespace from the start and end of a <code>String</code> without
+  changing the middle.</p>
+
+  <p><code>trim()</code> trims
+
+  <a href="https://developer.mozilla.org/en-US/docs/Glossary/whitespace/"
+  target="_blank">whitespace characters</a>
+
+  such as spaces, carriage returns, tabs, Unicode "nbsp" character.</p>
+
+  <p>The parameter, <code>str</code>, is the string to trim. If a single string
+  is passed,
+
+  as in <code>trim('   pad   ')</code>, a single string is returned. If an array
+  of
+
+  strings is passed, as in <code>trim(['    pad   ', '\n space \n'])</code>, an
+  array of
+
+  strings is returned.</p>
+line: 916
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = '   p5*js   ';
+
+      // Trim the whitespace.
+      let trimmed = trim(string);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the text.
+      text(`Hello, ${trimmed}!`, 50, 50);
+
+      describe('The text "Hello, p5*js!" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let strings = ['   wide  ', '\n  open  ', '\n spaces  '];
+
+      // Trim the whitespace.
+      let trimmed = trim(strings);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(10);
+
+      // Display the text.
+      text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);
+
+      describe('The text "wide open spaces" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: trimmed string.
+  type: String
+overloads:
+  - line: 916
+    params:
+      - name: str
+        description: |
+          <p>string to trim.</p>
+        type: String
+    return:
+      description: trimmed string.
+      type: String
+  - line: 984
+    params:
+      - name: strs
+        description: |
+          <p>strings to trim.</p>
+        type: 'String[]'
+    return:
+      description: trimmed strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# trim
diff --git a/src/content/reference/en/p5 copy/turnAxis.mdx b/src/content/reference/en/p5 copy/turnAxis.mdx
new file mode 100644
index 0000000000..e8dc93e115
--- /dev/null
+++ b/src/content/reference/en/p5 copy/turnAxis.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L378
+title: turnAxis
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>When a device is rotated, the axis that triggers the <a
+  href="/reference/p5/deviceTurned/">deviceTurned()</a>
+
+  method is stored in the turnAxis variable. The turnAxis variable is only
+  defined within
+
+  the scope of deviceTurned().</p>
+line: 378
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees in the
+    // X-axis to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device turns`);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when x-axis turns`);
+    }
+    function deviceTurned() {
+      if (turnAxis === 'X') {
+        if (value === 0) {
+          value = 255;
+        } else if (value === 255) {
+          value = 0;
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# turnAxis
diff --git a/src/content/reference/en/p5 copy/types/Array.mdx b/src/content/reference/en/p5 copy/types/Array.mdx
new file mode 100644
index 0000000000..17fe1c2ed3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Array.mdx	
@@ -0,0 +1,269 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1140
+title: Array
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A list that keeps several pieces of data in order.</p>
+
+  <p>Arrays are helpful for storing related data. They can contain data of any
+
+  type. For example, an array could contain a list of someone's favorite
+
+  colors as strings. Arrays are created as follows:</p>
+
+  <pre><code class="language-js">let myArray = ['deeppink', 'darkorchid',
+  'magenta'];
+
+  </code></pre>
+
+  <p>Each piece of data in an array is called an element. Each element has an
+
+  address, or index, within its array. The variable <code>myArray</code> refers
+  to an
+
+  array with three <a href="/reference/p5/String/">String</a> elements,
+  <code>'deeppink'</code>,
+
+  <code>'darkorchid'</code>, and <code>'magenta'</code>. Arrays are
+  zero-indexed, which means
+
+  that <code>'deeppink'</code> is at index 0, <code>'darkorchid'</code> is at
+  index 1, and
+
+  '<code>magenta'</code> is at index 2. Array elements can be accessed using
+  their
+
+  indices as follows:</p>
+
+  <pre><code class="language-js">let zeroth = myArray[0]; // 'deeppink'
+
+  let first = myArray[1]; // 'darkorchid'
+
+  let second = myArray[2]; // 'magenta'
+
+  </code></pre>
+
+  <p>Elements can be added to the end of an array by calling the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push/"
+  target="_blank">push()</a>
+
+  method as follows:</p>
+
+  <pre><code class="language-js">myArray.push('lavender');
+
+
+  let third = myArray[3]; // 'lavender'
+
+  </code></pre>
+
+  <p>See <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays/"
+  target="_blank">MDN</a>
+
+  for more information about arrays.</p>
+line: 1140
+isConstructor: false
+itemtype: property
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an array
+
+    // with three numeric elements.
+
+    let xCoordinates = [25, 50, 75];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Three white circles drawn in a horizontal line on a gray background.'
+      );
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access the element at index 0, which is 25.
+      circle(xCoordinates[0], 50, 20);
+
+      // Access the element at index 1, which is 50.
+      circle(xCoordinates[1], 50, 20);
+
+      // Access the element at index 2, which is 75.
+      circle(xCoordinates[2], 50, 20);
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an array with three
+    numeric elements.
+
+    let xCoordinates = [20, 40, 60];
+
+
+    // Add another element to the end of the array.
+
+    xCoordinates.push(80);
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access the element at index 0, which is 20.
+      circle(xCoordinates[0], 50, 20);
+
+      // Access the element at index 1, which is 40.
+      circle(xCoordinates[1], 50, 20);
+
+      // Access the element at index 2, which is 60.
+      circle(xCoordinates[2], 50, 20);
+
+      // Access the element at index 3, which is 80.
+      circle(xCoordinates[3], 50, 20);
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an empty array.
+
+    let xCoordinates = [];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Add elements to the array using a loop.
+      for (let x = 20; x < 100; x += 20) {
+        xCoordinates.push(x);
+      }
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access the element at index i and use it to draw a circle.
+      for (let i = 0; i < xCoordinates.length; i += 1) {
+        circle(xCoordinates[i], 50, 20);
+      }
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an empty array.
+
+    let xCoordinates = [];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Add elements to the array using a loop.
+      for (let x = 20; x < 100; x += 20) {
+        xCoordinates.push(x);
+      }
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access each element of the array and use it to draw a circle.
+      for (let x of xCoordinates) {
+        circle(x, 50, 20);
+      }
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an empty array.
+
+    let xCoordinates = [];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Add elements to the array using a loop.
+      for (let x = 20; x < 100; x += 20) {
+        xCoordinates.push(x);
+      }
+
+      describe(
+        'Four white circles in a horizontal line on a gray background. The circles move randomly.'
+      );
+    }
+
+
+    function draw() {
+      background(200);
+
+      for (let i = 0; i < xCoordinates.length; i += 1) {
+        // Update the element at index i.
+        xCoordinates[i] += random(-1, 1);
+
+        // Use the element at index i to draw a circle.
+        circle(xCoordinates[i], 50, 20);
+      }
+    }
+
+    </code>
+
+    </div>
+class: p5
+---
+
+
+# Array
diff --git a/src/content/reference/en/p5 copy/types/Boolean.mdx b/src/content/reference/en/p5 copy/types/Boolean.mdx
new file mode 100644
index 0000000000..01d02c8de2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Boolean.mdx	
@@ -0,0 +1,273 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L502
+title: Boolean
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A value that's either <code>true</code> or <code>false</code>.</p>
+
+  <p><code>Boolean</code> values help to make decisions in code. They appear any
+  time a
+
+  logical condition is checked. For example, the condition
+
+  "Is a mouse button being pressed?" must be either <code>true</code> or
+
+  <code>false</code>:</p>
+
+  <pre><code class="language-js">// If the user presses the mouse, draw a circle
+  at
+
+  // the mouse's location.
+
+  if (mouseIsPressed === true) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>The <code>if</code> statement checks whether
+
+  <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> is
+  <code>true</code> and draws a
+
+  circle if it is. <code>Boolean</code> expressions such as <code>mouseIsPressed
+  === true</code>
+
+  evaluate to one of the two possible <code>Boolean</code> values:
+  <code>true</code> or <code>false</code>.</p>
+
+  <p>The <code>===</code> operator (EQUAL) checks whether two values are equal.
+  If they
+
+  are, the expression evaluates to <code>true</code>. Otherwise, it evaluates to
+
+  <code>false</code>.</p>
+
+  <p>Note: There's also a <code>==</code> operator with two <code>=</code>
+  instead of three. Don't use
+
+  it.</p>
+
+  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
+  variable is
+
+  always <code>true</code> or <code>false</code>, so the code snippet above
+  could also be written
+
+  as follows:</p>
+
+  <pre><code class="language-js">if (mouseIsPressed) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>The <code>!==</code> operator (NOT EQUAL) checks whether two values are not
+  equal, as
+
+  in the following example:</p>
+
+  <pre><code class="language-js">if (2 + 2 !== 4) {
+    text('War is peace.', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>Starting from the left, the arithmetic expression <code>2 + 2</code>
+  produces the
+
+  value <code>4</code>. The <code>Boolean</code> expression <code>4 !== 4</code>
+  evaluates to <code>false</code> because
+
+  <code>4</code> is equal to itself. As a result, the <code>if</code>
+  statement's body is skipped.</p>
+
+  <p>Note: There's also a <code>!=</code> operator with one <code>=</code>
+  instead of two. Don't use
+
+  it.</p>
+
+  <p>The <code>Boolean</code> operator <code>&&</code> (AND) checks whether two
+  expressions are both
+
+  <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
+    text('You pressed the "p" key!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
+  message will
+
+  display.</p>
+
+  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
+  least one of two
+
+  expressions is <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
+  true) {
+    text('You did something!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user presses a key, or presses a mouse button, or both, then a
+
+  message will display.</p>
+
+  <p>The following truth table summarizes a few common scenarios with
+  <code>&&</code> and
+
+  <code>||</code>:</p>
+
+  <pre><code class="language-js">true && true  // true
+
+  true && false // false
+
+  false && false // false
+
+  true || true  // true
+
+  true || false // true
+
+  false || false // false
+
+  </code></pre>
+
+  <p>The relational operators <code>></code>, <code><< code="">,
+  <code>>=</code>, and <code><=< code=""> also produce <code>Boolean</code>
+
+  values:</=<></code></<></code></p>
+
+  <pre><code class="language-js">2 > 1 // true
+
+  2 < 1 // false
+
+  2 >= 2 // true
+
+  2 <= 2="" true="" <="" code=""/></code></pre>
+
+  <p>See <a href="/reference/p5/if/">if</a> for more information about
+  <code>if</code> statements and
+
+  <a href="/reference/p5/Number/">Number</a> for more information about
+  <code>Number</code>s.</p>
+line: 502
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the user presses the mouse, draw a circle at that location.
+      if (mouseIsPressed) {
+        circle(mouseX, mouseY, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the user presses the mouse, draw a circle at that location.
+      if (mouseIsPressed === true) {
+        circle(mouseX, mouseY, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square that turns pink when the user presses the mouse or a key.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the user presses the mouse, change the background color.
+      if (mouseIsPressed === true || keyIsPressed === true) {
+        background('deeppink');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the canvas to begin detecting key presses.
+
+    // Create a Boolean variable.
+    let isPlaying = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'The message "Begin?\nY or N" written in green on a black background. The message "Good luck!" appears when they press the "y" key.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+      fill(0, 255, 0);
+
+      // Display a different message when the user begins playing.
+      if (isPlaying === false) {
+        text('Begin?', 50, 40);
+        text('Y or N', 50, 60);
+      } else {
+        text('Good luck!', 50, 50);
+      }
+    }
+
+    // Start playing when the user presses the 'y' key.
+    function keyPressed() {
+      if (key === 'y') {
+        isPlaying = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# Boolean
diff --git a/src/content/reference/en/p5 copy/types/Number.mdx b/src/content/reference/en/p5 copy/types/Number.mdx
new file mode 100644
index 0000000000..3dfa850720
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Number.mdx	
@@ -0,0 +1,201 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L853
+title: Number
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A number that can be positive, negative, or zero.</p>
+
+  <p>The <code>Number</code> data type is useful for describing values such as
+  position,
+
+  size, and color. A number can be an integer such as 20 or a decimal number
+
+  such as 12.34. For example, a circle's position and size can be described
+
+  by three numbers:</p>
+
+  <pre><code class="language-js">circle(50, 50, 20);
+
+  </code></pre>
+
+  <pre><code class="language-js">circle(50, 50, 12.34);
+
+  </code></pre>
+
+  <p>Numbers support basic arithmetic and follow the standard order of
+
+  operations: Parentheses, Exponents, Multiplication, Division, Addition,
+
+  and Subtraction (PEMDAS). For example, it's common to use arithmetic
+
+  operators with p5.js' system variables that are numbers:</p>
+
+  <pre><code class="language-js">// Draw a circle at the center.
+
+  circle(width / 2, height / 2, 20);
+
+  </code></pre>
+
+  <pre><code class="language-js">// Draw a circle that moves from left to right.
+
+  circle(frameCount * 0.01, 50, 20);
+
+  </code></pre>
+
+  <p>Here's a quick overview of the arithmetic operators:</p>
+
+  <pre><code class="language-js">1 + 2 // Add
+
+  1 - 2 // Subtract
+
+  1 * 2 // Multiply
+
+  1 / 2 // Divide
+
+  1 % 2 // Remainder
+
+  1 ** 2 // Exponentiate
+
+  </code></pre>
+
+  <p>It's common to update a number variable using arithmetic. For example, an
+
+  object's location can be updated like so:</p>
+
+  <pre><code class="language-js">x = x + 1;
+
+  </code></pre>
+
+  <p>The statement above adds 1 to a variable <code>x</code> using the
+  <code>+</code> operator. The
+
+  addition assignment operator <code>+=</code> expresses the same idea:</p>
+
+  <pre><code class="language-js">x += 1;
+
+  </code></pre>
+
+  <p>Here's a quick overview of the assignment operators:</p>
+
+  <pre><code class="language-js">x += 2 // Addition assignment
+
+  x -= 2 // Subtraction assignment
+
+  x *= 2 // Multiplication assignment
+
+  x /= 2 // Division assignment
+
+  x %= 2 // Remainder assignment
+
+  </code></pre>
+
+  <p>Numbers can be compared using the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators"
+  target="_blank">relational operators</a>
+
+  <code>></code>, <code><< code="">, <code>>=</code>, <code><=< code="">,
+  <code>===</code>, and <code>!==</code>.  For example, a sketch's
+
+  <a href="/reference/p5/frameCount/">frameCount</a> can be used as a
+  timer:</=<></code></<></code></p>
+
+  <pre><code class="language-js">if (frameCount > 1000) {
+    text('Game over!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>An expression such as <code>frameCount > 1000</code> evaluates to a
+  <code>Boolean</code> value
+
+  that's either <code>true</code> or <code>false</code>. The relational
+  operators all produce
+
+  <code>Boolean</code> values:</p>
+
+  <pre><code class="language-js">2 > 1 // true
+
+  2 < 1 // false
+
+  2 >= 2 // true
+
+  2 <= 2="" true="" !="=" false="" <="" code=""/></code></pre>
+
+  <p>See <a href="/reference/p5/Boolean/">Boolean</a> for more information about
+  comparisons and conditions.</p>
+
+  <p>Note: There are also <code>==</code> and <code>!=</code> operators with one
+  fewer <code>=</code>. Don't use them.</p>
+
+  <p>Expressions with numbers can also produce special values when something
+
+  goes wrong:</p>
+
+  <pre><code class="language-js">sqrt(-1) // NaN
+
+  1 / 0 // Infinity
+
+  </code></pre>
+
+  <p>The value <code>NaN</code> stands for
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN/"
+  target="_blank">Not-A-Number</a>.
+
+  <code>NaN</code> appears when calculations or conversions don't work.
+  <code>Infinity</code> is a
+
+  value that's larger than any number. It appears during certain
+
+  calculations.</p>
+line: 853
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a circle at the center.
+      circle(50, 50, 70);
+
+      // Draw a smaller circle at the center.
+      circle(width / 2, height / 2, 30);
+
+      describe('Two concentric, white circles drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle travels from left to right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      circle(frameCount * 0.05, 50, 20);
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# Number
diff --git a/src/content/reference/en/p5 copy/types/Object.mdx b/src/content/reference/en/p5 copy/types/Object.mdx
new file mode 100644
index 0000000000..c5c9adf8bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Object.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L999
+title: Object
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: "<p>A container for data that's stored as key-value pairs.</p>\n<p>Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.</p>\n<p>For example, an object could contain the location, size, and appearance of\na dog:</p>\n<pre><code class=\"language-js\">// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '\U0001F436' };\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);\n\n// Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n</code></pre>\n<p>The variable <code>dog</code> is assigned an object with four properties. Objects\nare declared with curly braces <code>{}</code>. Values can be accessed using the dot\noperator, as in <code>dog.size</code>. In the example above, the key <code>size</code>\ncorresponds to the value <code>20</code>. Objects can also be empty to start:</p>\n<pre><code class=\"language-js\">// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n// Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '\U0001F431';\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);\n\n// Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n</code></pre>\n<p>An object's data can be updated while a sketch runs. For example, the <code>cat</code>\ncould run away from the <code>dog</code> by updating its location:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat.x += 5;\n</code></pre>\n<p>If needed, an object's values can be accessed using square brackets <code>[]</code>\nand strings instead of dot notation:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat[\"x\"] += 5;\n</code></pre>\n<p>This syntax can be helpful when the key's name has spaces, as in\n<code>cat['height (m)']</code>.</p>\n"
+line: 999
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Declare the variable data and assign it an object with three properties.
+    let data = { x: 50, y: 50, d: 20 };
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the object's values using the . operator.
+      circle(data.x, data.y, data.d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable data and assign it an object with three properties.
+    let data = { x: 50, y: 50, d: 20 };
+
+    // Add another property for color.
+    data.color = 'deeppink';
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A pink circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the object's values using the . operator.
+      fill(data.color);
+      circle(data.x, data.y, data.d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable data and assign it an object with three properties.
+    let data = { x: 50, y: 50, d: 20 };
+
+    // Add another property for color.
+    data.color = 'deeppink';
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the object's values using the . operator.
+      fill(data.color);
+      circle(data.x, data.y, data.d);
+
+      // Update the object's x and y properties.
+      data.x += random(-1, 1);
+      data.y += random(-1, 1);
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# Object
diff --git a/src/content/reference/en/p5 copy/types/String.mdx b/src/content/reference/en/p5 copy/types/String.mdx
new file mode 100644
index 0000000000..e62a9a8b9c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/String.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L710
+title: String
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A sequence of text characters.</p>
+
+  <p>The <code>String</code> data type is helpful for working with text. For
+  example, a
+
+  string could contain a welcome message:</p>
+
+  <pre><code class="language-js">// Use a string literal.
+
+  text('Hello!', 10, 10);
+
+  </code></pre>
+
+  <pre><code class="language-js">// Create a string variable.
+
+  let message = 'Hello!';
+
+
+  // Use the string variable.
+
+  text(message, 10, 10);
+
+  </code></pre>
+
+  <p>The most common way to create strings is to use some form of quotations as
+
+  follows:</p>
+
+  <pre><code class="language-js">text("hi", 50, 50);
+
+  </code></pre>
+
+  <pre><code class="language-js">text('hi', 50, 50);
+
+  </code></pre>
+
+  <pre><code class="language-js">text(`hi`, 50, 50);
+
+  </code></pre>
+
+  <p><code>"hi"</code>, <code>'hi'</code>, and <code>hi</code> are all string
+  literals. A "literal" means a
+
+  value was actually written, as in <code>text('hi', 50, 50)</code>. By
+  contrast,
+
+  <code>text(message, 50, 50)</code> uses the variable <code>message</code>, so
+  it isn't a string
+
+  literal.</p>
+
+  <p>Single quotes <code>''</code> and double quotes <code>""</code> mean the
+  same thing. It's nice to
+
+  have the option for cases when a string contains one type of quote:</p>
+
+  <pre><code class="language-js">text("What's up?", 50, 50);
+
+  </code></pre>
+
+  <pre><code class="language-js">text('Air quotes make you look "cool."', 50,
+  50);
+
+  </code></pre>
+
+  <p>Backticks <code>``</code> create template literals. Template literals have
+  many uses.
+
+  For example, they can contain both single and double quotes as needed:</p>
+
+  <pre><code class="language-js">text(`"Don't you forget about me"`,  10, 10);
+
+  </code></pre>
+
+  <p>Template literals are helpful when strings are created from variables like
+
+  so:</p>
+
+  <pre><code class="language-js">let size = random(10, 20);
+
+  circle(50, 50, size);
+
+
+  text(`The circle's diameter is ${size} pixels.`,  10, 10);
+
+  </code></pre>
+
+  <p>The <code>size</code> variable's value will replace <code>${size}</code>
+  when the string is
+
+  created. <code>${}</code> is a placeholder for any value. That means an
+  expression can
+
+  be used, as in <code>${round(PI, 3)}</code>. All of the following are valid
+  template
+
+  literals:</p>
+
+  <pre><code class="language-js">text(`π is about ${round(PI, 2)} pixels.`,  10,
+  10);
+
+  text(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 
+  10, 30);
+
+  </code></pre>
+
+  <p>Template literals can include several variables:</p>
+
+  <pre><code class="language-js">let x = random(0, 100);
+
+  let y = random(0, 100);
+
+  let size = random(10, 20);
+
+  circle(x, y, size);
+
+
+  text(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`,  10, 10);
+
+  </code></pre>
+
+  <p>Template literals are also helpful for creating multi-line text like
+  so:</p>
+
+  <pre><code class="language-js">let poem = `My sketch doesn't run;
+
+  it waits for me patiently
+
+  while bugs point the way.`;
+
+
+  text(poem, 10, 10);
+
+  </code></pre>
+line: 710
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Display a welcome message.\n  text('Hello!', 50, 50);\n\n  describe('The text \"Hello!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Create a string variable.\n  let world = '\U0001F30D';\n\n  // Display a welcome message using a template string.\n  text(`Hello, ${world}!`, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# String
diff --git a/src/content/reference/en/p5 copy/unchar.mdx b/src/content/reference/en/p5 copy/unchar.mdx
new file mode 100644
index 0000000000..8ef044b393
--- /dev/null
+++ b/src/content/reference/en/p5 copy/unchar.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L731
+title: unchar
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a single-character <code>String</code> to a
+  <code>Number</code>.</p>
+
+  <p><code>unchar()</code> converts single-character strings to their
+  corresponding
+
+  integer (whole number).</p>
+
+  <p>The parameter, <code>n</code>, is the character to convert. For example,
+
+  <code>unchar('A')</code>, returns the number 65. If an array is passed, as in
+
+  <code>unchar(['A', 'B', 'C'])</code>, an array of integers is returned.</p>
+line: 731
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = 'A';
+
+      // Convert the string to a number.
+      let converted = unchar(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "A : 65" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of characters.
+      let original = ['A', 'B', 'C'];
+
+      // Convert the string to a number.
+      let converted = unchar(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Iterate over elements of the converted array.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${original[i]} : ${converted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "A : 65", "B : 66", and "C :67" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 731
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String
+    return:
+      description: converted number.
+      type: Number
+  - line: 805
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: 'String[]'
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# unchar
diff --git a/src/content/reference/en/p5 copy/unhex.mdx b/src/content/reference/en/p5 copy/unhex.mdx
new file mode 100644
index 0000000000..5c507abc4c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/unhex.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L956
+title: unhex
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>String</code> with a hexadecimal value to a 
+  <code>Number</code>.</p>
+
+  <p><code>unhex()</code> converts a string with its hexadecimal number value to
+  a number.
+
+  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+
+  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+
+  number <code>11</code> (eleven) in base-10 is written as the letter
+  <code>B</code> in hex.</p>
+
+  <p>The first parameter, <code>n</code>, is the hex string to convert. For
+  example,
+
+  <code>unhex('FF')</code>, returns the number 255. If an array is passed, as in
+
+  <code>unhex(['00', '80', 'FF'])</code>, an array of numbers is returned.</p>
+line: 956
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a a hex string variable
+      let original = 'FF';
+
+      // Convert the hex string to a number.
+      let converted = unhex(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "FF = 255" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = ['00', '80', 'FF'];
+
+      // Convert the numbers to hex strings.
+      // Only use two hex digits.
+      let converted = unhex(original, 2);
+
+      // Style the text.
+      textAlign(RIGHT, CENTER);
+      textSize(16);
+
+      // Iterate over the converted values.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${ original[i]} = ${converted[i]}`, 80, y);
+      }
+
+      describe(
+        'The text "00 = 0", "80 = 128", and "FF = 255" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 956
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String
+    return:
+      description: converted number.
+      type: Number
+  - line: 1033
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: 'String[]'
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# unhex
diff --git a/src/content/reference/en/p5 copy/updatePixels.mdx b/src/content/reference/en/p5 copy/updatePixels.mdx
new file mode 100644
index 0000000000..5de892374b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/updatePixels.mdx	
@@ -0,0 +1,94 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L1118
+title: updatePixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Updates the canvas with the RGBA values in the
+
+  <a href="/reference/p5/pixels/">pixels</a> array.</p>
+
+  <p><code>updatePixels()</code> only needs to be called after changing values
+  in the
+
+  <a href="/reference/p5/pixels/">pixels</a> array. Such changes can be made
+  directly
+
+  after calling <a href="/reference/p5/loadPixels/">loadPixels()</a> or by
+  calling
+
+  <a href="/reference/p5/set/">set()</a>.</p>
+line: 1118
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0, 100, 100);
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Copy the top half of the canvas to the bottom.
+      for (let i = 0; i < halfImage; i += 1) {
+        pixels[i + halfImage] = pixels[i];
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Two identical images of mountain landscapes, one on top of the other.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the upper-left corner of region
+                              to update.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the upper-left corner of region
+                              to update.</p>
+    type: Number
+    optional: true
+  - name: w
+    description: |
+      <p>width of region to update.</p>
+    type: Number
+    optional: true
+  - name: h
+    description: |
+      <p>height of region to update.</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# updatePixels
diff --git a/src/content/reference/en/p5 copy/userStartAudio.mdx b/src/content/reference/en/p5 copy/userStartAudio.mdx
new file mode 100644
index 0000000000..076d8537c5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/userStartAudio.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L198
+title: userStartAudio
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >-
+  <p>It is not only a good practice to give users control over starting
+
+  audio. This policy is enforced by many web browsers, including iOS and
+
+  <a href="https://goo.gl/7K7WLu/" title="Google Chrome's autoplay
+
+  policy">Google Chrome</a>, which create the Web Audio API's
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/"
+  title="Audio Context @ MDN">Audio Context</a>
+
+  in a suspended state.</p>
+
+
+  <p>In these browser-specific policies, sound will not play until a user
+
+  interaction event (i.e. <code>mousePressed()</code>) explicitly resumes
+
+  the AudioContext, or starts an audio node. This can be accomplished by
+
+  calling <code>start()</code> on a <code>p5.Oscillator</code>,
+
+  <code> play()</code> on a <code>p5.SoundFile</code>, or simply
+
+  <code>userStartAudio()</code>.</p>
+
+
+  <p><code>userStartAudio()</code> starts the AudioContext on a user
+
+  gesture. The default behavior will enable audio on any
+
+  mouseUp or touchEnd event. It can also be placed in a specific
+
+  interaction function, such as <code>mousePressed()</code> as in the
+
+  example below. This method utilizes
+
+  <a href="https://github.com/tambien/StartAudioContext/">StartAudioContext
+
+  </a>, a library by Yotam Mann (MIT Licence, 2016).</p>
+line: 198
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    function setup() {
+      // mimics the autoplay policy
+      getAudioContext().suspend();
+
+      let mySynth = new p5.MonoSynth();
+
+      // This won't play until the context has resumed
+      mySynth.play('A6');
+    }
+    function draw() {
+      background(220);
+      textAlign(CENTER, CENTER);
+      text(getAudioContext().state, width/2, height/2);
+    }
+    function mousePressed() {
+      userStartAudio();
+    }
+    </code></div>
+class: p5
+params:
+  - name: elements
+    description: |
+      <p>This argument can be an Element,
+                                    Selector String, NodeList, p5.Element,
+                                    jQuery Element, or an Array of any of those.</p>
+    type: Element|Array
+    optional: true
+  - name: callback
+    description: |
+      <p>Callback to invoke when the AudioContext
+                                    has started</p>
+    type: Function
+    optional: true
+return:
+  description: |-
+    Returns a Promise that resolves when
+                                         the AudioContext state is 'running'
+  type: Promise
+chainable: false
+---
+
+
+# userStartAudio
diff --git a/src/content/reference/en/p5 copy/vertex.mdx b/src/content/reference/en/p5 copy/vertex.mdx
new file mode 100644
index 0000000000..92d5bb9138
--- /dev/null
+++ b/src/content/reference/en/p5 copy/vertex.mdx	
@@ -0,0 +1,242 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1881
+title: vertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a vertex to a custom shape.</p>
+
+  <p><code>vertex()</code> sets the coordinates of vertices drawn between the
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
+
+  <p>The first two parameters, <code>x</code> and <code>y</code>, set the x- and
+  y-coordinates of the
+
+  vertex.</p>
+
+  <p>The third parameter, <code>z</code>, is optional. It sets the z-coordinate
+  of the
+
+  vertex in WebGL mode. By default, <code>z</code> is 0.</p>
+
+  <p>The fourth and fifth parameters, <code>u</code> and <code>v</code>, are
+  also optional. They set
+
+  the u- and v-coordinates for the vertex’s texture when used with
+
+  <a href="/reference/p5/endShape/">endShape()</a>. By default, <code>u</code>
+  and <code>v</code> are both 0.</p>
+line: 1881
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      strokeWeight(3);
+
+      // Start drawing the shape.
+      // Only draw the vertices.
+      beginShape(POINTS);
+
+      // Add the vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Four black dots that form a square are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(-20, -30, 0);
+      vertex(35, -30, 0);
+      vertex(35, 25, 0);
+      vertex(-20, 25, 0);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square spins around slowly on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(-20, -30, 0);
+      vertex(35, -30, 0);
+      vertex(35, 25, 0);
+      vertex(-20, 25, 0);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image to apply as a texture.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A photograph of a ceiling rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Style the shape.
+      noStroke();
+
+      // Apply the texture.
+      texture(img);
+      textureMode(NORMAL);
+
+      // Start drawing the shape
+      beginShape();
+
+      // Add vertices.
+      vertex(-20, -30, 0, 0, 0);
+      vertex(35, -30, 0, 1, 0);
+      vertex(35, 25, 0, 1, 1);
+      vertex(-20, 25, 0, 0, 1);
+
+      // Stop drawing the shape.
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1881
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the vertex.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the vertex.</p>
+        type: Number
+    chainable: 1
+  - line: 2052
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the vertex. Defaults to 0.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2059
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+        optional: true
+      - name: u
+        description: |
+          <p>u-coordinate of the vertex's texture. Defaults to 0.</p>
+        type: Number
+        optional: true
+      - name: v
+        description: |
+          <p>v-coordinate of the vertex's texture. Defaults to 0.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# vertex
diff --git a/src/content/reference/en/p5 copy/webglVersion.mdx b/src/content/reference/en/p5 copy/webglVersion.mdx
new file mode 100644
index 0000000000..1909f94a86
--- /dev/null
+++ b/src/content/reference/en/p5 copy/webglVersion.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L508
+title: webglVersion
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>String</code> variable with the WebGL version in use.</p>
+
+  <p><code>webglVersion</code>'s value equals one of the following string
+  constants:</p>
+
+  <ul>
+
+  <li><code>WEBGL2</code> whose value is <code>'webgl2'</code>,</li>
+
+  <li><code>WEBGL</code> whose value is <code>'webgl'</code>, or</li>
+
+  <li><code>P2D</code> whose value is <code>'p2d'</code>. This is the default
+  for 2D sketches.</li>
+
+  </ul>
+
+  <p>See <a href="/reference/p5/setAttributes/">setAttributes()</a> for ways to
+  set the
+
+  WebGL version.</p>
+line: 508
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the current WebGL version.
+      text(webglVersion, 42, 54);
+
+      describe('The text "p2d" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Load a font to use.
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      // Create a canvas using WEBGL mode.
+      createCanvas(100, 50, WEBGL);
+      background(200);
+
+      // Display the current WebGL version.
+      fill(0);
+      textFont(font);
+      text(webglVersion, -15, 5);
+
+      describe('The text "webgl2" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Load a font to use.
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      // Create a canvas using WEBGL mode.
+      createCanvas(100, 50, WEBGL);
+
+      // Set WebGL to version 1.
+      setAttributes({ version: 1 });
+
+      background(200);
+
+      // Display the current WebGL version.
+      fill(0);
+      textFont(font);
+      text(webglVersion, -14, 5);
+
+      describe('The text "webgl" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# webglVersion
diff --git a/src/content/reference/en/p5 copy/while.mdx b/src/content/reference/en/p5 copy/while.mdx
new file mode 100644
index 0000000000..5fdcb2985a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/while.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1872
+title: while
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A way to repeat a block of code.</p>
+
+  <p><code>while</code> loops are helpful for repeating statements while a
+  condition is
+
+  <code>true</code>. They're like <code>if</code> statements that repeat. For
+  example, a <code>while</code>
+
+  loop makes it easy to express the idea "draw several lines" like so:</p>
+
+  <pre><code class="language-js">// Declare a variable to keep track of
+  iteration.
+
+  let x = 10;
+
+
+  // Repeat as long as x < 100
+
+  while (x < 100) {
+    line(x, 25, x, 75);
+
+    // Increment by 20.
+    x += 20;
+  }
+
+  </code></pre>
+
+  <p>The loop's header begins with the keyword <code>while</code>. Loops
+  generally count up
+
+  or count down as they repeat, or iterate. The statement in parentheses
+
+  <code>x < 100</code> is a condition the loop checks each time it iterates. If
+  the
+
+  condition is <code>true</code>, the loop runs the code between the curly
+  braces <code>{}</code>,
+
+  The code between the curly braces is called the loop's body. If the
+
+  condition is <code>false</code>, the body is skipped and the loop is
+  stopped.</p>
+
+  <p>It's common to create infinite loops accidentally. For example, the
+
+  following loop never stops iterating because it doesn't count up:</p>
+
+  <pre><code class="language-js">// Declare a variable to keep track of
+  iteration.
+
+  let x = 10;
+
+
+  // Repeat as long as x < 100
+
+  while (x < 100) {
+    line(x, 25, x, 75);
+  }
+
+
+  // This should be in the loop's body!
+
+  x += 20;
+
+  </code></pre>
+
+  <p>The statement <code>x += 20</code> appears after the loop's body. That
+  means the
+
+  variable <code>x</code> is stuck at <code>10</code>,  which is always less
+  than <code>100</code>.</p>
+
+  <p><code>while</code> loops are useful when the number of iterations isn't
+  known in
+
+  advance. For example, concentric circles could be drawn at random
+
+  increments:</p>
+
+  <pre><code class="language-js">let d = 100;
+
+  let minSize = 5;
+
+
+  while (d > minSize) {
+    circle(50, 50, d);
+    d -= random(10);
+  }
+
+  </code></pre>
+line: 1872
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Five black vertical lines on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Declare a variable to keep track of iteration.
+      let x = 10;
+
+      // Repeat as long as x < 100
+      while (x < 100) {
+        line(x, 25, x, 75);
+
+        // Increment by 20.
+        x += 20;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe(
+        "A gray square with several concentric circles at the center. The circles' sizes decrease at random increments."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      let d = 100;
+      let minSize = 5;
+
+      while (d > minSize) {
+        circle(50, 50, d);
+        d -= random(5, 15);
+      }
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# while
diff --git a/src/content/reference/en/p5 copy/width.mdx b/src/content/reference/en/p5 copy/width.mdx
new file mode 100644
index 0000000000..0eb6ad07bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/width.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L812
+title: width
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the width of the canvas in
+  pixels.</p>
+
+  <p><code>width</code>'s default value is 100. Calling
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
+
+  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
+
+  <code>width</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
+  sets its value to
+
+  0.</p>
+line: 812
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 42, 54);
+
+      describe('The number 100 written in black on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(50, 100);
+
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 21, 54);
+
+      describe('The number 50 written in black on a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 42, 54);
+
+      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+    }
+
+    // If the mouse is pressed, reisze
+    // the canvas and display its new
+    // width.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        resizeCanvas(50, 100);
+        background(200);
+        text(width, 21, 54);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# width
diff --git a/src/content/reference/en/p5 copy/winMouseX.mdx b/src/content/reference/en/p5 copy/winMouseX.mdx
new file mode 100644
index 0000000000..ae7dbc3fac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/winMouseX.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L463
+title: winMouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's horizontal position
+  within the
+
+  browser.</p>
+
+  <p><code>winMouseX</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. For example, if the mouse is 50 pixels from
+
+  the left edge of the browser, then <code>winMouseX</code> will be 50.</p>
+
+  <p>On a touchscreen device, <code>winMouseX</code> will hold the x-coordinate
+  of the most
+
+  recent touch point.</p>
+
+  <p>Note: Use <a href="/reference/p5/mouseX/">mouseX</a> to track the mouse’s
+
+  x-coordinate within the canvas.</p>
+line: 463
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates within the browser window.
+      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# winMouseX
diff --git a/src/content/reference/en/p5 copy/winMouseY.mdx b/src/content/reference/en/p5 copy/winMouseY.mdx
new file mode 100644
index 0000000000..32c59cba4c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/winMouseY.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L504
+title: winMouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's vertical position
+  within the
+
+  browser.</p>
+
+  <p><code>winMouseY</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. For example, if the mouse is 50 pixels from
+
+  the top edge of the browser, then <code>winMouseY</code> will be 50.</p>
+
+  <p>On a touchscreen device, <code>winMouseY</code> will hold the y-coordinate
+  of the most
+
+  recent touch point.</p>
+
+  <p>Note: Use <a href="/reference/p5/mouseY/">mouseY</a> to track the mouse’s
+
+  y-coordinate within the canvas.</p>
+line: 504
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates within the browser window.
+      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# winMouseY
diff --git a/src/content/reference/en/p5 copy/windowHeight.mdx b/src/content/reference/en/p5 copy/windowHeight.mdx
new file mode 100644
index 0000000000..829ac3d76b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/windowHeight.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L680
+title: windowHeight
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the height of the browser's
+  viewport.</p>
+
+  <p>The <a
+  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
+  target="_blank">layout viewport</a>
+
+  is the area within the browser that's available for drawing.</p>
+line: 680
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the browser's dimensions.
+      createCanvas(windowWidth, windowHeight);
+
+      background(200);
+
+      describe('A gray canvas that takes up the entire browser window.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# windowHeight
diff --git a/src/content/reference/en/p5 copy/windowResized.mdx b/src/content/reference/en/p5 copy/windowResized.mdx
new file mode 100644
index 0000000000..aed52e6b4b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/windowResized.mdx	
@@ -0,0 +1,64 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L708
+title: windowResized
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A function that's called when the browser window is resized.</p>
+
+  <p>Code placed in the body of <code>windowResized()</code> will run when the
+
+  browser window's size changes. It's a good place to call
+
+  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> or make other
+
+  adjustments to accommodate the new window size.</p>
+
+  <p>The <code>event</code> parameter is optional. If added to the function
+  declaration, it
+
+  can be used for debugging or other purposes.</p>
+line: 708
+isConstructor: false
+itemtype: method
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+
+      describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a circle at the center.
+      circle(width / 2, height / 2, 50);
+    }
+
+    // Resize the canvas when the
+    // browser's size changes.
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional resize Event.</p>
+    type: Event
+    optional: true
+chainable: false
+---
+
+
+# windowResized
diff --git a/src/content/reference/en/p5 copy/windowWidth.mdx b/src/content/reference/en/p5 copy/windowWidth.mdx
new file mode 100644
index 0000000000..26ec5fc2a9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/windowWidth.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L652
+title: windowWidth
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the width of the browser's
+  viewport.</p>
+
+  <p>The <a
+  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
+  target="_blank">layout viewport</a>
+
+  is the area within the browser that's available for drawing.</p>
+line: 652
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the browser's dimensions.
+      createCanvas(windowWidth, windowHeight);
+
+      background(200);
+
+      describe('A gray canvas that takes up the entire browser window.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# windowWidth
diff --git a/src/content/reference/en/p5 copy/year.mdx b/src/content/reference/en/p5 copy/year.mdx
new file mode 100644
index 0000000000..04efa83189
--- /dev/null
+++ b/src/content/reference/en/p5 copy/year.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L311
+title: year
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current year as a number such as 1999.</p>
+line: 311
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current year.
+      let y = year();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the year.
+      text(`Current year: ${y}`, 10, 50, 80);
+
+      describe(`The text 'Current year: ${y}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current year.
+  type: Integer
+chainable: false
+---
+
+
+# year

From 3b72493014c0363244fe40bd2d6756fdb6624220 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:41:45 +0545
Subject: [PATCH 14/16] Refactor translation tracker documentation and logic to
 clarify stub generation limits per language; remove test files.

---
 .github/actions/translation-tracker/README.md |   4 +-
 .../actions/translation-tracker/workflows.js  |  28 +-
 src/content/reference/en/p5 copy/abs.mdx      |  61 --
 .../reference/en/p5 copy/accelerationX.mdx    |  37 -
 .../reference/en/p5 copy/accelerationY.mdx    |  37 -
 .../reference/en/p5 copy/accelerationZ.mdx    |  37 -
 src/content/reference/en/p5 copy/acos.mdx     |  86 --
 src/content/reference/en/p5 copy/alpha.mdx    | 120 ---
 .../reference/en/p5 copy/ambientLight.mdx     | 241 ------
 .../reference/en/p5 copy/ambientMaterial.mdx  | 269 ------
 .../reference/en/p5 copy/angleMode.mdx        | 219 -----
 src/content/reference/en/p5 copy/append.mdx   |  48 --
 .../reference/en/p5 copy/applyMatrix.mdx      | 347 --------
 src/content/reference/en/p5 copy/arc.mdx      | 274 ------
 .../reference/en/p5 copy/arrayCopy.mdx        |  95 ---
 src/content/reference/en/p5 copy/asin.mdx     |  86 --
 src/content/reference/en/p5 copy/atan.mdx     |  86 --
 src/content/reference/en/p5 copy/atan2.mdx    | 106 ---
 .../reference/en/p5 copy/background.mdx       | 336 --------
 .../reference/en/p5 copy/baseColorShader.mdx  | 178 ----
 .../en/p5 copy/baseMaterialShader.mdx         | 418 ---------
 .../reference/en/p5 copy/baseNormalShader.mdx | 211 -----
 .../reference/en/p5 copy/baseStrokeShader.mdx | 356 --------
 .../reference/en/p5 copy/beginClip.mdx        | 208 -----
 .../reference/en/p5 copy/beginContour.mdx     | 134 ---
 .../reference/en/p5 copy/beginGeometry.mdx    | 281 -------
 .../reference/en/p5 copy/beginShape.mdx       | 449 ----------
 src/content/reference/en/p5 copy/bezier.mdx   | 273 ------
 .../reference/en/p5 copy/bezierDetail.mdx     | 121 ---
 .../reference/en/p5 copy/bezierPoint.mdx      | 162 ----
 .../reference/en/p5 copy/bezierTangent.mdx    | 155 ----
 .../reference/en/p5 copy/bezierVertex.mdx     | 337 --------
 src/content/reference/en/p5 copy/blend.mdx    | 214 -----
 .../reference/en/p5 copy/blendMode.mdx        | 541 ------------
 src/content/reference/en/p5 copy/blue.mdx     | 158 ----
 src/content/reference/en/p5 copy/boolean.mdx  | 157 ----
 src/content/reference/en/p5 copy/box.mdx      | 186 ----
 .../reference/en/p5 copy/brightness.mdx       | 168 ----
 .../reference/en/p5 copy/buildGeometry.mdx    | 263 ------
 src/content/reference/en/p5 copy/byte.mdx     | 180 ----
 src/content/reference/en/p5 copy/camera.mdx   | 200 -----
 src/content/reference/en/p5 copy/ceil.mdx     |  65 --
 src/content/reference/en/p5 copy/changed.mdx  |  87 --
 src/content/reference/en/p5 copy/char.mdx     | 152 ----
 src/content/reference/en/p5 copy/circle.mdx   |  77 --
 src/content/reference/en/p5 copy/class.mdx    |  19 -
 src/content/reference/en/p5 copy/clear.mdx    | 108 ---
 .../reference/en/p5 copy/clearDepth.mdx       | 113 ---
 .../reference/en/p5 copy/clearStorage.mdx     |  81 --
 src/content/reference/en/p5 copy/clip.mdx     | 225 -----
 src/content/reference/en/p5 copy/color.mdx    | 349 --------
 .../reference/en/p5 copy/colorMode.mdx        | 271 ------
 src/content/reference/en/p5 copy/concat.mdx   |  54 --
 src/content/reference/en/p5 copy/cone.mdx     | 265 ------
 src/content/reference/en/p5 copy/console.mdx  |  99 ---
 .../reference/en/p5 copy/constants/ADD.mdx    |  18 -
 .../reference/en/p5 copy/constants/ALT.mdx    |  18 -
 .../reference/en/p5 copy/constants/ARROW.mdx  |  18 -
 .../reference/en/p5 copy/constants/AUTO.mdx   |  25 -
 .../reference/en/p5 copy/constants/AXES.mdx   |  18 -
 .../en/p5 copy/constants/BACKSPACE.mdx        |  18 -
 .../en/p5 copy/constants/BASELINE.mdx         |  18 -
 .../reference/en/p5 copy/constants/BEVEL.mdx  |  18 -
 .../reference/en/p5 copy/constants/BEZIER.mdx |  18 -
 .../reference/en/p5 copy/constants/BLEND.mdx  |  18 -
 .../reference/en/p5 copy/constants/BLUR.mdx   |  18 -
 .../reference/en/p5 copy/constants/BOLD.mdx   |  18 -
 .../en/p5 copy/constants/BOLDITALIC.mdx       |  18 -
 .../reference/en/p5 copy/constants/BOTTOM.mdx |  18 -
 .../reference/en/p5 copy/constants/BURN.mdx   |  18 -
 .../reference/en/p5 copy/constants/CENTER.mdx |  18 -
 .../reference/en/p5 copy/constants/CHAR.mdx   |  18 -
 .../reference/en/p5 copy/constants/CHORD.mdx  |  18 -
 .../reference/en/p5 copy/constants/CLAMP.mdx  |  18 -
 .../reference/en/p5 copy/constants/CLOSE.mdx  |  18 -
 .../en/p5 copy/constants/CONTAIN.mdx          |  18 -
 .../en/p5 copy/constants/CONTROL.mdx          |  18 -
 .../reference/en/p5 copy/constants/CORNER.mdx |  18 -
 .../en/p5 copy/constants/CORNERS.mdx          |  18 -
 .../reference/en/p5 copy/constants/COVER.mdx  |  18 -
 .../reference/en/p5 copy/constants/CROSS.mdx  |  18 -
 .../reference/en/p5 copy/constants/CURVE.mdx  |  18 -
 .../en/p5 copy/constants/DARKEST.mdx          |  18 -
 .../en/p5 copy/constants/DEGREES.mdx          |  59 --
 .../reference/en/p5 copy/constants/DELETE.mdx |  18 -
 .../en/p5 copy/constants/DIFFERENCE.mdx       |  18 -
 .../reference/en/p5 copy/constants/DILATE.mdx |  18 -
 .../reference/en/p5 copy/constants/DODGE.mdx  |  18 -
 .../en/p5 copy/constants/DOWN_ARROW.mdx       |  18 -
 .../reference/en/p5 copy/constants/ENTER.mdx  |  18 -
 .../reference/en/p5 copy/constants/ERODE.mdx  |  18 -
 .../reference/en/p5 copy/constants/ESCAPE.mdx |  18 -
 .../en/p5 copy/constants/EXCLUSION.mdx        |  18 -
 .../en/p5 copy/constants/FALLBACK.mdx         |  18 -
 .../reference/en/p5 copy/constants/FILL.mdx   |  18 -
 .../reference/en/p5 copy/constants/FLAT.mdx   |  18 -
 .../reference/en/p5 copy/constants/FLOAT.mdx  |  18 -
 .../reference/en/p5 copy/constants/GRAY.mdx   |  18 -
 .../reference/en/p5 copy/constants/GRID.mdx   |  18 -
 .../en/p5 copy/constants/HALF_FLOAT.mdx       |  18 -
 .../en/p5 copy/constants/HALF_PI.mdx          | 109 ---
 .../reference/en/p5 copy/constants/HAND.mdx   |  18 -
 .../en/p5 copy/constants/HARD_LIGHT.mdx       |  18 -
 .../reference/en/p5 copy/constants/HSB.mdx    |  24 -
 .../reference/en/p5 copy/constants/HSL.mdx    |  18 -
 .../reference/en/p5 copy/constants/IMAGE.mdx  |  18 -
 .../en/p5 copy/constants/IMMEDIATE.mdx        |  18 -
 .../reference/en/p5 copy/constants/INVERT.mdx |  18 -
 .../reference/en/p5 copy/constants/ITALIC.mdx |  18 -
 .../reference/en/p5 copy/constants/LABEL.mdx  |  18 -
 .../en/p5 copy/constants/LANDSCAPE.mdx        |  18 -
 .../reference/en/p5 copy/constants/LEFT.mdx   |  18 -
 .../en/p5 copy/constants/LEFT_ARROW.mdx       |  18 -
 .../en/p5 copy/constants/LIGHTEST.mdx         |  18 -
 .../reference/en/p5 copy/constants/LINEAR.mdx |  18 -
 .../reference/en/p5 copy/constants/LINES.mdx  |  18 -
 .../en/p5 copy/constants/LINE_LOOP.mdx        |  18 -
 .../en/p5 copy/constants/LINE_STRIP.mdx       |  18 -
 .../reference/en/p5 copy/constants/MIRROR.mdx |  18 -
 .../reference/en/p5 copy/constants/MITER.mdx  |  18 -
 .../reference/en/p5 copy/constants/MOVE.mdx   |  18 -
 .../en/p5 copy/constants/MULTIPLY.mdx         |  18 -
 .../en/p5 copy/constants/NEAREST.mdx          |  18 -
 .../reference/en/p5 copy/constants/NORMAL.mdx |  18 -
 .../reference/en/p5 copy/constants/OPAQUE.mdx |  18 -
 .../reference/en/p5 copy/constants/OPEN.mdx   |  18 -
 .../reference/en/p5 copy/constants/OPTION.mdx |  18 -
 .../en/p5 copy/constants/OVERLAY.mdx          |  18 -
 .../reference/en/p5 copy/constants/P2D.mdx    |  19 -
 .../reference/en/p5 copy/constants/PI.mdx     | 108 ---
 .../reference/en/p5 copy/constants/PIE.mdx    |  18 -
 .../reference/en/p5 copy/constants/POINTS.mdx |  18 -
 .../en/p5 copy/constants/PORTRAIT.mdx         |  18 -
 .../en/p5 copy/constants/POSTERIZE.mdx        |  18 -
 .../en/p5 copy/constants/PROJECT.mdx          |  18 -
 .../en/p5 copy/constants/QUADRATIC.mdx        |  18 -
 .../reference/en/p5 copy/constants/QUADS.mdx  |  18 -
 .../en/p5 copy/constants/QUAD_STRIP.mdx       |  18 -
 .../en/p5 copy/constants/QUARTER_PI.mdx       | 109 ---
 .../en/p5 copy/constants/RADIANS.mdx          |  66 --
 .../reference/en/p5 copy/constants/RADIUS.mdx |  18 -
 .../reference/en/p5 copy/constants/REMOVE.mdx |  18 -
 .../reference/en/p5 copy/constants/REPEAT.mdx |  18 -
 .../en/p5 copy/constants/REPLACE.mdx          |  18 -
 .../reference/en/p5 copy/constants/RETURN.mdx |  18 -
 .../reference/en/p5 copy/constants/RGB.mdx    |  18 -
 .../reference/en/p5 copy/constants/RGBA.mdx   |  18 -
 .../reference/en/p5 copy/constants/RIGHT.mdx  |  18 -
 .../en/p5 copy/constants/RIGHT_ARROW.mdx      |  18 -
 .../reference/en/p5 copy/constants/ROUND.mdx  |  18 -
 .../reference/en/p5 copy/constants/SCREEN.mdx |  18 -
 .../reference/en/p5 copy/constants/SHIFT.mdx  |  18 -
 .../reference/en/p5 copy/constants/SMOOTH.mdx |  18 -
 .../en/p5 copy/constants/SOFT_LIGHT.mdx       |  18 -
 .../reference/en/p5 copy/constants/SQUARE.mdx |  18 -
 .../reference/en/p5 copy/constants/STROKE.mdx |  18 -
 .../en/p5 copy/constants/SUBTRACT.mdx         |  18 -
 .../reference/en/p5 copy/constants/TAB.mdx    |  18 -
 .../reference/en/p5 copy/constants/TAU.mdx    | 114 ---
 .../reference/en/p5 copy/constants/TESS.mdx   |  18 -
 .../reference/en/p5 copy/constants/TEXT.mdx   |  18 -
 .../en/p5 copy/constants/TEXTURE.mdx          |  18 -
 .../en/p5 copy/constants/THRESHOLD.mdx        |  18 -
 .../reference/en/p5 copy/constants/TOP.mdx    |  18 -
 .../en/p5 copy/constants/TRIANGLES.mdx        |  18 -
 .../en/p5 copy/constants/TRIANGLE_FAN.mdx     |  18 -
 .../en/p5 copy/constants/TRIANGLE_STRIP.mdx   |  18 -
 .../reference/en/p5 copy/constants/TWO_PI.mdx | 114 ---
 .../en/p5 copy/constants/UNSIGNED_BYTE.mdx    |  18 -
 .../en/p5 copy/constants/UNSIGNED_INT.mdx     |  18 -
 .../en/p5 copy/constants/UP_ARROW.mdx         |  18 -
 .../en/p5 copy/constants/VERSION.mdx          |  19 -
 .../reference/en/p5 copy/constants/WAIT.mdx   |  18 -
 .../reference/en/p5 copy/constants/WEBGL.mdx  |  91 --
 .../reference/en/p5 copy/constants/WEBGL2.mdx |  21 -
 .../reference/en/p5 copy/constants/WORD.mdx   |  18 -
 .../reference/en/p5 copy/constrain.mdx        |  86 --
 src/content/reference/en/p5 copy/copy.mdx     | 144 ----
 src/content/reference/en/p5 copy/cos.mdx      | 107 ---
 src/content/reference/en/p5 copy/createA.mdx  |  93 --
 .../reference/en/p5 copy/createAudio.mdx      |  83 --
 .../reference/en/p5 copy/createButton.mdx     | 109 ---
 .../reference/en/p5 copy/createCamera.mdx     |  99 ---
 .../reference/en/p5 copy/createCanvas.mdx     | 191 -----
 .../reference/en/p5 copy/createCapture.mdx    | 189 -----
 .../reference/en/p5 copy/createCheckbox.mdx   | 131 ---
 .../en/p5 copy/createColorPicker.mdx          | 101 ---
 .../reference/en/p5 copy/createConvolver.mdx  |  78 --
 .../reference/en/p5 copy/createDiv.mdx        |  72 --
 .../reference/en/p5 copy/createElement.mdx    |  78 --
 .../reference/en/p5 copy/createFileInput.mdx  | 138 ---
 .../en/p5 copy/createFilterShader.mdx         | 148 ----
 .../en/p5 copy/createFramebuffer.mdx          | 208 -----
 .../reference/en/p5 copy/createGraphics.mdx   | 191 -----
 .../reference/en/p5 copy/createImage.mdx      | 172 ----
 .../reference/en/p5 copy/createImg.mdx        | 115 ---
 .../reference/en/p5 copy/createInput.mdx      | 118 ---
 .../reference/en/p5 copy/createModel.mdx      | 193 -----
 .../reference/en/p5 copy/createNumberDict.mdx |  57 --
 src/content/reference/en/p5 copy/createP.mdx  |  54 --
 .../reference/en/p5 copy/createRadio.mdx      | 223 -----
 .../reference/en/p5 copy/createSelect.mdx     | 235 ------
 .../reference/en/p5 copy/createShader.mdx     | 438 ----------
 .../reference/en/p5 copy/createSlider.mdx     | 162 ----
 .../reference/en/p5 copy/createSpan.mdx       |  93 --
 .../reference/en/p5 copy/createStringDict.mdx |  56 --
 .../reference/en/p5 copy/createVector.mdx     | 133 ---
 .../reference/en/p5 copy/createVideo.mdx      | 135 ---
 .../reference/en/p5 copy/createWriter.mdx     | 146 ----
 src/content/reference/en/p5 copy/cursor.mdx   | 139 ---
 src/content/reference/en/p5 copy/curve.mdx    | 272 ------
 .../reference/en/p5 copy/curveDetail.mdx      | 117 ---
 .../reference/en/p5 copy/curvePoint.mdx       | 160 ----
 .../reference/en/p5 copy/curveTangent.mdx     | 153 ----
 .../reference/en/p5 copy/curveTightness.mdx   |  77 --
 .../reference/en/p5 copy/curveVertex.mdx      | 407 ---------
 src/content/reference/en/p5 copy/cylinder.mdx | 282 -------
 src/content/reference/en/p5 copy/day.mdx      |  47 --
 .../reference/en/p5 copy/debugMode.mdx        | 362 --------
 src/content/reference/en/p5 copy/degrees.mdx  |  53 --
 .../reference/en/p5 copy/deltaTime.mdx        |  68 --
 src/content/reference/en/p5 copy/describe.mdx | 137 ---
 .../reference/en/p5 copy/describeElement.mdx  | 127 ---
 .../reference/en/p5 copy/deviceMoved.mdx      |  49 --
 .../en/p5 copy/deviceOrientation.mdx          |  22 -
 .../reference/en/p5 copy/deviceShaken.mdx     |  50 --
 .../reference/en/p5 copy/deviceTurned.mdx     |  80 --
 .../reference/en/p5 copy/directionalLight.mdx | 277 ------
 .../en/p5 copy/disableFriendlyErrors.mdx      |  55 --
 .../reference/en/p5 copy/displayDensity.mdx   |  55 --
 .../reference/en/p5 copy/displayHeight.mdx    |  47 --
 .../reference/en/p5 copy/displayWidth.mdx     |  47 --
 src/content/reference/en/p5 copy/dist.mdx     | 121 ---
 .../reference/en/p5 copy/doubleClicked.mdx    | 157 ----
 src/content/reference/en/p5 copy/draw.mdx     | 129 ---
 .../reference/en/p5 copy/drawingContext.mdx   |  78 --
 src/content/reference/en/p5 copy/ellipse.mdx  | 164 ----
 .../reference/en/p5 copy/ellipseMode.mdx      | 113 ---
 .../reference/en/p5 copy/ellipsoid.mdx        | 233 -----
 .../reference/en/p5 copy/emissiveMaterial.mdx | 140 ----
 src/content/reference/en/p5 copy/endClip.mdx  |  43 -
 .../reference/en/p5 copy/endContour.mdx       | 133 ---
 .../reference/en/p5 copy/endGeometry.mdx      | 285 -------
 src/content/reference/en/p5 copy/endShape.mdx | 256 ------
 src/content/reference/en/p5 copy/erase.mdx    | 123 ---
 .../reference/en/p5 copy/exitPointerLock.mdx  |  82 --
 src/content/reference/en/p5 copy/exp.mdx      |  83 --
 src/content/reference/en/p5 copy/fill.mdx     | 312 -------
 src/content/reference/en/p5 copy/filter.mdx   | 330 --------
 src/content/reference/en/p5 copy/float.mdx    | 116 ---
 src/content/reference/en/p5 copy/floor.mdx    |  57 --
 src/content/reference/en/p5 copy/focused.mdx  |  50 --
 src/content/reference/en/p5 copy/for.mdx      | 290 -------
 src/content/reference/en/p5 copy/fract.mdx    |  55 --
 .../reference/en/p5 copy/frameCount.mdx       |  73 --
 .../reference/en/p5 copy/frameRate.mdx        | 107 ---
 .../reference/en/p5 copy/freeGeometry.mdx     | 152 ----
 .../reference/en/p5 copy/freqToMidi.mdx       |  29 -
 src/content/reference/en/p5 copy/frustum.mdx  | 175 ----
 .../reference/en/p5 copy/fullscreen.mdx       |  63 --
 src/content/reference/en/p5 copy/function.mdx |  19 -
 src/content/reference/en/p5 copy/get.mdx      | 178 ----
 .../reference/en/p5 copy/getAudioContext.mdx  |  56 --
 src/content/reference/en/p5 copy/getItem.mdx  | 151 ----
 .../reference/en/p5 copy/getOutputVolume.mdx  |  25 -
 .../en/p5 copy/getTargetFrameRate.mdx         |  48 --
 src/content/reference/en/p5 copy/getURL.mdx   |  46 -
 .../reference/en/p5 copy/getURLParams.mdx     |  59 --
 .../reference/en/p5 copy/getURLPath.mdx       |  58 --
 src/content/reference/en/p5 copy/green.mdx    | 159 ----
 .../reference/en/p5 copy/gridOutput.mdx       | 189 -----
 src/content/reference/en/p5 copy/height.mdx   |  87 --
 src/content/reference/en/p5 copy/hex.mdx      | 166 ----
 src/content/reference/en/p5 copy/hour.mdx     |  47 --
 src/content/reference/en/p5 copy/httpDo.mdx   | 150 ----
 src/content/reference/en/p5 copy/httpGet.mdx  | 140 ----
 src/content/reference/en/p5 copy/httpPost.mdx | 165 ----
 src/content/reference/en/p5 copy/hue.mdx      | 145 ----
 src/content/reference/en/p5 copy/if.mdx       | 268 ------
 src/content/reference/en/p5 copy/image.mdx    | 327 --------
 .../reference/en/p5 copy/imageLight.mdx       |  86 --
 .../reference/en/p5 copy/imageMode.mdx        | 129 ---
 src/content/reference/en/p5 copy/input.mdx    |  88 --
 src/content/reference/en/p5 copy/int.mdx      | 169 ----
 .../reference/en/p5 copy/isLooping.mdx        |  65 --
 src/content/reference/en/p5 copy/join.mdx     |  70 --
 src/content/reference/en/p5 copy/key.mdx      | 106 ---
 src/content/reference/en/p5 copy/keyCode.mdx  | 128 ---
 .../reference/en/p5 copy/keyIsDown.mdx        | 142 ----
 .../reference/en/p5 copy/keyIsPressed.mdx     | 105 ---
 .../reference/en/p5 copy/keyPressed.mdx       | 192 -----
 .../reference/en/p5 copy/keyReleased.mdx      | 188 -----
 src/content/reference/en/p5 copy/keyTyped.mdx | 170 ----
 src/content/reference/en/p5 copy/lerp.mdx     | 122 ---
 .../reference/en/p5 copy/lerpColor.mdx        |  96 ---
 src/content/reference/en/p5 copy/let.mdx      |  91 --
 .../reference/en/p5 copy/lightFalloff.mdx     | 100 ---
 .../reference/en/p5 copy/lightness.mdx        | 168 ----
 src/content/reference/en/p5 copy/lights.mdx   |  88 --
 src/content/reference/en/p5 copy/line.mdx     | 194 -----
 .../reference/en/p5 copy/linePerspective.mdx  | 164 ----
 .../reference/en/p5 copy/loadBytes.mdx        |  56 --
 src/content/reference/en/p5 copy/loadFont.mdx | 171 ----
 .../reference/en/p5 copy/loadImage.mdx        | 137 ---
 src/content/reference/en/p5 copy/loadJSON.mdx | 288 -------
 .../reference/en/p5 copy/loadModel.mdx        | 469 -----------
 .../reference/en/p5 copy/loadPixels.mdx       |  61 --
 .../reference/en/p5 copy/loadShader.mdx       | 172 ----
 .../reference/en/p5 copy/loadSound.mdx        |  78 --
 .../reference/en/p5 copy/loadStrings.mdx      | 188 -----
 .../reference/en/p5 copy/loadTable.mdx        | 124 ---
 src/content/reference/en/p5 copy/loadXML.mdx  | 220 -----
 src/content/reference/en/p5 copy/log.mdx      |  79 --
 src/content/reference/en/p5 copy/loop.mdx     | 111 ---
 src/content/reference/en/p5 copy/mag.mdx      |  84 --
 src/content/reference/en/p5 copy/map.mdx      | 119 ---
 src/content/reference/en/p5 copy/match.mdx    |  91 --
 src/content/reference/en/p5 copy/matchAll.mdx | 107 ---
 src/content/reference/en/p5 copy/max.mdx      | 104 ---
 .../reference/en/p5 copy/metalness.mdx        | 142 ----
 .../reference/en/p5 copy/midiToFreq.mdx       |  66 --
 src/content/reference/en/p5 copy/millis.mdx   | 147 ----
 src/content/reference/en/p5 copy/min.mdx      | 104 ---
 src/content/reference/en/p5 copy/minute.mdx   |  47 --
 src/content/reference/en/p5 copy/model.mdx    | 155 ----
 src/content/reference/en/p5 copy/month.mdx    |  47 --
 .../reference/en/p5 copy/mouseButton.mdx      |  87 --
 .../reference/en/p5 copy/mouseClicked.mdx     | 196 -----
 .../reference/en/p5 copy/mouseDragged.mdx     | 130 ---
 .../reference/en/p5 copy/mouseIsPressed.mdx   |  73 --
 .../reference/en/p5 copy/mouseMoved.mdx       | 118 ---
 .../reference/en/p5 copy/mousePressed.mdx     | 193 -----
 .../reference/en/p5 copy/mouseReleased.mdx    | 195 -----
 .../reference/en/p5 copy/mouseWheel.mdx       | 162 ----
 src/content/reference/en/p5 copy/mouseX.mdx   | 124 ---
 src/content/reference/en/p5 copy/mouseY.mdx   | 124 ---
 src/content/reference/en/p5 copy/movedX.mdx   |  78 --
 src/content/reference/en/p5 copy/movedY.mdx   |  78 --
 src/content/reference/en/p5 copy/nf.mdx       | 159 ----
 src/content/reference/en/p5 copy/nfc.mdx      | 153 ----
 src/content/reference/en/p5 copy/nfp.mdx      | 188 -----
 src/content/reference/en/p5 copy/nfs.mdx      | 176 ----
 src/content/reference/en/p5 copy/noCanvas.mdx |  36 -
 src/content/reference/en/p5 copy/noCursor.mdx |  38 -
 .../reference/en/p5 copy/noDebugMode.mdx      |  54 --
 src/content/reference/en/p5 copy/noErase.mdx  |  55 --
 src/content/reference/en/p5 copy/noFill.mdx   |  73 --
 src/content/reference/en/p5 copy/noLights.mdx |  79 --
 src/content/reference/en/p5 copy/noLoop.mdx   | 139 ---
 src/content/reference/en/p5 copy/noSmooth.mdx |  92 --
 src/content/reference/en/p5 copy/noStroke.mdx |  71 --
 src/content/reference/en/p5 copy/noTint.mdx   |  51 --
 src/content/reference/en/p5 copy/noise.mdx    | 282 -------
 .../reference/en/p5 copy/noiseDetail.mdx      | 100 ---
 .../reference/en/p5 copy/noiseSeed.mdx        |  68 --
 src/content/reference/en/p5 copy/norm.mdx     |  69 --
 src/content/reference/en/p5 copy/normal.mdx   | 250 ------
 .../reference/en/p5 copy/normalMaterial.mdx   |  55 --
 .../reference/en/p5 copy/orbitControl.mdx     | 203 -----
 src/content/reference/en/p5 copy/ortho.mdx    | 168 ----
 .../reference/en/p5 copy/outputVolume.mdx     |  51 --
 .../reference/en/p5 copy/p5.Camera.mdx        | 659 ---------------
 src/content/reference/en/p5 copy/p5.Color.mdx | 116 ---
 .../reference/en/p5 copy/p5.Element.mdx       | 545 ------------
 src/content/reference/en/p5 copy/p5.File.mdx  | 153 ----
 src/content/reference/en/p5 copy/p5.Font.mdx  | 146 ----
 .../reference/en/p5 copy/p5.Framebuffer.mdx   | 443 ----------
 .../reference/en/p5 copy/p5.Geometry.mdx      | 793 ------------------
 .../reference/en/p5 copy/p5.Graphics.mdx      | 261 ------
 src/content/reference/en/p5 copy/p5.Image.mdx | 519 ------------
 .../reference/en/p5 copy/p5.MediaElement.mdx  | 258 ------
 .../reference/en/p5 copy/p5.NumberDict.mdx    |  63 --
 .../reference/en/p5 copy/p5.PrintWriter.mdx   |  35 -
 .../reference/en/p5 copy/p5.Renderer.mdx      |  34 -
 .../reference/en/p5 copy/p5.Shader.mdx        | 433 ----------
 .../reference/en/p5 copy/p5.StringDict.mdx    |  15 -
 src/content/reference/en/p5 copy/p5.Table.mdx | 213 -----
 .../reference/en/p5 copy/p5.TableRow.mdx      |  66 --
 .../reference/en/p5 copy/p5.TypedDict.mdx     |  66 --
 .../reference/en/p5 copy/p5.Vector.mdx        | 673 ---------------
 src/content/reference/en/p5 copy/p5.XML.mdx   | 321 -------
 src/content/reference/en/p5 copy/p5.mdx       |  51 --
 .../reference/en/p5 copy/pAccelerationX.mdx   |  21 -
 .../reference/en/p5 copy/pAccelerationY.mdx   |  21 -
 .../reference/en/p5 copy/pAccelerationZ.mdx   |  21 -
 .../reference/en/p5 copy/pRotationX.mdx       |  63 --
 .../reference/en/p5 copy/pRotationY.mdx       |  62 --
 .../reference/en/p5 copy/pRotationZ.mdx       |  58 --
 .../reference/en/p5 copy/paletteLerp.mdx      |  66 --
 src/content/reference/en/p5 copy/panorama.mdx |  76 --
 .../reference/en/p5 copy/perspective.mdx      | 194 -----
 .../reference/en/p5 copy/pixelDensity.mdx     |  90 --
 src/content/reference/en/p5 copy/pixels.mdx   | 173 ----
 src/content/reference/en/p5 copy/plane.mdx    | 152 ----
 src/content/reference/en/p5 copy/pmouseX.mdx  |  88 --
 src/content/reference/en/p5 copy/pmouseY.mdx  |  88 --
 src/content/reference/en/p5 copy/point.mdx    | 229 -----
 .../reference/en/p5 copy/pointLight.mdx       | 329 --------
 src/content/reference/en/p5 copy/pop.mdx      |  20 -
 src/content/reference/en/p5 copy/pow.mdx      |  67 --
 src/content/reference/en/p5 copy/preload.mdx  |  70 --
 src/content/reference/en/p5 copy/print.mdx    |  55 --
 src/content/reference/en/p5 copy/push.mdx     |  20 -
 .../reference/en/p5 copy/pwinMouseX.mdx       |  99 ---
 .../reference/en/p5 copy/pwinMouseY.mdx       |  99 ---
 src/content/reference/en/p5 copy/quad.mdx     | 233 -----
 .../reference/en/p5 copy/quadraticVertex.mdx  | 303 -------
 src/content/reference/en/p5 copy/radians.mdx  |  53 --
 src/content/reference/en/p5 copy/random.mdx   |  48 --
 .../reference/en/p5 copy/randomGaussian.mdx   | 104 ---
 .../reference/en/p5 copy/randomSeed.mdx       |  71 --
 src/content/reference/en/p5 copy/rect.mdx     | 209 -----
 src/content/reference/en/p5 copy/rectMode.mdx | 142 ----
 src/content/reference/en/p5 copy/red.mdx      | 158 ----
 src/content/reference/en/p5 copy/redraw.mdx   | 117 ---
 src/content/reference/en/p5 copy/remove.mdx   |  57 --
 .../reference/en/p5 copy/removeElements.mdx   |  85 --
 .../reference/en/p5 copy/removeItem.mdx       |  97 ---
 .../en/p5 copy/requestPointerLock.mdx         |  85 --
 .../reference/en/p5 copy/resetMatrix.mdx      |  52 --
 .../reference/en/p5 copy/resetShader.mdx      |  95 ---
 .../reference/en/p5 copy/resizeCanvas.mdx     | 133 ---
 src/content/reference/en/p5 copy/reverse.mdx  |  43 -
 src/content/reference/en/p5 copy/rotate.mdx   | 226 -----
 src/content/reference/en/p5 copy/rotateX.mdx  | 161 ----
 src/content/reference/en/p5 copy/rotateY.mdx  | 161 ----
 src/content/reference/en/p5 copy/rotateZ.mdx  | 161 ----
 .../reference/en/p5 copy/rotationX.mdx        |  45 -
 .../reference/en/p5 copy/rotationY.mdx        |  45 -
 .../reference/en/p5 copy/rotationZ.mdx        |  47 --
 src/content/reference/en/p5 copy/round.mdx    |  88 --
 .../reference/en/p5 copy/sampleRate.mdx       |  26 -
 .../reference/en/p5 copy/saturation.mdx       | 201 -----
 src/content/reference/en/p5 copy/save.mdx     | 140 ----
 .../reference/en/p5 copy/saveCanvas.mdx       | 166 ----
 .../reference/en/p5 copy/saveFrames.mdx       | 175 ----
 src/content/reference/en/p5 copy/saveGif.mdx  | 119 ---
 src/content/reference/en/p5 copy/saveJSON.mdx | 170 ----
 .../reference/en/p5 copy/saveSound.mdx        |  35 -
 .../reference/en/p5 copy/saveStrings.mdx      | 185 ----
 .../reference/en/p5 copy/saveTable.mdx        |  70 --
 src/content/reference/en/p5 copy/scale.mdx    | 231 -----
 src/content/reference/en/p5 copy/second.mdx   |  47 --
 src/content/reference/en/p5 copy/select.mdx   | 113 ---
 .../reference/en/p5 copy/selectAll.mdx        | 121 ---
 src/content/reference/en/p5 copy/set.mdx      | 157 ----
 .../reference/en/p5 copy/setAttributes.mdx    | 163 ----
 src/content/reference/en/p5 copy/setBPM.mdx   |  29 -
 .../reference/en/p5 copy/setCamera.mdx        |  81 --
 .../reference/en/p5 copy/setMoveThreshold.mdx |  59 --
 .../en/p5 copy/setShakeThreshold.mdx          |  59 --
 src/content/reference/en/p5 copy/setup.mdx    | 111 ---
 src/content/reference/en/p5 copy/shader.mdx   | 244 ------
 src/content/reference/en/p5 copy/shearX.mdx   | 105 ---
 src/content/reference/en/p5 copy/shearY.mdx   | 105 ---
 .../reference/en/p5 copy/shininess.mdx        |  86 --
 src/content/reference/en/p5 copy/shorten.mdx  |  44 -
 src/content/reference/en/p5 copy/shuffle.mdx  | 132 ---
 src/content/reference/en/p5 copy/sin.mdx      | 107 ---
 src/content/reference/en/p5 copy/smooth.mdx   |  94 ---
 src/content/reference/en/p5 copy/sort.mdx     |  63 --
 .../reference/en/p5 copy/soundFormats.mdx     |  51 --
 src/content/reference/en/p5 copy/soundOut.mdx |  26 -
 .../reference/en/p5 copy/specularColor.mdx    | 308 -------
 .../reference/en/p5 copy/specularMaterial.mdx | 311 -------
 src/content/reference/en/p5 copy/sphere.mdx   | 165 ----
 src/content/reference/en/p5 copy/splice.mdx   |  58 --
 src/content/reference/en/p5 copy/split.mdx    |  87 --
 .../reference/en/p5 copy/splitTokens.mdx      | 180 ----
 .../reference/en/p5 copy/spotLight.mdx        | 398 ---------
 src/content/reference/en/p5 copy/sq.mdx       |  83 --
 src/content/reference/en/p5 copy/sqrt.mdx     |  84 --
 src/content/reference/en/p5 copy/square.mdx   | 163 ----
 .../reference/en/p5 copy/storeItem.mdx        | 149 ----
 src/content/reference/en/p5 copy/str.mdx      | 135 ---
 src/content/reference/en/p5 copy/stroke.mdx   | 311 -------
 .../reference/en/p5 copy/strokeCap.mdx        |  67 --
 .../reference/en/p5 copy/strokeJoin.mdx       | 114 ---
 .../reference/en/p5 copy/strokeWeight.mdx     |  77 --
 src/content/reference/en/p5 copy/subset.mdx   |  59 --
 src/content/reference/en/p5 copy/tan.mdx      |  66 --
 src/content/reference/en/p5 copy/text.mdx     |  96 ---
 .../reference/en/p5 copy/textAlign.mdx        | 135 ---
 .../reference/en/p5 copy/textAscent.mdx       |  71 --
 .../reference/en/p5 copy/textDescent.mdx      |  71 --
 src/content/reference/en/p5 copy/textFont.mdx | 127 ---
 .../reference/en/p5 copy/textLeading.mdx      |  63 --
 .../reference/en/p5 copy/textOutput.mdx       | 186 ----
 src/content/reference/en/p5 copy/textSize.mdx |  65 --
 .../reference/en/p5 copy/textStyle.mdx        |  79 --
 .../reference/en/p5 copy/textWidth.mdx        |  83 --
 src/content/reference/en/p5 copy/textWrap.mdx | 111 ---
 src/content/reference/en/p5 copy/texture.mdx  | 207 -----
 .../reference/en/p5 copy/textureMode.mdx      | 254 ------
 .../reference/en/p5 copy/textureWrap.mdx      | 370 --------
 src/content/reference/en/p5 copy/tint.mdx     | 201 -----
 src/content/reference/en/p5 copy/torus.mdx    | 200 -----
 .../reference/en/p5 copy/touchEnded.mdx       | 196 -----
 .../reference/en/p5 copy/touchMoved.mdx       | 198 -----
 .../reference/en/p5 copy/touchStarted.mdx     | 197 -----
 src/content/reference/en/p5 copy/touches.mdx  | 102 ---
 .../reference/en/p5 copy/translate.mdx        | 241 ------
 src/content/reference/en/p5 copy/triangle.mdx | 104 ---
 src/content/reference/en/p5 copy/trim.mdx     | 113 ---
 src/content/reference/en/p5 copy/turnAxis.mdx |  54 --
 .../reference/en/p5 copy/types/Array.mdx      | 269 ------
 .../reference/en/p5 copy/types/Boolean.mdx    | 273 ------
 .../reference/en/p5 copy/types/Number.mdx     | 201 -----
 .../reference/en/p5 copy/types/Object.mdx     |  91 --
 .../reference/en/p5 copy/types/String.mdx     | 153 ----
 src/content/reference/en/p5 copy/unchar.mdx   | 114 ---
 src/content/reference/en/p5 copy/unhex.mdx    | 121 ---
 .../reference/en/p5 copy/updatePixels.mdx     |  94 ---
 .../reference/en/p5 copy/userStartAudio.mdx   |  99 ---
 src/content/reference/en/p5 copy/vertex.mdx   | 242 ------
 .../reference/en/p5 copy/webglVersion.mdx     | 105 ---
 src/content/reference/en/p5 copy/while.mdx    | 161 ----
 src/content/reference/en/p5 copy/width.mdx    |  87 --
 .../reference/en/p5 copy/winMouseX.mdx        |  61 --
 .../reference/en/p5 copy/winMouseY.mdx        |  61 --
 .../reference/en/p5 copy/windowHeight.mdx     |  43 -
 .../reference/en/p5 copy/windowResized.mdx    |  64 --
 .../reference/en/p5 copy/windowWidth.mdx      |  43 -
 src/content/reference/en/p5 copy/year.mdx     |  47 --
 524 files changed, 22 insertions(+), 60145 deletions(-)
 delete mode 100644 src/content/reference/en/p5 copy/abs.mdx
 delete mode 100644 src/content/reference/en/p5 copy/accelerationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/accelerationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/accelerationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/acos.mdx
 delete mode 100644 src/content/reference/en/p5 copy/alpha.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ambientLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ambientMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/angleMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/append.mdx
 delete mode 100644 src/content/reference/en/p5 copy/applyMatrix.mdx
 delete mode 100644 src/content/reference/en/p5 copy/arc.mdx
 delete mode 100644 src/content/reference/en/p5 copy/arrayCopy.mdx
 delete mode 100644 src/content/reference/en/p5 copy/asin.mdx
 delete mode 100644 src/content/reference/en/p5 copy/atan.mdx
 delete mode 100644 src/content/reference/en/p5 copy/atan2.mdx
 delete mode 100644 src/content/reference/en/p5 copy/background.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseColorShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseMaterialShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseNormalShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseStrokeShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginClip.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginContour.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginShape.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezier.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierDetail.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierPoint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierTangent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierVertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/blend.mdx
 delete mode 100644 src/content/reference/en/p5 copy/blendMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/blue.mdx
 delete mode 100644 src/content/reference/en/p5 copy/boolean.mdx
 delete mode 100644 src/content/reference/en/p5 copy/box.mdx
 delete mode 100644 src/content/reference/en/p5 copy/brightness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/buildGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/byte.mdx
 delete mode 100644 src/content/reference/en/p5 copy/camera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ceil.mdx
 delete mode 100644 src/content/reference/en/p5 copy/changed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/char.mdx
 delete mode 100644 src/content/reference/en/p5 copy/circle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/class.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clear.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clearDepth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clearStorage.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clip.mdx
 delete mode 100644 src/content/reference/en/p5 copy/color.mdx
 delete mode 100644 src/content/reference/en/p5 copy/colorMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/concat.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cone.mdx
 delete mode 100644 src/content/reference/en/p5 copy/console.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ADD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ALT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/AUTO.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/AXES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BASELINE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BEVEL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BEZIER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BLEND.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BLUR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BOLD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BOTTOM.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BURN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CENTER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CHAR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CHORD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CLAMP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CLOSE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CONTAIN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CONTROL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CORNER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CORNERS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/COVER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CROSS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CURVE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DARKEST.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DEGREES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DELETE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DILATE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DODGE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ENTER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ERODE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ESCAPE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FALLBACK.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FILL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FLAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FLOAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/GRAY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/GRID.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HALF_PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HAND.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HSB.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HSL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/IMAGE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/INVERT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ITALIC.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LABEL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LEFT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINEAR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MIRROR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MITER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MOVE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/NEAREST.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/NORMAL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OPAQUE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OPEN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OPTION.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OVERLAY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/P2D.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PIE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/POINTS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PROJECT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUADS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RADIANS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RADIUS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/REMOVE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/REPEAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/REPLACE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RETURN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RGB.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RGBA.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RIGHT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ROUND.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SCREEN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SHIFT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SMOOTH.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SQUARE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/STROKE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TAB.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TAU.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TESS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TEXT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TEXTURE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TOP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TWO_PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/VERSION.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WAIT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WEBGL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WEBGL2.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WORD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constrain.mdx
 delete mode 100644 src/content/reference/en/p5 copy/copy.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cos.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createA.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createAudio.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createButton.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCamera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCapture.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCheckbox.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createColorPicker.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createConvolver.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createDiv.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createElement.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createFileInput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createFilterShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createFramebuffer.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createGraphics.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createImage.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createImg.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createInput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createModel.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createNumberDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createRadio.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createSelect.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createSlider.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createSpan.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createStringDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createVector.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createVideo.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createWriter.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cursor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curve.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveDetail.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curvePoint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveTangent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveTightness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveVertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cylinder.mdx
 delete mode 100644 src/content/reference/en/p5 copy/day.mdx
 delete mode 100644 src/content/reference/en/p5 copy/debugMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/degrees.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deltaTime.mdx
 delete mode 100644 src/content/reference/en/p5 copy/describe.mdx
 delete mode 100644 src/content/reference/en/p5 copy/describeElement.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceMoved.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceOrientation.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceShaken.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceTurned.mdx
 delete mode 100644 src/content/reference/en/p5 copy/directionalLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
 delete mode 100644 src/content/reference/en/p5 copy/displayDensity.mdx
 delete mode 100644 src/content/reference/en/p5 copy/displayHeight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/displayWidth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/dist.mdx
 delete mode 100644 src/content/reference/en/p5 copy/doubleClicked.mdx
 delete mode 100644 src/content/reference/en/p5 copy/draw.mdx
 delete mode 100644 src/content/reference/en/p5 copy/drawingContext.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ellipse.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ellipseMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ellipsoid.mdx
 delete mode 100644 src/content/reference/en/p5 copy/emissiveMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endClip.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endContour.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endShape.mdx
 delete mode 100644 src/content/reference/en/p5 copy/erase.mdx
 delete mode 100644 src/content/reference/en/p5 copy/exitPointerLock.mdx
 delete mode 100644 src/content/reference/en/p5 copy/exp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/fill.mdx
 delete mode 100644 src/content/reference/en/p5 copy/filter.mdx
 delete mode 100644 src/content/reference/en/p5 copy/float.mdx
 delete mode 100644 src/content/reference/en/p5 copy/floor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/focused.mdx
 delete mode 100644 src/content/reference/en/p5 copy/for.mdx
 delete mode 100644 src/content/reference/en/p5 copy/fract.mdx
 delete mode 100644 src/content/reference/en/p5 copy/frameCount.mdx
 delete mode 100644 src/content/reference/en/p5 copy/frameRate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/freeGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/freqToMidi.mdx
 delete mode 100644 src/content/reference/en/p5 copy/frustum.mdx
 delete mode 100644 src/content/reference/en/p5 copy/fullscreen.mdx
 delete mode 100644 src/content/reference/en/p5 copy/function.mdx
 delete mode 100644 src/content/reference/en/p5 copy/get.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getAudioContext.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getItem.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getOutputVolume.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getTargetFrameRate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getURL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getURLParams.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getURLPath.mdx
 delete mode 100644 src/content/reference/en/p5 copy/green.mdx
 delete mode 100644 src/content/reference/en/p5 copy/gridOutput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/height.mdx
 delete mode 100644 src/content/reference/en/p5 copy/hex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/hour.mdx
 delete mode 100644 src/content/reference/en/p5 copy/httpDo.mdx
 delete mode 100644 src/content/reference/en/p5 copy/httpGet.mdx
 delete mode 100644 src/content/reference/en/p5 copy/httpPost.mdx
 delete mode 100644 src/content/reference/en/p5 copy/hue.mdx
 delete mode 100644 src/content/reference/en/p5 copy/if.mdx
 delete mode 100644 src/content/reference/en/p5 copy/image.mdx
 delete mode 100644 src/content/reference/en/p5 copy/imageLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/imageMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/input.mdx
 delete mode 100644 src/content/reference/en/p5 copy/int.mdx
 delete mode 100644 src/content/reference/en/p5 copy/isLooping.mdx
 delete mode 100644 src/content/reference/en/p5 copy/join.mdx
 delete mode 100644 src/content/reference/en/p5 copy/key.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyCode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyIsDown.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyIsPressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyPressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyReleased.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyTyped.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lerp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lerpColor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/let.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lightFalloff.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lightness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lights.mdx
 delete mode 100644 src/content/reference/en/p5 copy/line.mdx
 delete mode 100644 src/content/reference/en/p5 copy/linePerspective.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadBytes.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadFont.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadImage.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadJSON.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadModel.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadPixels.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadSound.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadStrings.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadTable.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadXML.mdx
 delete mode 100644 src/content/reference/en/p5 copy/log.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loop.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mag.mdx
 delete mode 100644 src/content/reference/en/p5 copy/map.mdx
 delete mode 100644 src/content/reference/en/p5 copy/match.mdx
 delete mode 100644 src/content/reference/en/p5 copy/matchAll.mdx
 delete mode 100644 src/content/reference/en/p5 copy/max.mdx
 delete mode 100644 src/content/reference/en/p5 copy/metalness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/midiToFreq.mdx
 delete mode 100644 src/content/reference/en/p5 copy/millis.mdx
 delete mode 100644 src/content/reference/en/p5 copy/min.mdx
 delete mode 100644 src/content/reference/en/p5 copy/minute.mdx
 delete mode 100644 src/content/reference/en/p5 copy/model.mdx
 delete mode 100644 src/content/reference/en/p5 copy/month.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseButton.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseClicked.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseDragged.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseIsPressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseMoved.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mousePressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseReleased.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseWheel.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/movedX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/movedY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nf.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nfc.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nfp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nfs.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noCursor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noDebugMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noErase.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noFill.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noLights.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noLoop.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noSmooth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noStroke.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noTint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noise.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noiseDetail.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noiseSeed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/norm.mdx
 delete mode 100644 src/content/reference/en/p5 copy/normal.mdx
 delete mode 100644 src/content/reference/en/p5 copy/normalMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/orbitControl.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ortho.mdx
 delete mode 100644 src/content/reference/en/p5 copy/outputVolume.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Camera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Color.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Element.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.File.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Font.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Framebuffer.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Geometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Graphics.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Image.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.MediaElement.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.NumberDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.PrintWriter.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Renderer.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Shader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.StringDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Table.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.TableRow.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.TypedDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Vector.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.XML.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pAccelerationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pAccelerationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pAccelerationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pRotationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pRotationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pRotationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/paletteLerp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/panorama.mdx
 delete mode 100644 src/content/reference/en/p5 copy/perspective.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pixelDensity.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pixels.mdx
 delete mode 100644 src/content/reference/en/p5 copy/plane.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pmouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pmouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/point.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pointLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pop.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pow.mdx
 delete mode 100644 src/content/reference/en/p5 copy/preload.mdx
 delete mode 100644 src/content/reference/en/p5 copy/print.mdx
 delete mode 100644 src/content/reference/en/p5 copy/push.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pwinMouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pwinMouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/quad.mdx
 delete mode 100644 src/content/reference/en/p5 copy/quadraticVertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/radians.mdx
 delete mode 100644 src/content/reference/en/p5 copy/random.mdx
 delete mode 100644 src/content/reference/en/p5 copy/randomGaussian.mdx
 delete mode 100644 src/content/reference/en/p5 copy/randomSeed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rect.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rectMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/red.mdx
 delete mode 100644 src/content/reference/en/p5 copy/redraw.mdx
 delete mode 100644 src/content/reference/en/p5 copy/remove.mdx
 delete mode 100644 src/content/reference/en/p5 copy/removeElements.mdx
 delete mode 100644 src/content/reference/en/p5 copy/removeItem.mdx
 delete mode 100644 src/content/reference/en/p5 copy/requestPointerLock.mdx
 delete mode 100644 src/content/reference/en/p5 copy/resetMatrix.mdx
 delete mode 100644 src/content/reference/en/p5 copy/resetShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/resizeCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/reverse.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotateX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotateY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotateZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/round.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sampleRate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saturation.mdx
 delete mode 100644 src/content/reference/en/p5 copy/save.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveFrames.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveGif.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveJSON.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveSound.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveStrings.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveTable.mdx
 delete mode 100644 src/content/reference/en/p5 copy/scale.mdx
 delete mode 100644 src/content/reference/en/p5 copy/second.mdx
 delete mode 100644 src/content/reference/en/p5 copy/select.mdx
 delete mode 100644 src/content/reference/en/p5 copy/selectAll.mdx
 delete mode 100644 src/content/reference/en/p5 copy/set.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setAttributes.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setBPM.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setCamera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setMoveThreshold.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setShakeThreshold.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setup.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shearX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shearY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shininess.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shorten.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shuffle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sin.mdx
 delete mode 100644 src/content/reference/en/p5 copy/smooth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sort.mdx
 delete mode 100644 src/content/reference/en/p5 copy/soundFormats.mdx
 delete mode 100644 src/content/reference/en/p5 copy/soundOut.mdx
 delete mode 100644 src/content/reference/en/p5 copy/specularColor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/specularMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sphere.mdx
 delete mode 100644 src/content/reference/en/p5 copy/splice.mdx
 delete mode 100644 src/content/reference/en/p5 copy/split.mdx
 delete mode 100644 src/content/reference/en/p5 copy/splitTokens.mdx
 delete mode 100644 src/content/reference/en/p5 copy/spotLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sq.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sqrt.mdx
 delete mode 100644 src/content/reference/en/p5 copy/square.mdx
 delete mode 100644 src/content/reference/en/p5 copy/storeItem.mdx
 delete mode 100644 src/content/reference/en/p5 copy/str.mdx
 delete mode 100644 src/content/reference/en/p5 copy/stroke.mdx
 delete mode 100644 src/content/reference/en/p5 copy/strokeCap.mdx
 delete mode 100644 src/content/reference/en/p5 copy/strokeJoin.mdx
 delete mode 100644 src/content/reference/en/p5 copy/strokeWeight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/subset.mdx
 delete mode 100644 src/content/reference/en/p5 copy/tan.mdx
 delete mode 100644 src/content/reference/en/p5 copy/text.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textAlign.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textAscent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textDescent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textFont.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textLeading.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textOutput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textSize.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textStyle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textWidth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textWrap.mdx
 delete mode 100644 src/content/reference/en/p5 copy/texture.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textureMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textureWrap.mdx
 delete mode 100644 src/content/reference/en/p5 copy/tint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/torus.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touchEnded.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touchMoved.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touchStarted.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touches.mdx
 delete mode 100644 src/content/reference/en/p5 copy/translate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/triangle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/trim.mdx
 delete mode 100644 src/content/reference/en/p5 copy/turnAxis.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Array.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Boolean.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Number.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Object.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/String.mdx
 delete mode 100644 src/content/reference/en/p5 copy/unchar.mdx
 delete mode 100644 src/content/reference/en/p5 copy/unhex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/updatePixels.mdx
 delete mode 100644 src/content/reference/en/p5 copy/userStartAudio.mdx
 delete mode 100644 src/content/reference/en/p5 copy/vertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/webglVersion.mdx
 delete mode 100644 src/content/reference/en/p5 copy/while.mdx
 delete mode 100644 src/content/reference/en/p5 copy/width.mdx
 delete mode 100644 src/content/reference/en/p5 copy/winMouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/winMouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/windowHeight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/windowResized.mdx
 delete mode 100644 src/content/reference/en/p5 copy/windowWidth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/year.mdx

diff --git a/.github/actions/translation-tracker/README.md b/.github/actions/translation-tracker/README.md
index 2385e729d1..90ffdf1275 100644
--- a/.github/actions/translation-tracker/README.md
+++ b/.github/actions/translation-tracker/README.md
@@ -54,7 +54,7 @@ GENERATE_STUBS=true \
   GITHUB_TOKEN=your_token GITHUB_REPOSITORY=youruser/p5.js-website \
   node .github/actions/translation-tracker/index.js
 
-# Single language or full scan (STUB_MAX_FILES is global across all languages)
+# Single language or full scan (STUB_MAX_FILES applies per language)
 GENERATE_STUBS=true STUB_FULL_SCAN=true STUB_MAX_FILES=10 STUB_LANGUAGES=es,hi \
   GITHUB_TOKEN=your_token GITHUB_REPOSITORY=youruser/p5.js-website \
   node .github/actions/translation-tracker/index.js
@@ -82,7 +82,7 @@ Manual stub run: Actions → **Translation Stub Generator** → Run workflow →
 | `STUB_CONTENT_TYPES` | Comma-separated (default: `reference`) |
 | `STUB_FULL_SCAN` | `true` = all English files, not just latest commit |
 | `STUB_DRY_RUN` | `true` = write to `stub-preview/`, no PR |
-| `STUB_MAX_FILES` | Max stubs per run, total across all languages (default: `50`) |
+| `STUB_MAX_FILES` | Max stubs per language per run (default: `50`) |
 | `STUB_OUTPUT_DIR` | Custom dry-run output directory |
 
 ## What stubs contain
diff --git a/.github/actions/translation-tracker/workflows.js b/.github/actions/translation-tracker/workflows.js
index 43f8d6efc8..e75a9483cc 100644
--- a/.github/actions/translation-tracker/workflows.js
+++ b/.github/actions/translation-tracker/workflows.js
@@ -250,6 +250,7 @@ async function runStubGeneration(githubTracker, options = {}) {
   console.log(`   Languages: ${languages.join(', ')}`);
   console.log(`   Content types: ${contentTypes.join(', ')}`);
   console.log(`   Scan: ${fullScan ? 'all English files' : 'changed files only'}`);
+  console.log(`   Max stubs per language: ${maxFiles}`);
 
   const missing = findMissingTranslations(contentTypes, languages, {
     fullScan,
@@ -267,23 +268,34 @@ async function runStubGeneration(githubTracker, options = {}) {
     console.log(`     Expected: ${item.translationPath}`);
   });
 
-  const limited = missing.slice(0, maxFiles);
-  if (limited.length < missing.length) {
-    console.log(`\n⚠️  Limiting to ${maxFiles} stub(s) (STUB_MAX_FILES). Re-run to process more.`);
-  }
-
   const byLanguage = new Map();
-  for (const item of limited) {
+  for (const item of missing) {
     if (!byLanguage.has(item.language)) {
       byLanguage.set(item.language, []);
     }
     byLanguage.get(item.language).push(item);
   }
 
+  let wasLimited = false;
+  const limitedByLanguage = new Map();
+  for (const [language, items] of byLanguage) {
+    const capped = items.slice(0, maxFiles);
+    if (capped.length < items.length) {
+      wasLimited = true;
+    }
+    if (capped.length > 0) {
+      limitedByLanguage.set(language, capped);
+    }
+  }
+
+  if (wasLimited) {
+    console.log(`\n⚠️  Limiting to ${maxFiles} stub(s) per language (STUB_MAX_FILES). Re-run to process more.`);
+  }
+
   const prsCreated = [];
   let stubsWritten = 0;
 
-  for (const [language, items] of byLanguage) {
+  for (const [language, items] of limitedByLanguage) {
     const langName = githubTracker ? githubTracker.getLanguageDisplayName(language) : getLanguageDisplayName(language);
 
     console.log(`\n📝 Generating ${items.length} stub(s) for ${langName}:`);
@@ -329,7 +341,7 @@ async function runStubGeneration(githubTracker, options = {}) {
       console.log(`   - ${pr.language}: PR #${pr.prNumber} (${pr.fileCount} file(s))`);
       console.log(`     URL: ${pr.prUrl}`);
     });
-  } else if (!dryRun && stubsWritten === 0 && limited.length > 0) {
+  } else if (!dryRun && stubsWritten === 0 && limitedByLanguage.size > 0) {
     console.log(`\n💡 Stubs were not written. Check GITHUB_TOKEN permissions (contents + pull-requests write).`);
   }
 
diff --git a/src/content/reference/en/p5 copy/abs.mdx b/src/content/reference/en/p5 copy/abs.mdx
deleted file mode 100644
index 1bdb6895ff..0000000000
--- a/src/content/reference/en/p5 copy/abs.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L10
-title: abs
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the absolute value of a number.</p>
-
-  <p>A number's absolute value is its distance from zero on the number line.
-
-  -5 and 5 are both five units away from zero, so calling <code>abs(-5)</code>
-  and
-
-  <code>abs(5)</code> both return 5. The absolute value of a number is always
-  positive.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Divide the canvas.
-      line(50, 0, 50, 100);
-
-      // Calculate the mouse's distance from the middle.
-      let h = abs(mouseX - 50);
-
-      // Draw a rectangle based on the mouse's distance
-      // from the middle.
-      rect(0, 100 - h, 100, h);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to compute.</p>
-    type: Number
-return:
-  description: absolute value of given number.
-  type: Number
-chainable: false
----
-
-
-# abs
diff --git a/src/content/reference/en/p5 copy/accelerationX.mdx b/src/content/reference/en/p5 copy/accelerationX.mdx
deleted file mode 100644
index 6a47fc46ce..0000000000
--- a/src/content/reference/en/p5 copy/accelerationX.mdx	
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L23
-title: accelerationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable accelerationX always contains the acceleration of the
-
-  device along the x axis. Value is represented as meters per second
-  squared.</p>
-line: 23
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move a touchscreen device to register
-    // acceleration changes.
-    function draw() {
-      background(220, 50);
-      fill('magenta');
-      ellipse(width / 2, height / 2, accelerationX);
-      describe('Magnitude of device acceleration is displayed as ellipse size.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# accelerationX
diff --git a/src/content/reference/en/p5 copy/accelerationY.mdx b/src/content/reference/en/p5 copy/accelerationY.mdx
deleted file mode 100644
index bf5f54e39b..0000000000
--- a/src/content/reference/en/p5 copy/accelerationY.mdx	
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L45
-title: accelerationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable accelerationY always contains the acceleration of the
-
-  device along the y axis. Value is represented as meters per second
-  squared.</p>
-line: 45
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move a touchscreen device to register
-    // acceleration changes.
-    function draw() {
-      background(220, 50);
-      fill('magenta');
-      ellipse(width / 2, height / 2, accelerationY);
-      describe('Magnitude of device acceleration is displayed as ellipse size');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# accelerationY
diff --git a/src/content/reference/en/p5 copy/accelerationZ.mdx b/src/content/reference/en/p5 copy/accelerationZ.mdx
deleted file mode 100644
index 11e5cbb53e..0000000000
--- a/src/content/reference/en/p5 copy/accelerationZ.mdx	
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L67
-title: accelerationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable accelerationZ always contains the acceleration of the
-
-  device along the z axis. Value is represented as meters per second
-  squared.</p>
-line: 67
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move a touchscreen device to register
-    // acceleration changes.
-    function draw() {
-      background(220, 50);
-      fill('magenta');
-      ellipse(width / 2, height / 2, accelerationZ);
-      describe('Magnitude of device acceleration is displayed as ellipse size');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# accelerationZ
diff --git a/src/content/reference/en/p5 copy/acos.mdx b/src/content/reference/en/p5 copy/acos.mdx
deleted file mode 100644
index c9ed943f5e..0000000000
--- a/src/content/reference/en/p5 copy/acos.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L18
-title: acos
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the arc cosine of a number.</p>
-
-  <p><code>acos()</code> is the inverse of <a
-  href="/reference/p5/cos/">cos()</a>. It expects
-
-  arguments in the range -1 to 1. By default, <code>acos()</code> returns values
-  in the
-
-  range 0 to π (about 3.14). If the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
-  then values are
-
-  returned in the range 0 to 180.</p>
-line: 18
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate cos() and acos() values.
-      let a = PI;
-      let c = cos(a);
-      let ac = acos(c);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(c, 3)}`, 35, 50);
-      text(`${round(ac, 3)}`, 35, 75);
-
-      describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate cos() and acos() values.
-      let a = PI + QUARTER_PI;
-      let c = cos(a);
-      let ac = acos(c);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(c, 3)}`, 35, 50);
-      text(`${round(ac, 3)}`, 35, 75);
-
-      describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>value whose arc cosine is to be returned.</p>
-    type: Number
-return:
-  description: arc cosine of the given value.
-  type: Number
-chainable: false
----
-
-
-# acos
diff --git a/src/content/reference/en/p5 copy/alpha.mdx b/src/content/reference/en/p5 copy/alpha.mdx
deleted file mode 100644
index c1a87aa78d..0000000000
--- a/src/content/reference/en/p5 copy/alpha.mdx	
+++ /dev/null
@@ -1,120 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L16
-title: alpha
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the alpha (transparency) value of a color.</p>
-
-  <p><code>alpha()</code> extracts the alpha value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-line: 16
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let c = color(0, 126, 255, 102);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'alphaValue' to 102.
-      let alphaValue = alpha(c);
-
-      // Draw the right rectangle.
-      fill(alphaValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [0, 126, 255, 102];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'alphaValue' to 102.
-      let alphaValue = alpha(c);
-
-      // Draw the left rectangle.
-      fill(alphaValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgba(0, 126, 255, 0.4)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'alphaValue' to 102.
-      let alphaValue = alpha(c);
-
-      // Draw the right rectangle.
-      fill(alphaValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the alpha value.
-  type: Number
-chainable: false
----
-
-
-# alpha
diff --git a/src/content/reference/en/p5 copy/ambientLight.mdx b/src/content/reference/en/p5 copy/ambientLight.mdx
deleted file mode 100644
index 09f9159592..0000000000
--- a/src/content/reference/en/p5 copy/ambientLight.mdx	
+++ /dev/null
@@ -1,241 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L10
-title: ambientLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines from all directions.</p>
-
-  <p>Ambient light does not come from one direction. Instead, 3D shapes are
-
-  lit evenly from all sides. Ambient lights are almost always used in
-
-  combination with other types of lights.</p>
-
-  <p>There are three ways to call <code>ambientLight()</code> with optional
-  parameters to
-
-  set the light’s color.</p>
-
-  <p>The first way to call <code>ambientLight()</code> has two parameters,
-  <code>gray</code> and
-
-  <code>alpha</code>. <code>alpha</code> is optional. Grayscale and alpha values
-  between 0 and 255
-
-  can be passed to set the ambient light’s color, as in
-  <code>ambientLight(50)</code> or
-
-  <code>ambientLight(50, 30)</code>.</p>
-
-  <p>The second way to call <code>ambientLight()</code> has one parameter,
-  color. A
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  values, or a
-
-  CSS color string, as in <code>ambientLight('magenta')</code>, can be passed to
-  set the
-
-  ambient light’s color.</p>
-
-  <p>The third way to call <code>ambientLight()</code> has four parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
-  HSBA, or HSLA values can be
-
-  passed to set the ambient light’s colors, as in <code>ambientLight(255, 0,
-  0)</code>
-
-  or <code>ambientLight(255, 0, 0, 30)</code>. Color values will be interpreted
-  using
-
-  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to turn on the light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the light.
-      if (isLit === true) {
-        // Use a grayscale value of 80.
-        ambientLight(80);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the ambient light when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A faded magenta sphere drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      // Use a p5.Color object.
-      let c = color('orchid');
-      ambientLight(c);
-
-      // Draw the sphere.
-      sphere();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A faded magenta sphere drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      // Use a CSS color string.
-      ambientLight('#DA70D6');
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A faded magenta sphere drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      // Use RGB values
-      ambientLight(218, 112, 214);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 10
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha (transparency) value in the current
-                                          <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 164
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 and 255.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 171
-    params:
-      - name: value
-        description: |
-          <p>color as a CSS string.</p>
-        type: String
-    chainable: 1
-  - line: 177
-    params:
-      - name: values
-        description: |
-          <p>color as an array of RGBA, HSBA, or HSLA
-                                          values.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 184
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# ambientLight
diff --git a/src/content/reference/en/p5 copy/ambientMaterial.mdx b/src/content/reference/en/p5 copy/ambientMaterial.mdx
deleted file mode 100644
index 8b96f24260..0000000000
--- a/src/content/reference/en/p5 copy/ambientMaterial.mdx	
+++ /dev/null
@@ -1,269 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2416
-title: ambientMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the ambient color of shapes’ surface material.</p>
-
-  <p>The <code>ambientMaterial()</code> color sets the components of the
-
-  <a href="/reference/p5/ambientLight/">ambientLight()</a> color that shapes
-  will
-
-  reflect. For example, calling <code>ambientMaterial(255, 255, 0)</code> would
-  cause a
-
-  shape to reflect red and green light, but not blue light.</p>
-
-  <p><code>ambientMaterial()</code> can be called three ways with different
-  parameters to
-
-  set the material’s color.</p>
-
-  <p>The first way to call <code>ambientMaterial()</code> has one parameter,
-  <code>gray</code>.
-
-  Grayscale values between 0 and 255, as in <code>ambientMaterial(50)</code>,
-  can be
-
-  passed to set the material’s color. Higher grayscale values make shapes
-
-  appear brighter.</p>
-
-  <p>The second way to call <code>ambientMaterial()</code> has one parameter,
-  <code>color</code>. A
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  values, or a
-
-  CSS color string, as in <code>ambientMaterial('magenta')</code>, can be passed
-  to set
-
-  the material’s color.</p>
-
-  <p>The third way to call <code>ambientMaterial()</code> has three parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  and <code>v3</code>. RGB, HSB, or HSL values, as in <code>ambientMaterial(255,
-  0, 0)</code>, can
-
-  be passed to set the material’s colors. Color values will be interpreted
-
-  using the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-
-  <p>Note: <code>ambientMaterial()</code> can only be used in WebGL mode.</p>
-line: 2416
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A magenta cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A purple cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a dark gray ambient material.
-      ambientMaterial(150);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a yellow ambient material using RGB values.
-      ambientMaterial(255, 255, 0);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a yellow ambient material using a p5.Color object.
-      let c = color(255, 255, 0);
-      ambientMaterial(c);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a yellow ambient material using a color string.
-      ambientMaterial('yellow');
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A yellow cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white ambient light.
-      ambientLight(255, 255, 255);
-
-      // Add a yellow ambient material using a color string.
-      ambientMaterial('yellow');
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2416
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the
-                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the
-                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-    chainable: 1
-  - line: 2621
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 (black) and 255 (white).</p>
-        type: Number
-    chainable: 1
-  - line: 2627
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                     an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-    chainable: 1
-chainable: true
----
-
-
-# ambientMaterial
diff --git a/src/content/reference/en/p5 copy/angleMode.mdx b/src/content/reference/en/p5 copy/angleMode.mdx
deleted file mode 100644
index 3401a563cd..0000000000
--- a/src/content/reference/en/p5 copy/angleMode.mdx	
+++ /dev/null
@@ -1,219 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L557
-title: angleMode
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Changes the unit system used to measure angles.</p>
-
-  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
-
-  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
-
-  <p>Functions such as <a href="/reference/p5/rotate/">rotate()</a> and
-
-  <a href="/reference/p5/sin/">sin()</a> expect angles measured radians by
-  default.
-
-  Calling <code>angleMode(DEGREES)</code> switches to degrees. Calling
-
-  <code>angleMode(RADIANS)</code> switches back to radians.</p>
-
-  <p>Calling <code>angleMode()</code> with no arguments returns current angle
-  mode, which
-
-  is either <code>RADIANS</code> or <code>DEGREES</code>.</p>
-line: 557
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Rotate 1/8 turn.
-      rotate(QUARTER_PI);
-
-      // Draw a line.
-      line(0, 0, 80, 0);
-
-      describe('A diagonal line radiating from the top-left corner of a square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Rotate 1/8 turn.
-      rotate(45);
-
-      // Draw a line.
-      line(0, 0, 80, 0);
-
-      describe('A diagonal line radiating from the top-left corner of a square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Calculate the angle to rotate.
-      let angle = TWO_PI / 7;
-
-      // Move the origin to the center.
-      translate(50, 50);
-
-      // Style the flower.
-      noStroke();
-      fill(255, 50);
-
-      // Draw the flower.
-      for (let i = 0; i < 7; i += 1) {
-        ellipse(0, 0, 80, 20);
-        rotate(angle);
-      }
-
-      describe('A translucent white flower on a dark background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Calculate the angle to rotate.
-      let angle = 360 / 7;
-
-      // Move the origin to the center.
-      translate(50, 50);
-
-      // Style the flower.
-      noStroke();
-      fill(255, 50);
-
-      // Draw the flower.
-      for (let i = 0; i < 7; i += 1) {
-        ellipse(0, 0, 80, 20);
-        rotate(angle);
-      }
-
-      describe('A translucent white flower on a dark background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white ball on a string oscillates left and right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.05) + 50;
-      let y = 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white ball on a string oscillates left and right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 2.86) + 50;
-      let y = 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the upper line.
-      rotate(PI / 6);
-      line(0, 0, 80, 0);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Draw the lower line.
-      rotate(30);
-      line(0, 0, 80, 0);
-
-      describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 557
-    params:
-      - name: mode
-        description: |
-          <p>either RADIANS or DEGREES.</p>
-        type: Constant
-  - line: 743
-    params: []
-    return:
-      description: mode either RADIANS or DEGREES
-      type: Constant
-chainable: false
----
-
-
-# angleMode
diff --git a/src/content/reference/en/p5 copy/append.mdx b/src/content/reference/en/p5 copy/append.mdx
deleted file mode 100644
index 4e0bbeb5eb..0000000000
--- a/src/content/reference/en/p5 copy/append.mdx	
+++ /dev/null
@@ -1,48 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L10
-title: append
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Adds a value to the end of an array. Extends the length of
-  the array by one. Maps to Array.push().</p>
-line: 10
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">array.push(value)</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    function setup() {
-      let myArray = ['Mango', 'Apple', 'Papaya'];
-      print(myArray); // ['Mango', 'Apple', 'Papaya']
-
-      append(myArray, 'Peach');
-      print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
-    }
-    </code></div>
-class: p5
-params:
-  - name: array
-    description: |
-      <p>Array to append</p>
-    type: Array
-  - name: value
-    description: |
-      <p>to be added to the Array</p>
-    type: Any
-return:
-  description: the array that was appended to
-  type: Array
-chainable: false
----
-
-
-# append
diff --git a/src/content/reference/en/p5 copy/applyMatrix.mdx b/src/content/reference/en/p5 copy/applyMatrix.mdx
deleted file mode 100644
index b105ed75da..0000000000
--- a/src/content/reference/en/p5 copy/applyMatrix.mdx	
+++ /dev/null
@@ -1,347 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L11
-title: applyMatrix
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Applies a transformation matrix to the coordinate system.</p>
-
-  <p>Transformations such as
-
-  <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and
-
-  <a href="/reference/p5/scale/">scale()</a>
-
-  use matrix-vector multiplication behind the scenes. A table of numbers,
-
-  called a matrix, encodes each transformation. The values in the matrix
-
-  then multiply each point on the canvas, which is represented by a vector.</p>
-
-  <p><code>applyMatrix()</code> allows for many transformations to be applied at
-  once. See
-
-  <a href="https://en.wikipedia.org/wiki/Transformation_matrix/"
-  target="_blank">Wikipedia</a>
-
-  and <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web/"
-  target="_blank">MDN</a>
-
-  for more details about transformations.</p>
-
-  <p>There are two ways to call <code>applyMatrix()</code> in two and three
-  dimensions.</p>
-
-  <p>In 2D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
-  <code>d</code>, <code>e</code>, and <code>f</code>, correspond to
-
-  elements in the following transformation matrix:</p>
-
-  <blockquote>
-
-  <p><img style="max-width: 150px" src="/assets/transformation-matrix.png"
-  alt="The transformation matrix used when applyMatrix is called in 2D
-  mode."/></p>
-
-  </blockquote>
-
-  <p>The numbers can be passed individually, as in
-
-  <code>applyMatrix(2, 0, 0, 0, 2, 0)</code>. They can also be passed in an
-  array, as in
-
-  <code>applyMatrix([2, 0, 0, 0, 2, 0])</code>.</p>
-
-  <p>In 3D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
-  <code>d</code>, <code>e</code>, <code>f</code>, <code>g</code>,
-  <code>h</code>, <code>i</code>,
-
-  <code>j</code>, <code>k</code>, <code>l</code>, <code>m</code>,
-  <code>n</code>, <code>o</code>, and <code>p</code> correspond to elements in
-  the
-
-  following transformation matrix:</p>
-
-  <p><img style="max-width: 300px" src="/assets/transformation-matrix-4-4.png"
-  alt="The transformation matrix used when applyMatrix is called in 3D
-  mode."/></p>
-
-  <p>The numbers can be passed individually, as in
-
-  <code>applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)</code>. They
-  can
-
-  also be passed in an array, as in
-
-  <code>applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0,
-  1])</code>.</p>
-
-  <p>By default, transformations accumulate. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>applyMatrix()</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't
-
-  cause shapes to transform continuously.</p>
-line: 11
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      applyMatrix(1, 0, 0, 1, 50, 50);
-
-      // Draw the circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      let m = [1, 0, 0, 1, 50, 50];
-      applyMatrix(m);
-
-      // Draw the circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn.
-      let angle = QUARTER_PI;
-      let ca = cos(angle);
-      let sa = sin(angle);
-      applyMatrix(ca, sa, -sa, ca, 0, 0);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Scale the coordinate system by a factor of 0.5.
-      applyMatrix(0.5, 0, 0, 0.5, 0, 0);
-
-      // Draw a square at (30, 20).
-      // It appears at (15, 10) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the shear factor.
-      let angle = QUARTER_PI;
-      let shearFactor = 1 / tan(HALF_PI - angle);
-
-      // Shear the coordinate system along the x-axis.
-      applyMatrix(1, 0, shearFactor, 1, 0, 0);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      let ca = cos(angle);
-      let sa = sin(angle);
-      applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 11
-    params:
-      - name: arr
-        description: >
-          <p>an array containing the elements of the transformation matrix. Its
-          length should be either 6 (2D) or 16 (3D).</p>
-        type: Array
-    chainable: 1
-  - line: 206
-    params:
-      - name: a
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: b
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: c
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: d
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: e
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: f
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-    chainable: 1
-  - line: 216
-    params:
-      - name: a
-        description: ''
-        type: Number
-      - name: b
-        description: ''
-        type: Number
-      - name: c
-        description: ''
-        type: Number
-      - name: d
-        description: ''
-        type: Number
-      - name: e
-        description: ''
-        type: Number
-      - name: f
-        description: ''
-        type: Number
-      - name: g
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: i
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: j
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: k
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: l
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: m
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: 'n'
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: o
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: p
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# applyMatrix
diff --git a/src/content/reference/en/p5 copy/arc.mdx b/src/content/reference/en/p5 copy/arc.mdx
deleted file mode 100644
index ee50708815..0000000000
--- a/src/content/reference/en/p5 copy/arc.mdx	
+++ /dev/null
@@ -1,274 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L102
-title: arc
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws an arc.</p>
-
-  <p>An arc is a section of an ellipse defined by the <code>x</code>,
-  <code>y</code>, <code>w</code>, and
-
-  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
-  of the arc's center. <code>w</code> and
-
-  <code>h</code> set the arc's width and height. See
-
-  <a href="/reference/p5/ellipse/">ellipse()</a> and
-
-  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for more details.</p>
-
-  <p>The fifth and sixth parameters, <code>start</code> and <code>stop</code>,
-  set the angles
-
-  between which to draw the arc. Arcs are always drawn clockwise from
-
-  <code>start</code> to <code>stop</code>. The fifth and sixth parameters, start
-  and stop, set the
-
-  angles between which to draw the arc. By default, angles are given in radians,
-  but if angleMode
-
-  (DEGREES) is set, the function interprets the values in degrees.</p>
-
-  <p>The seventh parameter, <code>mode</code>, is optional. It determines the
-  arc's fill
-
-  style. The fill modes are a semi-circle (<code>OPEN</code>), a closed
-  semi-circle
-
-  (<code>CHORD</code>), or a closed pie segment (<code>PIE</code>).</p>
-
-  <p>The eighth parameter, <code>detail</code>, is also optional. It determines
-  how many
-
-  vertices are used to draw the arc in WebGL mode. The default value is 25.</p>
-line: 102
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      arc(50, 50, 80, 80, 0, PI + HALF_PI);
-
-      describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      arc(50, 50, 80, 40, 0, PI + HALF_PI);
-
-      describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Bottom-right.
-      arc(50, 55, 50, 50, 0, HALF_PI);
-
-      noFill();
-
-      // Bottom-left.
-      arc(50, 55, 60, 60, HALF_PI, PI);
-
-      // Top-left.
-      arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
-
-      // Top-right.
-      arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
-
-      describe(
-        'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Default fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
-
-      describe('A white circle with the top-right third missing. The bottom is outlined in black.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // OPEN fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
-
-      describe(
-        'A white circle missing a section from the top-right. The bottom is outlined in black.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // CHORD fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
-
-      describe('A white circle with a black outline missing a section from the top-right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // PIE fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
-
-      describe('A white circle with a black outline. The top-right third is missing.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // PIE fill mode.
-      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);
-
-      describe('A white circle with a black outline. The top-right third is missing.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // PIE fill mode with 5 vertices.
-      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);
-
-      describe('A white circle with a black outline. The top-right third is missing.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A yellow circle on a black background. The circle opens and closes its mouth.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the arc.
-      noStroke();
-      fill(255, 255, 0);
-
-      // Update start and stop angles.
-      let biteSize = PI / 16;
-      let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
-      let endAngle = TWO_PI - startAngle;
-
-      // Draw the arc.
-      arc(50, 50, 80, 80, startAngle, endAngle, PIE);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the arc's ellipse.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the arc's ellipse.</p>
-    type: Number
-  - name: w
-    description: |
-      <p>width of the arc's ellipse by default.</p>
-    type: Number
-  - name: h
-    description: |
-      <p>height of the arc's ellipse by default.</p>
-    type: Number
-  - name: start
-    description: |
-      <p>angle to start the arc, specified in radians.</p>
-    type: Number
-  - name: stop
-    description: |
-      <p>angle to stop the arc, specified in radians.</p>
-    type: Number
-  - name: mode
-    description: |
-      <p>optional parameter to determine the way of drawing
-                              the arc. either CHORD, PIE, or OPEN.</p>
-    type: Constant
-    optional: true
-  - name: detail
-    description: |
-      <p>optional parameter for WebGL mode only. This is to
-                              specify the number of vertices that makes up the
-                              perimeter of the arc. Default value is 25. Won't
-                              draw a stroke for a detail of more than 50.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# arc
diff --git a/src/content/reference/en/p5 copy/arrayCopy.mdx b/src/content/reference/en/p5 copy/arrayCopy.mdx
deleted file mode 100644
index 2d149d1ed3..0000000000
--- a/src/content/reference/en/p5 copy/arrayCopy.mdx	
+++ /dev/null
@@ -1,95 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L35
-title: arrayCopy
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: >
-  <p>Copies an array (or part of an array) to another array. The src array is
-
-  copied to the dst array, beginning at the position specified by
-
-  srcPosition and into the position specified by dstPosition. The number of
-
-  elements to copy is determined by length. Note that copying values
-
-  overwrites existing values in the destination array. To append values
-
-  instead of overwriting them, use <a
-  href="/reference/p5/concat/">concat()</a>.</p>
-
-  <p>The simplified version with only two arguments, arrayCopy(src, dst),
-
-  copies an entire array to another of the same size. It is equivalent to
-
-  arrayCopy(src, 0, dst, 0, src.length).</p>
-
-  <p>Using this function is far more efficient for copying array data than
-
-  iterating through a for() loop and copying each element individually.</p>
-line: 35
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">arr1.copyWithin(arr2)</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    let src = ['A', 'B', 'C'];
-    let dst = [1, 2, 3];
-    let srcPosition = 1;
-    let dstPosition = 0;
-    let length = 2;
-
-    print(src); // ['A', 'B', 'C']
-    print(dst); // [ 1 ,  2 ,  3 ]
-
-    arrayCopy(src, srcPosition, dst, dstPosition, length);
-    print(dst); // ['B', 'C', 3]
-    </code></div>
-class: p5
-overloads:
-  - line: 35
-    params:
-      - name: src
-        description: |
-          <p>the source Array</p>
-        type: Array
-      - name: srcPosition
-        description: |
-          <p>starting position in the source Array</p>
-        type: Integer
-      - name: dst
-        description: |
-          <p>the destination Array</p>
-        type: Array
-      - name: dstPosition
-        description: |
-          <p>starting position in the destination Array</p>
-        type: Integer
-      - name: length
-        description: |
-          <p>number of Array elements to be copied</p>
-        type: Integer
-  - line: 73
-    params:
-      - name: src
-        description: ''
-        type: Array
-      - name: dst
-        description: ''
-        type: Array
-      - name: length
-        description: ''
-        type: Integer
-        optional: true
-chainable: false
----
-
-
-# arrayCopy
diff --git a/src/content/reference/en/p5 copy/asin.mdx b/src/content/reference/en/p5 copy/asin.mdx
deleted file mode 100644
index 78518c0050..0000000000
--- a/src/content/reference/en/p5 copy/asin.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L80
-title: asin
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the arc sine of a number.</p>
-
-  <p><code>asin()</code> is the inverse of <a
-  href="/reference/p5/sin/">sin()</a>. It expects input
-
-  values in the range of -1 to 1. By default, <code>asin()</code> returns values
-  in the
-
-  range -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If
-
-  the <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>
-  then values are
-
-  returned in the range -90 to 90.</p>
-line: 80
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate sin() and asin() values.
-      let a = PI / 3;
-      let s = sin(a);
-      let as = asin(s);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(s, 3)}`, 35, 50);
-      text(`${round(as, 3)}`, 35, 75);
-
-      describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate sin() and asin() values.
-      let a = PI + PI / 3;
-      let s = sin(a);
-      let as = asin(s);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(s, 3)}`, 35, 50);
-      text(`${round(as, 3)}`, 35, 75);
-
-      describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>value whose arc sine is to be returned.</p>
-    type: Number
-return:
-  description: arc sine of the given value.
-  type: Number
-chainable: false
----
-
-
-# asin
diff --git a/src/content/reference/en/p5 copy/atan.mdx b/src/content/reference/en/p5 copy/atan.mdx
deleted file mode 100644
index 86b3874bb0..0000000000
--- a/src/content/reference/en/p5 copy/atan.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L142
-title: atan
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the arc tangent of a number.</p>
-
-  <p><code>atan()</code> is the inverse of <a
-  href="/reference/p5/tan/">tan()</a>. It expects input
-
-  values in the range of -Infinity to Infinity. By default, <code>atan()</code>
-  returns
-
-  values in the range -π ÷ 2 (about -1.57) to π ÷ 2
-
-  (about 1.57). If the <a href="/reference/p5/angleMode/">angleMode()</a> is
-  <code>DEGREES</code>
-
-  then values are returned in the range -90 to 90.</p>
-line: 142
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate tan() and atan() values.
-      let a = PI / 3;
-      let t = tan(a);
-      let at = atan(t);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(t, 3)}`, 35, 50);
-      text(`${round(at, 3)}`, 35, 75);
-
-      describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate tan() and atan() values.
-      let a = PI + PI / 3;
-      let t = tan(a);
-      let at = atan(t);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(t, 3)}`, 35, 50);
-      text(`${round(at, 3)}`, 35, 75);
-
-      describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>value whose arc tangent is to be returned.</p>
-    type: Number
-return:
-  description: arc tangent of the given value.
-  type: Number
-chainable: false
----
-
-
-# atan
diff --git a/src/content/reference/en/p5 copy/atan2.mdx b/src/content/reference/en/p5 copy/atan2.mdx
deleted file mode 100644
index 200b49516b..0000000000
--- a/src/content/reference/en/p5 copy/atan2.mdx	
+++ /dev/null
@@ -1,106 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L204
-title: atan2
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the angle formed by a point, the origin, and the positive
-
-  x-axis.</p>
-
-  <p><code>atan2()</code> is most often used for orienting geometry to the
-  mouse's
-
-  position, as in <code>atan2(mouseY, mouseX)</code>. The first parameter is the
-  point's
-
-  y-coordinate and the second parameter is its x-coordinate.</p>
-
-  <p>By default, <code>atan2()</code> returns values in the range
-
-  -π (about -3.14) to π (3.14). If the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
-  then values are
-
-  returned in the range -180 to 180.</p>
-line: 204
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle at the top-left of the canvas rotates with mouse movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the angle between the mouse
-      // and the origin.
-      let a = atan2(mouseY, mouseX);
-
-      // Rotate.
-      rotate(a);
-
-      // Draw the shape.
-      rect(0, 0, 60, 10);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle at the center of the canvas rotates with mouse movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Get the mouse's coordinates relative to the origin.
-      let x = mouseX - 50;
-      let y = mouseY - 50;
-
-      // Calculate the angle between the mouse and the origin.
-      let a = atan2(y, x);
-
-      // Rotate.
-      rotate(a);
-
-      // Draw the shape.
-      rect(-30, -5, 60, 10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the point.</p>
-    type: Number
-  - name: x
-    description: |
-      <p>x-coordinate of the point.</p>
-    type: Number
-return:
-  description: arc tangent of the given point.
-  type: Number
-chainable: false
----
-
-
-# atan2
diff --git a/src/content/reference/en/p5 copy/background.mdx b/src/content/reference/en/p5 copy/background.mdx
deleted file mode 100644
index 6250c60339..0000000000
--- a/src/content/reference/en/p5 copy/background.mdx	
+++ /dev/null
@@ -1,336 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L414
-title: background
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Sets the color used for the background of the canvas.</p>
-
-  <p>By default, the background is transparent. <code>background()</code> is
-  typically used
-
-  within <a href="/reference/p5/draw/">draw()</a> to clear the display window at
-  the
-
-  beginning of each frame. It can also be used inside
-
-  <a href="/reference/p5/setup/">setup()</a> to set the background on the first
-  frame
-
-  of animation.</p>
-
-  <p>The version of <code>background()</code> with one parameter interprets the
-  value one
-
-  of four ways. If the parameter is a <code>Number</code>, it's interpreted as a
-  grayscale
-
-  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
-  color string.
-
-  RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the
-
-  parameter is a <a href="/reference/p5/p5.Color">p5.Color</a> object, it will
-  be used as
-
-  the background color. If the parameter is a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object, it will be used as the
-  background
-
-  image.</p>
-
-  <p>The version of <code>background()</code> with two parameters interprets the
-  first one
-
-  as a grayscale value. The second parameter sets the alpha (transparency)
-
-  value.</p>
-
-  <p>The version of <code>background()</code> with three parameters interprets
-  them as RGB,
-
-  HSB, or HSL colors, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. By default, colors are
-  specified
-
-  in RGB values. Calling <code>background(255, 204, 0)</code> sets the
-  background a bright
-
-  yellow color.</p>
-
-  <p>The version of <code>background()</code> with four parameters interprets
-  them as RGBA,
-
-  HSBA, or HSLA colors, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter sets
-  the alpha
-
-  (transparency) value.</p>
-line: 414
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A grayscale value.
-      background(51);
-
-      describe('A canvas with a dark charcoal gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A grayscale value and an alpha value.
-      background(51, 0.4);
-      describe('A canvas with a transparent gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // R, G & B values.
-      background(255, 204, 0);
-
-      describe('A canvas with a yellow background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // R, G, B, and Alpha values.
-      background(255, 0, 0, 128);
-
-      describe('A canvas with a semi-transparent red background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // H, S & B values.
-      background(255, 204, 100);
-
-      describe('A canvas with a royal blue background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A CSS named color.
-      background('red');
-
-      describe('A canvas with a red background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Three-digit hex RGB notation.
-      background('#fae');
-
-      describe('A canvas with a pink background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Six-digit hex RGB notation.
-      background('#222222');
-
-      describe('A canvas with a black background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Integer RGB notation.
-      background('rgb(0, 255, 0)');
-
-      describe('A canvas with a bright green background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Integer RGBA notation.
-      background('rgba(0, 255, 0, 0.25)');
-
-      describe('A canvas with a transparent green background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Percentage RGB notation.
-      background('rgb(100%, 0%, 10%)');
-
-      describe('A canvas with a red background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Percentage RGBA notation.
-      background('rgba(100%, 0%, 100%, 0.5)');
-
-      describe('A canvas with a transparent purple background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A p5.Color object.
-      let c = color(0, 0, 255);
-      background(c);
-
-      describe('A canvas with a blue background.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 414
-    params:
-      - name: color
-        description: >
-          <p>any value created by the <a href="#/p5/color">color()</a>
-          function</p>
-        type: p5.Color
-    chainable: 1
-  - line: 626
-    params:
-      - name: colorstring
-        description: |
-          <p>color string, possible formats include: integer
-                                  rgb() or rgba(), percentage rgb() or rgba(),
-                                  3-digit hex, 6-digit hex.</p>
-        type: String
-      - name: a
-        description: |
-          <p>opacity of the background relative to current
-                                      color range (default is 0-255).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 636
-    params:
-      - name: gray
-        description: |
-          <p>specifies a value between white and black.</p>
-        type: Number
-      - name: a
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 643
-    params:
-      - name: v1
-        description: >
-          <p>red value if color mode is RGB, or hue value if color mode is
-          HSB.</p>
-        type: Number
-      - name: v2
-        description: >
-          <p>green value if color mode is RGB, or saturation value if color mode
-          is HSB.</p>
-        type: Number
-      - name: v3
-        description: >
-          <p>blue value if color mode is RGB, or brightness value if color mode
-          is HSB.</p>
-        type: Number
-      - name: a
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 652
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 659
-    params:
-      - name: image
-        description: |
-          <p>image created with <a href="#/p5/loadImage">loadImage()</a>
-                                      or <a href="#/p5/createImage">createImage()</a>,
-                                      to set as background.
-                                      (must be same size as the sketch window).</p>
-        type: p5.Image
-      - name: a
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# background
diff --git a/src/content/reference/en/p5 copy/baseColorShader.mdx b/src/content/reference/en/p5 copy/baseColorShader.mdx
deleted file mode 100644
index a608e4d5ce..0000000000
--- a/src/content/reference/en/p5 copy/baseColorShader.mdx	
+++ /dev/null
@@ -1,178 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1292
-title: baseColorShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the shader used when no lights or materials are applied.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseColorShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <thead>
-
-  <tr>
-
-  <th>Hook</th>
-
-  <th>Description</th>
-
-  </tr>
-
-  </thead>
-
-  <tbody><tr>
-
-  <td><code>void beforeVertex</code></td>
-
-  <td>Called at the start of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalPosition</code></td>
-
-  <td>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldPosition</code></td>
-
-  <td>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalNormal</code></td>
-
-  <td>Update the normal before transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldNormal</code></td>
-
-  <td>Update the normal after transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec2 getUV</code></td>
-
-  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
-  return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getVertexColor</code></td>
-
-  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterVertex</code></td>
-
-  <td>Called at the end of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void beforeFragment</code></td>
-
-  <td>Called at the start of the fragment shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getFinalColor</code></td>
-
-  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterFragment</code></td>
-
-  <td>Called at the end of the fragment shader.</td>
-
-  </tr>
-
-  </tbody></table>
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseColorShader().inspectHooks()</code> to see all the possible
-  hooks and
-
-  their default implementations.</p>
-line: 1292
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseColorShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      noStroke();
-      fill('red');
-      circle(0, 0, 50);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The color shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseColorShader
diff --git a/src/content/reference/en/p5 copy/baseMaterialShader.mdx b/src/content/reference/en/p5 copy/baseMaterialShader.mdx
deleted file mode 100644
index d41248d1aa..0000000000
--- a/src/content/reference/en/p5 copy/baseMaterialShader.mdx	
+++ /dev/null
@@ -1,418 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L886
-title: baseMaterialShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the default shader used with lights, materials,
-
-  and textures.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseMaterialShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <tr><th>Hook</th><th>Description</th></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getLocalPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getWorldPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getLocalNormal</code></p>
-
-  </td><td>
-
-
-  <p>Update the normal before transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getWorldNormal</code></p>
-
-  </td><td>
-
-
-  <p>Update the normal after transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec2 getUV</code></p>
-
-  </td><td>
-
-
-  <p>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
-  return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getVertexColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the fragment shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>Inputs getPixelInputs</code></p>
-
-  </td><td>
-
-
-  <p>Update the per-pixel inputs of the material. It takes in an
-  <code>Inputs</code> struct, which includes:</p>
-
-  <ul>
-
-  <li><code>vec3 normal</code>, the direction pointing out of the surface</li>
-
-  <li><code>vec2 texCoord</code>, a vector where <code>x</code> and
-  <code>y</code> are between 0 and 1 describing the spot on a texture the pixel
-  is mapped to, as a fraction of the texture size</li>
-
-  <li><code>vec3 ambientLight</code>, the ambient light color on the vertex</li>
-
-  <li><code>vec4 color</code>, the base material color of the pixel</li>
-
-  <li><code>vec3 ambientMaterial</code>, the color of the pixel when affected by
-  ambient light</li>
-
-  <li><code>vec3 specularMaterial</code>, the color of the pixel when reflecting
-  specular highlights</li>
-
-  <li><code>vec3 emissiveMaterial</code>, the light color emitted by the
-  pixel</li>
-
-  <li><code>float shininess</code>, a number representing how sharp specular
-  reflections should be, from 1 to infinity</li>
-
-  <li><code>float metalness</code>, a number representing how mirrorlike the
-  material should be, between 0 and 1
-
-  The struct can be modified and returned.</li></ul></td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 combineColors</code></p>
-
-  </td><td>
-
-
-  <p>Take in a <code>ColorComponents</code> struct containing all the different
-  components of light, and combining them into
-
-  a single final color. The struct contains:</p>
-
-  <ul>
-
-  <li><code>vec3 baseColor</code>, the base color of the pixel</li>
-
-  <li><code>float opacity</code>, the opacity between 0 and 1 that it should be
-  drawn at</li>
-
-  <li><code>vec3 ambientColor</code>, the color of the pixel when affected by
-  ambient light</li>
-
-  <li><code>vec3 specularColor</code>, the color of the pixel when affected by
-  specular reflections</li>
-
-  <li><code>vec3 diffuse</code>, the amount of diffused light hitting the
-  pixel</li>
-
-  <li><code>vec3 ambient</code>, the amount of ambient light hitting the
-  pixel</li>
-
-  <li><code>vec3 specular</code>, the amount of specular reflection hitting the
-  pixel</li>
-
-  <li><code>vec3 emissive</code>, the amount of light emitted by the pixel</li>
-
-  </ul>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getFinalColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the fragment shader.</p>
-
-  </td></tr>
-
-  </table>
-
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseMaterialShader().inspectHooks()</code> to see all the
-  possible hooks and
-
-  their default implementations.</p>
-line: 886
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20.0 * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      lights();
-      noStroke();
-      fill('red');
-      sphere(50);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        declarations: 'vec3 myNormal;',
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          myNormal = inputs.normal;
-          return inputs;
-        }`,
-        'vec4 getFinalColor': `(vec4 color) {
-          return mix(
-            vec4(1.0, 1.0, 1.0, 1.0),
-            color,
-            abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))
-          );
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      rotateY(millis() * 0.001);
-      shader(myShader);
-      lights();
-      noStroke();
-      fill('red');
-      torus(30);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-    let environment;
-
-    function preload() {
-      environment = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          float factor =
-            sin(
-              inputs.texCoord.x * ${TWO_PI} +
-              inputs.texCoord.y * ${TWO_PI}
-            ) * 0.4 + 0.5;
-          inputs.shininess = mix(1., 100., factor);
-          inputs.metalness = factor;
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      panorama(environment);
-      ambientLight(100);
-      imageLight(environment);
-      rotateY(millis() * 0.001);
-      shader(myShader);
-      noStroke();
-      fill(255);
-      specularMaterial(150);
-      sphere(50);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          vec3 newNormal = inputs.normal;
-          // Simple bump mapping: adjust the normal based on position
-          newNormal.x += 0.2 * sin(
-              sin(
-                inputs.texCoord.y * ${TWO_PI} * 10.0 +
-                inputs.texCoord.x * ${TWO_PI} * 25.0
-              )
-            );
-          newNormal.y += 0.2 * sin(
-            sin(
-                inputs.texCoord.x * ${TWO_PI} * 10.0 +
-                inputs.texCoord.y * ${TWO_PI} * 25.0
-              )
-          );
-          inputs.normal = normalize(newNormal);
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      ambientLight(150);
-      pointLight(
-        255, 255, 255,
-        100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)
-      );
-      noStroke();
-      fill('red');
-      shininess(200);
-      specularMaterial(255);
-      sphere(50);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The material shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseMaterialShader
diff --git a/src/content/reference/en/p5 copy/baseNormalShader.mdx b/src/content/reference/en/p5 copy/baseNormalShader.mdx
deleted file mode 100644
index 4eac6e9109..0000000000
--- a/src/content/reference/en/p5 copy/baseNormalShader.mdx	
+++ /dev/null
@@ -1,211 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1197
-title: baseNormalShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the shader used by <a
-  href="/reference/p5/normalMaterial/"><code>normalMaterial()</code></a>.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseNormalShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <thead>
-
-  <tr>
-
-  <th>Hook</th>
-
-  <th>Description</th>
-
-  </tr>
-
-  </thead>
-
-  <tbody><tr>
-
-  <td><code>void beforeVertex</code></td>
-
-  <td>Called at the start of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalPosition</code></td>
-
-  <td>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldPosition</code></td>
-
-  <td>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalNormal</code></td>
-
-  <td>Update the normal before transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldNormal</code></td>
-
-  <td>Update the normal after transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec2 getUV</code></td>
-
-  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
-  return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getVertexColor</code></td>
-
-  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterVertex</code></td>
-
-  <td>Called at the end of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void beforeFragment</code></td>
-
-  <td>Called at the start of the fragment shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getFinalColor</code></td>
-
-  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterFragment</code></td>
-
-  <td>Called at the end of the fragment shader.</td>
-
-  </tr>
-
-  </tbody></table>
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseNormalShader().inspectHooks()</code> to see all the possible
-  hooks and
-
-  their default implementations.</p>
-line: 1197
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseNormalShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      noStroke();
-      sphere(50);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseNormalShader().modify({
-        'vec3 getWorldNormal': '(vec3 normal) { return abs(normal); }',
-        'vec4 getFinalColor': `(vec4 color) {
-          // Map the r, g, and b values of the old normal to new colors
-          // instead of just red, green, and blue:
-          vec3 newColor =
-            color.r * vec3(89.0, 240.0, 232.0) / 255.0 +
-            color.g * vec3(240.0, 237.0, 89.0) / 255.0 +
-            color.b * vec3(205.0, 55.0, 222.0) / 255.0;
-          newColor = newColor / (color.r + color.g + color.b);
-          return vec4(newColor, 1.0) * color.a;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      noStroke();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.015);
-      box(100);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The `normalMaterial` shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseNormalShader
diff --git a/src/content/reference/en/p5 copy/baseStrokeShader.mdx b/src/content/reference/en/p5 copy/baseStrokeShader.mdx
deleted file mode 100644
index f2bfb42be5..0000000000
--- a/src/content/reference/en/p5 copy/baseStrokeShader.mdx	
+++ /dev/null
@@ -1,356 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1355
-title: baseStrokeShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the shader used when drawing the strokes of shapes.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseStrokeShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <tr><th>Hook</th><th>Description</th></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getLocalPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getWorldPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>float getStrokeWeight</code></p>
-
-  </td><td>
-
-
-  <p>Update the stroke weight. It takes in <code>float weight</code> and pust
-  return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec2 getLineCenter</code></p>
-
-  </td><td>
-
-
-  <p>Update the center of the line. It takes in <code>vec2 center</code> and
-  must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec2 getLinePosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of each vertex on the edge of the line. It takes in
-  <code>vec2 position</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getVertexColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the fragment shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>Inputs getPixelInputs</code></p>
-
-  </td><td>
-
-
-  <p>Update the inputs to the shader. It takes in a struct <code>Inputs
-  inputs</code>, which includes:</p>
-
-  <ul>
-
-  <li><code>vec4 color</code>, the color of the stroke</li>
-
-  <li><code>vec2 tangent</code>, the direction of the stroke in screen
-  space</li>
-
-  <li><code>vec2 center</code>, the coordinate of the center of the stroke in
-  screen space p5.js pixels</li>
-
-  <li><code>vec2 position</code>, the coordinate of the current pixel in screen
-  space p5.js pixels</li>
-
-  <li><code>float strokeWeight</code>, the thickness of the stroke in p5.js
-  pixels</li>
-
-  </ul>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>bool shouldDiscard</code></p>
-
-  </td><td>
-
-
-  <p>Caps and joins are made by discarded pixels in the fragment shader to carve
-  away unwanted areas. Use this to change this logic. It takes in a <code>bool
-  willDiscard</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getFinalColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the fragment shader.</p>
-
-  </td></tr>
-
-  </table>
-
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseStrokeShader().inspectHooks()</code> to see all the possible
-  hooks and
-
-  their default implementations.</p>
-line: 1355
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseStrokeShader().modify({
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          float opacity = 1.0 - smoothstep(
-            0.0,
-            15.0,
-            length(inputs.position - inputs.center)
-          );
-          inputs.color *= opacity;
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      strokeWeight(30);
-      line(
-        -width/3,
-        sin(millis()*0.001) * height/4,
-        width/3,
-        sin(millis()*0.001 + 1) * height/4
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseStrokeShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        declarations: 'vec3 myPosition;',
-        'vec3 getWorldPosition': `(vec3 pos) {
-          myPosition = pos;
-          return pos;
-        }`,
-        'float getStrokeWeight': `(float w) {
-          // Add a somewhat random offset to the weight
-          // that varies based on position and time
-          float scale = 0.8 + 0.2*sin(10.0 * sin(
-            floor(time/250.) +
-            myPosition.x*0.01 +
-            myPosition.y*0.01
-          ));
-          return w * scale;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      myShader.setUniform('time', millis());
-      strokeWeight(10);
-      beginShape();
-      for (let i = 0; i <= 50; i++) {
-        let r = map(i, 0, 50, 0, width/3);
-        let x = r*cos(i*0.2);
-        let y = r*sin(i*0.2);
-        vertex(x, y);
-      }
-      endShape();
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseStrokeShader().modify({
-        'float random': `(vec2 p) {
-          vec3 p3  = fract(vec3(p.xyx) * .1031);
-          p3 += dot(p3, p3.yzx + 33.33);
-          return fract((p3.x + p3.y) * p3.z);
-        }`,
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          // Replace alpha in the color with dithering by
-          // randomly setting pixel colors to 0 based on opacity
-          float a = inputs.color.a;
-          inputs.color.a = 1.0;
-          inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      strokeWeight(10);
-      beginShape();
-      for (let i = 0; i <= 50; i++) {
-        stroke(
-          0,
-          255
-            * map(i, 0, 20, 0, 1, true)
-            * map(i, 30, 50, 1, 0, true)
-        );
-        vertex(
-          map(i, 0, 50, -1, 1) * width/3,
-          50 * sin(i/10 + frameCount/100)
-        );
-      }
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The stroke shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseStrokeShader
diff --git a/src/content/reference/en/p5 copy/beginClip.mdx b/src/content/reference/en/p5 copy/beginClip.mdx
deleted file mode 100644
index ebad022a68..0000000000
--- a/src/content/reference/en/p5 copy/beginClip.mdx	
+++ /dev/null
@@ -1,208 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L13
-title: beginClip
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Starts defining a shape that will mask any shapes drawn afterward.</p>
-
-  <p>Any shapes drawn between <code>beginClip()</code> and
-
-  <a href="/reference/p5/endClip/">endClip()</a> will add to the mask shape. The
-  mask
-
-  will apply to anything drawn after <a
-  href="/reference/p5/endClip/">endClip()</a>.</p>
-
-  <p>The parameter, <code>options</code>, is optional. If an object with an
-  <code>invert</code>
-
-  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
-  used to
-
-  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
-  holes
-
-  in shapes that are masked. <code>invert</code> is <code>false</code> by
-  default.</p>
-
-  <p>Masks can be contained between the
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions.
-
-  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
-
-  <p>Masks can also be defined in a callback function that's passed to
-
-  <a href="/reference/p5/clip/">clip()</a>.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white triangle and circle on a gray background.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an inverted mask.
-      beginClip({ invert: true });
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      noStroke();
-
-      // Draw a masked shape.
-      push();
-      // Create a mask.
-      beginClip();
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw an inverted masked shape.
-      push();
-      // Create an inverted mask.
-      beginClip({ invert: true });
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored fuchsia.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-      endClip();
-
-      // Draw a backing shape.
-      noStroke();
-      fill('fuchsia');
-      plane(100);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-      endClip();
-
-      // Draw a backing shape.
-      noStroke();
-      beginShape(QUAD_STRIP);
-      fill(0, 255, 255);
-      vertex(-width / 2, -height / 2);
-      vertex(width / 2, -height / 2);
-      fill(100, 0, 100);
-      vertex(-width / 2, height / 2);
-      vertex(width / 2, height / 2);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: options
-    description: |
-      <p>an object containing clip settings.</p>
-    type: Object
-    optional: true
-chainable: false
----
-
-
-# beginClip
diff --git a/src/content/reference/en/p5 copy/beginContour.mdx b/src/content/reference/en/p5 copy/beginContour.mdx
deleted file mode 100644
index 5ecd6d1437..0000000000
--- a/src/content/reference/en/p5 copy/beginContour.mdx	
+++ /dev/null
@@ -1,134 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L20
-title: beginContour
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Begins creating a hole within a flat shape.</p>
-
-  <p>The <code>beginContour()</code> and <a
-  href="/reference/p5/endContour/">endContour()</a>
-
-  functions allow for creating negative space within custom shapes that are
-
-  flat. <code>beginContour()</code> begins adding vertices to a negative space
-  and
-
-  <a href="/reference/p5/endContour/">endContour()</a> stops adding them.
-
-  <code>beginContour()</code> and <a
-  href="/reference/p5/endContour/">endContour()</a> must be
-
-  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a>.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and <a
-  href="/reference/p5/scale/">scale()</a>
-
-  don't work between <code>beginContour()</code> and
-
-  <a href="/reference/p5/endContour/">endContour()</a>. It's also not possible
-  to use
-
-  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
-
-  <a href="/reference/p5/rect/">rect()</a>, between <code>beginContour()</code>
-  and
-
-  <a href="/reference/p5/endContour/">endContour()</a>.</p>
-
-  <p>Note: The vertices that define a negative space must "wind" in the opposite
-
-  direction from the outer shape. First, draw vertices for the outer shape
-
-  clockwise order. Then, draw vertices for the negative space in
-
-  counter-clockwise order.</p>
-line: 20
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(10, 10);
-      vertex(90, 10);
-      vertex(90, 90);
-      vertex(10, 90);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(30, 30);
-      vertex(30, 70);
-      vertex(70, 70);
-      vertex(70, 30);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(-40, -40);
-      vertex(40, -40);
-      vertex(40, 40);
-      vertex(-40, 40);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(-20, -20);
-      vertex(-20, 20);
-      vertex(20, 20);
-      vertex(20, -20);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# beginContour
diff --git a/src/content/reference/en/p5 copy/beginGeometry.mdx b/src/content/reference/en/p5 copy/beginGeometry.mdx
deleted file mode 100644
index 3fdf211bd3..0000000000
--- a/src/content/reference/en/p5 copy/beginGeometry.mdx	
+++ /dev/null
@@ -1,281 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L13
-title: beginGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Begins adding shapes to a new
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
-
-  <p>The <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>
-
-  functions help with creating complex 3D shapes from simpler ones such as
-
-  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
-  begins adding shapes
-
-  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
-
-  <p><code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a> can help
-
-  to make sketches more performant. For example, if a complex 3D shape
-
-  doesn’t change while a sketch runs, then it can be created with
-
-  <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>.
-
-  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
-  then
-
-  drawing it will run faster than repeatedly drawing the individual pieces.</p>
-
-  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
-  way to
-
-  build 3D shapes.</p>
-
-  <p>Note: <code>beginGeometry()</code> can only be used in WebGL mode.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add a cone.
-      cone();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      createArrow();
-
-      describe('A white arrow drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let blueArrow;
-    let redArrow;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the arrows.
-      redArrow = createArrow('red');
-      blueArrow = createArrow('blue');
-
-      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the red arrow.
-      model(redArrow);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the blue arrow.
-      model(blueArrow);
-    }
-
-    function createArrow(fillColor) {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      fill(fillColor);
-
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = createParticles();
-    }
-
-    function createParticles() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# beginGeometry
diff --git a/src/content/reference/en/p5 copy/beginShape.mdx b/src/content/reference/en/p5 copy/beginShape.mdx
deleted file mode 100644
index d8642333db..0000000000
--- a/src/content/reference/en/p5 copy/beginShape.mdx	
+++ /dev/null
@@ -1,449 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L129
-title: beginShape
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Begins adding vertices to a custom shape.</p>
-
-  <p>The <code>beginShape()</code> and <a
-  href="/reference/p5/endShape/">endShape()</a> functions
-
-  allow for creating custom shapes in 2D or 3D. <code>beginShape()</code> begins
-  adding
-
-  vertices to a custom shape and <a
-  href="/reference/p5/endShape/">endShape()</a> stops
-
-  adding them.</p>
-
-  <p>The parameter, <code>kind</code>, sets the kind of shape to make. By
-  default, any
-
-  irregular polygon can be drawn. The available modes for kind are:</p>
-
-  <ul>
-
-  <li><code>POINTS</code> to draw a series of points.</li>
-
-  <li><code>LINES</code> to draw a series of unconnected line segments.</li>
-
-  <li><code>TRIANGLES</code> to draw a series of separate triangles.</li>
-
-  <li><code>TRIANGLE_FAN</code> to draw a series of connected triangles sharing
-  the first vertex in a fan-like fashion.</li>
-
-  <li><code>TRIANGLE_STRIP</code> to draw a series of connected triangles in
-  strip fashion.</li>
-
-  <li><code>QUADS</code> to draw a series of separate quadrilaterals
-  (quads).</li>
-
-  <li><code>QUAD_STRIP</code> to draw quad strip using adjacent edges to form
-  the next quad.</li>
-
-  <li><code>TESS</code> to create a filling curve by explicit tessellation
-  (WebGL only).</li>
-
-  </ul>
-
-  <p>After calling <code>beginShape()</code>, shapes can be built by calling
-
-  <a href="/reference/p5/vertex/">vertex()</a>,
-
-  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
-
-  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
-
-  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
-
-  <a href="/reference/p5/endShape/">endShape()</a> will stop adding vertices to
-  the
-
-  shape. Each shape will be outlined with the current stroke color and filled
-
-  with the current fill color.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and
-
-  <a href="/reference/p5/scale/">scale()</a> don't work between
-  <code>beginShape()</code> and
-
-  <a href="/reference/p5/endShape/">endShape()</a>. It's also not possible to
-  use
-
-  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
-
-  <a href="/reference/p5/rect/">rect()</a>, between <code>beginShape()</code>
-  and
-
-  <a href="/reference/p5/endShape/">endShape()</a>.</p>
-line: 129
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Only draw the vertices (points).
-      beginShape(POINTS);
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Four black dots that form a square are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Only draw lines between alternating pairs of vertices.
-      beginShape(LINES);
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Two horizontal black lines on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Three black lines form a sideways U shape on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      // Connect the first and last vertices.
-      endShape(CLOSE);
-
-      describe('A black outline of a square drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of triangles.
-      beginShape(TRIANGLES);
-
-      // Left triangle.
-      vertex(30, 75);
-      vertex(40, 20);
-      vertex(50, 75);
-
-      // Right triangle.
-      vertex(60, 20);
-      vertex(70, 75);
-      vertex(80, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Two white triangles drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of triangles.
-      beginShape(TRIANGLE_STRIP);
-
-      // Add vertices.
-      vertex(30, 75);
-      vertex(40, 20);
-      vertex(50, 75);
-      vertex(60, 20);
-      vertex(70, 75);
-      vertex(80, 20);
-      vertex(90, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Five white triangles that are interleaved drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of triangles that share their first vertex.
-      beginShape(TRIANGLE_FAN);
-
-      // Add vertices.
-      vertex(57.5, 50);
-      vertex(57.5, 15);
-      vertex(92, 50);
-      vertex(57.5, 85);
-      vertex(22, 50);
-      vertex(57.5, 15);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Four white triangles form a square are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(QUADS);
-
-      // Left rectangle.
-      vertex(30, 20);
-      vertex(30, 75);
-      vertex(50, 75);
-      vertex(50, 20);
-
-      // Right rectangle.
-      vertex(65, 20);
-      vertex(65, 75);
-      vertex(85, 75);
-      vertex(85, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Two white rectangles drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(QUAD_STRIP);
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(30, 75);
-      vertex(50, 20);
-      vertex(50, 75);
-      vertex(65, 20);
-      vertex(65, 75);
-      vertex(85, 20);
-      vertex(85, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Three white rectangles that share edges are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(TESS);
-
-      // Add the vertices.
-      vertex(-30, -30, 0);
-      vertex(30, -30, 0);
-      vertex(30, -10, 0);
-      vertex(-10, -10, 0);
-      vertex(-10, 10, 0);
-      vertex(30, 10, 0);
-      vertex(30, 30, 0);
-      vertex(-30, 30, 0);
-
-      // Stop drawing the shape.
-      // Connect the first and last vertices.
-      endShape(CLOSE);
-
-      describe('A blocky C shape drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag with the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A blocky C shape drawn in red, blue, and green on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(TESS);
-
-      // Add the vertices.
-      fill('red');
-      stroke('red');
-      vertex(-30, -30, 0);
-      vertex(30, -30, 0);
-      vertex(30, -10, 0);
-      fill('green');
-      stroke('green');
-      vertex(-10, -10, 0);
-      vertex(-10, 10, 0);
-      vertex(30, 10, 0);
-      fill('blue');
-      stroke('blue');
-      vertex(30, 30, 0);
-      vertex(-30, 30, 0);
-
-      // Stop drawing the shape.
-      // Connect the first and last vertices.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: kind
-    description: |
-      <p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
-                                     TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.</p>
-    type: Constant
-    optional: true
-chainable: true
----
-
-
-# beginShape
diff --git a/src/content/reference/en/p5 copy/bezier.mdx b/src/content/reference/en/p5 copy/bezier.mdx
deleted file mode 100644
index 50c15330b7..0000000000
--- a/src/content/reference/en/p5 copy/bezier.mdx	
+++ /dev/null
@@ -1,273 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L13
-title: bezier
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Draws a Bézier curve.</p>
-
-  <p>Bézier curves can form shapes and curves that slope gently. They're defined
-
-  by two anchor points and two control points. Bézier curves provide more
-
-  control than the spline curves created with the
-
-  <a href="/reference/p5/curve/">curve()</a> function.</p>
-
-  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
-  first anchor point. The
-
-  first anchor point is where the curve starts.</p>
-
-  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
-  <code>x3</code>, and <code>y3</code>, set the two control
-
-  points. The control points "pull" the curve towards them.</p>
-
-  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
-  the last anchor
-
-  point. The last anchor point is where the curve ends.</p>
-
-  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>bezier()</code> has twelve arguments because each point has x-, y-,
-
-  and z-coordinates.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(85, 20);
-      point(15, 80);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(10, 10);
-      point(90, 90);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(85, 20, 10, 10, 90, 90, 15, 80);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(85, 20, 10, 10);
-      line(15, 80, 90, 90);
-
-      describe(
-        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the top-left corner
-    // and drag to change the curve's shape.
-
-    let x2 = 10;
-    let y2 = 10;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(85, 20);
-      point(15, 80);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x2, y2);
-      point(90, 90);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(85, 20, x2, y2, 90, 90, 15, 80);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(85, 20, x2, y2);
-      line(15, 80, 90, 90);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x2, y2) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x2 = mouseX;
-        y2 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background('skyblue');
-
-      // Draw the red balloon.
-      fill('red');
-      bezier(50, 60, 5, 15, 95, 15, 50, 60);
-
-      // Draw the balloon string.
-      line(50, 60, 50, 80);
-
-      describe('A red balloon in a blue sky.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');
-    }
-
-    function draw() {
-      background('skyblue');
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the red balloon.
-      fill('red');
-      bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);
-
-      // Draw the balloon string.
-      line(0, 0, 0, 0, 20, 0);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 13
-    params:
-      - name: x1
-        description: |
-          <p>x-coordinate of the first anchor point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>y-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>x-coordinate of the first control point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the second control point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>x-coordinate of the second anchor point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>y-coordinate of the second anchor point.</p>
-        type: Number
-    chainable: 1
-  - line: 191
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>z-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>z-coordinate of the second anchor point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# bezier
diff --git a/src/content/reference/en/p5 copy/bezierDetail.mdx b/src/content/reference/en/p5 copy/bezierDetail.mdx
deleted file mode 100644
index b4f895a3fc..0000000000
--- a/src/content/reference/en/p5 copy/bezierDetail.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L221
-title: bezierDetail
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Sets the number of segments used to draw Bézier curves in WebGL mode.</p>
-
-  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
-
-  more flat segments makes shapes appear smoother.</p>
-
-  <p>The parameter, <code>detail</code>, is the number of segments to use while
-  drawing a
-
-  Bézier curve. For example, calling <code>bezierDetail(5)</code> will use 5
-  segments to
-
-  draw curves with the <a href="/reference/p5/bezier/">bezier()</a> function. By
-
-  default,<code>detail</code> is 20.</p>
-
-  <p>Note: <code>bezierDetail()</code> has no effect in 2D mode.</p>
-line: 221
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Draw the original curve.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(85, 20);
-      point(15, 80);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(10, 10);
-      point(90, 90);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(85, 20, 10, 10, 90, 90, 15, 80);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(85, 20, 10, 10);
-      line(15, 80, 90, 90);
-
-      describe(
-        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Draw the curve with less detail.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Set the curveDetail() to 5.
-      bezierDetail(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(35, -30, 0);
-      point(-35, 30, 0);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(-40, -40, 0);
-      point(40, 40, 0);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(35, -30, -40, -40);
-      line(-35, 30, 40, 40);
-
-      describe(
-        'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: detail
-    description: |
-      <p>number of segments to use. Defaults to 20.</p>
-    type: Number
-chainable: true
----
-
-
-# bezierDetail
diff --git a/src/content/reference/en/p5 copy/bezierPoint.mdx b/src/content/reference/en/p5 copy/bezierPoint.mdx
deleted file mode 100644
index a42c171121..0000000000
--- a/src/content/reference/en/p5 copy/bezierPoint.mdx	
+++ /dev/null
@@ -1,162 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L324
-title: bezierPoint
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a Bézier curve using interpolation.</p>
-
-  <p><code>bezierPoint()</code> calculates coordinates along a Bézier curve
-  using the
-
-  anchor and control points. It expects points in the same order as the
-
-  <a href="/reference/p5/bezier/">bezier()</a> function.
-  <code>bezierPoint()</code> works one axis
-
-  at a time. Passing the anchor and control points' x-coordinates will
-
-  calculate the x-coordinate of a point on the curve. Passing the anchor and
-
-  control points' y-coordinates will calculate the y-coordinate of a point on
-
-  the curve.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  control points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 324
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 85;
-      let x2 = 10;
-      let x3 = 90;
-      let x4 = 15;
-      let y1 = 20;
-      let y2 = 10;
-      let y3 = 90;
-      let y4 = 80;
-
-      // Style the curve.
-      noFill();
-
-      // Draw the curve.
-      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw circles along the curve's path.
-      fill(255);
-
-      // Top-right.
-      let x = bezierPoint(x1, x2, x3, x4, 0);
-      let y = bezierPoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Center.
-      x = bezierPoint(x1, x2, x3, x4, 0.5);
-      y = bezierPoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Bottom-left.
-      x = bezierPoint(x1, x2, x3, x4, 1);
-      y = bezierPoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 85;
-      let x2 = 10;
-      let x3 = 90;
-      let x4 = 15;
-      let y1 = 20;
-      let y2 = 10;
-      let y3 = 90;
-      let y4 = 80;
-
-      // Draw the curve.
-      noFill();
-      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Calculate the circle's coordinates.
-      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
-      let x = bezierPoint(x1, x2, x3, x4, t);
-      let y = bezierPoint(y1, y2, y3, y4, t);
-
-      // Draw the circle.
-      fill(255);
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of the point on the curve.
-  type: Number
-chainable: false
----
-
-
-# bezierPoint
diff --git a/src/content/reference/en/p5 copy/bezierTangent.mdx b/src/content/reference/en/p5 copy/bezierTangent.mdx
deleted file mode 100644
index 8fb0edfaa8..0000000000
--- a/src/content/reference/en/p5 copy/bezierTangent.mdx	
+++ /dev/null
@@ -1,155 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L450
-title: bezierTangent
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a line that's tangent to a Bézier curve.</p>
-
-  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
-
-  the curve's slope at the point where it intersects.</p>
-
-  <p><code>bezierTangent()</code> calculates coordinates along a tangent line
-  using the
-
-  Bézier curve's anchor and control points. It expects points in the same
-
-  order as the <a href="/reference/p5/bezier/">bezier()</a> function.
-  <code>bezierTangent()</code>
-
-  works one axis at a time. Passing the anchor and control points'
-
-  x-coordinates will calculate the x-coordinate of a point on the tangent
-
-  line. Passing the anchor and control points' y-coordinates will calculate
-
-  the y-coordinate of a point on the tangent line.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  control points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 450
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 85;
-      let x2 = 10;
-      let x3 = 90;
-      let x4 = 15;
-      let y1 = 20;
-      let y2 = 10;
-      let y3 = 90;
-      let y4 = 80;
-
-      // Style the curve.
-      noFill();
-
-      // Draw the curve.
-      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw tangents along the curve's path.
-      fill(255);
-
-      // Top-right circle.
-      stroke(0);
-      let x = bezierPoint(x1, x2, x3, x4, 0);
-      let y = bezierPoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Top-right tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);
-      let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Center circle.
-      stroke(0);
-      x = bezierPoint(x1, x2, x3, x4, 0.5);
-      y = bezierPoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Center tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);
-      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Bottom-left circle.
-      stroke(0);
-      x = bezierPoint(x1, x2, x3, x4, 1);
-      y = bezierPoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      // Bottom-left tangent.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);
-      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      describe(
-        'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of a point on the tangent line.
-  type: Number
-chainable: false
----
-
-
-# bezierTangent
diff --git a/src/content/reference/en/p5 copy/bezierVertex.mdx b/src/content/reference/en/p5 copy/bezierVertex.mdx
deleted file mode 100644
index f4b5fb57cb..0000000000
--- a/src/content/reference/en/p5 copy/bezierVertex.mdx	
+++ /dev/null
@@ -1,337 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L543
-title: bezierVertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a Bézier curve segment to a custom shape.</p>
-
-  <p><code>bezierVertex()</code> adds a curved segment to custom shapes. The
-  Bézier curves
-
-  it creates are defined like those made by the
-
-  <a href="/reference/p5/bezier/">bezier()</a> function.
-  <code>bezierVertex()</code> must be
-
-  called between the
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
-  uses
-
-  the previous vertex as the first anchor point, so there must be at least
-
-  one call to <a href="/reference/p5/vertex/">vertex()</a> before
-  <code>bezierVertex()</code> can
-
-  be used.</p>
-
-  <p>The first four parameters, <code>x2</code>, <code>y2</code>,
-  <code>x3</code>, and <code>y3</code>, set the curve’s two
-
-  control points. The control points "pull" the curve towards them.</p>
-
-  <p>The fifth and sixth parameters, <code>x4</code>, and <code>y4</code>, set
-  the last anchor point.
-
-  The last anchor point is where the curve ends.</p>
-
-  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
-  and
-
-  z-coordinates.</p>
-
-  <p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to
-
-  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
-line: 543
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertex.
-      bezierVertex(80, 0, 80, 75, 30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A black C curve on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(30, 20);
-      point(30, 75);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(80, 0);
-      point(80, 75);
-
-      // Style the shape.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertex.
-      bezierVertex(80, 0, 80, 75, 30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(30, 20, 80, 0);
-      line(30, 75, 80, 75);
-
-      describe(
-        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the top-right corner
-    // and drag to change the curve's shape.
-
-    let x2 = 80;
-    let y2 = 0;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(30, 20);
-      point(30, 75);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x2, y2);
-      point(80, 75);
-
-      // Style the shape.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertex.
-      bezierVertex(x2, y2, 80, 75, 30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(30, 20, x2, y2);
-      line(30, 75, 80, 75);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x2, y2) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x2 = mouseX;
-        y2 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertices.
-      bezierVertex(80, 0, 80, 75, 30, 75);
-      bezierVertex(50, 80, 60, 25, 30, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A crescent moon shape drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');
-    }
-
-    function draw() {
-      background('midnightblue');
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the moons.
-      noStroke();
-      fill('lemonchiffon');
-
-      // Draw the first moon.
-      beginShape();
-      vertex(-20, -30, 0);
-      bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);
-      bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);
-      endShape();
-
-      // Draw the second moon.
-      beginShape();
-      vertex(-20, -30, -20);
-      bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);
-      bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 543
-    params:
-      - name: x2
-        description: |
-          <p>x-coordinate of the first control point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the second control point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>x-coordinate of the anchor point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>y-coordinate of the anchor point.</p>
-        type: Number
-    chainable: 1
-  - line: 792
-    params:
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>z-coordinate of the anchor point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# bezierVertex
diff --git a/src/content/reference/en/p5 copy/blend.mdx b/src/content/reference/en/p5 copy/blend.mdx
deleted file mode 100644
index 53e9a94dc9..0000000000
--- a/src/content/reference/en/p5 copy/blend.mdx	
+++ /dev/null
@@ -1,214 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L148
-title: blend
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Copies a region of pixels from one image to another.</p>
-
-  <p>The first parameter, <code>srcImage</code>, is the
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
-
-  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-  <code>sw</code>, and <code>sh</code> determine the region
-
-  to blend from the source image. <code>(sx, sy)</code> is the top-left corner
-  of the
-
-  region. <code>sw</code> and <code>sh</code> are the regions width and
-  height.</p>
-
-  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-  <code>dw</code>, and <code>dh</code> determine the region
-
-  of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of
-  the
-
-  region. <code>dw</code> and <code>dh</code> are the regions width and
-  height.</p>
-
-  <p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend
-  the images'
-
-  colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
-  <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
-
-  <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
-  <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
-
-  <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
-  <code>ADD</code>, or <code>NORMAL</code></p>
-line: 148
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img0;
-    let img1;
-
-    // Load the images.
-    function preload() {
-      img0 = loadImage('/assets/rockies.jpg');
-      img1 = loadImage('/assets/bricks_third.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img0);
-
-      // Display the bricks.
-      image(img1, 0, 0);
-
-      // Display the bricks faded into the landscape.
-      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
-
-      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img0;
-    let img1;
-
-    // Load the images.
-    function preload() {
-      img0 = loadImage('/assets/rockies.jpg');
-      img1 = loadImage('/assets/bricks_third.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img0);
-
-      // Display the bricks.
-      image(img1, 0, 0);
-
-      // Display the bricks partially transparent.
-      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
-
-      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img0;
-    let img1;
-
-    // Load the images.
-    function preload() {
-      img0 = loadImage('/assets/rockies.jpg');
-      img1 = loadImage('/assets/bricks_third.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img0);
-
-      // Display the bricks.
-      image(img1, 0, 0);
-
-      // Display the bricks washed out into the landscape.
-      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
-
-      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 148
-    params:
-      - name: srcImage
-        description: |
-          <p>source image.</p>
-        type: p5.Image
-      - name: sx
-        description: |
-          <p>x-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sy
-        description: |
-          <p>y-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sw
-        description: |
-          <p>source image width.</p>
-        type: Integer
-      - name: sh
-        description: |
-          <p>source image height.</p>
-        type: Integer
-      - name: dx
-        description: |
-          <p>x-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dy
-        description: |
-          <p>y-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dw
-        description: |
-          <p>destination image width.</p>
-        type: Integer
-      - name: dh
-        description: |
-          <p>destination image height.</p>
-        type: Integer
-      - name: blendMode
-        description: |
-          <p>the blend mode. either
-              BLEND, DARKEST, LIGHTEST, DIFFERENCE,
-              MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
-              SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
-        type: Constant
-  - line: 267
-    params:
-      - name: sx
-        description: ''
-        type: Integer
-      - name: sy
-        description: ''
-        type: Integer
-      - name: sw
-        description: ''
-        type: Integer
-      - name: sh
-        description: ''
-        type: Integer
-      - name: dx
-        description: ''
-        type: Integer
-      - name: dy
-        description: ''
-        type: Integer
-      - name: dw
-        description: ''
-        type: Integer
-      - name: dh
-        description: ''
-        type: Integer
-      - name: blendMode
-        description: ''
-        type: Constant
-chainable: false
----
-
-
-# blend
diff --git a/src/content/reference/en/p5 copy/blendMode.mdx b/src/content/reference/en/p5 copy/blendMode.mdx
deleted file mode 100644
index 8f6365b78d..0000000000
--- a/src/content/reference/en/p5 copy/blendMode.mdx	
+++ /dev/null
@@ -1,541 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L720
-title: blendMode
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Sets the way colors blend when added to the canvas.</p>
-
-  <p>By default, drawing with a solid color paints over the current pixel values
-
-  on the canvas. <code>blendMode()</code> offers many options for blending
-  colors.</p>
-
-  <p>Shapes, images, and text can be used as sources for drawing to the canvas.
-
-  A source pixel changes the color of the canvas pixel where it's drawn. The
-
-  final color results from blending the source pixel's color with the canvas
-
-  pixel's color. RGB color values from the source and canvas pixels are
-
-  compared, added, subtracted, multiplied, and divided to create different
-
-  effects. Red values with red values, greens with greens, and blues with
-
-  blues.</p>
-
-  <p>The parameter, <code>mode</code>, sets the blend mode. For example, calling
-
-  <code>blendMode(ADD)</code> sets the blend mode to <code>ADD</code>. The
-  following blend modes
-
-  are available in both 2D and WebGL mode:</p>
-
-  <ul>
-
-  <li><code>BLEND</code>: color values from the source overwrite the canvas.
-  This is the default mode.</li>
-
-  <li><code>ADD</code>: color values from the source are added to values from
-  the canvas.</li>
-
-  <li><code>DARKEST</code>: keeps the darkest color value.</li>
-
-  <li><code>LIGHTEST</code>: keeps the lightest color value.</li>
-
-  <li><code>EXCLUSION</code>: similar to <code>DIFFERENCE</code> but with less
-  contrast.</li>
-
-  <li><code>MULTIPLY</code>: color values from the source are multiplied with
-  values from the canvas. The result is always darker.</li>
-
-  <li><code>SCREEN</code>: all color values are inverted, then multiplied, then
-  inverted again. The result is always lighter. (Opposite of
-  <code>MULTIPLY</code>)</li>
-
-  <li><code>REPLACE</code>: the last source drawn completely replaces the rest
-  of the canvas.</li>
-
-  <li><code>REMOVE</code>: overlapping pixels are removed by making them
-  completely transparent.</li>
-
-  </ul>
-
-  <p>The following blend modes are only available in 2D mode:</p>
-
-  <ul>
-
-  <li><code>DIFFERENCE</code>: color values from the source are subtracted from
-  the values from the canvas. If the difference is a negative number, it's made
-  positive.</li>
-
-  <li><code>OVERLAY</code>: combines <code>MULTIPLY</code> and
-  <code>SCREEN</code>. Dark values in the canvas get darker and light values get
-  lighter.</li>
-
-  <li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code> and
-  <code>SCREEN</code>. Dark values in the source get darker and light values get
-  lighter.</li>
-
-  <li><code>SOFT_LIGHT</code>: a softer version of <code>HARD_LIGHT</code>.</li>
-
-  <li><code>DODGE</code>: lightens light tones and increases contrast. Divides
-  the canvas color values by the inverted color values from the source.</li>
-
-  <li><code>BURN</code>: darkens dark tones and increases contrast. Divides the
-  source color values by the inverted color values from the canvas, then inverts
-  the result.</li>
-
-  </ul>
-
-  <p>The following blend modes are only available in WebGL mode:</p>
-
-  <ul>
-
-  <li><code>SUBTRACT</code>: RGB values from the source are subtracted from the
-  values from the canvas. If the difference is a negative number, it's made
-  positive. Alpha (transparency) values from the source and canvas are
-  added.</li>
-
-  </ul>
-line: 720
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Use the default blend mode.
-      blendMode(BLEND);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A Sky Blue line and a Deep Rose line form an X on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(HARD_LIGHT);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(ADD);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(DARKEST);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(BURN);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(LIGHTEST);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(EXCLUSION);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(MULTIPLY);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(SCREEN);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(REPLACE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A diagonal deep rose line.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(REMOVE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('The silhouette of an X is missing from a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(DIFFERENCE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(OVERLAY);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(SOFT_LIGHT);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(DODGE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create a canvas with WEBGL mode.
-      createCanvas(100, 100, WEBGL);
-
-      // Set the background color.
-      background(180);
-
-      // Set the blend mode to SUBTRACT.
-      blendMode(SUBTRACT);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the blue line.
-      stroke('#1a85ff');
-      line(-25, -25, 25, 25);
-
-      // Draw the red line.
-      stroke('#d41159');
-      line(25, -25, -25, 25);
-
-      describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>blend mode to set.
-                     either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
-                     EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
-                     SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT</p>
-    type: Constant
-chainable: false
----
-
-
-# blendMode
diff --git a/src/content/reference/en/p5 copy/blue.mdx b/src/content/reference/en/p5 copy/blue.mdx
deleted file mode 100644
index d3e05aae37..0000000000
--- a/src/content/reference/en/p5 copy/blue.mdx	
+++ /dev/null
@@ -1,158 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L117
-title: blue
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the blue value of a color.</p>
-
-  <p><code>blue()</code> extracts the blue value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>blue()</code> returns a color's blue value in the range 0
-
-  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  RGB, it
-
-  returns the blue value in the given range.</p>
-line: 117
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(175, 100, 220);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 220.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [175, 100, 220];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 220.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgb(175, 100, 220)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 220.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(69, 39, 86);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 86.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the blue value.
-  type: Number
-chainable: false
----
-
-
-# blue
diff --git a/src/content/reference/en/p5 copy/boolean.mdx b/src/content/reference/en/p5 copy/boolean.mdx
deleted file mode 100644
index 8eab48af5f..0000000000
--- a/src/content/reference/en/p5 copy/boolean.mdx	
+++ /dev/null
@@ -1,157 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L341
-title: boolean
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>String</code> or <code>Number</code> to a
-  <code>Boolean</code>.</p>
-
-  <p><code>boolean()</code> converts values to <code>true</code> or
-  <code>false</code>.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a string, then
-
-  <code>boolean('true')</code> will return <code>true</code> and every other
-  string value will
-
-  return <code>false</code>. If <code>n</code> is a number, then
-  <code>boolean(0)</code> will return <code>false</code>
-
-  and every other numeric value will return <code>true</code>. If an array is
-  passed, as
-
-  <code>in boolean([0, 1, 'true', 'blue'])</code>, then an array of Boolean
-  values will
-
-  be returned.</p>
-line: 341
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 0;
-
-      // Convert the number to a Boolean value.
-      let converted = boolean(original);
-
-      // Style the circle based on the converted value.
-      if (converted === true) {
-        fill('blue');
-      } else {
-        fill('red');
-      }
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A red circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = 'true';
-
-      // Convert the string to a Boolean value.
-      let converted = boolean(original);
-
-      // Style the circle based on the converted value.
-      if (converted === true) {
-        fill('blue');
-      } else {
-        fill('red');
-      }
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A blue circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of values.
-      let original = [0, 'hi', 123, 'true'];
-
-      // Convert the array to a Boolean values.
-      let converted = boolean(original);
-
-      // Iterate over the array of converted Boolean values.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Style the circle based on the converted value.
-        if (converted[i] === true) {
-          fill('blue');
-        } else {
-          fill('red');
-        }
-
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 20;
-
-        // Draw the circle.
-        circle(x, 50, 15);
-      }
-
-      describe(
-        'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted Boolean value.
-  type: Boolean
-overloads:
-  - line: 341
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Boolean|Number
-    return:
-      description: converted Boolean value.
-      type: Boolean
-  - line: 451
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted Boolean values.
-      type: 'Boolean[]'
-chainable: false
----
-
-
-# boolean
diff --git a/src/content/reference/en/p5 copy/box.mdx b/src/content/reference/en/p5 copy/box.mdx
deleted file mode 100644
index a4f5282947..0000000000
--- a/src/content/reference/en/p5 copy/box.mdx	
+++ /dev/null
@@ -1,186 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1009
-title: box
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a box (rectangular prism).</p>
-
-  <p>A box is a 3D shape with six faces. Each face makes a 90˚ with four
-
-  neighboring faces.</p>
-
-  <p>The first parameter, <code>width</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>box(20)</code>, it sets the box’s width and height. By default,
-  <code>width</code> is 50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>box(20, 30)</code>, it sets the box’s height. By default,
-  <code>height</code> is set
-
-  to the box’s <code>width</code>.</p>
-
-  <p>The third parameter, <code>depth</code>, is also optional. If a
-  <code>Number</code> is passed, as
-
-  in <code>box(20, 30, 40)</code>, it sets the box’s depth. By default,
-  <code>depth</code> is set
-
-  to the box’s <code>height</code>.</p>
-
-  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>box(20, 30, 40, 5)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the x-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailX</code> is 1.</p>
-
-  <p>The fifth parameter, <code>detailY</code>, is also optional. If a number is
-  passed, as
-
-  in <code>box(20, 30, 40, 5, 7)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailY</code> is 1.</p>
-
-  <p>Note: <code>box()</code> can only be used in WebGL mode.</p>
-line: 1009
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      // Set its width and height to 30.
-      box(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      // Set its width to 30 and height to 50.
-      box(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      // Set its width to 30, height to 50, and depth to 10.
-      box(30, 50, 10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width of the box.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: |
-      <p>height of the box.</p>
-    type: Number
-    optional: true
-  - name: depth
-    description: |
-      <p>depth of the box.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# box
diff --git a/src/content/reference/en/p5 copy/brightness.mdx b/src/content/reference/en/p5 copy/brightness.mdx
deleted file mode 100644
index 2860cbf226..0000000000
--- a/src/content/reference/en/p5 copy/brightness.mdx	
+++ /dev/null
@@ -1,168 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L253
-title: brightness
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the brightness value of a color.</p>
-
-  <p><code>brightness()</code> extracts the HSB brightness value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>brightness()</code> returns a color's HSB brightness in
-  the range 0
-
-  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  HSB, it
-
-  returns the brightness value in the given range.</p>
-line: 253
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a p5.Color object.
-      let c = color(0, 50, 100);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 100.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a color array.
-      let c = [0, 50, 100];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 100.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 100.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color with values in the range 0-255.
-      colorMode(HSB, 255);
-
-      // Create a p5.Color object.
-      let c = color(0, 127, 255);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 255.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the brightness value.
-  type: Number
-chainable: false
----
-
-
-# brightness
diff --git a/src/content/reference/en/p5 copy/buildGeometry.mdx b/src/content/reference/en/p5 copy/buildGeometry.mdx
deleted file mode 100644
index ef58d7b650..0000000000
--- a/src/content/reference/en/p5 copy/buildGeometry.mdx	
+++ /dev/null
@@ -1,263 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L520
-title: buildGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Creates a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object
-  from
-
-  simpler 3D shapes.</p>
-
-  <p><code>buildGeometry()</code> helps with creating complex 3D shapes from
-  simpler ones
-
-  such as <a href="/reference/p5/sphere/">sphere()</a>. It can help to make
-  sketches
-
-  more performant. For example, if a complex 3D shape doesn’t change while a
-
-  sketch runs, then it can be created with <code>buildGeometry()</code>.
-  Creating a
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and then
-  drawing it
-
-  will run faster than repeatedly drawing the individual pieces.</p>
-
-  <p>The parameter, <code>callback</code>, is a function with the drawing
-  instructions for
-
-  the new <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object. It will be
-  called
-
-  once to create the new 3D shape.</p>
-
-  <p>See <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a> for another way to
-  build 3D
-
-  shapes.</p>
-
-  <p>Note: <code>buildGeometry()</code> can only be used in WebGL mode.</p>
-line: 520
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createShape);
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    // Create p5.Geometry object from a single cone.
-    function createShape() {
-      cone();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the arrow.
-      shape = buildGeometry(createArrow);
-
-      describe('A white arrow drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrow.
-      noStroke();
-
-      // Draw the arrow.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createArrow);
-
-      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the p5.Geometry object again.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-
-      describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = buildGeometry(createParticles);
-    }
-
-    function createParticles() {
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: callback
-    description: |
-      <p>function that draws the shape.</p>
-    type: Function
-return:
-  description: new 3D shape.
-  type: p5.Geometry
-chainable: false
----
-
-
-# buildGeometry
diff --git a/src/content/reference/en/p5 copy/byte.mdx b/src/content/reference/en/p5 copy/byte.mdx
deleted file mode 100644
index 0a6f3234a4..0000000000
--- a/src/content/reference/en/p5 copy/byte.mdx	
+++ /dev/null
@@ -1,180 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L468
-title: byte
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Boolean</code>, <code>String</code>, or
-  <code>Number</code> to its byte value.</p>
-
-  <p><code>byte()</code> converts a value to an integer (whole number) between
-  -128 and
-
-  127. Values greater than 127 wrap around while negative values are
-
-  unchanged. For example, 128 becomes -128 and -129 remains the same.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a Boolean, as in
-
-  <code>byte(false)</code> or <code>byte(true)</code>, the number 0
-  (<code>false</code>) or 1 (<code>true</code>) will be
-
-  returned. If <code>n</code> is a string or number, as in
-  <code>byte('256')</code> or <code>byte(256)</code>,
-
-  then the byte value will be returned. Decimal values are ignored. If an
-
-  array is passed, as in <code>byte([true, 123, '456'])</code>, then an array of
-  byte
-
-  values will be returned.</p>
-
-  <p>Note: If a value can't be converted to a number, as in
-  <code>byte('giraffe')</code>,
-
-  then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 468
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a Boolean variable.
-      let original = true;
-
-      // Convert the Boolean to its byte value.
-      let converted = byte(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "true : 1" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '256';
-
-      // Convert the string to its byte value.
-      let converted = byte(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "256 : 0" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 256;
-
-      // Convert the number to its byte value.
-      let converted = byte(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "256 : 0" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of values.
-      let original = [false, '64', 383];
-
-      // Convert the array elements to their byte values.
-      let converted = byte(original);
-
-      // Iterate over the converted array elements.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Style the circle.
-        fill(converted[i]);
-
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 25;
-
-        // Draw the circle.
-        circle(x, 50, 20);
-      }
-
-      describe(
-        'Three gray circles on a gray background. The circles get lighter from left to right.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted byte value.
-  type: Number
-overloads:
-  - line: 468
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Boolean|Number
-    return:
-      description: converted byte value.
-      type: Number
-  - line: 598
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted byte values.
-      type: 'Number[]'
-chainable: false
----
-
-
-# byte
diff --git a/src/content/reference/en/p5 copy/camera.mdx b/src/content/reference/en/p5 copy/camera.mdx
deleted file mode 100644
index 55f983385e..0000000000
--- a/src/content/reference/en/p5 copy/camera.mdx	
+++ /dev/null
@@ -1,200 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L13
-title: camera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets the position and orientation of the current camera in a 3D sketch.</p>
-
-  <p><code>camera()</code> allows objects to be viewed from different angles. It
-  has nine
-
-  parameters that are all optional.</p>
-
-  <p>The first three parameters, <code>x</code>, <code>y</code>, and
-  <code>z</code>, are the coordinates of the
-
-  camera’s position. For example, calling <code>camera(0, 0, 0)</code> places
-  the camera
-
-  at the origin <code>(0, 0, 0)</code>. By default, the camera is placed at
-
-  <code>(0, 0, 800)</code>.</p>
-
-  <p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and
-  <code>centerZ</code> are the
-
-  coordinates of the point where the camera faces. For example, calling
-
-  <code>camera(0, 0, 0, 10, 20, 30)</code> places the camera at the origin
-  <code>(0, 0, 0)</code>
-
-  and points it at <code>(10, 20, 30)</code>. By default, the camera points at
-  the
-
-  origin <code>(0, 0, 0)</code>.</p>
-
-  <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
-  <code>upZ</code> are the components of
-
-  the "up" vector. The "up" vector orients the camera’s y-axis. For example,
-
-  calling <code>camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera
-  at the
-
-  origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
-  sets the "up" vector
-
-  to <code>(0, -1, 0)</code> which is like holding it upside-down. By default,
-  the "up"
-
-  vector is <code>(0, 1, 0)</code>.</p>
-
-  <p>Note: <code>camera()</code> can only be used in WebGL mode.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Move the camera to the top-right.
-      camera(200, -400, 800);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube apperas to sway left and right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the camera's x-coordinate.
-      let x = 400 * cos(frameCount * 0.01);
-
-      // Orbit the camera around the box.
-      camera(x, -400, 800);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Adjust the range sliders to change the camera's position.
-
-    let xSlider;
-    let ySlider;
-    let zSlider;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create slider objects to set the camera's coordinates.
-      xSlider = createSlider(-400, 400, 400);
-      xSlider.position(0, 100);
-      xSlider.size(100);
-      ySlider = createSlider(-400, 400, -200);
-      ySlider.position(0, 120);
-      ySlider.size(100);
-      zSlider = createSlider(0, 1600, 800);
-      zSlider.position(0, 140);
-      zSlider.size(100);
-
-      describe(
-        'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Get the camera's coordinates from the sliders.
-      let x = xSlider.value();
-      let y = ySlider.value();
-      let z = zSlider.value();
-
-      // Move the camera.
-      camera(x, y, z);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the camera. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the camera. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z-coordinate of the camera. Defaults to 800.</p>
-    type: Number
-    optional: true
-  - name: centerX
-    description: |
-      <p>x-coordinate of the point the camera faces. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: centerY
-    description: |
-      <p>y-coordinate of the point the camera faces. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: centerZ
-    description: |
-      <p>z-coordinate of the point the camera faces. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: upX
-    description: |
-      <p>x-component of the camera’s "up" vector. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: upY
-    description: |
-      <p>y-component of the camera’s "up" vector. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: upZ
-    description: |
-      <p>z-component of the camera’s "up" vector. Defaults to 0.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# camera
diff --git a/src/content/reference/en/p5 copy/ceil.mdx b/src/content/reference/en/p5 copy/ceil.mdx
deleted file mode 100644
index 45c17468bf..0000000000
--- a/src/content/reference/en/p5 copy/ceil.mdx	
+++ /dev/null
@@ -1,65 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L48
-title: ceil
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the closest integer value that is greater than or equal to a
-
-  number.</p>
-
-  <p>For example, calling <code>ceil(9.03)</code> and <code>ceil(9.97)</code>
-  both return the value
-
-  10.</p>
-line: 48
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values from 0 to 1.
-      colorMode(RGB, 1);
-
-      noStroke();
-
-      // Draw the left rectangle.
-      let r = 0.3;
-      fill(r, 0, 0);
-      rect(0, 0, 50, 100);
-
-      // Round r up to 1.
-      r = ceil(r);
-
-      // Draw the right rectangle.
-      fill(r, 0, 0);
-      rect(50, 0, 50, 100);
-
-      describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to round up.</p>
-    type: Number
-return:
-  description: rounded up number.
-  type: Integer
-chainable: false
----
-
-
-# ceil
diff --git a/src/content/reference/en/p5 copy/changed.mdx b/src/content/reference/en/p5 copy/changed.mdx
deleted file mode 100644
index 45289630e9..0000000000
--- a/src/content/reference/en/p5 copy/changed.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L330
-title: changed
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: |
-  <p>Calls a function when the element changes.</p>
-  <p>Calling <code>myElement.changed(false)</code> disables the function.</p>
-line: 330
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let dropdown;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a dropdown menu and add a few color options.
-      dropdown = createSelect();
-      dropdown.position(0, 0);
-      dropdown.option('red');
-      dropdown.option('green');
-      dropdown.option('blue');
-
-      // Call paintBackground() when the color option changes.
-      dropdown.changed(paintBackground);
-
-      describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');
-    }
-
-    // Paint the background with the selected color.
-    function paintBackground() {
-      let c = dropdown.value();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a checkbox and place it beneath the canvas.
-      checkbox = createCheckbox(' circle');
-      checkbox.position(0, 100);
-
-      // Call repaint() when the checkbox changes.
-      checkbox.changed(repaint);
-
-      describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.');
-    }
-
-    // Paint the background gray and determine whether to draw a circle.
-    function repaint() {
-      background(200);
-      if (checkbox.checked() === true) {
-        circle(50, 50, 30);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fxn
-    description: |
-      <p>function to call when the element changes.
-                                     <code>false</code> disables the function.</p>
-    type: Function|Boolean
-chainable: true
----
-
-
-# changed
diff --git a/src/content/reference/en/p5 copy/char.mdx b/src/content/reference/en/p5 copy/char.mdx
deleted file mode 100644
index e01e22a9f7..0000000000
--- a/src/content/reference/en/p5 copy/char.mdx	
+++ /dev/null
@@ -1,152 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L612
-title: char
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Number</code> or <code>String</code> to a single-character
-  <code>String</code>.</p>
-
-  <p><code>char()</code> converts numbers to their single-character string
-  representations.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If a number is
-  passed, as in
-
-  <code>char(65)</code>, the corresponding single-character string is returned.
-  If a
-
-  string is passed, as in <code>char('65')</code>, the string is converted to an
-  integer
-
-  (whole number) and the corresponding single-character string is returned.
-
-  If an array is passed, as in <code>char([65, 66, 67])</code>, an array of
-
-  single-character strings is returned.</p>
-
-  <p>See <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode/"
-  target="_blank">MDN</a>
-
-  for more information about conversions.</p>
-line: 612
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 65;
-
-      // Convert the number to a char.
-      let converted = char(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "65 : A" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '65';
-
-      // Convert the string to a char.
-      let converted = char(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "65 : A" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = ['65', 66, '67'];
-
-      // Convert the string to a char.
-      let converted = char(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Iterate over elements of the converted array.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${original[i]} : ${converted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "65 : A", "66 : B", and "67 : C" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted single-character string.
-  type: String
-overloads:
-  - line: 612
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Number
-    return:
-      description: converted single-character string.
-      type: String
-  - line: 716
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted single-character strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# char
diff --git a/src/content/reference/en/p5 copy/circle.mdx b/src/content/reference/en/p5 copy/circle.mdx
deleted file mode 100644
index 46069bea74..0000000000
--- a/src/content/reference/en/p5 copy/circle.mdx	
+++ /dev/null
@@ -1,77 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L488
-title: circle
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a circle.</p>
-
-  <p>A circle is a round shape defined by the <code>x</code>, <code>y</code>,
-  and <code>d</code> parameters.
-
-  <code>x</code> and <code>y</code> set the location of its center.
-  <code>d</code> sets its width and height (diameter).
-
-  Every point on the circle's edge is the same distance, <code>0.5 * d</code>,
-  from its center.
-
-  <code>0.5 * d</code> (half the diameter) is the circle's radius.
-
-  See <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to
-  set its position.</p>
-line: 488
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      circle(50, 50, 25);
-
-      describe('A white circle with black outline in the middle of a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      circle(0, 0, 25);
-
-      describe('A white circle with black outline in the middle of a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the center of the circle.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the center of the circle.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>diameter of the circle.</p>
-    type: Number
-chainable: true
----
-
-
-# circle
diff --git a/src/content/reference/en/p5 copy/class.mdx b/src/content/reference/en/p5 copy/class.mdx
deleted file mode 100644
index 94b64b75c2..0000000000
--- a/src/content/reference/en/p5 copy/class.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1329
-title: class
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);\n</code></pre>\n<p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n</code></pre>\n<p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n  constructor(x, y, size) {\n    // This code runs once when an instance is created.\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    // This code runs once when myFrog.show() is called.\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    // This code runs once when myFrog.hop() is called.\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n}\n</code></pre>\n<p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();\n</code></pre>\n"
-line: 1329
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variable a new Frog object.\n  fifi = new Frog(50, 50, 20);\n\n  describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frog.\n  fifi.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n\n  // Move the frogs.\n  frog1.hop();\n  frog2.hop();\n\n  // Wrap around if they've hopped off the edge.\n  frog1.checkEdges();\n  frog2.checkEdges();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Add Frog objects to the array.\n  for (let i = 0; i < 5; i += 1) {\n    // Calculate random coordinates and size.\n    let x = random(0, 100);\n    let y = random(0, 100);\n    let s = random(2, 20);\n\n    // Create a new Frog object.\n    let frog = new Frog(x, y, s);\n\n    // Add the Frog to the array.\n    frogs.push(frog);\n  }\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe(\n    'Five frog faces on a blue background. The frogs hop around randomly.'\n  );\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  for (let frog of frogs) {\n    // Show the frog.\n    frog.show();\n\n    // Move the frog.\n    frog.hop();\n\n    // Wrap around if they've hopped off the edge.\n    frog.checkEdges();\n  }\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>"
-class: p5
----
-
-
-# class
diff --git a/src/content/reference/en/p5 copy/clear.mdx b/src/content/reference/en/p5 copy/clear.mdx
deleted file mode 100644
index a096184afc..0000000000
--- a/src/content/reference/en/p5 copy/clear.mdx	
+++ /dev/null
@@ -1,108 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L673
-title: clear
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Clears the pixels on the canvas.</p>
-
-  <p><code>clear()</code> makes every pixel 100% transparent. Calling
-  <code>clear()</code> doesn't
-
-  clear objects created by <code>createX()</code> functions such as
-
-  <a href="/reference/p5/createGraphics/">createGraphics()</a>,
-
-  <a href="/reference/p5/createVideo/">createVideo()</a>, and
-
-  <a href="/reference/p5/createImg/">createImg()</a>. These objects will remain
-
-  unchanged after calling <code>clear()</code> and can be redrawn.</p>
-
-  <p>In WebGL mode, this function can clear the screen to a specific color. It
-
-  interprets four numeric parameters as normalized RGBA color values. It also
-
-  clears the depth buffer. If you are not using the WebGL renderer, these
-
-  parameters will have no effect.</p>
-line: 673
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');
-    }
-
-    function draw() {
-      circle(mouseX, mouseY, 20);
-    }
-
-    function mousePressed() {
-      clear();
-      background(200);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-
-      pg = createGraphics(60, 60);
-      pg.background(200);
-      pg.noStroke();
-      pg.circle(pg.width / 2, pg.height / 2, 15);
-      image(pg, 20, 20);
-
-      describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
-    }
-
-    function mousePressed() {
-      clear();
-      image(pg, 20, 20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: r
-    description: |
-      <p>normalized red value.</p>
-    type: Number
-    optional: true
-  - name: g
-    description: |
-      <p>normalized green value.</p>
-    type: Number
-    optional: true
-  - name: b
-    description: |
-      <p>normalized blue value.</p>
-    type: Number
-    optional: true
-  - name: a
-    description: |
-      <p>normalized alpha value.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# clear
diff --git a/src/content/reference/en/p5 copy/clearDepth.mdx b/src/content/reference/en/p5 copy/clearDepth.mdx
deleted file mode 100644
index 25425d1920..0000000000
--- a/src/content/reference/en/p5 copy/clearDepth.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L635
-title: clearDepth
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Clears the depth buffer in WebGL mode.</p>
-
-  <p><code>clearDepth()</code> clears information about how far objects are from
-  the camera
-
-  in 3D space. This information is stored in an object called the
-
-  <em>depth buffer</em>. Clearing the depth buffer ensures new objects aren't
-  drawn
-
-  behind old ones. Doing so can be useful for feedback effects in which the
-
-  previous frame serves as the background for the current frame.</p>
-
-  <p>The parameter, <code>depth</code>, is optional. If a number is passed, as
-  in
-
-  <code>clearDepth(0.5)</code>, it determines the range of objects to clear from
-  the
-
-  depth buffer. 0 doesn't clear any depth information, 0.5 clears depth
-
-  information halfway between the near and far clipping planes, and 1 clears
-
-  depth information all the way to the far clipping plane. By default,
-
-  <code>depth</code> is 1.</p>
-
-  <p>Note: <code>clearDepth()</code> can only be used in WebGL mode.</p>
-line: 635
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let previous;
-    let current;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Framebuffer objects.
-      previous = createFramebuffer({ format: FLOAT });
-      current = createFramebuffer({ format: FLOAT });
-
-      describe(
-        'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'
-      );
-    }
-
-    function draw() {
-      // Swap the previous p5.Framebuffer and the
-      // current one so it can be used as a texture.
-      [previous, current] = [current, previous];
-
-      // Start drawing to the current p5.Framebuffer.
-      current.begin();
-
-      // Paint the background.
-      background(255);
-
-      // Draw the previous p5.Framebuffer.
-      // Clear the depth buffer so the previous
-      // frame doesn't block the current one.
-      push();
-      tint(255, 250);
-      image(previous, -50, -50);
-      clearDepth();
-      pop();
-
-      // Draw the box on top of the previous frame.
-      push();
-      let x = 25 * sin(frameCount * 0.01);
-      let y = 25 * sin(frameCount * 0.02);
-      translate(x, y, 0);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      normalMaterial();
-      box(12);
-      pop();
-
-      // Stop drawing to the current p5.Framebuffer.
-      current.end();
-
-      // Display the current p5.Framebuffer.
-      image(current, -50, -50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: depth
-    description: |
-      <p>amount of the depth buffer to clear between 0
-                              (none) and 1 (far clipping plane). Defaults to 1.</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# clearDepth
diff --git a/src/content/reference/en/p5 copy/clearStorage.mdx b/src/content/reference/en/p5 copy/clearStorage.mdx
deleted file mode 100644
index d2c89e63bf..0000000000
--- a/src/content/reference/en/p5 copy/clearStorage.mdx	
+++ /dev/null
@@ -1,81 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L313
-title: clearStorage
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Removes all items in the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs. Calling <code>clearStorage()</code> removes all data from
-  <code>localStorage</code>.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 313
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to clear localStorage.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe(
-        'The text "Feist: 1234" written in black on a gray background. The text "null: null" appears when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-
-    // Clear localStorage when the user double-clicks.
-    function doubleClicked() {
-      clearStorage();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# clearStorage
diff --git a/src/content/reference/en/p5 copy/clip.mdx b/src/content/reference/en/p5 copy/clip.mdx
deleted file mode 100644
index ae72687f03..0000000000
--- a/src/content/reference/en/p5 copy/clip.mdx	
+++ /dev/null
@@ -1,225 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L222
-title: clip
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Defines a shape that will mask any shapes drawn afterward.</p>
-
-  <p>The first parameter, <code>callback</code>, is a function that defines the
-  mask.
-
-  Any shapes drawn in  <code>callback</code> will add to the mask shape. The
-  mask
-
-  will apply to anything drawn after <code>clip()</code> is called.</p>
-
-  <p>The second parameter, <code>options</code>, is optional. If an object with
-  an <code>invert</code>
-
-  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
-  used to
-
-  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
-  holes
-
-  in shapes that are masked. <code>invert</code> is <code>false</code> by
-  default.</p>
-
-  <p>Masks can be contained between the
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions.
-
-  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
-
-  <p>Masks can also be defined with <a
-  href="/reference/p5/beginClip/">beginClip()</a>
-
-  and <a href="/reference/p5/endClip/">endClip()</a>.</p>
-line: 222
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white triangle and circle on a gray background.');
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an inverted mask.
-      clip(mask, { invert: true });
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      noStroke();
-
-      // Draw a masked shape.
-      push();
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw an inverted masked shape.
-      push();
-      // Create an inverted mask.
-      clip(mask, { invert: true });
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored fuchsia.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      noStroke();
-      fill('fuchsia');
-      plane(100);
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      noStroke();
-      beginShape(QUAD_STRIP);
-      fill(0, 255, 255);
-      vertex(-width / 2, -height / 2);
-      vertex(width / 2, -height / 2);
-      fill(100, 0, 100);
-      vertex(-width / 2, height / 2);
-      vertex(width / 2, height / 2);
-      endShape();
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: callback
-    description: |
-      <p>a function that draws the mask shape.</p>
-    type: Function
-  - name: options
-    description: |
-      <p>an object containing clip settings.</p>
-    type: Object
-    optional: true
-chainable: false
----
-
-
-# clip
diff --git a/src/content/reference/en/p5 copy/color.mdx b/src/content/reference/en/p5 copy/color.mdx
deleted file mode 100644
index ad2bdbd8da..0000000000
--- a/src/content/reference/en/p5 copy/color.mdx	
+++ /dev/null
@@ -1,349 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L398
-title: color
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Creates a <a href="/reference/p5/p5.Color">p5.Color</a> object.</p>
-
-  <p>By default, the parameters are interpreted as RGB values. Calling
-
-  <code>color(255, 204, 0)</code> will return a bright yellow color. The way
-  these
-
-  parameters are interpreted may be changed with the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
-
-  <p>The version of <code>color()</code> with one parameter interprets the value
-  one of two
-
-  ways. If the parameter is a number, it's interpreted as a grayscale value.
-
-  If the parameter is a string, it's interpreted as a CSS color string.</p>
-
-  <p>The version of <code>color()</code> with two parameters interprets the
-  first one as a
-
-  grayscale value. The second parameter sets the alpha (transparency) value.</p>
-
-  <p>The version of <code>color()</code> with three parameters interprets them
-  as RGB, HSB,
-
-  or HSL colors, depending on the current <code>colorMode()</code>.</p>
-
-  <p>The version of <code>color()</code> with four parameters interprets them as
-  RGBA, HSBA,
-
-  or HSLA colors, depending on the current <code>colorMode()</code>. The last
-  parameter
-
-  sets the alpha (transparency) value.</p>
-line: 398
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(255, 204, 0);
-
-      // Draw the square.
-      fill(c);
-      noStroke();
-      square(30, 20, 55);
-
-      describe('A yellow square on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c1 = color(255, 204, 0);
-
-      // Draw the left circle.
-      fill(c1);
-      noStroke();
-      circle(25, 25, 80);
-
-      // Create a p5.Color object using a grayscale value.
-      let c2 = color(65);
-
-      // Draw the right circle.
-      fill(c2);
-      circle(75, 75, 80);
-
-      describe(
-        'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a named color.
-      let c = color('magenta');
-
-      // Draw the square.
-      fill(c);
-      noStroke();
-      square(20, 20, 60);
-
-      describe('A magenta square on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a hex color code.
-      let c1 = color('#0f0');
-
-      // Draw the left rectangle.
-      fill(c1);
-      noStroke();
-      rect(0, 10, 45, 80);
-
-      // Create a p5.Color object using a hex color code.
-      let c2 = color('#00ff00');
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two bright green rectangles on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a RGB color string.
-      let c1 = color('rgb(0, 0, 255)');
-
-      // Draw the top-left square.
-      fill(c1);
-      square(10, 10, 35);
-
-      // Create a p5.Color object using a RGB color string.
-      let c2 = color('rgb(0%, 0%, 100%)');
-
-      // Draw the top-right square.
-      fill(c2);
-      square(55, 10, 35);
-
-      // Create a p5.Color object using a RGBA color string.
-      let c3 = color('rgba(0, 0, 255, 1)');
-
-      // Draw the bottom-left square.
-      fill(c3);
-      square(10, 55, 35);
-
-      // Create a p5.Color object using a RGBA color string.
-      let c4 = color('rgba(0%, 0%, 100%, 1)');
-
-      // Draw the bottom-right square.
-      fill(c4);
-      square(55, 55, 35);
-
-      describe('Four blue squares in the corners of a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a HSL color string.
-      let c1 = color('hsl(160, 100%, 50%)');
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c1);
-      rect(0, 10, 45, 80);
-
-      // Create a p5.Color object using a HSLA color string.
-      let c2 = color('hsla(160, 100%, 50%, 0.5)');
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a HSB color string.
-      let c1 = color('hsb(160, 100%, 50%)');
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c1);
-      rect(0, 10, 45, 80);
-
-      // Create a p5.Color object using a HSBA color string.
-      let c2 = color('hsba(160, 100%, 50%, 0.5)');
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c1 = color(50, 55, 100);
-
-      // Draw the left rectangle.
-      fill(c1);
-      rect(0, 10, 45, 80);
-
-      // Switch the color mode to HSB.
-      colorMode(HSB, 100);
-
-      // Create a p5.Color object using HSB values.
-      let c2 = color(50, 55, 100);
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: resulting color.
-  type: p5.Color
-overloads:
-  - line: 398
-    params:
-      - name: gray
-        description: |
-          <p>number specifying value between white and black.</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha value relative to current color range
-                                          (default is 0-255).</p>
-        type: Number
-        optional: true
-    return:
-      description: resulting color.
-      type: p5.Color
-  - line: 652
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value relative to
-                                          the current color range.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value
-                                          relative to the current color range.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue or brightness value
-                                          relative to the current color range.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    return:
-      description: ''
-      type: p5.Color
-  - line: 664
-    params:
-      - name: value
-        description: |
-          <p>a color string.</p>
-        type: String
-    return:
-      description: ''
-      type: p5.Color
-  - line: 670
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue,
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    return:
-      description: ''
-      type: p5.Color
-  - line: 677
-    params:
-      - name: color
-        description: ''
-        type: p5.Color
-    return:
-      description: ''
-      type: p5.Color
-chainable: false
----
-
-
-# color
diff --git a/src/content/reference/en/p5 copy/colorMode.mdx b/src/content/reference/en/p5 copy/colorMode.mdx
deleted file mode 100644
index b4aca3c9ce..0000000000
--- a/src/content/reference/en/p5 copy/colorMode.mdx	
+++ /dev/null
@@ -1,271 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L751
-title: colorMode
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Changes the way color values are interpreted.</p>
-
-  <p>By default, the <code>Number</code> parameters for <a
-  href="/reference/p5/fill/">fill()</a>,
-
-  <a href="/reference/p5/stroke/">stroke()</a>,
-
-  <a href="/reference/p5/background/">background()</a>, and
-
-  <a href="/reference/p5/color/">color()</a> are defined by values between 0 and
-  255
-
-  using the RGB color model. This is equivalent to calling
-
-  <code>colorMode(RGB, 255)</code>. Pure red is <code>color(255, 0, 0)</code> in
-  this model.</p>
-
-  <p>Calling <code>colorMode(RGB, 100)</code> sets colors to use RGB color
-  values
-
-  between 0 and 100. Pure red is <code>color(100, 0, 0)</code> in this
-  model.</p>
-
-  <p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes
-  to HSB or HSL system
-
-  instead of RGB. Pure red is <code>color(0, 100, 100)</code> in HSB and
-
-  <code>color(0, 100, 50)</code> in HSL.</p>
-
-  <p><a href="/reference/p5/p5.Color">p5.Color</a> objects remember the mode
-  that they were
-
-  created in. Changing modes doesn't affect their appearance.</p>
-line: 751
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Fill with pure red.
-      fill(255, 0, 0);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Fill with pure red.
-      fill(100, 0, 0);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Fill with pure red.
-      fill(0, 100, 100);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Fill with pure red.
-      fill(0, 100, 50);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      for (let x = 0; x < 100; x += 1) {
-        for (let y = 0; y < 100; y += 1) {
-          stroke(x, y, 0);
-          point(x, y);
-        }
-      }
-
-      describe(
-        'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use HSB color with values in the range 0-100.
-      colorMode(HSB, 100);
-
-      for (let x = 0; x < 100; x += 1) {
-        for (let y = 0; y < 100; y += 1) {
-          stroke(x, y, 100);
-          point(x, y);
-        }
-      }
-
-      describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let myColor = color(180, 175, 230);
-      background(myColor);
-
-      // Use RGB color with values in the range 0-1.
-      colorMode(RGB, 1);
-
-      // Get the red, green, and blue color components.
-      let redValue = red(myColor);
-      let greenValue = green(myColor);
-      let blueValue = blue(myColor);
-
-      // Round the color components for display.
-      redValue = round(redValue, 2);
-      greenValue = round(greenValue, 2);
-      blueValue = round(blueValue, 2);
-
-      // Display the color components.
-      text(`Red: ${redValue}`, 10, 10, 80, 80);
-      text(`Green: ${greenValue}`, 10, 40, 80, 80);
-      text(`Blue: ${blueValue}`, 10, 70, 80, 80);
-
-      describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Use RGB color with alpha values in the range 0-1.
-      colorMode(RGB, 255, 255, 255, 1);
-
-      noFill();
-      strokeWeight(4);
-      stroke(255, 0, 10, 0.3);
-      circle(40, 40, 50);
-      circle(50, 60, 50);
-
-      describe('Two overlapping translucent pink circle outlines.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 751
-    params:
-      - name: mode
-        description: |
-          <p>either RGB, HSB or HSL, corresponding to
-                                   Red/Green/Blue and Hue/Saturation/Brightness
-                                   (or Lightness).</p>
-        type: Constant
-      - name: max
-        description: |
-          <p>range for all values.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 956
-    params:
-      - name: mode
-        description: ''
-        type: Constant
-      - name: max1
-        description: |
-          <p>range for the red or hue depending on the
-                                       current color mode.</p>
-        type: Number
-      - name: max2
-        description: |
-          <p>range for the green or saturation depending
-                                       on the current color mode.</p>
-        type: Number
-      - name: max3
-        description: |
-          <p>range for the blue or brightness/lightness
-                                       depending on the current color mode.</p>
-        type: Number
-      - name: maxA
-        description: |
-          <p>range for the alpha.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# colorMode
diff --git a/src/content/reference/en/p5 copy/concat.mdx b/src/content/reference/en/p5 copy/concat.mdx
deleted file mode 100644
index 1e83bf84c0..0000000000
--- a/src/content/reference/en/p5 copy/concat.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L112
-title: concat
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Concatenates two arrays, maps to Array.concat(). Does not modify the
-  input arrays.</p>
-line: 112
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat">arr1.concat(arr2)</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let arr1 = ['A', 'B', 'C'];
-      let arr2 = [1, 2, 3];
-
-      print(arr1); // ['A','B','C']
-      print(arr2); // [1,2,3]
-
-      let arr3 = concat(arr1, arr2);
-
-      print(arr1); // ['A','B','C']
-      print(arr2); // [1, 2, 3]
-      print(arr3); // ['A','B','C', 1, 2, 3]
-    }
-    </code></div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>first Array to concatenate</p>
-    type: Array
-  - name: b
-    description: |
-      <p>second Array to concatenate</p>
-    type: Array
-return:
-  description: concatenated array
-  type: Array
-chainable: false
----
-
-
-# concat
diff --git a/src/content/reference/en/p5 copy/cone.mdx b/src/content/reference/en/p5 copy/cone.mdx
deleted file mode 100644
index ff0756d0a5..0000000000
--- a/src/content/reference/en/p5 copy/cone.mdx	
+++ /dev/null
@@ -1,265 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1730
-title: cone
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a cone.</p>
-
-  <p>A cone is a 3D shape with triangular faces that connect a flat bottom to a
-
-  single point. Cones with few faces look like pyramids. Cones with many
-
-  faces have smooth surfaces.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>cone(20)</code>, it sets the radius of the cone’s base. By default,
-  <code>radius</code> is
-
-  50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cone(20, 30)</code>, it sets the cone’s height. By default,
-  <code>height</code> is
-
-  set to the cone’s <code>radius</code>.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cone(20, 30, 5)</code>, it sets the number of edges used to form
-  the
-
-  cone's base. Using more edges makes the base look more like a circle. By
-
-  default, <code>detailX</code> is 24.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cone(20, 30, 5, 7)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis connecting the base to the tip. All 3D shapes are made
-
-  by connecting triangles to form their surfaces. By default,
-  <code>detailY</code> is 1.</p>
-
-  <p>The fifth parameter, <code>cap</code>, is also optional. If a
-  <code>false</code> is passed, as
-
-  in <code>cone(20, 30, 5, 7, false)</code> the cone’s base won’t be drawn. By
-  default,
-
-  <code>cap</code> is <code>true</code>.</p>
-
-  <p>Note: <code>cone()</code> can only be used in WebGL mode.</p>
-line: 1730
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      cone();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius and height to 30.
-      cone(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      cone(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 5.
-      cone(30, 50, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white pyramid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 5.
-      cone(30, 50, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 2.
-      cone(30, 50, 24, 2);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background. Its base is missing.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 1.
-      // Don't draw its base.
-      cone(30, 50, 24, 1, false);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the cone's base. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: |
-      <p>height of the cone. Defaults to the value of <code>radius</code>.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of edges used to draw the base. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
-    type: Integer
-    optional: true
-  - name: cap
-    description: |
-      <p>whether to draw the cone's base.  Defaults to <code>true</code>.</p>
-    type: Boolean
-    optional: true
-chainable: true
----
-
-
-# cone
diff --git a/src/content/reference/en/p5 copy/console.mdx b/src/content/reference/en/p5 copy/console.mdx
deleted file mode 100644
index 411b08357e..0000000000
--- a/src/content/reference/en/p5 copy/console.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1988
-title: console
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>Prints a message to the web browser's console.</p>
-
-  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/console/"
-  target="_blank">console</a>
-
-  object is helpful for printing messages while debugging. For example, it's
-
-  common to add a <code>console.log()</code> statement while studying how a
-  section of
-
-  code works:</p>
-
-  <pre><code class="language-js">if (isPlaying === true) {
-    // Add a console.log() statement to make sure this block of code runs.
-    console.log('Got here!');
-
-    // Game logic.
-  }
-
-  </code></pre>
-
-  <p><code>console.error()</code> is helpful for tracking errors because it
-  prints
-
-  formatted messages. For example, it's common to encounter errors when
-
-  loading media assets:</p>
-
-  <pre><code class="language-js">// Logs an error message with special
-  formatting.
-
-  function handleFailure(error) {
-    console.error('Oops!', error);
-  }
-
-
-  // Try to load an image and call handleError() if it fails.
-
-  loadImage('https://example.com/cat.jpg', handleImage, handleError);
-
-  </code></pre>
-line: 1988
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Prints "Hello!" to the console.
-      console.log('Hello!');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Try to load an image from a fake URL.
-      // Call handleError() if the image fails to load.
-      loadImage('https://example.com/cat.jpg', handleImage, handleError);
-    }
-
-    // Displays the image.
-    function handleImage(img) {
-      image(img, 0, 0);
-
-      describe('A cat on a gray background.');
-    }
-
-    // Prints the error.
-    function handleError(error) {
-      console.error('Oops!', error);
-
-      describe('A gray square.');
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# console
diff --git a/src/content/reference/en/p5 copy/constants/ADD.mdx b/src/content/reference/en/p5 copy/constants/ADD.mdx
deleted file mode 100644
index 9148f688e9..0000000000
--- a/src/content/reference/en/p5 copy/constants/ADD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L905
-title: ADD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 905
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ADD
diff --git a/src/content/reference/en/p5 copy/constants/ALT.mdx b/src/content/reference/en/p5 copy/constants/ALT.mdx
deleted file mode 100644
index a039e3919b..0000000000
--- a/src/content/reference/en/p5 copy/constants/ALT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L820
-title: ALT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 820
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# ALT
diff --git a/src/content/reference/en/p5 copy/constants/ARROW.mdx b/src/content/reference/en/p5 copy/constants/ARROW.mdx
deleted file mode 100644
index d2a0e065a1..0000000000
--- a/src/content/reference/en/p5 copy/constants/ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L55
-title: ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 55
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ARROW
diff --git a/src/content/reference/en/p5 copy/constants/AUTO.mdx b/src/content/reference/en/p5 copy/constants/AUTO.mdx
deleted file mode 100644
index 185fb15902..0000000000
--- a/src/content/reference/en/p5 copy/constants/AUTO.mdx	
+++ /dev/null
@@ -1,25 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L810
-title: AUTO
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>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 <a href="/reference/p5.Element/size/">size</a> function as
-  AUTO, at a time.</p>
-line: 810
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# AUTO
diff --git a/src/content/reference/en/p5 copy/constants/AXES.mdx b/src/content/reference/en/p5 copy/constants/AXES.mdx
deleted file mode 100644
index c6f60b6b89..0000000000
--- a/src/content/reference/en/p5 copy/constants/AXES.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1171
-title: AXES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1171
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# AXES
diff --git a/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx b/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
deleted file mode 100644
index ee299ffcff..0000000000
--- a/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L826
-title: BACKSPACE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 826
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# BACKSPACE
diff --git a/src/content/reference/en/p5 copy/constants/BASELINE.mdx b/src/content/reference/en/p5 copy/constants/BASELINE.mdx
deleted file mode 100644
index 200aa201ec..0000000000
--- a/src/content/reference/en/p5 copy/constants/BASELINE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L675
-title: BASELINE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 675
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BASELINE
diff --git a/src/content/reference/en/p5 copy/constants/BEVEL.mdx b/src/content/reference/en/p5 copy/constants/BEVEL.mdx
deleted file mode 100644
index a4af3693f7..0000000000
--- a/src/content/reference/en/p5 copy/constants/BEVEL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L777
-title: BEVEL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 777
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BEVEL
diff --git a/src/content/reference/en/p5 copy/constants/BEZIER.mdx b/src/content/reference/en/p5 copy/constants/BEZIER.mdx
deleted file mode 100644
index b2993b2c33..0000000000
--- a/src/content/reference/en/p5 copy/constants/BEZIER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1073
-title: BEZIER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1073
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BEZIER
diff --git a/src/content/reference/en/p5 copy/constants/BLEND.mdx b/src/content/reference/en/p5 copy/constants/BLEND.mdx
deleted file mode 100644
index bf367f05eb..0000000000
--- a/src/content/reference/en/p5 copy/constants/BLEND.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L893
-title: BLEND
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 893
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BLEND
diff --git a/src/content/reference/en/p5 copy/constants/BLUR.mdx b/src/content/reference/en/p5 copy/constants/BLUR.mdx
deleted file mode 100644
index 5580994e74..0000000000
--- a/src/content/reference/en/p5 copy/constants/BLUR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1019
-title: BLUR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1019
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BLUR
diff --git a/src/content/reference/en/p5 copy/constants/BOLD.mdx b/src/content/reference/en/p5 copy/constants/BOLD.mdx
deleted file mode 100644
index 6069c955e8..0000000000
--- a/src/content/reference/en/p5 copy/constants/BOLD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1036
-title: BOLD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1036
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BOLD
diff --git a/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx b/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
deleted file mode 100644
index 2967579a9c..0000000000
--- a/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1041
-title: BOLDITALIC
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1041
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BOLDITALIC
diff --git a/src/content/reference/en/p5 copy/constants/BOTTOM.mdx b/src/content/reference/en/p5 copy/constants/BOTTOM.mdx
deleted file mode 100644
index b01ded11ea..0000000000
--- a/src/content/reference/en/p5 copy/constants/BOTTOM.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L670
-title: BOTTOM
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 670
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BOTTOM
diff --git a/src/content/reference/en/p5 copy/constants/BURN.mdx b/src/content/reference/en/p5 copy/constants/BURN.mdx
deleted file mode 100644
index 7ba3764dac..0000000000
--- a/src/content/reference/en/p5 copy/constants/BURN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L976
-title: BURN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 976
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BURN
diff --git a/src/content/reference/en/p5 copy/constants/CENTER.mdx b/src/content/reference/en/p5 copy/constants/CENTER.mdx
deleted file mode 100644
index cab0205cef..0000000000
--- a/src/content/reference/en/p5 copy/constants/CENTER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L660
-title: CENTER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 660
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CENTER
diff --git a/src/content/reference/en/p5 copy/constants/CHAR.mdx b/src/content/reference/en/p5 copy/constants/CHAR.mdx
deleted file mode 100644
index 564855787a..0000000000
--- a/src/content/reference/en/p5 copy/constants/CHAR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1046
-title: CHAR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1046
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CHAR
diff --git a/src/content/reference/en/p5 copy/constants/CHORD.mdx b/src/content/reference/en/p5 copy/constants/CHORD.mdx
deleted file mode 100644
index 40896bb3a1..0000000000
--- a/src/content/reference/en/p5 copy/constants/CHORD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L750
-title: CHORD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 750
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CHORD
diff --git a/src/content/reference/en/p5 copy/constants/CLAMP.mdx b/src/content/reference/en/p5 copy/constants/CLAMP.mdx
deleted file mode 100644
index 977b02599d..0000000000
--- a/src/content/reference/en/p5 copy/constants/CLAMP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1126
-title: CLAMP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1126
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CLAMP
diff --git a/src/content/reference/en/p5 copy/constants/CLOSE.mdx b/src/content/reference/en/p5 copy/constants/CLOSE.mdx
deleted file mode 100644
index 34bc946fe5..0000000000
--- a/src/content/reference/en/p5 copy/constants/CLOSE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L740
-title: CLOSE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 740
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CLOSE
diff --git a/src/content/reference/en/p5 copy/constants/CONTAIN.mdx b/src/content/reference/en/p5 copy/constants/CONTAIN.mdx
deleted file mode 100644
index 59d56be350..0000000000
--- a/src/content/reference/en/p5 copy/constants/CONTAIN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1188
-title: CONTAIN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1188
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CONTAIN
diff --git a/src/content/reference/en/p5 copy/constants/CONTROL.mdx b/src/content/reference/en/p5 copy/constants/CONTROL.mdx
deleted file mode 100644
index d620bb502d..0000000000
--- a/src/content/reference/en/p5 copy/constants/CONTROL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L831
-title: CONTROL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 831
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# CONTROL
diff --git a/src/content/reference/en/p5 copy/constants/CORNER.mdx b/src/content/reference/en/p5 copy/constants/CORNER.mdx
deleted file mode 100644
index e8b5eced3e..0000000000
--- a/src/content/reference/en/p5 copy/constants/CORNER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L635
-title: CORNER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 635
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CORNER
diff --git a/src/content/reference/en/p5 copy/constants/CORNERS.mdx b/src/content/reference/en/p5 copy/constants/CORNERS.mdx
deleted file mode 100644
index 85e4226b1e..0000000000
--- a/src/content/reference/en/p5 copy/constants/CORNERS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L640
-title: CORNERS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 640
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CORNERS
diff --git a/src/content/reference/en/p5 copy/constants/COVER.mdx b/src/content/reference/en/p5 copy/constants/COVER.mdx
deleted file mode 100644
index 3714b4bec3..0000000000
--- a/src/content/reference/en/p5 copy/constants/COVER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1194
-title: COVER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1194
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# COVER
diff --git a/src/content/reference/en/p5 copy/constants/CROSS.mdx b/src/content/reference/en/p5 copy/constants/CROSS.mdx
deleted file mode 100644
index eba1238e34..0000000000
--- a/src/content/reference/en/p5 copy/constants/CROSS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L60
-title: CROSS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 60
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CROSS
diff --git a/src/content/reference/en/p5 copy/constants/CURVE.mdx b/src/content/reference/en/p5 copy/constants/CURVE.mdx
deleted file mode 100644
index 3e46bf2151..0000000000
--- a/src/content/reference/en/p5 copy/constants/CURVE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1078
-title: CURVE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1078
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CURVE
diff --git a/src/content/reference/en/p5 copy/constants/DARKEST.mdx b/src/content/reference/en/p5 copy/constants/DARKEST.mdx
deleted file mode 100644
index b86d06dec4..0000000000
--- a/src/content/reference/en/p5 copy/constants/DARKEST.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L913
-title: DARKEST
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 913
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DARKEST
diff --git a/src/content/reference/en/p5 copy/constants/DEGREES.mdx b/src/content/reference/en/p5 copy/constants/DEGREES.mdx
deleted file mode 100644
index c259f456ad..0000000000
--- a/src/content/reference/en/p5 copy/constants/DEGREES.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L547
-title: DEGREES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>String</code> constant that's used to set the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
-  and
-
-  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
-  radians.
-
-  Calling <code>angleMode(DEGREES)</code> ensures that angles are measured in
-  units of
-
-  degrees.</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
-line: 547
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a red arc from 0 to HALF_PI radians.
-      fill(255, 0, 0);
-      arc(50, 50, 80, 80, 0, HALF_PI);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Draw a blue arc from 90˚ to 180˚.
-      fill(0, 0, 255);
-      arc(50, 50, 80, 80, 90, 180);
-
-      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# DEGREES
diff --git a/src/content/reference/en/p5 copy/constants/DELETE.mdx b/src/content/reference/en/p5 copy/constants/DELETE.mdx
deleted file mode 100644
index 3bef8a3983..0000000000
--- a/src/content/reference/en/p5 copy/constants/DELETE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L836
-title: DELETE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 836
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# DELETE
diff --git a/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx b/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
deleted file mode 100644
index 27d7e0880c..0000000000
--- a/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L924
-title: DIFFERENCE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 924
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DIFFERENCE
diff --git a/src/content/reference/en/p5 copy/constants/DILATE.mdx b/src/content/reference/en/p5 copy/constants/DILATE.mdx
deleted file mode 100644
index 5eca5b06dd..0000000000
--- a/src/content/reference/en/p5 copy/constants/DILATE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1009
-title: DILATE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1009
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DILATE
diff --git a/src/content/reference/en/p5 copy/constants/DODGE.mdx b/src/content/reference/en/p5 copy/constants/DODGE.mdx
deleted file mode 100644
index ba1594bfe4..0000000000
--- a/src/content/reference/en/p5 copy/constants/DODGE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L970
-title: DODGE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 970
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DODGE
diff --git a/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx b/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
deleted file mode 100644
index c1d80ae679..0000000000
--- a/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L841
-title: DOWN_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 841
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# DOWN\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ENTER.mdx b/src/content/reference/en/p5 copy/constants/ENTER.mdx
deleted file mode 100644
index 0ded2aec7f..0000000000
--- a/src/content/reference/en/p5 copy/constants/ENTER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L846
-title: ENTER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 846
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# ENTER
diff --git a/src/content/reference/en/p5 copy/constants/ERODE.mdx b/src/content/reference/en/p5 copy/constants/ERODE.mdx
deleted file mode 100644
index 9dba021043..0000000000
--- a/src/content/reference/en/p5 copy/constants/ERODE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1014
-title: ERODE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1014
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ERODE
diff --git a/src/content/reference/en/p5 copy/constants/ESCAPE.mdx b/src/content/reference/en/p5 copy/constants/ESCAPE.mdx
deleted file mode 100644
index 53256ed7ce..0000000000
--- a/src/content/reference/en/p5 copy/constants/ESCAPE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L851
-title: ESCAPE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 851
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# ESCAPE
diff --git a/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx b/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
deleted file mode 100644
index 61c3572125..0000000000
--- a/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L934
-title: EXCLUSION
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 934
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# EXCLUSION
diff --git a/src/content/reference/en/p5 copy/constants/FALLBACK.mdx b/src/content/reference/en/p5 copy/constants/FALLBACK.mdx
deleted file mode 100644
index 6c9f4ec37c..0000000000
--- a/src/content/reference/en/p5 copy/constants/FALLBACK.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1182
-title: FALLBACK
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1182
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FALLBACK
diff --git a/src/content/reference/en/p5 copy/constants/FILL.mdx b/src/content/reference/en/p5 copy/constants/FILL.mdx
deleted file mode 100644
index 9e2ca1ce96..0000000000
--- a/src/content/reference/en/p5 copy/constants/FILL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1090
-title: FILL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1090
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FILL
diff --git a/src/content/reference/en/p5 copy/constants/FLAT.mdx b/src/content/reference/en/p5 copy/constants/FLAT.mdx
deleted file mode 100644
index 50d8b95b1e..0000000000
--- a/src/content/reference/en/p5 copy/constants/FLAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1138
-title: FLAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1138
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FLAT
diff --git a/src/content/reference/en/p5 copy/constants/FLOAT.mdx b/src/content/reference/en/p5 copy/constants/FLOAT.mdx
deleted file mode 100644
index b063ffc631..0000000000
--- a/src/content/reference/en/p5 copy/constants/FLOAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1212
-title: FLOAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1212
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/GRAY.mdx b/src/content/reference/en/p5 copy/constants/GRAY.mdx
deleted file mode 100644
index ca8a56d090..0000000000
--- a/src/content/reference/en/p5 copy/constants/GRAY.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L989
-title: GRAY
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 989
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# GRAY
diff --git a/src/content/reference/en/p5 copy/constants/GRID.mdx b/src/content/reference/en/p5 copy/constants/GRID.mdx
deleted file mode 100644
index 683bbf43f9..0000000000
--- a/src/content/reference/en/p5 copy/constants/GRID.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1165
-title: GRID
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1165
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# GRID
diff --git a/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx b/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
deleted file mode 100644
index a70c409626..0000000000
--- a/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1218
-title: HALF_FLOAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1218
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HALF\_FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/HALF_PI.mdx b/src/content/reference/en/p5 copy/constants/HALF_PI.mdx
deleted file mode 100644
index 212458ee9e..0000000000
--- a/src/content/reference/en/p5 copy/constants/HALF_PI.mdx	
+++ /dev/null
@@ -1,109 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L88
-title: HALF_PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 1.5708.</p>
-
-  <p><code>HALF_PI</code> is half the value of the mathematical constant π. It's
-  useful for
-
-  many tasks that involve rotation and oscillation. For example, calling
-
-  <code>rotate(HALF_PI)</code> rotates the coordinate system
-  <code>HALF_PI</code> radians, which is
-
-  a quarter turn (90˚).</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 88
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to HALF_PI.
-      arc(50, 50, 80, 80, 0, HALF_PI);
-
-      describe('The bottom-right quarter of a circle drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a quarter turn.
-      rotate(HALF_PI);
-
-      // Draw the same line, rotated.
-      line(0, 0, 40, 0);
-
-      describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator.
-      fill(0, 0, 255);
-      circle(x2, 0, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# HALF\_PI
diff --git a/src/content/reference/en/p5 copy/constants/HAND.mdx b/src/content/reference/en/p5 copy/constants/HAND.mdx
deleted file mode 100644
index 0bd864fb59..0000000000
--- a/src/content/reference/en/p5 copy/constants/HAND.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L65
-title: HAND
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 65
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HAND
diff --git a/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
deleted file mode 100644
index 9f3f9742fc..0000000000
--- a/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L960
-title: HARD_LIGHT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 960
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HARD\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/HSB.mdx b/src/content/reference/en/p5 copy/constants/HSB.mdx
deleted file mode 100644
index d921d5405e..0000000000
--- a/src/content/reference/en/p5 copy/constants/HSB.mdx	
+++ /dev/null
@@ -1,24 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L794
-title: HSB
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>HSB (hue, saturation, brightness) is a type of color model.
-
-  You can learn more about it at
-
-  <a
-  href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">HSB</a>.</p>
-line: 794
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HSB
diff --git a/src/content/reference/en/p5 copy/constants/HSL.mdx b/src/content/reference/en/p5 copy/constants/HSL.mdx
deleted file mode 100644
index aa660c2da5..0000000000
--- a/src/content/reference/en/p5 copy/constants/HSL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L803
-title: HSL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 803
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HSL
diff --git a/src/content/reference/en/p5 copy/constants/IMAGE.mdx b/src/content/reference/en/p5 copy/constants/IMAGE.mdx
deleted file mode 100644
index 479af890bb..0000000000
--- a/src/content/reference/en/p5 copy/constants/IMAGE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1108
-title: IMAGE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1108
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# IMAGE
diff --git a/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx b/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
deleted file mode 100644
index 52b38ee8b5..0000000000
--- a/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1100
-title: IMMEDIATE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1100
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# IMMEDIATE
diff --git a/src/content/reference/en/p5 copy/constants/INVERT.mdx b/src/content/reference/en/p5 copy/constants/INVERT.mdx
deleted file mode 100644
index 9c383dd4d1..0000000000
--- a/src/content/reference/en/p5 copy/constants/INVERT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L999
-title: INVERT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 999
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# INVERT
diff --git a/src/content/reference/en/p5 copy/constants/ITALIC.mdx b/src/content/reference/en/p5 copy/constants/ITALIC.mdx
deleted file mode 100644
index d0a9a1f2e5..0000000000
--- a/src/content/reference/en/p5 copy/constants/ITALIC.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1031
-title: ITALIC
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1031
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ITALIC
diff --git a/src/content/reference/en/p5 copy/constants/LABEL.mdx b/src/content/reference/en/p5 copy/constants/LABEL.mdx
deleted file mode 100644
index 92786b3feb..0000000000
--- a/src/content/reference/en/p5 copy/constants/LABEL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1177
-title: LABEL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1177
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LABEL
diff --git a/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx b/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
deleted file mode 100644
index c1709051cd..0000000000
--- a/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1150
-title: LANDSCAPE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1150
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LANDSCAPE
diff --git a/src/content/reference/en/p5 copy/constants/LEFT.mdx b/src/content/reference/en/p5 copy/constants/LEFT.mdx
deleted file mode 100644
index 6e48fe2d99..0000000000
--- a/src/content/reference/en/p5 copy/constants/LEFT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L655
-title: LEFT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 655
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LEFT
diff --git a/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
deleted file mode 100644
index 8628e56688..0000000000
--- a/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L856
-title: LEFT_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 856
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LEFT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx b/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
deleted file mode 100644
index bd15662468..0000000000
--- a/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L918
-title: LIGHTEST
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 918
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LIGHTEST
diff --git a/src/content/reference/en/p5 copy/constants/LINEAR.mdx b/src/content/reference/en/p5 copy/constants/LINEAR.mdx
deleted file mode 100644
index e56c663585..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINEAR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1063
-title: LINEAR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1063
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LINEAR
diff --git a/src/content/reference/en/p5 copy/constants/LINES.mdx b/src/content/reference/en/p5 copy/constants/LINES.mdx
deleted file mode 100644
index 9d7d5d2abc..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINES.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L687
-title: LINES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 687
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LINES
diff --git a/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx b/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
deleted file mode 100644
index 2a566fa4c7..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L699
-title: LINE_LOOP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 699
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LINE\_LOOP
diff --git a/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
deleted file mode 100644
index 816e857d01..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L693
-title: LINE_STRIP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 693
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LINE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/MIRROR.mdx b/src/content/reference/en/p5 copy/constants/MIRROR.mdx
deleted file mode 100644
index 9b2bcd7146..0000000000
--- a/src/content/reference/en/p5 copy/constants/MIRROR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1131
-title: MIRROR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1131
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MIRROR
diff --git a/src/content/reference/en/p5 copy/constants/MITER.mdx b/src/content/reference/en/p5 copy/constants/MITER.mdx
deleted file mode 100644
index 533039ecc8..0000000000
--- a/src/content/reference/en/p5 copy/constants/MITER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L782
-title: MITER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 782
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MITER
diff --git a/src/content/reference/en/p5 copy/constants/MOVE.mdx b/src/content/reference/en/p5 copy/constants/MOVE.mdx
deleted file mode 100644
index aea9bf8a71..0000000000
--- a/src/content/reference/en/p5 copy/constants/MOVE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L70
-title: MOVE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 70
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MOVE
diff --git a/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx b/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
deleted file mode 100644
index ce343b4bf2..0000000000
--- a/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L939
-title: MULTIPLY
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 939
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MULTIPLY
diff --git a/src/content/reference/en/p5 copy/constants/NEAREST.mdx b/src/content/reference/en/p5 copy/constants/NEAREST.mdx
deleted file mode 100644
index 9fba7e46cf..0000000000
--- a/src/content/reference/en/p5 copy/constants/NEAREST.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1116
-title: NEAREST
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1116
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# NEAREST
diff --git a/src/content/reference/en/p5 copy/constants/NORMAL.mdx b/src/content/reference/en/p5 copy/constants/NORMAL.mdx
deleted file mode 100644
index 2c49e02fbf..0000000000
--- a/src/content/reference/en/p5 copy/constants/NORMAL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1026
-title: NORMAL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1026
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# NORMAL
diff --git a/src/content/reference/en/p5 copy/constants/OPAQUE.mdx b/src/content/reference/en/p5 copy/constants/OPAQUE.mdx
deleted file mode 100644
index 9ddf599dd1..0000000000
--- a/src/content/reference/en/p5 copy/constants/OPAQUE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L994
-title: OPAQUE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 994
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# OPAQUE
diff --git a/src/content/reference/en/p5 copy/constants/OPEN.mdx b/src/content/reference/en/p5 copy/constants/OPEN.mdx
deleted file mode 100644
index 29011d1e69..0000000000
--- a/src/content/reference/en/p5 copy/constants/OPEN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L745
-title: OPEN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 745
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# OPEN
diff --git a/src/content/reference/en/p5 copy/constants/OPTION.mdx b/src/content/reference/en/p5 copy/constants/OPTION.mdx
deleted file mode 100644
index 8ea0e625db..0000000000
--- a/src/content/reference/en/p5 copy/constants/OPTION.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L861
-title: OPTION
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 861
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# OPTION
diff --git a/src/content/reference/en/p5 copy/constants/OVERLAY.mdx b/src/content/reference/en/p5 copy/constants/OVERLAY.mdx
deleted file mode 100644
index ccb03411bb..0000000000
--- a/src/content/reference/en/p5 copy/constants/OVERLAY.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L955
-title: OVERLAY
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 955
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# OVERLAY
diff --git a/src/content/reference/en/p5 copy/constants/P2D.mdx b/src/content/reference/en/p5 copy/constants/P2D.mdx
deleted file mode 100644
index 83f09b1d9c..0000000000
--- a/src/content/reference/en/p5 copy/constants/P2D.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L18
-title: P2D
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: |
-  <p>The default, two-dimensional renderer.</p>
-line: 18
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# P2D
diff --git a/src/content/reference/en/p5 copy/constants/PI.mdx b/src/content/reference/en/p5 copy/constants/PI.mdx
deleted file mode 100644
index bddf509592..0000000000
--- a/src/content/reference/en/p5 copy/constants/PI.mdx	
+++ /dev/null
@@ -1,108 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L178
-title: PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 3.1416.</p>
-
-  <p><code>PI</code> is the mathematical constant π. It's useful for many tasks
-  that
-
-  involve rotation and oscillation. For example, calling <code>rotate(PI)</code>
-  rotates
-
-  the coordinate system <code>PI</code> radians, which is a half turn
-  (180˚).</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 178
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to PI.
-      arc(50, 50, 80, 80, 0, PI);
-
-      describe('The bottom half of a circle drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a half turn.
-      rotate(PI);
-
-      // Draw the same line, rotated.
-      line(0, 0, 40, 0);
-
-      describe('A horizontal black line on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator.
-      fill(0, 0, 255);
-      circle(x2, 0, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# PI
diff --git a/src/content/reference/en/p5 copy/constants/PIE.mdx b/src/content/reference/en/p5 copy/constants/PIE.mdx
deleted file mode 100644
index 7be0810e6e..0000000000
--- a/src/content/reference/en/p5 copy/constants/PIE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L755
-title: PIE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 755
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# PIE
diff --git a/src/content/reference/en/p5 copy/constants/POINTS.mdx b/src/content/reference/en/p5 copy/constants/POINTS.mdx
deleted file mode 100644
index 8dea326a14..0000000000
--- a/src/content/reference/en/p5 copy/constants/POINTS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L681
-title: POINTS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 681
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# POINTS
diff --git a/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx b/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
deleted file mode 100644
index 492546578c..0000000000
--- a/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1155
-title: PORTRAIT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1155
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# PORTRAIT
diff --git a/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx b/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
deleted file mode 100644
index 198c365591..0000000000
--- a/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1004
-title: POSTERIZE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1004
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# POSTERIZE
diff --git a/src/content/reference/en/p5 copy/constants/PROJECT.mdx b/src/content/reference/en/p5 copy/constants/PROJECT.mdx
deleted file mode 100644
index ce6f7dbaac..0000000000
--- a/src/content/reference/en/p5 copy/constants/PROJECT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L760
-title: PROJECT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 760
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# PROJECT
diff --git a/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx b/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
deleted file mode 100644
index 49e8d2cc19..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1068
-title: QUADRATIC
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1068
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# QUADRATIC
diff --git a/src/content/reference/en/p5 copy/constants/QUADS.mdx b/src/content/reference/en/p5 copy/constants/QUADS.mdx
deleted file mode 100644
index c67a193a4f..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUADS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L723
-title: QUADS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 723
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# QUADS
diff --git a/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx b/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
deleted file mode 100644
index c1ce9d4291..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L728
-title: QUAD_STRIP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 728
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# QUAD\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx b/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
deleted file mode 100644
index 5f4cc24bc1..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx	
+++ /dev/null
@@ -1,109 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L267
-title: QUARTER_PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 0.7854.</p>
-
-  <p><code>QUARTER_PI</code> is one-fourth the value of the mathematical
-  constant π. It's
-
-  useful for many tasks that involve rotation and oscillation. For example,
-
-  calling <code>rotate(QUARTER_PI)</code> rotates the coordinate system
-  <code>QUARTER_PI</code>
-
-  radians, which is an eighth of a turn (45˚).</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 267
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to QUARTER_PI.
-      arc(50, 50, 80, 80, 0, QUARTER_PI);
-
-      describe('A one-eighth slice of a circle drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate an eighth turn.
-      rotate(QUARTER_PI);
-
-      // Draw the same line, rotated.
-      line(0, 0, 40, 0);
-
-      describe('Two black lines that form a "V" opening towards the bottom-right corner of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator.
-      fill(0, 0, 255);
-      circle(x2, 0, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# QUARTER\_PI
diff --git a/src/content/reference/en/p5 copy/constants/RADIANS.mdx b/src/content/reference/en/p5 copy/constants/RADIANS.mdx
deleted file mode 100644
index 856db37b9f..0000000000
--- a/src/content/reference/en/p5 copy/constants/RADIANS.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L587
-title: RADIANS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>String</code> constant that's used to set the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
-  and
-
-  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
-  radians.
-
-  Calling <code>angleMode(RADIANS)</code> ensures that angles are measured in
-  units of
-
-  radians. Doing so can be useful if the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a> has been set to
-
-  <a href="/reference/p5/DEGREES/">DEGREES</a>.</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
-line: 587
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Draw a red arc from 0˚ to 90˚.
-      fill(255, 0, 0);
-      arc(50, 50, 80, 80, 0, 90);
-
-      // Use radians.
-      angleMode(RADIANS);
-
-      // Draw a blue arc from HALF_PI to PI.
-      fill(0, 0, 255);
-      arc(50, 50, 80, 80, HALF_PI, PI);
-
-      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# RADIANS
diff --git a/src/content/reference/en/p5 copy/constants/RADIUS.mdx b/src/content/reference/en/p5 copy/constants/RADIUS.mdx
deleted file mode 100644
index 95f1dcdeef..0000000000
--- a/src/content/reference/en/p5 copy/constants/RADIUS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L645
-title: RADIUS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 645
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RADIUS
diff --git a/src/content/reference/en/p5 copy/constants/REMOVE.mdx b/src/content/reference/en/p5 copy/constants/REMOVE.mdx
deleted file mode 100644
index c2daffc564..0000000000
--- a/src/content/reference/en/p5 copy/constants/REMOVE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L899
-title: REMOVE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 899
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# REMOVE
diff --git a/src/content/reference/en/p5 copy/constants/REPEAT.mdx b/src/content/reference/en/p5 copy/constants/REPEAT.mdx
deleted file mode 100644
index c9e75c8bec..0000000000
--- a/src/content/reference/en/p5 copy/constants/REPEAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1121
-title: REPEAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1121
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# REPEAT
diff --git a/src/content/reference/en/p5 copy/constants/REPLACE.mdx b/src/content/reference/en/p5 copy/constants/REPLACE.mdx
deleted file mode 100644
index 8a04f06130..0000000000
--- a/src/content/reference/en/p5 copy/constants/REPLACE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L949
-title: REPLACE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 949
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# REPLACE
diff --git a/src/content/reference/en/p5 copy/constants/RETURN.mdx b/src/content/reference/en/p5 copy/constants/RETURN.mdx
deleted file mode 100644
index 3069efc256..0000000000
--- a/src/content/reference/en/p5 copy/constants/RETURN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L866
-title: RETURN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 866
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# RETURN
diff --git a/src/content/reference/en/p5 copy/constants/RGB.mdx b/src/content/reference/en/p5 copy/constants/RGB.mdx
deleted file mode 100644
index b0ae826064..0000000000
--- a/src/content/reference/en/p5 copy/constants/RGB.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L789
-title: RGB
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 789
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RGB
diff --git a/src/content/reference/en/p5 copy/constants/RGBA.mdx b/src/content/reference/en/p5 copy/constants/RGBA.mdx
deleted file mode 100644
index 256949cfd1..0000000000
--- a/src/content/reference/en/p5 copy/constants/RGBA.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1224
-title: RGBA
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1224
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RGBA
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT.mdx b/src/content/reference/en/p5 copy/constants/RIGHT.mdx
deleted file mode 100644
index e9f69e8a80..0000000000
--- a/src/content/reference/en/p5 copy/constants/RIGHT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L650
-title: RIGHT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 650
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RIGHT
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
deleted file mode 100644
index 731ab29fb5..0000000000
--- a/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L871
-title: RIGHT_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 871
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# RIGHT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ROUND.mdx b/src/content/reference/en/p5 copy/constants/ROUND.mdx
deleted file mode 100644
index 50426d2636..0000000000
--- a/src/content/reference/en/p5 copy/constants/ROUND.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L772
-title: ROUND
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 772
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ROUND
diff --git a/src/content/reference/en/p5 copy/constants/SCREEN.mdx b/src/content/reference/en/p5 copy/constants/SCREEN.mdx
deleted file mode 100644
index 65f2e6192d..0000000000
--- a/src/content/reference/en/p5 copy/constants/SCREEN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L944
-title: SCREEN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 944
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SCREEN
diff --git a/src/content/reference/en/p5 copy/constants/SHIFT.mdx b/src/content/reference/en/p5 copy/constants/SHIFT.mdx
deleted file mode 100644
index e48b091ab3..0000000000
--- a/src/content/reference/en/p5 copy/constants/SHIFT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L876
-title: SHIFT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 876
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# SHIFT
diff --git a/src/content/reference/en/p5 copy/constants/SMOOTH.mdx b/src/content/reference/en/p5 copy/constants/SMOOTH.mdx
deleted file mode 100644
index 816be1029b..0000000000
--- a/src/content/reference/en/p5 copy/constants/SMOOTH.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1143
-title: SMOOTH
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1143
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SMOOTH
diff --git a/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
deleted file mode 100644
index 846e6fe72b..0000000000
--- a/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L965
-title: SOFT_LIGHT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 965
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SOFT\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/SQUARE.mdx b/src/content/reference/en/p5 copy/constants/SQUARE.mdx
deleted file mode 100644
index 7b5da139d7..0000000000
--- a/src/content/reference/en/p5 copy/constants/SQUARE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L766
-title: SQUARE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 766
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SQUARE
diff --git a/src/content/reference/en/p5 copy/constants/STROKE.mdx b/src/content/reference/en/p5 copy/constants/STROKE.mdx
deleted file mode 100644
index 16cfa32e5e..0000000000
--- a/src/content/reference/en/p5 copy/constants/STROKE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1085
-title: STROKE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1085
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# STROKE
diff --git a/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx b/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
deleted file mode 100644
index 2bd6d94fe9..0000000000
--- a/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L929
-title: SUBTRACT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 929
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SUBTRACT
diff --git a/src/content/reference/en/p5 copy/constants/TAB.mdx b/src/content/reference/en/p5 copy/constants/TAB.mdx
deleted file mode 100644
index cf89117ae4..0000000000
--- a/src/content/reference/en/p5 copy/constants/TAB.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L881
-title: TAB
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 881
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TAB
diff --git a/src/content/reference/en/p5 copy/constants/TAU.mdx b/src/content/reference/en/p5 copy/constants/TAU.mdx
deleted file mode 100644
index a553339913..0000000000
--- a/src/content/reference/en/p5 copy/constants/TAU.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L357
-title: TAU
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
-
-  <p><code>TAU</code> is twice the value of the mathematical constant π. It's
-  useful for
-
-  many tasks that involve rotation and oscillation. For example, calling
-
-  <code>rotate(TAU)</code> rotates the coordinate system <code>TAU</code>
-  radians, which is one
-
-  full turn (360˚). <code>TAU</code> and <code>TWO_PI</code> are equal.</p>
-
-  <p>Note: <code>TAU</code> radians equals 360˚, <code>PI</code> radians equals
-  180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 357
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to TAU.
-      arc(50, 50, 80, 80, 0, TAU);
-
-      describe('A white circle drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a full turn.
-      rotate(TAU);
-
-      // Style the second line.
-      strokeWeight(5);
-
-      // Draw the same line, shorter and rotated.
-      line(0, 0, 20, 0);
-
-      describe(
-        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle with a blue center oscillates from left to right on a gray background.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + TAU);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator, smaller.
-      fill(0, 0, 255);
-      circle(x2, 0, 10);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# TAU
diff --git a/src/content/reference/en/p5 copy/constants/TESS.mdx b/src/content/reference/en/p5 copy/constants/TESS.mdx
deleted file mode 100644
index e6f853e8ab..0000000000
--- a/src/content/reference/en/p5 copy/constants/TESS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L734
-title: TESS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 734
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TESS
diff --git a/src/content/reference/en/p5 copy/constants/TEXT.mdx b/src/content/reference/en/p5 copy/constants/TEXT.mdx
deleted file mode 100644
index 157a90001a..0000000000
--- a/src/content/reference/en/p5 copy/constants/TEXT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L75
-title: TEXT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 75
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TEXT
diff --git a/src/content/reference/en/p5 copy/constants/TEXTURE.mdx b/src/content/reference/en/p5 copy/constants/TEXTURE.mdx
deleted file mode 100644
index 8ada92f376..0000000000
--- a/src/content/reference/en/p5 copy/constants/TEXTURE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1095
-title: TEXTURE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1095
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TEXTURE
diff --git a/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx b/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
deleted file mode 100644
index f12e6ea336..0000000000
--- a/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L984
-title: THRESHOLD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 984
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# THRESHOLD
diff --git a/src/content/reference/en/p5 copy/constants/TOP.mdx b/src/content/reference/en/p5 copy/constants/TOP.mdx
deleted file mode 100644
index a91b5f4824..0000000000
--- a/src/content/reference/en/p5 copy/constants/TOP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L665
-title: TOP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 665
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TOP
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
deleted file mode 100644
index ec281d033e..0000000000
--- a/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L705
-title: TRIANGLES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 705
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TRIANGLES
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
deleted file mode 100644
index bcd5d5f5a1..0000000000
--- a/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L711
-title: TRIANGLE_FAN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 711
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TRIANGLE\_FAN
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
deleted file mode 100644
index fefe226e17..0000000000
--- a/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L717
-title: TRIANGLE_STRIP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 717
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TRIANGLE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/TWO_PI.mdx b/src/content/reference/en/p5 copy/constants/TWO_PI.mdx
deleted file mode 100644
index ed62a10b0f..0000000000
--- a/src/content/reference/en/p5 copy/constants/TWO_PI.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L452
-title: TWO_PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
-
-  <p><code>TWO_PI</code> is twice the value of the mathematical constant π. It's
-  useful for
-
-  many tasks that involve rotation and oscillation. For example, calling
-
-  <code>rotate(TWO_PI)</code> rotates the coordinate system <code>TWO_PI</code>
-  radians, which is
-
-  one full turn (360˚). <code>TWO_PI</code> and <code>TAU</code> are equal.</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 452
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to TWO_PI.
-      arc(50, 50, 80, 80, 0, TWO_PI);
-
-      describe('A white circle drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a full turn.
-      rotate(TWO_PI);
-
-      // Style the second line.
-      strokeWeight(5);
-
-      // Draw the same line, shorter and rotated.
-      line(0, 0, 20, 0);
-
-      describe(
-        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle with a blue center oscillates from left to right on a gray background.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator, smaller.
-      fill(0, 0, 255);
-      circle(x2, 0, 10);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# TWO\_PI
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
deleted file mode 100644
index 00acfe29c0..0000000000
--- a/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1200
-title: UNSIGNED_BYTE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1200
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# UNSIGNED\_BYTE
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
deleted file mode 100644
index f060682a13..0000000000
--- a/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1206
-title: UNSIGNED_INT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1206
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# UNSIGNED\_INT
diff --git a/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx b/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
deleted file mode 100644
index e0e0326aa6..0000000000
--- a/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L886
-title: UP_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 886
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# UP\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/VERSION.mdx b/src/content/reference/en/p5 copy/constants/VERSION.mdx
deleted file mode 100644
index f9f62fca55..0000000000
--- a/src/content/reference/en/p5 copy/constants/VERSION.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L9
-title: VERSION
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: |
-  <p>Version of this p5.js.</p>
-line: 9
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# VERSION
diff --git a/src/content/reference/en/p5 copy/constants/WAIT.mdx b/src/content/reference/en/p5 copy/constants/WAIT.mdx
deleted file mode 100644
index 833f77ee4f..0000000000
--- a/src/content/reference/en/p5 copy/constants/WAIT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L80
-title: WAIT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 80
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WAIT
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL.mdx b/src/content/reference/en/p5 copy/constants/WEBGL.mdx
deleted file mode 100644
index 2919ec489c..0000000000
--- a/src/content/reference/en/p5 copy/constants/WEBGL.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L24
-title: WEBGL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>One of the two render modes in p5.js, used for computationally intensive
-  tasks like 3D rendering and shaders.</p>
-
-  <p><code>WEBGL</code> differs from the default <a
-  href="/reference/p5/P2D/"><code>P2D</code></a> renderer in the following
-  ways:</p>
-
-  <ul>
-
-  <li><strong>Coordinate System</strong> - When drawing in <code>WEBGL</code>
-  mode, the origin point (0,0,0) is located at the center of the screen, not the
-  top-left corner. See <a
-  href="https://p5js.org/tutorials/coordinates-and-transformations/">the
-  tutorial page about coordinates and transformations</a>.</li>
-
-  <li><strong>3D Shapes</strong> - <code>WEBGL</code> mode can be used to draw
-  3-dimensional shapes like <a href="/reference/p5/box/">box()</a>, <a
-  href="/reference/p5/sphere/">sphere()</a>, <a
-  href="/reference/p5/cone/">cone()</a>, and <a
-  href="https://p5js.org/reference/#3D%20Primitives/">more</a>. See <a
-  href="https://p5js.org/tutorials/custom-geometry/">the tutorial page about
-  custom geometry</a> to make more complex objects.</li>
-
-  <li><strong>Shape Detail</strong> - When drawing in <code>WEBGL</code> mode,
-  you can specify how smooth curves should be drawn by using a
-  <code>detail</code> parameter. See <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#3d-primitives-shapes">the
-  wiki section about shapes</a> for a more information and an example.</li>
-
-  <li><strong>Textures</strong> - A texture is like a skin that wraps onto a
-  shape. See <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#textures">the
-  wiki section about textures</a> for examples of mapping images onto surfaces
-  with textures.</li>
-
-  <li><strong>Materials and Lighting</strong> - <code>WEBGL</code> offers
-  different types of lights like <a
-  href="/reference/p5/ambientLight/">ambientLight()</a> to place around a scene.
-  Materials like <a
-  href="/reference/p5/specularMaterial/">specularMaterial()</a> reflect the
-  lighting to convey shape and depth. See <a
-  href="https://p5js.org/tutorials/lights-camera-materials/">the tutorial page
-  for styling and appearance</a> to experiment with different combinations.</li>
-
-  <li><strong>Camera</strong> - The viewport of a <code>WEBGL</code> sketch can
-  be adjusted by changing camera attributes. See <a
-  href="https://p5js.org/tutorials/lights-camera-materials#camera-and-view">the
-  tutorial page section about cameras</a> for an explanation of camera
-  controls.</li>
-
-  <li><strong>Text</strong> - <code>WEBGL</code> requires opentype/truetype font
-  files to be preloaded using <a href="/reference/p5/loadFont/">loadFont()</a>.
-  See <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#text">the
-  wiki section about text</a> for details, along with a workaround.</li>
-
-  <li><strong>Shaders</strong> - Shaders are hardware accelerated programs that
-  can be used for a variety of effects and graphics. See the <a
-  href="https://p5js.org/tutorials/intro-to-shaders/">introduction to
-  shaders</a> to get started with shaders in p5.js.</li>
-
-  <li><strong>Graphics Acceleration</strong> - <code>WEBGL</code> mode uses the
-  graphics card instead of the CPU, so it may help boost the performance of your
-  sketch (example: drawing more shapes on the screen at once).</li>
-
-  </ul>
-
-  <p>To learn more about WEBGL mode, check out <a
-  href="https://p5js.org/tutorials/#webgl">all the interactive WEBGL
-  tutorials</a> in the "Tutorials" section of this website, or read the wiki
-  article <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/">"Getting
-  started with WebGL in p5"</a>.</p>
-line: 24
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WEBGL
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL2.mdx b/src/content/reference/en/p5 copy/constants/WEBGL2.mdx
deleted file mode 100644
index 68c6ca83fa..0000000000
--- a/src/content/reference/en/p5 copy/constants/WEBGL2.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L45
-title: WEBGL2
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: |
-  <p>One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
-  which can be used to determine what capabilities the rendering environment
-  has.</p>
-line: 45
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WEBGL2
diff --git a/src/content/reference/en/p5 copy/constants/WORD.mdx b/src/content/reference/en/p5 copy/constants/WORD.mdx
deleted file mode 100644
index 03f13b4874..0000000000
--- a/src/content/reference/en/p5 copy/constants/WORD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1051
-title: WORD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1051
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WORD
diff --git a/src/content/reference/en/p5 copy/constrain.mdx b/src/content/reference/en/p5 copy/constrain.mdx
deleted file mode 100644
index d869ce2e74..0000000000
--- a/src/content/reference/en/p5 copy/constrain.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L91
-title: constrain
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Constrains a number between a minimum and maximum value.</p>
-line: 91
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      let x = constrain(mouseX, 33, 67);
-      let y = 50;
-
-      strokeWeight(5);
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set boundaries and draw them.
-      let leftWall = 25;
-      let rightWall = 75;
-      line(leftWall, 0, leftWall, 100);
-      line(rightWall, 0, rightWall, 100);
-
-      // Draw a circle that follows the mouse freely.
-      fill(255);
-      circle(mouseX, 33, 9);
-
-      // Draw a circle that's constrained.
-      let xc = constrain(mouseX, leftWall, rightWall);
-      fill(0);
-      circle(xc, 67, 9);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to constrain.</p>
-    type: Number
-  - name: low
-    description: |
-      <p>minimum limit.</p>
-    type: Number
-  - name: high
-    description: |
-      <p>maximum limit.</p>
-    type: Number
-return:
-  description: constrained number.
-  type: Number
-chainable: false
----
-
-
-# constrain
diff --git a/src/content/reference/en/p5 copy/copy.mdx b/src/content/reference/en/p5 copy/copy.mdx
deleted file mode 100644
index 059df56434..0000000000
--- a/src/content/reference/en/p5 copy/copy.mdx	
+++ /dev/null
@@ -1,144 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L288
-title: copy
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Copies pixels from a source image to a region of the canvas.</p>
-
-  <p>The first parameter, <code>srcImage</code>, is the
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend. The source
-  image can be
-
-  the canvas itself or a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object. <code>copy()</code> will
-  scale pixels from
-
-  the source region if it isn't the same size as the destination region.</p>
-
-  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-  <code>sw</code>, and <code>sh</code> determine the region
-
-  to copy from the source image. <code>(sx, sy)</code> is the top-left corner of
-  the
-
-  region. <code>sw</code> and <code>sh</code> are the region's width and
-  height.</p>
-
-  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-  <code>dw</code>, and <code>dh</code> determine the region
-
-  of the canvas to copy into. <code>(dx, dy)</code> is the top-left corner of
-  the
-
-  region. <code>dw</code> and <code>dh</code> are the region's width and
-  height.</p>
-line: 288
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img);
-
-      // Copy a region of pixels to another spot.
-      copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
-
-      // Outline the copied region.
-      stroke(255);
-      noFill();
-      square(7, 22, 10);
-
-      describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 288
-    params:
-      - name: srcImage
-        description: |
-          <p>source image.</p>
-        type: p5.Image|p5.Element
-      - name: sx
-        description: |
-          <p>x-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sy
-        description: |
-          <p>y-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sw
-        description: |
-          <p>source image width.</p>
-        type: Integer
-      - name: sh
-        description: |
-          <p>source image height.</p>
-        type: Integer
-      - name: dx
-        description: |
-          <p>x-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dy
-        description: |
-          <p>y-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dw
-        description: |
-          <p>destination image width.</p>
-        type: Integer
-      - name: dh
-        description: |
-          <p>destination image height.</p>
-        type: Integer
-  - line: 345
-    params:
-      - name: sx
-        description: ''
-        type: Integer
-      - name: sy
-        description: ''
-        type: Integer
-      - name: sw
-        description: ''
-        type: Integer
-      - name: sh
-        description: ''
-        type: Integer
-      - name: dx
-        description: ''
-        type: Integer
-      - name: dy
-        description: ''
-        type: Integer
-      - name: dw
-        description: ''
-        type: Integer
-      - name: dh
-        description: ''
-        type: Integer
-chainable: false
----
-
-
-# copy
diff --git a/src/content/reference/en/p5 copy/cos.mdx b/src/content/reference/en/p5 copy/cos.mdx
deleted file mode 100644
index cd6468fc4f..0000000000
--- a/src/content/reference/en/p5 copy/cos.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L281
-title: cos
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the cosine of an angle.</p>
-
-  <p><code>cos()</code> is useful for many geometric tasks in creative coding.
-  The values
-
-  returned oscillate between -1 and 1 as the input angle increases.
-  <code>cos()</code>
-
-  calculates the cosine of an angle, using radians by default, or according to
-
-  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-  DEGREES).</p>
-line: 281
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white ball on a string oscillates left and right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.05) + 50;
-      let y = 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form a wave pattern.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 30 * cos(x * 0.1) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form an infinity symbol.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.1) + 50;
-      let y = 10 * sin(frameCount * 0.2) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>the angle, in radians by default, or according to
-
-      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-      DEGREES).</p>
-    type: Number
-return:
-  description: cosine of the angle.
-  type: Number
-chainable: false
----
-
-
-# cos
diff --git a/src/content/reference/en/p5 copy/createA.mdx b/src/content/reference/en/p5 copy/createA.mdx
deleted file mode 100644
index 669ce45a27..0000000000
--- a/src/content/reference/en/p5 copy/createA.mdx	
+++ /dev/null
@@ -1,93 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L724
-title: createA
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates an <code><a></a></code> element that links to another web page.</p>
-
-  <p>The first parmeter, <code>href</code>, is a string that sets the URL of the
-  linked
-
-  page.</p>
-
-  <p>The second parameter, <code>html</code>, is a string that sets the inner
-  HTML of the
-
-  link. It's common to use text, images, or buttons as links.</p>
-
-  <p>The third parameter, <code>target</code>, is optional. It's a string that
-  tells the
-
-  web browser where to open the link. By default, links open in the current
-
-  browser tab. Passing <code>'_blank'</code> will cause the link to open in a
-  new
-
-  browser tab. MDN describes a few
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"
-  target="_blank">other options</a>.</p>
-line: 724
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an anchor element that links to p5js.org.
-      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.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Create an anchor tag that links to p5js.org.
-      // Open the link in a new tab.
-      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.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: href
-    description: |
-      <p>URL of linked page.</p>
-    type: String
-  - name: html
-    description: |
-      <p>inner HTML of link element to display.</p>
-    type: String
-  - name: target
-    description: |
-      <p>target where the new link should open,
-                                  either <code>'_blank'</code>, <code>'_self'</code>, <code>'_parent'</code>, or <code>'_top'</code>.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createA
diff --git a/src/content/reference/en/p5 copy/createAudio.mdx b/src/content/reference/en/p5 copy/createAudio.mdx
deleted file mode 100644
index 24b3bce36b..0000000000
--- a/src/content/reference/en/p5 copy/createAudio.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2213
-title: createAudio
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a hidden <code><audio></code> element for simple audio
-  playback.</p>
-
-  <p><code>createAudio()</code> returns a new
-
-  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object.</p>
-
-  <p>The first parameter, <code>src</code>, is the path the video. If a single
-  string is
-
-  passed, as in <code>'/assets/video.mp4'</code>, a single video is loaded. An
-  array
-
-  of strings can be used to load the same video in different formats. For
-
-  example, <code>['/assets/video.mp4', '/assets/video.ogv',
-  '/assets/video.webm']</code>.
-
-  This is useful for ensuring that the video can play across different
-
-  browsers with different capabilities. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/"
-  target="_blank">MDN</a>
-
-  for more information about supported formats.</p>
-
-  <p>The second parameter, <code>callback</code>, is optional. It's a function
-  to call once
-
-  the audio is ready to play.</p>
-line: 2213
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Load the audio.
-      let beat = createAudio('/assets/beat.mp3');
-
-      // Show the default audio controls.
-      beat.showControls();
-
-      describe('An audio beat plays when the user double-clicks the square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: src
-    description: |
-      <p>path to an audio file, or an array of paths
-                                      for supporting different browsers.</p>
-    type: 'String|String[]'
-    optional: true
-  - name: callback
-    description: |
-      <p>function to call once the audio is ready to play.</p>
-    type: Function
-    optional: true
-return:
-  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
-  type: p5.MediaElement
-chainable: false
----
-
-
-# createAudio
diff --git a/src/content/reference/en/p5 copy/createButton.mdx b/src/content/reference/en/p5 copy/createButton.mdx
deleted file mode 100644
index 9ff2d66faf..0000000000
--- a/src/content/reference/en/p5 copy/createButton.mdx	
+++ /dev/null
@@ -1,109 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L924
-title: createButton
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><button></button></code> element.</p>
-
-  <p>The first parameter, <code>label</code>, is a string that sets the label
-  displayed on
-
-  the button.</p>
-
-  <p>The second parameter, <code>value</code>, is optional. It's a string that
-  sets the
-
-  button's value. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value"
-  target="_blank">MDN</a>
-
-  for more details.</p>
-line: 924
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a button and place it beneath the canvas.
-      let button = createButton('click me');
-      button.position(0, 100);
-
-      // Call repaint() when the button is pressed.
-      button.mousePressed(repaint);
-
-      describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
-    }
-
-    // Change the background color.
-    function repaint() {
-      let g = random(255);
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let button;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a button and set its value to 0.
-      // Place the button beneath the canvas.
-      button = createButton('click me', 'red');
-      button.position(0, 100);
-
-      // Call randomColor() when the button is pressed.
-      button.mousePressed(randomColor);
-
-      describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
-    }
-
-    function draw() {
-      // Use the button's value to set the background color.
-      let c = button.value();
-      background(c);
-    }
-
-    // Set the button's value to a random color.
-    function randomColor() {
-      let c = random(['red', 'green', 'blue', 'yellow']);
-      button.value(c);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: label
-    description: |
-      <p>label displayed on the button.</p>
-    type: String
-  - name: value
-    description: |
-      <p>value of the button.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createButton
diff --git a/src/content/reference/en/p5 copy/createCamera.mdx b/src/content/reference/en/p5 copy/createCamera.mdx
deleted file mode 100644
index 8fbb13ce5d..0000000000
--- a/src/content/reference/en/p5 copy/createCamera.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L638
-title: createCamera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Camera">p5.Camera</a> object and
-  sets it
-
-  as the current (active) camera.</p>
-
-  <p>The new camera is initialized with a default position <code>(0, 0,
-  800)</code> and a
-
-  default perspective projection. Its properties can be controlled with
-
-  <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
-
-  <code>myCamera.lookAt(0, 0, 0)</code>.</p>
-
-  <p>Note: Every 3D sketch starts with a default camera initialized.
-
-  This camera can be controlled with the functions
-
-  <a href="/reference/p5/camera/">camera()</a>,
-
-  <a href="/reference/p5/perspective/">perspective()</a>,
-
-  <a href="/reference/p5/ortho/">ortho()</a>, and
-
-  <a href="/reference/p5/frustum/">frustum()</a> if it's the only camera in the
-  scene.</p>
-
-  <p>Note: <code>createCamera()</code> can only be used in WebGL mode.</p>
-line: 638
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to toggle between cameras.
-
-    let cam1;
-    let cam2;
-    let usingCam1 = true;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the first camera.
-      // Keep its default settings.
-      cam1 = createCamera();
-
-      // Create the second camera.
-      // Place it at the top-left.
-      // Point it at the origin.
-      cam2 = createCamera();
-      cam2.setPosition(400, -400, 800);
-      cam2.lookAt(0, 0, 0);
-
-      // Set the current camera to cam1.
-      setCamera(cam1);
-
-      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the box.
-      box();
-    }
-
-    // Toggle the current camera when the user double-clicks.
-    function doubleClicked() {
-      if (usingCam1 === true) {
-        setCamera(cam2);
-        usingCam1 = false;
-      } else {
-        setCamera(cam1);
-        usingCam1 = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: the new camera.
-  type: p5.Camera
-chainable: false
----
-
-
-# createCamera
diff --git a/src/content/reference/en/p5 copy/createCanvas.mdx b/src/content/reference/en/p5 copy/createCanvas.mdx
deleted file mode 100644
index 600d7e3545..0000000000
--- a/src/content/reference/en/p5 copy/createCanvas.mdx	
+++ /dev/null
@@ -1,191 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L15
-title: createCanvas
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Creates a canvas element on the web page.</p>
-
-  <p><code>createCanvas()</code> creates the main drawing canvas for a sketch.
-  It should
-
-  only be called once at the beginning of <a
-  href="/reference/p5/setup/">setup()</a>.
-
-  Calling <code>createCanvas()</code> more than once causes unpredictable
-  behavior.</p>
-
-  <p>The first two parameters, <code>width</code> and <code>height</code>, are
-  optional. They set the
-
-  dimensions of the canvas and the values of the
-
-  <a href="/reference/p5/width/">width</a> and <a
-  href="/reference/p5/height/">height</a> system
-
-  variables. For example, calling <code>createCanvas(900, 500)</code> creates a
-  canvas
-
-  that's 900×500 pixels. By default, <code>width</code> and <code>height</code>
-  are both 100.</p>
-
-  <p>The third parameter is also optional. If either of the constants
-  <code>P2D</code> or
-
-  <code>WEBGL</code> is passed, as in <code>createCanvas(900, 500,
-  WEBGL)</code>, then it will set
-
-  the sketch's rendering mode. If an existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createCanvas(900, 500, myCanvas)</code>, then it will
-  be used
-
-  by the sketch.</p>
-
-  <p>The fourth parameter is also optional. If an existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createCanvas(900, 500, WEBGL, myCanvas)</code>, then it
-  will be
-
-  used by the sketch.</p>
-
-  <p>Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported
-
-  by the browser. Check the <a
-  href="/reference/p5/webglVersion/">webglVersion</a>
-
-  system variable to check what version is being used, or call
-
-  <code>setAttributes({ version: 1 })</code> to create a WebGL1 context.</p>
-line: 15
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(0, 0, width, height);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 50);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(0, 0, width, height);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Use WebGL mode.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(-width / 2, -height / 2, width / 2, height / 2);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create a p5.Renderer object.
-      let cnv = createCanvas(50, 50);
-
-      // Position the canvas.
-      cnv.position(10, 20);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(0, 0, width, height);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new `p5.Renderer` that holds the canvas.
-  type: p5.Renderer
-overloads:
-  - line: 15
-    params:
-      - name: width
-        description: |
-          <p>width of the canvas. Defaults to 100.</p>
-        type: Number
-        optional: true
-      - name: height
-        description: |
-          <p>height of the canvas. Defaults to 100.</p>
-        type: Number
-        optional: true
-      - name: renderer
-        description: |
-          <p>either P2D or WEBGL. Defaults to <code>P2D</code>.</p>
-        type: Constant
-        optional: true
-      - name: canvas
-        description: |
-          <p>existing canvas element that should be used for the sketch.</p>
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: new `p5.Renderer` that holds the canvas.
-      type: p5.Renderer
-  - line: 119
-    params:
-      - name: width
-        description: ''
-        type: Number
-        optional: true
-      - name: height
-        description: ''
-        type: Number
-        optional: true
-      - name: canvas
-        description: ''
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: ''
-      type: p5.Renderer
-chainable: false
----
-
-
-# createCanvas
diff --git a/src/content/reference/en/p5 copy/createCapture.mdx b/src/content/reference/en/p5 copy/createCapture.mdx
deleted file mode 100644
index 1087d14b1a..0000000000
--- a/src/content/reference/en/p5 copy/createCapture.mdx	
+++ /dev/null
@@ -1,189 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2295
-title: createCapture
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><video></code> element that "captures" the audio/video
-  stream from
-
-  the webcam and microphone.</p>
-
-  <p><code>createCapture()</code> returns a new
-
-  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
-  shown by
-
-  default. They can be hidden by calling <code>capture.hide()</code> and drawn
-  to the
-
-  canvas using <a href="/reference/p5/image/">image()</a>.</p>
-
-  <p>The first parameter, <code>type</code>, is optional. It sets the type of
-  capture to
-
-  use. By default, <code>createCapture()</code> captures both audio and video.
-  If <code>VIDEO</code>
-
-  is passed, as in <code>createCapture(VIDEO)</code>, only video will be
-  captured.
-
-  If <code>AUDIO</code> is passed, as in <code>createCapture(AUDIO)</code>, only
-  audio will be
-
-  captured. A constraints object can also be passed to customize the stream.
-
-  See the <a
-  href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints"
-  target="_blank">
-
-  W3C documentation</a> for possible properties. Different browsers support
-  different
-
-  properties.</p>
-
-  <p>The 'flipped' property is an optional property which can be set to
-  <code>{flipped:true}</code>
-
-  to mirror the video output.If it is true then it means that video will be
-  mirrored
-
-  or flipped and if nothing is mentioned then by default it will be
-  <code>false</code>.</p>
-
-  <p>The second parameter,<code>callback</code>, is optional. It's a function to
-  call once
-
-  the capture is ready for use. The callback function should have one
-
-  parameter, <code>stream</code>, that's a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/"
-  target="_blank">MediaStream</a> object.</p>
-
-  <p>Note: <code>createCapture()</code> only works when running a sketch locally
-  or using HTTPS. Learn more
-
-  <a
-  href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https/"
-  target="_blank">here</a>
-
-  and <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia/"
-  target="_blank">here</a>.</p>
-line: 2295
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Create the video capture.
-      createCapture(VIDEO);
-
-      describe('A video stream from the webcam.');
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    let capture;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the video capture and hide the element.
-      capture = createCapture(VIDEO);
-      capture.hide();
-
-      describe('A video stream from the webcam with inverted colors.');
-    }
-
-    function draw() {
-      // Draw the video capture within the canvas.
-      image(capture, 0, 0, width, width * capture.height / capture.width);
-
-      // Invert the colors in the stream.
-      filter(INVERT);
-    }
-    </code>
-    </div>
-    <div class='notest'>
-    <code>
-    let capture;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the video capture with mirrored output.
-      capture = createCapture(VIDEO,{ flipped:true });
-      capture.size(100,100);
-
-      describe('A video stream from the webcam with flipped or mirrored output.');
-    }
-
-    </code>
-    </div>
-
-    <div class='notest norender'>
-    <code>
-    function setup() {
-      createCanvas(480, 120);
-
-      // Create a constraints object.
-      let constraints = {
-        video: {
-          mandatory: {
-            minWidth: 1280,
-            minHeight: 720
-          },
-          optional: [{ maxFrameRate: 10 }]
-        },
-        audio: false
-      };
-
-      // Create the video capture.
-      createCapture(constraints);
-
-      describe('A video stream from the webcam.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: type
-    description: |
-      <p>type of capture, either AUDIO or VIDEO,
-                                        or a constraints object. Both video and audio
-                                        audio streams are captured by default.</p>
-    type: String|Constant|Object
-    optional: true
-  - name: flipped
-    description: >
-      <p>flip the capturing video and mirror the output with
-      <code>{flipped:true}</code>. By
-                                        default it is false.</p>
-    type: Object
-    optional: true
-  - name: callback
-    description: |
-      <p>function to call once the stream
-                                        has loaded.</p>
-    type: Function
-    optional: true
-return:
-  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
-  type: p5.MediaElement
-chainable: false
----
-
-
-# createCapture
diff --git a/src/content/reference/en/p5 copy/createCheckbox.mdx b/src/content/reference/en/p5 copy/createCheckbox.mdx
deleted file mode 100644
index 45335be2d4..0000000000
--- a/src/content/reference/en/p5 copy/createCheckbox.mdx	
+++ /dev/null
@@ -1,131 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1008
-title: createCheckbox
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a checkbox <code><input></input></code> element.</p>
-
-  <p>Checkboxes extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a
-
-  <code>checked()</code> method. Calling <code>myBox.checked()</code> returns
-  <code>true</code> if it the box
-
-  is checked and <code>false</code> if not.</p>
-
-  <p>The first parameter, <code>label</code>, is optional. It's a string that
-  sets the label
-
-  to display next to the checkbox.</p>
-
-  <p>The second parameter, <code>value</code>, is also optional. It's a boolean
-  that sets the
-
-  checkbox's value.</p>
-line: 1008
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a checkbox and place it beneath the canvas.
-      checkbox = createCheckbox();
-      checkbox.position(0, 100);
-
-      describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
-    }
-
-    function draw() {
-      // Use the checkbox to set the background color.
-      if (checkbox.checked()) {
-        background(255);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a checkbox and place it beneath the canvas.
-      // Label the checkbox "white".
-      checkbox = createCheckbox(' white');
-      checkbox.position(0, 100);
-
-      describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
-    }
-
-    function draw() {
-      // Use the checkbox to set the background color.
-      if (checkbox.checked()) {
-        background(255);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a checkbox and place it beneath the canvas.
-      // Label the checkbox "white" and set its value to true.
-      checkbox = createCheckbox(' white', true);
-      checkbox.position(0, 100);
-
-      describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
-    }
-
-    function draw() {
-      // Use the checkbox to set the background color.
-      if (checkbox.checked()) {
-        background(255);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: label
-    description: |
-      <p>label displayed after the checkbox.</p>
-    type: String
-    optional: true
-  - name: value
-    description: >
-      <p>value of the checkbox. Checked is <code>true</code> and unchecked is
-      <code>false</code>.</p>
-    type: Boolean
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createCheckbox
diff --git a/src/content/reference/en/p5 copy/createColorPicker.mdx b/src/content/reference/en/p5 copy/createColorPicker.mdx
deleted file mode 100644
index 0c34a0593e..0000000000
--- a/src/content/reference/en/p5 copy/createColorPicker.mdx	
+++ /dev/null
@@ -1,101 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1759
-title: createColorPicker
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a color picker element.</p>
-
-  <p>The parameter, <code>value</code>, is optional. If a color string or
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object is passed, it will set
-  the default
-
-  color.</p>
-
-  <p>Color pickers extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a
-
-  couple of helpful methods for managing colors:</p>
-
-  <ul>
-
-  <li><code>myPicker.value()</code> returns the current color as a hex string in
-  the format <code>'#rrggbb'</code>.</li>
-
-  <li><code>myPicker.color()</code> returns the current color as a <a
-  href="/reference/p5/p5.Color">p5.Color</a> object.</li>
-
-  </ul>
-line: 1759
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myPicker;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a color picker and set its position.
-      myPicker = createColorPicker('deeppink');
-      myPicker.position(0, 100);
-
-      describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
-    }
-
-    function draw() {
-      // Use the color picker to paint the background.
-      let c = myPicker.color();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myPicker;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a color picker and set its position.
-      myPicker = createColorPicker('deeppink');
-      myPicker.position(0, 100);
-
-      describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
-    }
-
-    function draw() {
-      // Use the color picker to paint the background.
-      let c = myPicker.value();
-      background(c);
-
-      // Display the current color as a hex string.
-      text(c, 25, 55);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: >
-      <p>default color as a <a
-      href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"
-      target="_blank">CSS color string</a>.</p>
-    type: String|p5.Color
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createColorPicker
diff --git a/src/content/reference/en/p5 copy/createConvolver.mdx b/src/content/reference/en/p5 copy/createConvolver.mdx
deleted file mode 100644
index 89fba3be4e..0000000000
--- a/src/content/reference/en/p5 copy/createConvolver.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L8885
-title: createConvolver
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Create a p5.Convolver. Accepts a path to a soundfile
-  that will be used to generate an impulse response.</p>
-line: 8885
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    let cVerb, sound;
-    function preload() {
-      // We have both MP3 and OGG versions of all sound assets
-      soundFormats('ogg', 'mp3');
-
-      // Try replacing 'bx-spring' with other soundfiles like
-      // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
-      cVerb = createConvolver('/assets/bx-spring.mp3');
-
-      // Try replacing 'Damscray_DancingTiger' with
-      // 'beat', 'doorbell', lucky_dragons_-_power_melody'
-      sound = loadSound('/assets/Damscray_DancingTiger.mp3');
-    }
-
-    function setup() {
-      let cnv = createCanvas(100, 100);
-      cnv.mousePressed(playSound);
-      background(220);
-      text('tap to play', 20, 20);
-
-      // disconnect from main output...
-      sound.disconnect();
-
-      // ...and process with cVerb
-      // so that we only hear the convolution
-      cVerb.process(sound);
-    }
-
-    function playSound() {
-      sound.play();
-    }
-    </code></div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path to a sound file</p>
-    type: String
-  - name: callback
-    description: |
-      <p>function to call if loading is successful.
-                                    The object will be passed in as the argument
-                                    to the callback function.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to call if loading is not successful.
-                                    A custom error will be passed in as the argument
-                                    to the callback function.</p>
-    type: Function
-    optional: true
-return:
-  description: ''
-  type: p5.Convolver
-chainable: false
----
-
-
-# createConvolver
diff --git a/src/content/reference/en/p5 copy/createDiv.mdx b/src/content/reference/en/p5 copy/createDiv.mdx
deleted file mode 100644
index 610e0a4f67..0000000000
--- a/src/content/reference/en/p5 copy/createDiv.mdx	
+++ /dev/null
@@ -1,72 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L491
-title: createDiv
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><div></div></code> element.</p>
-
-  <p><code><div></div></code> elements are commonly used as containers for
-
-  other elements.</p>
-
-  <p>The parameter <code>html</code> is optional. It accepts a string that sets
-  the
-
-  inner HTML of the new <code><div></div></code>.</p>
-line: 491
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a div element and set its position.
-      let div = createDiv('p5*js');
-      div.position(25, 35);
-
-      describe('A gray square with the text "p5*js" written in its center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an h3 element within the div.
-      let div = createDiv('<h3>p5*js</h3>');
-      div.position(20, 5);
-
-      describe('A gray square with the text "p5*js" written in its center.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: html
-    description: >
-      <p>inner HTML for the new <code>&lt;div&gt;&lt;/div&gt;</code>
-      element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createDiv
diff --git a/src/content/reference/en/p5 copy/createElement.mdx b/src/content/reference/en/p5 copy/createElement.mdx
deleted file mode 100644
index 5969416251..0000000000
--- a/src/content/reference/en/p5 copy/createElement.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2493
-title: createElement
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
-
-  <p>The first parameter, <code>tag</code>, is a string an HTML tag such as
-  <code>'h5'</code>.</p>
-
-  <p>The second parameter, <code>content</code>, is optional. It's a string that
-  sets the
-
-  HTML content to insert into the new element. New elements have no content
-
-  by default.</p>
-line: 2493
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an h5 element with nothing in it.
-      createElement('h5');
-
-      describe('A gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an h5 element with the content "p5*js".
-      let h5 = createElement('h5', 'p5*js');
-
-      // Set the element's style and position.
-      h5.style('color', 'deeppink');
-      h5.position(30, 15);
-
-      describe('The text "p5*js" written in pink in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: tag
-    description: |
-      <p>tag for the new element.</p>
-    type: String
-  - name: content
-    description: |
-      <p>HTML content to insert into the element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createElement
diff --git a/src/content/reference/en/p5 copy/createFileInput.mdx b/src/content/reference/en/p5 copy/createFileInput.mdx
deleted file mode 100644
index 295f2a0434..0000000000
--- a/src/content/reference/en/p5 copy/createFileInput.mdx	
+++ /dev/null
@@ -1,138 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1942
-title: createFileInput
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates an <code><input></input></code> element of type
-  <code>'file'</code>.</p>
-
-  <p><code>createFileInput()</code> allows users to select local files for use
-  in a sketch.
-
-  It returns a <a href="/reference/p5/p5.File">p5.File</a> object.</p>
-
-  <p>The first parameter, <code>callback</code>, is a function that's called
-  when the file
-
-  loads. The callback function should have one parameter, <code>file</code>,
-  that's a
-
-  <a href="/reference/p5/p5.File">p5.File</a> object.</p>
-
-  <p>The second parameter, <code>multiple</code>, is optional. It's a boolean
-  value that
-
-  allows loading multiple files if set to <code>true</code>. If
-  <code>true</code>, <code>callback</code>
-
-  will be called once per file.</p>
-line: 1942
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Use the file input to select an image to
-    // load and display.
-    let input;
-    let img;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a file input and place it beneath
-      // the canvas.
-      input = createFileInput(handleImage);
-      input.position(0, 100);
-
-      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the image if loaded.
-      if (img) {
-        image(img, 0, 0, width, height);
-      }
-    }
-
-    // Create an image if the file is an image.
-    function handleImage(file) {
-      if (file.type === 'image') {
-        img = createImg(file.data, '');
-        img.hide();
-      } else {
-        img = null;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Use the file input to select multiple images
-    // to load and display.
-    let input;
-    let images = [];
-
-    function setup() {
-      // Create a file input and place it beneath
-      // the canvas. Allow it to load multiple files.
-      input = createFileInput(handleImage, true);
-      input.position(0, 100);
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the images if loaded. Each image
-      // is drawn 20 pixels lower than the
-      // previous image.
-      for (let i = 0; i < images.length; i += 1) {
-        // Calculate the y-coordinate.
-        let y = i * 20;
-
-        // Draw the image.
-        image(images[i], 0, y, 100, 100);
-      }
-
-      describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
-    }
-
-    // Create an image if the file is an image,
-    // then add it to the images array.
-    function handleImage(file) {
-      if (file.type === 'image') {
-        let img = createImg(file.data, '');
-        img.hide();
-        images.push(img);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: callback
-    description: |
-      <p>function to call once the file loads.</p>
-    type: Function
-  - name: multiple
-    description: |
-      <p>allow multiple files to be selected.</p>
-    type: Boolean
-    optional: true
-return:
-  description: new <a href="#/p5.File">p5.File</a> object.
-  type: p5.File
-chainable: false
----
-
-
-# createFileInput
diff --git a/src/content/reference/en/p5 copy/createFilterShader.mdx b/src/content/reference/en/p5 copy/createFilterShader.mdx
deleted file mode 100644
index 5c6c9a4ec5..0000000000
--- a/src/content/reference/en/p5 copy/createFilterShader.mdx	
+++ /dev/null
@@ -1,148 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L540
-title: createFilterShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Creates a <a href="/reference/p5/p5.Shader">p5.Shader</a> object to be used
-  with the
-
-  <a href="/reference/p5/filter/">filter()</a> function.</p>
-
-  <p><code>createFilterShader()</code> works like
-
-  <a href="/reference/p5/createShader/">createShader()</a> but has a default
-  vertex
-
-  shader included. <code>createFilterShader()</code> is intended to be used
-  along with
-
-  <a href="/reference/p5/filter/">filter()</a> for filtering the contents of a
-  canvas.
-
-  A filter shader will be applied to the whole canvas instead of just
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects.</p>
-
-  <p>The parameter, <code>fragSrc</code>, sets the fragment shader. It’s a
-  string that
-
-  contains the fragment shader program written in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>.</p>
-
-  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> object that's created
-  has some
-
-  uniforms that can be set:</p>
-
-  <ul>
-
-  <li><code>sampler2D tex0</code>, which contains the canvas contents as a
-  texture.</li>
-
-  <li><code>vec2 canvasSize</code>, which is the width and height of the canvas,
-  not including pixel density.</li>
-
-  <li><code>vec2 texelSize</code>, which is the size of a physical pixel
-  including pixel density. This is calculated as <code>1.0 / (width *
-  density)</code> for the pixel width and <code>1.0 / (height * density)</code>
-  for the pixel height.</li>
-
-  </ul>
-
-  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> that's created also
-  provides
-
-  <code>varying vec2 vTexCoord</code>, a coordinate with values between 0 and 1.
-
-  <code>vTexCoord</code> describes where on the canvas the pixel will be
-  drawn.</p>
-
-  <p>For more info about filters and shaders, see Adam Ferriss' <a
-  href="https://github.com/aferriss/p5jsShaderExamples/">repo of shader
-  examples</a>
-
-  or the <a href="https://p5js.org/tutorials/intro-to-shaders/">Introduction to
-  Shaders</a> tutorial.</p>
-line: 540
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    function setup() {
-      let fragSrc = `precision highp float;
-      void main() {
-        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-      }`;
-
-      createCanvas(100, 100, WEBGL);
-      let s = createFilterShader(fragSrc);
-      filter(s);
-      describe('a yellow canvas');
-    }
-    </code>
-    </div>
-
-    <div modernizr='webgl'>
-    <code>
-    let img, s;
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-    function setup() {
-      let fragSrc = `precision highp float;
-
-      // x,y coordinates, given from the vertex shader
-      varying vec2 vTexCoord;
-
-      // the canvas contents, given from filter()
-      uniform sampler2D tex0;
-      // other useful information from the canvas
-      uniform vec2 texelSize;
-      uniform vec2 canvasSize;
-      // a custom variable from this sketch
-      uniform float darkness;
-
-      void main() {
-        // get the color at current pixel
-        vec4 color = texture2D(tex0, vTexCoord);
-        // set the output color
-        color.b = 1.0;
-        color *= darkness;
-        gl_FragColor = vec4(color.rgb, 1.0);
-      }`;
-
-      createCanvas(100, 100, WEBGL);
-      s = createFilterShader(fragSrc);
-    }
-    function draw() {
-      image(img, -50, -50);
-      s.setUniform('darkness', 0.5);
-      filter(s);
-      describe('a image of bricks tinted dark blue');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fragSrc
-    description: |
-      <p>source code for the fragment shader.</p>
-    type: String
-return:
-  description: new shader object created from the fragment shader.
-  type: p5.Shader
-chainable: false
----
-
-
-# createFilterShader
diff --git a/src/content/reference/en/p5 copy/createFramebuffer.mdx b/src/content/reference/en/p5 copy/createFramebuffer.mdx
deleted file mode 100644
index 80d8199779..0000000000
--- a/src/content/reference/en/p5 copy/createFramebuffer.mdx	
+++ /dev/null
@@ -1,208 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L495
-title: createFramebuffer
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Creates and a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
-  object.</p>
-
-  <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
-  separate drawing
-
-  surfaces that can be used as textures in WebGL mode. They're similar to
-
-  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally run
-  much
-
-  faster when used as textures.</p>
-
-  <p>The parameter, <code>options</code>, is optional. An object can be passed
-  to configure
-
-  the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
-  available
-
-  properties are:</p>
-
-  <ul>
-
-  <li><code>format</code>: data format of the texture, either
-  <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>.
-  Default is <code>UNSIGNED_BYTE</code>.</li>
-
-  <li><code>channels</code>: whether to store <code>RGB</code> or
-  <code>RGBA</code> color channels. Default is to match the main canvas which is
-  <code>RGBA</code>.</li>
-
-  <li><code>depth</code>: whether to include a depth buffer. Default is
-  <code>true</code>.</li>
-
-  <li><code>depthFormat</code>: data format of depth information, either
-  <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
-  <code>FLOAT</code>.</li>
-
-  <li><code>stencil</code>: whether to include a stencil buffer for masking.
-  <code>depth</code> must be <code>true</code> for this feature to work.
-  Defaults to the value of <code>depth</code> which is <code>true</code>.</li>
-
-  <li><code>antialias</code>: whether to perform anti-aliasing. If set to
-  <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be
-  used by default. The number of samples can also be set, as in <code>{
-  antialias: 4 }</code>. Default is to match <a
-  href="/reference/p5/setAttributes/">setAttributes()</a> which is
-  <code>false</code> (<code>true</code> in Safari).</li>
-
-  <li><code>width</code>: width of the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
-  always match the main canvas width.</li>
-
-  <li><code>height</code>: height of the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
-  always match the main canvas height.</li>
-
-  <li><code>density</code>: pixel density of the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
-  always match the main canvas pixel density.</li>
-
-  <li><code>textureFiltering</code>: how to read values from the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
-  <code>LINEAR</code> (nearby pixels will be interpolated) or
-  <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code>
-  when using the texture as an image and <code>NEAREST</code> if reading the
-  texture as data. Default is <code>LINEAR</code>.</li>
-
-  </ul>
-
-  <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
-  attributes are set, they won't automatically match the main canvas and must be
-  changed manually.</p>
-
-  <p>Note: <code>createFramebuffer()</code> can only be used in WebGL mode.</p>
-line: 495
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myBuffer;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Framebuffer object.
-      myBuffer = createFramebuffer();
-
-      describe('A grid of white toruses rotating against a dark gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Start drawing to the p5.Framebuffer object.
-      myBuffer.begin();
-
-      // Clear the drawing surface.
-      clear();
-
-      // Turn on the lights.
-      lights();
-
-      // Rotate the coordinate system.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Style the torus.
-      noStroke();
-
-      // Draw the torus.
-      torus(20);
-
-      // Stop drawing to the p5.Framebuffer object.
-      myBuffer.end();
-
-      // Iterate from left to right.
-      for (let x = -50; x < 50; x += 25) {
-        // Iterate from top to bottom.
-        for (let y = -50; y < 50; y += 25) {
-          // Draw the p5.Framebuffer object to the canvas.
-          image(myBuffer, x, y, 25, 25);
-        }
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myBuffer;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create an options object.
-      let options = { width: 25, height: 25 };
-
-      // Create a p5.Framebuffer object.
-      // Use options for configuration.
-      myBuffer = createFramebuffer(options);
-
-      describe('A grid of white toruses rotating against a dark gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Start drawing to the p5.Framebuffer object.
-      myBuffer.begin();
-
-      // Clear the drawing surface.
-      clear();
-
-      // Turn on the lights.
-      lights();
-
-      // Rotate the coordinate system.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Style the torus.
-      noStroke();
-
-      // Draw the torus.
-      torus(5, 2.5);
-
-      // Stop drawing to the p5.Framebuffer object.
-      myBuffer.end();
-
-      // Iterate from left to right.
-      for (let x = -50; x < 50; x += 25) {
-        // Iterate from top to bottom.
-        for (let y = -50; y < 50; y += 25) {
-          // Draw the p5.Framebuffer object to the canvas.
-          image(myBuffer, x, y);
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: options
-    description: |
-      <p>configuration options.</p>
-    type: Object
-    optional: true
-return:
-  description: new framebuffer.
-  type: p5.Framebuffer
-chainable: false
----
-
-
-# createFramebuffer
diff --git a/src/content/reference/en/p5 copy/createGraphics.mdx b/src/content/reference/en/p5 copy/createGraphics.mdx
deleted file mode 100644
index 6d75f158f4..0000000000
--- a/src/content/reference/en/p5 copy/createGraphics.mdx	
+++ /dev/null
@@ -1,191 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L370
-title: createGraphics
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Creates a <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.</p>
-
-  <p><code>createGraphics()</code> creates an offscreen drawing canvas (graphics
-  buffer)
-
-  and returns it as a <a href="/reference/p5/p5.Graphics">p5.Graphics</a>
-  object. Drawing
-
-  to a separate graphics buffer can be helpful for performance and for
-
-  organizing code.</p>
-
-  <p>The first two parameters, <code>width</code> and <code>height</code>, are
-  optional. They set the
-
-  dimensions of the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.
-  For
-
-  example, calling <code>createGraphics(900, 500)</code> creates a graphics
-  buffer
-
-  that's 900×500 pixels.</p>
-
-  <p>The third parameter is also optional. If either of the constants
-  <code>P2D</code> or
-
-  <code>WEBGL</code> is passed, as in <code>createGraphics(900, 500,
-  WEBGL)</code>, then it will set
-
-  the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object's rendering
-  mode. If an
-
-  existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createGraphics(900, 500, myCanvas)</code>, then it will
-  be used
-
-  by the graphics buffer.</p>
-
-  <p>The fourth parameter is also optional. If an existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createGraphics(900, 500, WEBGL, myCanvas)</code>, then
-  it will be
-
-  used by the graphics buffer.</p>
-
-  <p>Note: In WebGL mode, the <a
-  href="/reference/p5/p5.Graphics">p5.Graphics</a> object
-
-  will use a WebGL2 context if it's supported by the browser. Check the
-
-  <a href="/reference/p5/webglVersion/">webglVersion</a> system variable to
-  check what
-
-  version is being used, or call <code>setAttributes({ version: 1 })</code> to
-  create a
-
-  WebGL1 context.</p>
-line: 370
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    //  Double-click to draw the contents of the graphics buffer.
-
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Create the p5.Graphics object.
-      pg = createGraphics(50, 50);
-
-      // Draw to the graphics buffer.
-      pg.background(100);
-      pg.circle(pg.width / 2, pg.height / 2, 20);
-
-      describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');
-    }
-
-    // Display the graphics buffer when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        image(pg, 25, 25);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    //  Double-click to draw the contents of the graphics buffer.
-
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Create the p5.Graphics object in WebGL mode.
-      pg = createGraphics(50, 50, WEBGL);
-
-      // Draw to the graphics buffer.
-      pg.background(100);
-      pg.lights();
-      pg.noStroke();
-      pg.rotateX(QUARTER_PI);
-      pg.rotateY(QUARTER_PI);
-      pg.torus(15, 5);
-
-      describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');
-    }
-
-    // Display the graphics buffer when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        image(pg, 25, 25);
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new graphics buffer.
-  type: p5.Graphics
-overloads:
-  - line: 370
-    params:
-      - name: width
-        description: |
-          <p>width of the graphics buffer.</p>
-        type: Number
-      - name: height
-        description: |
-          <p>height of the graphics buffer.</p>
-        type: Number
-      - name: renderer
-        description: |
-          <p>either P2D or WEBGL. Defaults to P2D.</p>
-        type: Constant
-        optional: true
-      - name: canvas
-        description: |
-          <p>existing canvas element that should be
-                                               used for the graphics buffer..</p>
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: new graphics buffer.
-      type: p5.Graphics
-  - line: 475
-    params:
-      - name: width
-        description: ''
-        type: Number
-      - name: height
-        description: ''
-        type: Number
-      - name: canvas
-        description: ''
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: ''
-      type: p5.Graphics
-chainable: false
----
-
-
-# createGraphics
diff --git a/src/content/reference/en/p5 copy/createImage.mdx b/src/content/reference/en/p5 copy/createImage.mdx
deleted file mode 100644
index 33c151c315..0000000000
--- a/src/content/reference/en/p5 copy/createImage.mdx	
+++ /dev/null
@@ -1,172 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L15
-title: createImage
-module: Image
-submodule: Image
-file: src/image/image.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-  <p><code>createImage()</code> uses the <code>width</code> and
-  <code>height</code> parameters to set the new
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object's dimensions in pixels.
-  The new
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> can be modified by updating its
-
-  <a href="/reference/p5.Image/pixels/">pixels</a> array or by calling its
-
-  <a href="/reference/p5.Image/get/">get()</a> and
-
-  <a href="/reference/p5.Image/set/">set()</a> methods. The
-
-  <a href="/reference/p5.Image/loadPixels/">loadPixels()</a> method must be
-  called
-
-  before reading or modifying pixel values. The
-
-  <a href="/reference/p5.Image/updatePixels/">updatePixels()</a> method must be
-  called
-
-  for updates to take effect.</p>
-
-  <p>Note: The new <a href="/reference/p5/p5.Image">p5.Image</a> object is
-  transparent by
-
-  default.</p>
-line: 15
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the image's pixels into memory.
-      img.loadPixels();
-
-      // Set all the image's pixels to black.
-      for (let x = 0; x < img.width; x += 1) {
-        for (let y = 0; y < img.height; y += 1) {
-          img.set(x, y, 0);
-        }
-      }
-
-      // Update the image's pixel values.
-      img.updatePixels();
-
-      // Draw the image.
-      image(img, 17, 17);
-
-      describe('A black square drawn in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the image's pixels into memory.
-      img.loadPixels();
-
-      // Create a color gradient.
-      for (let x = 0; x < img.width; x += 1) {
-        for (let y = 0; y < img.height; y += 1) {
-          // Calculate the transparency.
-          let a = map(x, 0, img.width, 0, 255);
-
-          // Create a p5.Color object.
-          let c = color(0, a);
-
-          // Set the pixel's color.
-          img.set(x, y, c);
-        }
-      }
-
-      // Update the image's pixels.
-      img.updatePixels();
-
-      // Display the image.
-      image(img, 17, 17);
-
-      describe('A square with a horizontal color gradient that transitions from gray to black.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the pixels into memory.
-      img.loadPixels();
-      // Get the current pixel density.
-      let d = pixelDensity();
-
-      // Calculate the pixel that is halfway through the image's pixel array.
-      let halfImage = 4 * (d * img.width) * (d * img.height / 2);
-
-      // Set half of the image's pixels to black.
-      for (let i = 0; i < halfImage; i += 4) {
-        // Red.
-        img.pixels[i] = 0;
-        // Green.
-        img.pixels[i + 1] = 0;
-        // Blue.
-        img.pixels[i + 2] = 0;
-        // Alpha.
-        img.pixels[i + 3] = 255;
-      }
-
-      // Update the image's pixels.
-      img.updatePixels();
-
-      // Display the image.
-      image(img, 17, 17);
-
-      describe('A black square drawn in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width in pixels.</p>
-    type: Integer
-  - name: height
-    description: |
-      <p>height in pixels.</p>
-    type: Integer
-return:
-  description: new <a href="#/p5.Image">p5.Image</a> object.
-  type: p5.Image
-chainable: false
----
-
-
-# createImage
diff --git a/src/content/reference/en/p5 copy/createImg.mdx b/src/content/reference/en/p5 copy/createImg.mdx
deleted file mode 100644
index 22b71d22c4..0000000000
--- a/src/content/reference/en/p5 copy/createImg.mdx	
+++ /dev/null
@@ -1,115 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L649
-title: createImg
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates an <code><img></code> element that can appear outside of the
-  canvas.</p>
-
-  <p>The first parameter, <code>src</code>, is a string with the path to the
-  image file.
-
-  <code>src</code> should be a relative path, as in
-  <code>'/assets/image.png'</code>, or a URL, as
-
-  in <code>'https://example.com/image.png'</code>.</p>
-
-  <p>The second parameter, <code>alt</code>, is a string with the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes"
-  target="_blank">alternate text</a>
-
-  for the image. An empty string <code>''</code> can be used for images that
-  aren't displayed.</p>
-
-  <p>The third parameter, <code>crossOrigin</code>, is optional. It's a string
-  that sets the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes/"
-  target="_blank">crossOrigin property</a>
-
-  of the image. Use <code>'anonymous'</code> or <code>'use-credentials'</code>
-  to fetch the image
-
-  with cross-origin access.</p>
-
-  <p>The fourth parameter, <code>callback</code>, is also optional. It sets a
-  function to
-
-  call after the image loads. The new image is passed to the callback
-
-  function as a <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
-line: 649
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      let img = createImg(
-        'https://p5js.org//assets/img/asterisk-01.png',
-        'The p5.js magenta asterisk.'
-      );
-      img.position(0, -10);
-
-      describe('A gray square with a magenta asterisk in its center.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 649
-    params:
-      - name: src
-        description: |
-          <p>relative path or URL for the image.</p>
-        type: String
-      - name: alt
-        description: |
-          <p>alternate text for the image.</p>
-        type: String
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 693
-    params:
-      - name: src
-        description: ''
-        type: String
-      - name: alt
-        description: ''
-        type: String
-      - name: crossOrigin
-        description: |
-          <p>crossOrigin property to use when fetching the image.</p>
-        type: String
-        optional: true
-      - name: successCallback
-        description: |
-          <p>function to call once the image loads. The new image will be passed
-                                               to the function as a <a href="#/p5.Element">p5.Element</a> object.</p>
-        type: Function
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-chainable: false
----
-
-
-# createImg
diff --git a/src/content/reference/en/p5 copy/createInput.mdx b/src/content/reference/en/p5 copy/createInput.mdx
deleted file mode 100644
index 3a790ee6b2..0000000000
--- a/src/content/reference/en/p5 copy/createInput.mdx	
+++ /dev/null
@@ -1,118 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1859
-title: createInput
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a text <code><input></input></code> element.</p>
-
-  <p>Call <code>myInput.size()</code> to set the length of the text box.</p>
-
-  <p>The first parameter, <code>value</code>, is optional. It's a string that
-  sets the
-
-  input's default value. The input is blank by default.</p>
-
-  <p>The second parameter, <code>type</code>, is also optional. It's a string
-  that
-
-  specifies the type of text being input. See MDN for a full
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/"
-  target="_blank">list of options</a>.
-
-  The default is <code>'text'</code>.</p>
-line: 1859
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myInput;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an input element and place it
-      // beneath the canvas.
-      myInput = createInput();
-      myInput.position(0, 100);
-
-      describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use the input to display a message.
-      let msg = myInput.value();
-      text(msg, 25, 55);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myInput;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an input element and place it
-      // beneath the canvas. Set its default
-      // text to "hello!".
-      myInput = createInput('hello!');
-      myInput.position(0, 100);
-
-      describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use the input to display a message.
-      let msg = myInput.value();
-      text(msg, 25, 55);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 1859
-    params:
-      - name: value
-        description: >
-          <p>default value of the input box. Defaults to an empty string
-          <code>''</code>.</p>
-        type: String
-        optional: true
-      - name: type
-        description: |
-          <p>type of input. Defaults to <code>'text'</code>.</p>
-        type: String
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1929
-    params:
-      - name: value
-        description: ''
-        type: String
-        optional: true
-    return:
-      description: ''
-      type: p5.Element
-chainable: false
----
-
-
-# createInput
diff --git a/src/content/reference/en/p5 copy/createModel.mdx b/src/content/reference/en/p5 copy/createModel.mdx
deleted file mode 100644
index c94e95900f..0000000000
--- a/src/content/reference/en/p5 copy/createModel.mdx	
+++ /dev/null
@@ -1,193 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L1132
-title: createModel
-module: Shape
-submodule: 3D Models
-file: src/webgl/loading.js
-description: >
-  <p>Load a 3d model from an OBJ or STL string.</p>
-
-  <p>OBJ and STL files lack a built-in sense of scale, causing models exported
-  from different programs to vary in size.
-
-  If your model doesn't display correctly, consider using
-  <code>loadModel()</code> with <code>normalize</code> set to <code>true</code>
-  to standardize its size.
-
-  Further adjustments can be made using the <code>scale()</code> function.</p>
-
-  <p>Also, the support for colored STL files is not present. STL files with
-  color will be
-
-  rendered without color properties.</p>
-
-  <ul>
-
-  <li>Options can include:</li>
-
-  </ul>
-
-  <ul>
-
-  <li><code>modelString</code>: Specifies the plain text string of either an stl
-  or obj file to be loaded.</li>
-
-  <li><code>fileType</code>: Defines the file extension of the model.</li>
-
-  <li><code>normalize</code>: Enables standardized size scaling during loading
-  if set to true.</li>
-
-  <li><code>successCallback</code>: Callback for post-loading actions with the
-  3D model object.</li>
-
-  <li><code>failureCallback</code>: Handles errors if model loading fails,
-  receiving an event error.</li>
-
-  <li><code>flipU</code>: Flips the U texture coordinates of the model.</li>
-
-  <li><code>flipV</code>: Flips the V texture coordinates of the model.</li>
-
-  </ul>
-line: 1132
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    const octahedron_model = `
-    v 0.000000E+00 0.000000E+00 40.0000
-    v 22.5000 22.5000 0.000000E+00
-    v 22.5000 -22.5000 0.000000E+00
-    v -22.5000 -22.5000 0.000000E+00
-    v -22.5000 22.5000 0.000000E+00
-    v 0.000000E+00 0.000000E+00 -40.0000
-    f     1 2 3
-    f     1 3 4
-    f     1 4 5
-    f     1 5 2
-    f     6 5 4
-    f     6 4 3
-    f     6 3 2
-    f     6 2 5
-    `;
-    //draw a spinning octahedron
-    let octahedron;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-      octahedron = createModel(octahedron_model, '.obj');
-      describe('Vertically rotating 3D octahedron.');
-    }
-
-    function draw() {
-      background(200);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      model(octahedron);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-  type: p5.Geometry
-overloads:
-  - line: 1132
-    params:
-      - name: modelString
-        description: |
-          <p>String of the object to be loaded</p>
-        type: String
-      - name: fileType
-        description: |
-          <p>The file extension of the model
-                                               (<code>.stl</code>, <code>.obj</code>).</p>
-        type: String
-        optional: true
-      - name: normalize
-        description: |
-          <p>If true, scale the model to a
-                                               standardized size when loading</p>
-        type: Boolean
-      - name: successCallback
-        description: |
-          <p>Function to be called
-                                              once the model is loaded. Will be passed
-                                              the 3D model object.</p>
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: |
-          <p>called with event error if
-                                                  the model fails to load.</p>
-        type: Function(Event)
-        optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-  - line: 1202
-    params:
-      - name: modelString
-        description: ''
-        type: String
-      - name: fileType
-        description: ''
-        type: String
-        optional: true
-      - name: successCallback
-        description: ''
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: ''
-        type: Function(Event)
-        optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-  - line: 1210
-    params:
-      - name: modelString
-        description: ''
-        type: String
-      - name: fileType
-        description: ''
-        type: String
-        optional: true
-      - name: options
-        description: ''
-        type: Object
-        optional: true
-        props:
-          - name: successCallback
-            description: ''
-            type: function(p5.Geometry)
-            optional: true
-          - name: failureCallback
-            description: ''
-            type: Function(Event)
-            optional: true
-          - name: normalize
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipU
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipV
-            description: ''
-            type: Boolean
-            optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-chainable: false
----
-
-
-# createModel
diff --git a/src/content/reference/en/p5 copy/createNumberDict.mdx b/src/content/reference/en/p5 copy/createNumberDict.mdx
deleted file mode 100644
index 952410a222..0000000000
--- a/src/content/reference/en/p5 copy/createNumberDict.mdx	
+++ /dev/null
@@ -1,57 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L48
-title: createNumberDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: >
-  <p>Creates a new instance of <a
-  href="/reference/p5/p5.NumberDict">p5.NumberDict</a> using the key-value pair
-   or object you provide.</p>
-line: 48
-isConstructor: false
-itemtype: method
-example:
-  - |2-
-
-     <div class="norender">
-     <code>
-     function setup() {
-       let myDictionary = createNumberDict(100, 42);
-       print(myDictionary.hasKey(100)); // logs true to console
-      let anotherDictionary = createNumberDict({ 200: 84 });
-       print(anotherDictionary.hasKey(200)); // logs true to console
-     }
-     </code></div>
-class: p5
-return:
-  description: ''
-  type: p5.NumberDict
-overloads:
-  - line: 48
-    params:
-      - name: key
-        description: ''
-        type: Number
-      - name: value
-        description: ''
-        type: Number
-    return:
-      description: ''
-      type: p5.NumberDict
-  - line: 71
-    params:
-      - name: object
-        description: |
-          <p>object</p>
-        type: Object
-    return:
-      description: ''
-      type: p5.NumberDict
-chainable: false
----
-
-
-# createNumberDict
diff --git a/src/content/reference/en/p5 copy/createP.mdx b/src/content/reference/en/p5 copy/createP.mdx
deleted file mode 100644
index 6d3005fc37..0000000000
--- a/src/content/reference/en/p5 copy/createP.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L543
-title: createP
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a paragraph element.</p>
-
-  <p><code><p></p></code> elements are commonly used for paragraph-length
-  text.</p>
-
-  <p>The parameter <code>html</code> is optional. It accepts a string that sets
-  the
-
-  inner HTML of the new <code><p></p></code>.</p>
-line: 543
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a paragraph element and set its position.
-      let p = createP('Tell me a story.');
-      p.position(5, 0);
-
-      describe('A gray square displaying the text "Tell me a story." written in black.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: html
-    description: |
-      <p>inner HTML for the new <code>&lt;p&gt;&lt;/p&gt;</code> element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createP
diff --git a/src/content/reference/en/p5 copy/createRadio.mdx b/src/content/reference/en/p5 copy/createRadio.mdx
deleted file mode 100644
index f2b8a2a81c..0000000000
--- a/src/content/reference/en/p5 copy/createRadio.mdx	
+++ /dev/null
@@ -1,223 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1440
-title: createRadio
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a radio button element.</p>
-
-  <p>The parameter is optional. If a string is passed, as in
-
-  <code>let myRadio = createSelect('food')</code>, then each radio option will
-
-  have <code>"food"</code> as its <code>name</code> parameter: <code><input
-  name="food"></code>.
-
-  If an existing <code><div></div></code> or <code><span></span></code>
-
-  element is passed, as in <code>let myRadio = createSelect(container)</code>,
-  it will
-
-  become the radio button's parent element.</p>
-
-  <p>Radio buttons extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a few
-
-  helpful methods for managing options:</p>
-
-  <ul>
-
-  <li><code>myRadio.option(value, [label])</code> adds an option to the menu.
-  The first parameter, <code>value</code>, is a string that sets the option's
-  value and label. The second parameter, <code>label</code>, is optional. If
-  provided, it sets the label displayed for the <code>value</code>. If an option
-  with <code>value</code> already exists, its label is changed and its value is
-  returned.</li>
-
-  <li><code>myRadio.value()</code> returns the currently-selected option's
-  value.</li>
-
-  <li><code>myRadio.selected()</code> returns the currently-selected
-  option.</li>
-
-  <li><code>myRadio.selected(value)</code> selects the given option and returns
-  it as an <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/"
-  target="_blank"><code>HTMLInputElement</code></a>.</li>
-
-  <li><code>myRadio.disable(shouldDisable)</code> Disables the radio button if
-  <code>true</code> is passed, and enables it if <code>false</code> is
-  passed.</li>
-
-  </ul>
-line: 1440
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let style = document.createElement('style');
-    style.innerHTML = `
-    .p5-radio label {
-       display: flex;
-       align-items: center;
-     }
-     .p5-radio input {
-       margin-right: 5px;
-     }
-     `;
-    document.head.appendChild(style);
-
-    let myRadio;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a radio button element and place it
-      // in the top-left corner.
-      myRadio = createRadio();
-      myRadio.position(0, 0);
-      myRadio.class('p5-radio');
-      myRadio.size(60);
-
-      // Add a few color options.
-      myRadio.option('red');
-      myRadio.option('yellow');
-      myRadio.option('blue');
-
-      // Choose a default option.
-      myRadio.selected('yellow');
-
-      describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
-    }
-
-    function draw() {
-      // Set the background color using the radio button.
-      let g = myRadio.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myRadio;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a radio button element and place it
-      // in the top-left corner.
-      myRadio = createRadio();
-      myRadio.position(0, 0);
-      myRadio.size(50);
-
-      // Add a few color options.
-      // Color values are labeled with
-      // emotions they evoke.
-      myRadio.option('red', 'love');
-      myRadio.option('yellow', 'joy');
-      myRadio.option('blue', 'trust');
-
-      // Choose a default option.
-      myRadio.selected('yellow');
-
-      describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
-    }
-
-    function draw() {
-      // Set the background color using the radio button.
-      let c = myRadio.value();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myRadio;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a radio button element and place it
-      // in the top-left corner.
-      myRadio = createRadio();
-      myRadio.position(0, 0);
-      myRadio.class('p5-radio');
-      myRadio.size(50);
-
-      // Add a few color options.
-      myRadio.option('red');
-      myRadio.option('yellow');
-      myRadio.option('blue');
-
-      // Choose a default option.
-      myRadio.selected('yellow');
-
-      // Create a button and place it beneath the canvas.
-      let btn = createButton('disable');
-      btn.position(0, 100);
-
-      // Call disableRadio() when btn is pressed.
-      btn.mousePressed(disableRadio);
-
-      describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
-    }
-
-    function draw() {
-      // Set the background color using the radio button.
-      let c = myRadio.value();
-      background(c);
-    }
-
-    // Disable myRadio.
-    function disableRadio() {
-      myRadio.disable(true);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 1440
-    params:
-      - name: containerElement
-        description: >
-          <p>container HTML Element, either a
-          <code>&lt;div&gt;&lt;/div&gt;</code>
-
-          or <code>&lt;span&gt;&lt;/span&gt;</code>.</p>
-        type: Object
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1588
-    params:
-      - name: name
-        description: >
-          <p>name parameter assigned to each option's
-          <code>&lt;input&gt;&lt;/input&gt;</code> element.</p>
-        type: String
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1593
-    params: []
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-chainable: false
----
-
-
-# createRadio
diff --git a/src/content/reference/en/p5 copy/createSelect.mdx b/src/content/reference/en/p5 copy/createSelect.mdx
deleted file mode 100644
index 496f4082e6..0000000000
--- a/src/content/reference/en/p5 copy/createSelect.mdx	
+++ /dev/null
@@ -1,235 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1159
-title: createSelect
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a dropdown menu <code><select></select></code> element.</p>
-
-  <p>The parameter is optional. If <code>true</code> is passed, as in
-
-  <code>let mySelect = createSelect(true)</code>, then the dropdown will support
-
-  multiple selections. If an existing <code><select></select></code> element
-
-  is passed, as in <code>let mySelect = createSelect(otherSelect)</code>, the
-  existing
-
-  element will be wrapped in a new <a
-  href="/reference/p5/p5.Element">p5.Element</a>
-
-  object.</p>
-
-  <p>Dropdowns extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a few
-
-  helpful methods for managing options:</p>
-
-  <ul>
-
-  <li><code>mySelect.option(name, [value])</code> adds an option to the menu.
-  The first paremeter, <code>name</code>, is a string that sets the option's
-  name and value. The second parameter, <code>value</code>, is optional. If
-  provided, it sets the value that corresponds to the key <code>name</code>. If
-  an option with <code>name</code> already exists, its value is changed to
-  <code>value</code>.</li>
-
-  <li><code>mySelect.value()</code> returns the currently-selected option's
-  value.</li>
-
-  <li><code>mySelect.selected()</code> returns the currently-selected
-  option.</li>
-
-  <li><code>mySelect.selected(option)</code> selects the given option by
-  default.</li>
-
-  <li><code>mySelect.disable()</code> marks the whole dropdown element as
-  disabled.</li>
-
-  <li><code>mySelect.disable(option)</code> marks a given option as
-  disabled.</li>
-
-  <li><code>mySelect.enable()</code> marks the whole dropdown element as
-  enabled.</li>
-
-  <li><code>mySelect.enable(option)</code> marks a given option as enabled.</li>
-
-  </ul>
-line: 1159
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and place it beneath the canvas.
-      mySelect = createSelect();
-      mySelect.position(0, 100);
-
-      // Add color options.
-      mySelect.option('red');
-      mySelect.option('green');
-      mySelect.option('blue');
-      mySelect.option('yellow');
-
-      // Set the selected option to "red".
-      mySelect.selected('red');
-
-      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
-    }
-
-    function draw() {
-      // Use the selected value to paint the background.
-      let c = mySelect.selected();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and place it beneath the canvas.
-      mySelect = createSelect();
-      mySelect.position(0, 100);
-
-      // Add color options.
-      mySelect.option('red');
-      mySelect.option('green');
-      mySelect.option('blue');
-      mySelect.option('yellow');
-
-      // Set the selected option to "red".
-      mySelect.selected('red');
-
-      // Disable the "yellow" option.
-      mySelect.disable('yellow');
-
-      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
-    }
-
-    function draw() {
-      // Use the selected value to paint the background.
-      let c = mySelect.selected();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and place it beneath the canvas.
-      mySelect = createSelect();
-      mySelect.position(0, 100);
-
-      // Add color options with names and values.
-      mySelect.option('one', 'red');
-      mySelect.option('two', 'green');
-      mySelect.option('three', 'blue');
-      mySelect.option('four', 'yellow');
-
-      // Set the selected option to "one".
-      mySelect.selected('one');
-
-      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
-    }
-
-    function draw() {
-      // Use the selected value to paint the background.
-      let c = mySelect.selected();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Hold CTRL to select multiple options on Windows and Linux.
-    // Hold CMD to select multiple options on macOS.
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and allow multiple selections.
-      // Place it beneath the canvas.
-      mySelect = createSelect(true);
-      mySelect.position(0, 100);
-
-      // Add color options.
-      mySelect.option('red');
-      mySelect.option('green');
-      mySelect.option('blue');
-      mySelect.option('yellow');
-
-      describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use the selected value(s) to draw circles.
-      let colors = mySelect.selected();
-      for (let i = 0; i < colors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = 10 + i * 20;
-
-        // Access the color.
-        let c = colors[i];
-
-        // Draw the circle.
-        fill(c);
-        circle(x, 50, 20);
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 1159
-    params:
-      - name: multiple
-        description: |
-          <p>support multiple selections.</p>
-        type: Boolean
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1324
-    params:
-      - name: existing
-        description: >
-          <p>select element to wrap, either as a <a
-          href="#/p5.Element">p5.Element</a> or
-                                   a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" target="_blank">HTMLSelectElement</a>.</p>
-        type: Object
-    return:
-      description: ''
-      type: p5.Element
-chainable: false
----
-
-
-# createSelect
diff --git a/src/content/reference/en/p5 copy/createShader.mdx b/src/content/reference/en/p5 copy/createShader.mdx
deleted file mode 100644
index c595145529..0000000000
--- a/src/content/reference/en/p5 copy/createShader.mdx	
+++ /dev/null
@@ -1,438 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L173
-title: createShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
-
-  <p>Shaders are programs that run on the graphics processing unit (GPU). They
-
-  can process many pixels at the same time, making them fast for many
-
-  graphics tasks. They’re written in a language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.</p>
-
-  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
-  it can be
-
-  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
-
-  <code>shader(myShader)</code>. A shader program consists of two parts, a
-  vertex shader
-
-  and a fragment shader. The vertex shader affects where 3D geometry is drawn
-
-  on the screen and the fragment shader affects color.</p>
-
-  <p>The first parameter, <code>vertSrc</code>, sets the vertex shader. It’s a
-  string that
-
-  contains the vertex shader program written in GLSL.</p>
-
-  <p>The second parameter, <code>fragSrc</code>, sets the fragment shader. It’s
-  a string
-
-  that contains the fragment shader program written in GLSL.</p>
-
-  <p>A shader can optionally describe <em>hooks,</em> which are functions in
-  GLSL that
-
-  users may choose to provide to customize the behavior of the shader using the
-
-  <a href="/reference/p5.Shader/modify/"><code>modify()</code></a> method of
-  <code>p5.Shader</code>. These are added by
-
-  describing the hooks in a third parameter, <code>options</code>, and
-  referencing the hooks in
-
-  your <code>vertSrc</code> or <code>fragSrc</code>. Hooks for the vertex or
-  fragment shader are described under
-
-  the <code>vertex</code> and <code>fragment</code> keys of
-  <code>options</code>. Each one is an object. where each key is
-
-  the type and name of a hook function, and each value is a string with the
-
-  parameter list and default implementation of the hook. For example, to let
-  users
-
-  optionally run code at the start of the vertex shader, the options object
-  could
-
-  include:</p>
-
-  <pre><code class="language-js">{
-    vertex: {
-      'void beforeVertex': '() {}'
-    }
-  }
-
-  </code></pre>
-
-  <p>Then, in your vertex shader source, you can run a hook by calling a
-  function
-
-  with the same name prefixed by <code>HOOK_</code>. If you want to check if the
-  default
-
-  hook has been replaced, maybe to avoid extra overhead, you can check if the
-
-  same name prefixed by <code>AUGMENTED_HOOK_</code> has been defined:</p>
-
-  <pre><code class="language-glsl">void main() {
-    // In most cases, just calling the hook is fine:
-    HOOK_beforeVertex();
-
-    // Alternatively, for more efficiency:
-    #ifdef AUGMENTED_HOOK_beforeVertex
-    HOOK_beforeVertex();
-    #endif
-
-    // Add the rest of your shader code here!
-  }
-
-  </code></pre>
-
-  <p>Note: Only filter shaders can be used in 2D mode. All shaders can be used
-
-  in WebGL mode.</p>
-line: 173
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-
-    void main() {
-      // Set each pixel's RGBA value to yellow.
-      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let shaderProgram = createShader(vertSrc, fragSrc);
-
-      // Compile and apply the p5.Shader object.
-      shader(shaderProgram);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A yellow square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-    uniform vec2 p;
-    uniform float r;
-    const int numIterations = 500;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vec2 c = p + gl_FragCoord.xy * r;
-      vec2 z = c;
-      float n = 0.0;
-
-      for (int i = numIterations; i > 0; i--) {
-        if (z.x * z.x + z.y * z.y > 4.0) {
-          n = float(i) / float(numIterations);
-          break;
-        }
-        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
-      }
-
-      gl_FragColor = vec4(
-        0.5 - cos(n * 17.0) / 2.0,
-        0.5 - cos(n * 13.0) / 2.0,
-        0.5 - cos(n * 23.0) / 2.0,
-        1.0
-      );
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let mandelbrot = createShader(vertSrc, fragSrc);
-
-      // Compile and apply the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      // p is the center point of the Mandelbrot image.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      // Set the shader uniform r to 0.005.
-      // r is the size of the image in Mandelbrot-space.
-      mandelbrot.setUniform('r', 0.005);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A black fractal image on a magenta background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-    uniform vec2 p;
-    uniform float r;
-    const int numIterations = 500;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vec2 c = p + gl_FragCoord.xy * r;
-      vec2 z = c;
-      float n = 0.0;
-
-      for (int i = numIterations; i > 0; i--) {
-        if (z.x * z.x + z.y * z.y > 4.0) {
-          n = float(i) / float(numIterations);
-          break;
-        }
-
-        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
-      }
-
-      gl_FragColor = vec4(
-        0.5 - cos(n * 17.0) / 2.0,
-        0.5 - cos(n * 13.0) / 2.0,
-        0.5 - cos(n * 23.0) / 2.0,
-        1.0
-      );
-    }
-    `;
-
-    let mandelbrot;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      mandelbrot = createShader(vertSrc, fragSrc);
-
-      // Apply the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      // p is the center point of the Mandelbrot image.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates
-      // between 0 and 0.005.
-      // r is the size of the image in Mandelbrot-space.
-      let radius = 0.005 * (sin(frameCount * 0.01) + 1);
-      mandelbrot.setUniform('r', radius);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // A shader with hooks.
-    let myShader;
-
-    // A shader with modified hooks.
-    let modifiedShader;
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-
-    void main() {
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a fragment shader that uses a hook.
-    let fragSrc = `
-    precision highp float;
-    void main() {
-      // Let users override the color
-      gl_FragColor = HOOK_getColor(vec4(1., 0., 0., 1.));
-    }
-    `;
-
-    function setup() {
-      createCanvas(50, 50, WEBGL);
-
-      // Create a shader with hooks
-      myShader = createShader(vertSrc, fragSrc, {
-        fragment: {
-          'vec4 getColor': '(vec4 color) { return color; }'
-        }
-      });
-
-      // Make a version of the shader with a hook overridden
-      modifiedShader = myShader.modify({
-        'vec4 getColor': `(vec4 color) {
-          return vec4(0., 0., 1., 1.);
-        }`
-      });
-    }
-
-    function draw() {
-      noStroke();
-
-      push();
-      shader(myShader);
-      translate(-width/3, 0);
-      sphere(10);
-      pop();
-
-      push();
-      shader(modifiedShader);
-      translate(width/3, 0);
-      sphere(10);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: vertSrc
-    description: |
-      <p>source code for the vertex shader.</p>
-    type: String
-  - name: fragSrc
-    description: |
-      <p>source code for the fragment shader.</p>
-    type: String
-  - name: options
-    description: >
-      <p>An optional object describing how this shader can
-
-      be augmented with hooks. It can include:</p>
-
-      <ul>
-
-      <li><code>vertex</code>: An object describing the available vertex shader
-      hooks.</li>
-
-      <li><code>fragment</code>: An object describing the available frament
-      shader hooks.</li>
-
-      </ul>
-    type: Object
-    optional: true
-return:
-  description: |-
-    new shader object created from the
-    vertex and fragment shaders.
-  type: p5.Shader
-chainable: false
----
-
-
-# createShader
diff --git a/src/content/reference/en/p5 copy/createSlider.mdx b/src/content/reference/en/p5 copy/createSlider.mdx
deleted file mode 100644
index 7bdf510078..0000000000
--- a/src/content/reference/en/p5 copy/createSlider.mdx	
+++ /dev/null
@@ -1,162 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L789
-title: createSlider
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a slider <code><input></input></code> element.</p>
-
-  <p>Range sliders are useful for quickly selecting numbers from a given
-  range.</p>
-
-  <p>The first two parameters, <code>min</code> and <code>max</code>, are
-  numbers that set the
-
-  slider's minimum and maximum.</p>
-
-  <p>The third parameter, <code>value</code>, is optional. It's a number that
-  sets the
-
-  slider's default value.</p>
-
-  <p>The fourth parameter, <code>step</code>, is also optional. It's a number
-  that sets the
-
-  spacing between each value in the slider's range. Setting <code>step</code> to
-  0
-
-  allows the slider to move smoothly from <code>min</code> to
-  <code>max</code>.</p>
-line: 789
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      slider = createSlider(0, 255);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      // Set its default value to 0.
-      slider = createSlider(0, 255, 0);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      // Set its default value to 0.
-      // Set its step size to 50.
-      slider = createSlider(0, 255, 0, 50);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      // Set its default value to 0.
-      // Set its step size to 0 so that it moves smoothly.
-      slider = createSlider(0, 255, 0, 0);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: min
-    description: |
-      <p>minimum value of the slider.</p>
-    type: Number
-  - name: max
-    description: |
-      <p>maximum value of the slider.</p>
-    type: Number
-  - name: value
-    description: |
-      <p>default value of the slider.</p>
-    type: Number
-    optional: true
-  - name: step
-    description: |
-      <p>size for each step in the slider's range.</p>
-    type: Number
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createSlider
diff --git a/src/content/reference/en/p5 copy/createSpan.mdx b/src/content/reference/en/p5 copy/createSpan.mdx
deleted file mode 100644
index ed346b35dc..0000000000
--- a/src/content/reference/en/p5 copy/createSpan.mdx	
+++ /dev/null
@@ -1,93 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L578
-title: createSpan
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><span></span></code> element.</p>
-
-  <p><code><span></span></code> elements are commonly used as containers
-
-  for inline elements. For example, a <code><span></span></code>
-
-  can hold part of a sentence that's a
-
-  <span style="color: deeppink;">different</span> style.</p>
-
-  <p>The parameter <code>html</code> is optional. It accepts a string that sets
-  the
-
-  inner HTML of the new <code><span></span></code>.</p>
-line: 578
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a span element and set its position.
-      let span = createSpan('p5*js');
-      span.position(25, 35);
-
-      describe('A gray square with the text "p5*js" written in its center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Create a div element as a container.
-      let div = createDiv();
-
-      // Place the div at the center.
-      div.position(25, 35);
-
-      // Create a span element.
-      let s1 = createSpan('p5');
-
-      // Create a second span element.
-      let s2 = createSpan('*');
-
-      // Set the second span's font color.
-      s2.style('color', 'deeppink');
-
-      // Create a third span element.
-      let s3 = createSpan('js');
-
-      // Add all the spans to the container div.
-      s1.parent(div);
-      s2.parent(div);
-      s3.parent(div);
-
-      describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: html
-    description: >
-      <p>inner HTML for the new <code>&lt;span&gt;&lt;/span&gt;</code>
-      element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createSpan
diff --git a/src/content/reference/en/p5 copy/createStringDict.mdx b/src/content/reference/en/p5 copy/createStringDict.mdx
deleted file mode 100644
index bc080c1276..0000000000
--- a/src/content/reference/en/p5 copy/createStringDict.mdx	
+++ /dev/null
@@ -1,56 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L14
-title: createStringDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>Creates a new instance of p5.StringDict using the key-value pair
-   or the object you provide.</p>
-line: 14
-isConstructor: false
-itemtype: method
-example:
-  - |2-
-
-     <div class="norender">
-     <code>
-     function setup() {
-       let myDictionary = createStringDict('p5', 'js');
-       print(myDictionary.hasKey('p5')); // logs true to console
-      let anotherDictionary = createStringDict({ happy: 'coding' });
-       print(anotherDictionary.hasKey('happy')); // logs true to console
-     }
-     </code></div>
-class: p5
-return:
-  description: ''
-  type: p5.StringDict
-overloads:
-  - line: 14
-    params:
-      - name: key
-        description: ''
-        type: String
-      - name: value
-        description: ''
-        type: String
-    return:
-      description: ''
-      type: p5.StringDict
-  - line: 37
-    params:
-      - name: object
-        description: |
-          <p>object</p>
-        type: Object
-    return:
-      description: ''
-      type: p5.StringDict
-chainable: false
----
-
-
-# createStringDict
diff --git a/src/content/reference/en/p5 copy/createVector.mdx b/src/content/reference/en/p5 copy/createVector.mdx
deleted file mode 100644
index 07ca75ec36..0000000000
--- a/src/content/reference/en/p5 copy/createVector.mdx	
+++ /dev/null
@@ -1,133 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/math.js#L10
-title: createVector
-module: Math
-submodule: Vector
-file: src/math/math.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-
-  <p>A vector can be thought of in different ways. In one view, a vector is like
-
-  an arrow pointing in space. Vectors have both magnitude (length) and
-
-  direction. This view is helpful for programming motion.</p>
-
-  <p>A vector's components determine its magnitude and direction. For example,
-
-  calling <code>createVector(3, 4)</code> creates a new
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object with an x-component of
-  3 and a
-
-  y-component of 4. From the origin, this vector's tip is 3 units to the
-
-  right and 4 units down.</p>
-
-  <p><a href="/reference/p5/p5.Vector">p5.Vector</a> objects are often used to
-  program
-
-  motion because they simplify the math. For example, a moving ball has a
-
-  position and a velocity. Position describes where the ball is in space. The
-
-  ball's position vector extends from the origin to the ball's center.
-
-  Velocity describes the ball's speed and the direction it's moving. If the
-
-  ball is moving straight up, its velocity vector points straight up. Adding
-
-  the ball's velocity vector to its position vector moves it, as in
-
-  <code>pos.add(vel)</code>. Vector math relies on methods inside the
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> class.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create p5.Vector objects.
-      let p1 = createVector(25, 25);
-      let p2 = createVector(50, 50);
-      let p3 = createVector(75, 75);
-
-      // Draw the dots.
-      strokeWeight(5);
-      point(p1);
-      point(p2);
-      point(p3);
-
-      describe('Three black dots form a diagonal line from top left to bottom right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pos;
-    let vel;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create p5.Vector objects.
-      pos = createVector(50, 100);
-      vel = createVector(0, -1);
-
-      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Add velocity to position.
-      pos.add(vel);
-
-      // If the dot reaches the top of the canvas,
-      // restart from the bottom.
-      if (pos.y < 0) {
-        pos.y = 100;
-      }
-
-      // Draw the dot.
-      strokeWeight(5);
-      point(pos);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x component of the vector.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y component of the vector.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z component of the vector.</p>
-    type: Number
-    optional: true
-return:
-  description: new <a href="#/p5.Vector">p5.Vector</a> object.
-  type: p5.Vector
-chainable: false
----
-
-
-# createVector
diff --git a/src/content/reference/en/p5 copy/createVideo.mdx b/src/content/reference/en/p5 copy/createVideo.mdx
deleted file mode 100644
index a7053f80a0..0000000000
--- a/src/content/reference/en/p5 copy/createVideo.mdx	
+++ /dev/null
@@ -1,135 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2115
-title: createVideo
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><video></code> element for simple audio/video playback.</p>
-
-  <p><code>createVideo()</code> returns a new
-
-  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
-  shown by
-
-  default. They can be hidden by calling <code>video.hide()</code> and drawn to
-  the
-
-  canvas using <a href="/reference/p5/image/">image()</a>.</p>
-
-  <p>The first parameter, <code>src</code>, is the path the video. If a single
-  string is
-
-  passed, as in <code>'/assets/topsecret.mp4'</code>, a single video is loaded.
-  An array
-
-  of strings can be used to load the same video in different formats. For
-
-  example, <code>['/assets/topsecret.mp4', '/assets/topsecret.ogv',
-  '/assets/topsecret.webm']</code>.
-
-  This is useful for ensuring that the video can play across different browsers
-  with
-
-  different capabilities. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/">MDN</a>
-
-  for more information about supported formats.</p>
-
-  <p>The second parameter, <code>callback</code>, is optional. It's a function
-  to call once
-
-  the video is ready to play.</p>
-line: 2115
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Load a video and add it to the page.
-      // Note: this may not work in some browsers.
-      let video = createVideo('/assets/small.mp4');
-
-      // Show the default video controls.
-      video.showControls();
-
-      describe('A video of a toy robot with playback controls beneath it.');
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Load a video and add it to the page.
-      // Provide an array options for different file formats.
-      let video = createVideo(
-        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm']
-      );
-
-      // Show the default video controls.
-      video.showControls();
-
-      describe('A video of a toy robot with playback controls beneath it.');
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    let video;
-
-    function setup() {
-      noCanvas();
-
-      // Load a video and add it to the page.
-      // Provide an array options for different file formats.
-      // Call mute() once the video loads.
-      video = createVideo(
-        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm'],
-        muteVideo
-      );
-
-      // Show the default video controls.
-      video.showControls();
-
-      describe('A video of a toy robot with playback controls beneath it.');
-    }
-
-    // Mute the video once it loads.
-    function muteVideo() {
-      video.volume(0);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: src
-    description: |
-      <p>path to a video file, or an array of paths for
-                                    supporting different browsers.</p>
-    type: 'String|String[]'
-  - name: callback
-    description: |
-      <p>function to call once the video is ready to play.</p>
-    type: Function
-    optional: true
-return:
-  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
-  type: p5.MediaElement
-chainable: false
----
-
-
-# createVideo
diff --git a/src/content/reference/en/p5 copy/createWriter.mdx b/src/content/reference/en/p5 copy/createWriter.mdx
deleted file mode 100644
index 18928ff461..0000000000
--- a/src/content/reference/en/p5 copy/createWriter.mdx	
+++ /dev/null
@@ -1,146 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1444
-title: createWriter
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a>
-  object.</p>
-
-  <p><a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> objects provide a
-  way to
-
-  save a sequence of text data, called the <em>print stream</em>, to the user's
-
-  computer. They're low-level objects that enable precise control of text
-
-  output. Functions such as
-
-  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
-
-  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
-  file
-
-  saving.</p>
-
-  <p>The first parameter, <code>filename</code>, is the name of the file to be
-  written. If
-
-  a string is passed, as in <code>createWriter('words.txt')</code>, a new
-
-  <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> object will be
-  created that
-
-  writes to a file named <code>words.txt</code>.</p>
-
-  <p>The second parameter, <code>extension</code>, is optional. If a string is
-  passed, as
-
-  in <code>createWriter('words', 'csv')</code>, the first parameter will be
-  interpreted
-
-  as the file name and the second parameter as the extension.</p>
-line: 1444
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create a p5.PrintWriter object.
-        let myWriter = createWriter('xo.txt');
-
-        // Add some lines to the print stream.
-        myWriter.print('XOO');
-        myWriter.print('OXO');
-        myWriter.print('OOX');
-
-        // Save the file and close the print stream.
-        myWriter.close();
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create a p5.PrintWriter object.
-        // Use the file format .csv.
-        let myWriter = createWriter('mauna_loa_co2', 'csv');
-
-        // Add some lines to the print stream.
-        myWriter.print('date,ppm_co2');
-        myWriter.print('1960-01-01,316.43');
-        myWriter.print('1970-01-01,325.06');
-        myWriter.print('1980-01-01,337.9');
-        myWriter.print('1990-01-01,353.86');
-        myWriter.print('2000-01-01,369.45');
-        myWriter.print('2020-01-01,413.61');
-
-        // Save the file and close the print stream.
-        myWriter.close();
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: name
-    description: |
-      <p>name of the file to create.</p>
-    type: String
-  - name: extension
-    description: |
-      <p>format to use for the file.</p>
-    type: String
-    optional: true
-return:
-  description: stream for writing data.
-  type: p5.PrintWriter
-chainable: false
----
-
-
-# createWriter
diff --git a/src/content/reference/en/p5 copy/cursor.mdx b/src/content/reference/en/p5 copy/cursor.mdx
deleted file mode 100644
index 8ada3a4379..0000000000
--- a/src/content/reference/en/p5 copy/cursor.mdx	
+++ /dev/null
@@ -1,139 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L209
-title: cursor
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Changes the cursor's appearance.</p>
-
-  <p>The first parameter, <code>type</code>, sets the type of cursor to display.
-  The
-
-  built-in options are <code>ARROW</code>, <code>CROSS</code>,
-  <code>HAND</code>, <code>MOVE</code>, <code>TEXT</code>, and
-  <code>WAIT</code>.
-
-  <code>cursor()</code> also recognizes standard CSS cursor properties passed as
-
-  strings: <code>'help'</code>, <code>'wait'</code>, <code>'crosshair'</code>,
-  <code>'not-allowed'</code>, <code>'zoom-in'</code>,
-
-  and <code>'grab'</code>. If the path to an image is passed, as in
-
-  <code>cursor('/assets/target.png')</code>, then the image will be used as the
-  cursor.
-
-  Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be <a
-  href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits">at
-  most 32 by 32 pixels large.</a></p>
-
-  <p>The parameters <code>x</code> and <code>y</code> are optional. If an image
-  is used for the
-
-  cursor, <code>x</code> and <code>y</code> set the location pointed to within
-  the image. They are
-
-  both 0 by default, so the cursor points to the image's top-left corner.
-  <code>x</code>
-
-  and <code>y</code> must be less than the image's width and height,
-  respectively.</p>
-line: 209
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square. The cursor appears as crosshairs.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the cursor to crosshairs: +
-      cursor(CROSS);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Divide the canvas into quadrants.
-      line(50, 0, 50, 100);
-      line(0, 50, 100, 50);
-
-      // Change cursor based on mouse position.
-      if (mouseX < 50 && mouseY < 50) {
-        cursor(CROSS);
-      } else if (mouseX > 50 && mouseY < 50) {
-        cursor('progress');
-      } else if (mouseX > 50 && mouseY > 50) {
-        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
-      } else {
-        cursor('grab');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Change the cursor's active spot
-      // when the mouse is pressed.
-      if (mouseIsPressed === true) {
-        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);
-      } else {
-        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: type
-    description: |
-      <p>Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
-                                    Native CSS properties: 'grab', 'progress', and so on.
-                                    Path to cursor image.</p>
-    type: String|Constant
-  - name: x
-    description: |
-      <p>horizontal active spot of the cursor.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>vertical active spot of the cursor.</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# cursor
diff --git a/src/content/reference/en/p5 copy/curve.mdx b/src/content/reference/en/p5 copy/curve.mdx
deleted file mode 100644
index 9631e551e8..0000000000
--- a/src/content/reference/en/p5 copy/curve.mdx	
+++ /dev/null
@@ -1,272 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L570
-title: curve
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Draws a curve using a Catmull-Rom spline.</p>
-
-  <p>Spline curves can form shapes and curves that slope gently. They’re like
-
-  cables that are attached to a set of points. Splines are defined by two
-
-  anchor points and two control points.</p>
-
-  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
-  first control point. This
-
-  point isn’t drawn and can be thought of as the curve’s starting point.</p>
-
-  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
-  <code>x3</code>, and <code>y3</code>, set the two anchor
-
-  points. The anchor points are the start and end points of the curve’s
-
-  visible segment.</p>
-
-  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
-  the last control
-
-  point. This point isn’t drawn and can be thought of as the curve’s ending
-
-  point.</p>
-
-  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>curve()</code> has twelve arguments because each point has x-, y-, and
-
-  z-coordinates.</p>
-line: 570
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(5, 26, 73, 24, 73, 61, 15, 65);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(5, 26, 5, 26, 73, 24, 73, 61);
-      curve(73, 24, 73, 61, 15, 65, 15, 65);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(73, 24);
-      point(73, 61);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(5, 26);
-      point(15, 65);
-
-      describe(
-        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let x1 = 5;
-    let y1 = 26;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(x1, y1, 73, 24, 73, 61, 15, 65);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(x1, y1, x1, y1, 73, 24, 73, 61);
-      curve(73, 24, 73, 61, 15, 65, 15, 65);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(73, 24);
-      point(73, 61);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x1, y1);
-      point(15, 65);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x1, y1) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x1 = mouseX;
-        y1 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background('skyblue');
-
-      // Draw the red balloon.
-      fill('red');
-      curve(-150, 275, 50, 60, 50, 60, 250, 275);
-
-      // Draw the balloon string.
-      line(50, 60, 50, 80);
-
-      describe('A red balloon in a blue sky.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red balloon in a blue sky.');
-    }
-
-    function draw() {
-      background('skyblue');
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the red balloon.
-      fill('red');
-      curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
-
-      // Draw the balloon string.
-      line(0, 10, 0, 0, 30, 0);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 570
-    params:
-      - name: x1
-        description: |
-          <p>x-coordinate of the first control point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>y-coordinate of the first control point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>x-coordinate of the first anchor point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the second anchor point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the second anchor point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>x-coordinate of the second control point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>y-coordinate of the second control point.</p>
-        type: Number
-    chainable: 1
-  - line: 746
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>z-coordinate of the first control point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the second anchor point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>z-coordinate of the second control point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# curve
diff --git a/src/content/reference/en/p5 copy/curveDetail.mdx b/src/content/reference/en/p5 copy/curveDetail.mdx
deleted file mode 100644
index 796ca5a026..0000000000
--- a/src/content/reference/en/p5 copy/curveDetail.mdx	
+++ /dev/null
@@ -1,117 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L772
-title: curveDetail
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Sets the number of segments used to draw spline curves in WebGL mode.</p>
-
-  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
-
-  more flat segments makes shapes appear smoother.</p>
-
-  <p>The parameter, <code>detail</code>, is the number of segments to use while
-  drawing a
-
-  spline curve. For example, calling <code>curveDetail(5)</code> will use 5
-  segments to
-
-  draw curves with the <a href="/reference/p5/curve/">curve()</a> function. By
-
-  default,<code>detail</code> is 20.</p>
-
-  <p>Note: <code>curveDetail()</code> has no effect in 2D mode.</p>
-line: 772
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(5, 26, 73, 24, 73, 61, 15, 65);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(5, 26, 5, 26, 73, 24, 73, 61);
-      curve(73, 24, 73, 61, 15, 65, 15, 65);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(73, 24);
-      point(73, 61);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(5, 26);
-      point(15, 65);
-
-      describe(
-        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Set the curveDetail() to 3.
-      curveDetail(3);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);
-      curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(23, -26);
-      point(23, 11);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(-45, -24);
-      point(-35, 15);
-
-      describe(
-        'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: resolution
-    description: |
-      <p>number of segments to use. Defaults to 20.</p>
-    type: Number
-chainable: true
----
-
-
-# curveDetail
diff --git a/src/content/reference/en/p5 copy/curvePoint.mdx b/src/content/reference/en/p5 copy/curvePoint.mdx
deleted file mode 100644
index 761b468ca6..0000000000
--- a/src/content/reference/en/p5 copy/curvePoint.mdx	
+++ /dev/null
@@ -1,160 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L930
-title: curvePoint
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a spline curve using interpolation.</p>
-
-  <p><code>curvePoint()</code> calculates coordinates along a spline curve using
-  the
-
-  anchor and control points. It expects points in the same order as the
-
-  <a href="/reference/p5/curve/">curve()</a> function. <code>curvePoint()</code>
-  works one axis
-
-  at a time. Passing the anchor and control points' x-coordinates will
-
-  calculate the x-coordinate of a point on the curve. Passing the anchor and
-
-  control points' y-coordinates will calculate the y-coordinate of a point on
-
-  the curve.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first control
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  anchor points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 930
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 5;
-      let y1 = 26;
-      let x2 = 73;
-      let y2 = 24;
-      let x3 = 73;
-      let y3 = 61;
-      let x4 = 15;
-      let y4 = 65;
-
-      // Draw the curve.
-      noFill();
-      curve(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw circles along the curve's path.
-      fill(255);
-
-      // Top.
-      let x = curvePoint(x1, x2, x3, x4, 0);
-      let y = curvePoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Center.
-      x = curvePoint(x1, x2, x3, x4, 0.5);
-      y = curvePoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Bottom.
-      x = curvePoint(x1, x2, x3, x4, 1);
-      y = curvePoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black curve on a gray square. A white circle moves back and forth along the curve.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 5;
-      let y1 = 26;
-      let x2 = 73;
-      let y2 = 24;
-      let x3 = 73;
-      let y3 = 61;
-      let x4 = 15;
-      let y4 = 65;
-
-      // Draw the curve.
-      noFill();
-      curve(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Calculate the circle's coordinates.
-      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
-      let x = curvePoint(x1, x2, x3, x4, t);
-      let y = curvePoint(y1, y2, y3, y4, t);
-
-      // Draw the circle.
-      fill(255);
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of a point on the curve.
-  type: Number
-chainable: false
----
-
-
-# curvePoint
diff --git a/src/content/reference/en/p5 copy/curveTangent.mdx b/src/content/reference/en/p5 copy/curveTangent.mdx
deleted file mode 100644
index 005ade9aab..0000000000
--- a/src/content/reference/en/p5 copy/curveTangent.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L1054
-title: curveTangent
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a line that's tangent to a spline curve.</p>
-
-  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
-
-  the curve's slope at the point where it intersects.</p>
-
-  <p><code>curveTangent()</code> calculates coordinates along a tangent line
-  using the
-
-  spline curve's anchor and control points. It expects points in the same
-
-  order as the <a href="/reference/p5/curve/">curve()</a> function.
-  <code>curveTangent()</code>
-
-  works one axis at a time. Passing the anchor and control points'
-
-  x-coordinates will calculate the x-coordinate of a point on the tangent
-
-  line. Passing the anchor and control points' y-coordinates will calculate
-
-  the y-coordinate of a point on the tangent line.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first control
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  anchor points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 1054
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 5;
-      let y1 = 26;
-      let x2 = 73;
-      let y2 = 24;
-      let x3 = 73;
-      let y3 = 61;
-      let x4 = 15;
-      let y4 = 65;
-
-      // Draw the curve.
-      noFill();
-      curve(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw tangents along the curve's path.
-      fill(255);
-
-      // Top circle.
-      stroke(0);
-      let x = curvePoint(x1, x2, x3, x4, 0);
-      let y = curvePoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Top tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);
-      let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Center circle.
-      stroke(0);
-      x = curvePoint(x1, x2, x3, x4, 0.5);
-      y = curvePoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Center tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);
-      ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Bottom circle.
-      stroke(0);
-      x = curvePoint(x1, x2, x3, x4, 1);
-      y = curvePoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      // Bottom tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);
-      ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      describe(
-        'A black curve on a gray square. A white circle moves back and forth along the curve.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of a point on the tangent line.
-  type: Number
-chainable: false
----
-
-
-# curveTangent
diff --git a/src/content/reference/en/p5 copy/curveTightness.mdx b/src/content/reference/en/p5 copy/curveTightness.mdx
deleted file mode 100644
index 506066be18..0000000000
--- a/src/content/reference/en/p5 copy/curveTightness.mdx	
+++ /dev/null
@@ -1,77 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L875
-title: curveTightness
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Adjusts the way <a href="/reference/p5/curve/">curve()</a> and
-
-  <a href="/reference/p5/curveVertex/">curveVertex()</a> draw.</p>
-
-  <p>Spline curves are like cables that are attached to a set of points.
-
-  <code>curveTightness()</code> adjusts how tightly the cable is attached to the
-  points.</p>
-
-  <p>The parameter, <code>tightness</code>, determines how the curve fits to the
-  vertex
-
-  points. By default, <code>tightness</code> is set to 0. Setting tightness to
-  1,
-
-  as in <code>curveTightness(1)</code>, connects the curve's points using
-  straight
-
-  lines. Values in the range from –5 to  5 deform curves while leaving them
-
-  recognizable.</p>
-line: 875
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move the mouse left and right to see the curve change.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the curve's tightness using the mouse.
-      let t = map(mouseX, 0, 100, -5, 5, true);
-      curveTightness(t);
-
-      // Draw the curve.
-      noFill();
-      beginShape();
-      curveVertex(10, 26);
-      curveVertex(10, 26);
-      curveVertex(83, 24);
-      curveVertex(83, 61);
-      curveVertex(25, 65);
-      curveVertex(25, 65);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: amount
-    description: |
-      <p>amount of tightness.</p>
-    type: Number
-chainable: true
----
-
-
-# curveTightness
diff --git a/src/content/reference/en/p5 copy/curveVertex.mdx b/src/content/reference/en/p5 copy/curveVertex.mdx
deleted file mode 100644
index 3d928fc0ce..0000000000
--- a/src/content/reference/en/p5 copy/curveVertex.mdx	
+++ /dev/null
@@ -1,407 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L832
-title: curveVertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a spline curve segment to a custom shape.</p>
-
-  <p><code>curveVertex()</code> adds a curved segment to custom shapes. The
-  spline curves
-
-  it creates are defined like those made by the
-
-  <a href="/reference/p5/curve/">curve()</a> function.
-  <code>curveVertex()</code> must be called
-
-  between the <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
-
-  <p>Spline curves can form shapes and curves that slope gently. They’re like
-
-  cables that are attached to a set of points. Splines are defined by two
-
-  anchor points and two control points. <code>curveVertex()</code> must be
-  called at
-
-  least four times between
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> in order to draw a curve:</p>
-
-  <pre><code class="language-js">beginShape();
-
-
-  // Add the first control point.
-
-  curveVertex(84, 91);
-
-
-  // Add the anchor points to draw between.
-
-  curveVertex(68, 19);
-
-  curveVertex(21, 17);
-
-
-  // Add the second control point.
-
-  curveVertex(32, 91);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p>The code snippet above would only draw the curve between the anchor points,
-
-  similar to the <a href="/reference/p5/curve/">curve()</a> function. The
-  segments
-
-  between the control and anchor points can be drawn by calling
-
-  <code>curveVertex()</code> with the coordinates of the control points:</p>
-
-  <pre><code class="language-js">beginShape();
-
-
-  // Add the first control point and draw a segment to it.
-
-  curveVertex(84, 91);
-
-  curveVertex(84, 91);
-
-
-  // Add the anchor points to draw between.
-
-  curveVertex(68, 19);
-
-  curveVertex(21, 17);
-
-
-  // Add the second control point.
-
-  curveVertex(32, 91);
-
-
-  // Uncomment the next line to draw the segment to the second control point.
-
-  // curveVertex(32, 91);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p>The first two parameters, <code>x</code> and <code>y</code>, set the
-  vertex’s location. For
-
-  example, calling <code>curveVertex(10, 10)</code> adds a point to the curve at
-
-  <code>(10, 10)</code>.</p>
-
-  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>curveVertex()</code> has three arguments because each point has x-, y-,
-  and
-
-  z-coordinates. By default, the vertex’s z-coordinate is set to 0.</p>
-
-  <p>Note: <code>curveVertex()</code> won’t work when an argument is passed to
-
-  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
-line: 832
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point.
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point.
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(32, 91);
-      point(84, 91);
-
-      describe(
-        'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(32, 91);
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point.
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(32, 91);
-      point(84, 91);
-
-      describe(
-        'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(32, 91);
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point and draw a segment to it.
-      curveVertex(84, 91);
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(32, 91);
-      point(84, 91);
-
-      describe(
-        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the bottom-left corner
-    // and drag to change the curve's shape.
-
-    let x1 = 32;
-    let y1 = 91;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the shape.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(x1, y1);
-      curveVertex(x1, y1);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point and draw a segment to it.
-      curveVertex(84, 91);
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x1, y1);
-      point(84, 91);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x1, y1) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x1 = mouseX;
-        y1 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(32, 91);
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point.
-      curveVertex(84, 91);
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A ghost shape drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 832
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the vertex</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the vertex</p>
-        type: Number
-    chainable: 1
-  - line: 1160
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the vertex.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# curveVertex
diff --git a/src/content/reference/en/p5 copy/cylinder.mdx b/src/content/reference/en/p5 copy/cylinder.mdx
deleted file mode 100644
index dd81cd687f..0000000000
--- a/src/content/reference/en/p5 copy/cylinder.mdx	
+++ /dev/null
@@ -1,282 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1477
-title: cylinder
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a cylinder.</p>
-
-  <p>A cylinder is a 3D shape with triangular faces that connect a flat bottom
-
-  to a flat top. Cylinders with few faces look like boxes. Cylinders with
-
-  many faces have smooth surfaces.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>cylinder(20)</code>, it sets the radius of the cylinder’s base. By
-  default,
-
-  <code>radius</code> is 50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cylinder(20, 30)</code>, it sets the cylinder’s height. By
-  default,
-
-  <code>height</code> is set to the cylinder’s <code>radius</code>.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cylinder(20, 30, 5)</code>, it sets the number of edges used to
-  form the
-
-  cylinder's top and bottom. Using more edges makes the top and bottom look
-
-  more like circles. By default, <code>detailX</code> is 24.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cylinder(20, 30, 5, 2)</code>, it sets the number of triangle
-  subdivisions
-
-  to use along the y-axis, between cylinder's the top and bottom. All 3D
-
-  shapes are made by connecting triangles to form their surfaces. By default,
-
-  <code>detailY</code> is 1.</p>
-
-  <p>The fifth parameter, <code>bottomCap</code>, is also optional. If a
-  <code>false</code> is passed,
-
-  as in <code>cylinder(20, 30, 5, 2, false)</code> the cylinder’s bottom won’t
-  be drawn.
-
-  By default, <code>bottomCap</code> is <code>true</code>.</p>
-
-  <p>The sixth parameter, <code>topCap</code>, is also optional. If a
-  <code>false</code> is passed, as
-
-  in <code>cylinder(20, 30, 5, 2, false, false)</code> the cylinder’s top won’t
-  be
-
-  drawn. By default, <code>topCap</code> is <code>true</code>.</p>
-
-  <p>Note: <code>cylinder()</code> can only be used in WebGL mode.</p>
-line: 1477
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      cylinder();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius and height to 30.
-      cylinder(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      cylinder(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 5.
-      cylinder(30, 50, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 2.
-      cylinder(30, 50, 24, 2);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background. Its top is missing.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 1.
-      // Don't draw its bottom.
-      cylinder(30, 50, 24, 1, false);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background. Its top and bottom are missing.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 1.
-      // Don't draw its bottom or top.
-      cylinder(30, 50, 24, 1, false, false);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the cylinder. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: >
-      <p>height of the cylinder. Defaults to the value of
-      <code>radius</code>.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of edges along the top and bottom. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
-    type: Integer
-    optional: true
-  - name: bottomCap
-    description: >
-      <p>whether to draw the cylinder's bottom. Defaults to
-      <code>true</code>.</p>
-    type: Boolean
-    optional: true
-  - name: topCap
-    description: |
-      <p>whether to draw the cylinder's top. Defaults to <code>true</code>.</p>
-    type: Boolean
-    optional: true
-chainable: true
----
-
-
-# cylinder
diff --git a/src/content/reference/en/p5 copy/day.mdx b/src/content/reference/en/p5 copy/day.mdx
deleted file mode 100644
index f029fcb983..0000000000
--- a/src/content/reference/en/p5 copy/day.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L10
-title: day
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current day as a number from 1–31.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current day.
-      let d = day();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the day.
-      text(`Current day: ${d}`, 20, 50, 60);
-
-      describe(`The text 'Current day: ${d}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current day between 1 and 31.
-  type: Integer
-chainable: false
----
-
-
-# day
diff --git a/src/content/reference/en/p5 copy/debugMode.mdx b/src/content/reference/en/p5 copy/debugMode.mdx
deleted file mode 100644
index 19ccdfb63f..0000000000
--- a/src/content/reference/en/p5 copy/debugMode.mdx	
+++ /dev/null
@@ -1,362 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L471
-title: debugMode
-module: 3D
-submodule: Interaction
-file: src/webgl/interaction.js
-description: >
-  <p>Adds a grid and an axes icon to clarify orientation in 3D sketches.</p>
-
-  <p><code>debugMode()</code> adds a grid that shows where the “ground” is in a
-  sketch. By
-
-  default, the grid will run through the origin <code>(0, 0, 0)</code> of the
-  sketch
-
-  along the XZ plane. <code>debugMode()</code> also adds an axes icon that
-  points along
-
-  the positive x-, y-, and z-axes. Calling <code>debugMode()</code> displays the
-  grid
-
-  and axes icon with their default size and position.</p>
-
-  <p>There are four ways to call <code>debugMode()</code> with optional
-  parameters to
-
-  customize the debugging environment.</p>
-
-  <p>The first way to call <code>debugMode()</code> has one parameter,
-  <code>mode</code>. If the
-
-  system constant <code>GRID</code> is passed, as in
-  <code>debugMode(GRID)</code>, then the grid
-
-  will be displayed and the axes icon will be hidden. If the constant
-  <code>AXES</code>
-
-  is passed, as in <code>debugMode(AXES)</code>, then the axes icon will be
-  displayed
-
-  and the grid will be hidden.</p>
-
-  <p>The second way to call <code>debugMode()</code> has six parameters. The
-  first
-
-  parameter, <code>mode</code>, selects either <code>GRID</code> or
-  <code>AXES</code> to be displayed. The
-
-  next five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
-  <code>xOff</code>, <code>yOff</code>, and
-
-  <code>zOff</code> are optional. They’re numbers that set the appearance of the
-  grid
-
-  (<code>gridSize</code> and <code>gridDivisions</code>) and the placement of
-  the axes icon
-
-  (<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>). For example,
-  calling
-
-  <code>debugMode(20, 5, 10, 10, 10)</code> sets the <code>gridSize</code> to 20
-  pixels, the number
-
-  of <code>gridDivisions</code> to 5, and offsets the axes icon by 10 pixels
-  along the
-
-  x-, y-, and z-axes.</p>
-
-  <p>The third way to call <code>debugMode()</code> has five parameters. The
-  first
-
-  parameter, <code>mode</code>, selects either <code>GRID</code> or
-  <code>AXES</code> to be displayed. The
-
-  next four parameters, <code>axesSize</code>, <code>xOff</code>,
-  <code>yOff</code>, and <code>zOff</code> are optional.
-
-  They’re numbers that set the appearance of the size of the axes icon
-
-  (<code>axesSize</code>) and its placement (<code>xOff</code>,
-  <code>yOff</code>, and <code>zOff</code>).</p>
-
-  <p>The fourth way to call <code>debugMode()</code> has nine optional
-  parameters. The
-
-  first five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
-  <code>gridXOff</code>, <code>gridYOff</code>,
-
-  and <code>gridZOff</code> are numbers that set the appearance of the grid. For
-
-  example, calling <code>debugMode(100, 5, 0, 0, 0)</code> sets the
-  <code>gridSize</code> to 100,
-
-  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
-  so that
-
-  the grid is centered at the origin. The next four parameters,
-  <code>axesSize</code>,
-
-  <code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are numbers that
-  set the appearance of the size
-
-  of the axes icon (<code>axesSize</code>) and its placement
-  (<code>axesXOff</code>, <code>axesYOff</code>,
-
-  and <code>axesZOff</code>). For example, calling
-
-  <code>debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)</code> sets the
-  <code>gridSize</code> to 100,
-
-  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
-  so that
-
-  the grid is centered at the origin. It then sets the <code>axesSize</code> to
-  50 and
-
-  offsets the icon 10 pixels along each axis.</p>
-line: 471
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      debugMode();
-
-      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      // Only display the axes icon.
-      debugMode(AXES);
-
-      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      // Only display the grid and customize it:
-      // - size: 50
-      // - divisions: 10
-      // - offsets: 0, 20, 0
-      debugMode(GRID, 50, 10, 0, 20, 0);
-
-      describe('A multicolor box on a gray background. A grid is displayed below the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      // Display the grid and axes icon and customize them:
-      // Grid
-      // ----
-      // - size: 50
-      // - divisions: 10
-      // - offsets: 0, 20, 0
-      // Axes
-      // ----
-      // - size: 50
-      // - offsets: 0, 0, 0
-      debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);
-
-      describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 471
-    params: []
-  - line: 650
-    params:
-      - name: mode
-        description: |
-          <p>either GRID or AXES</p>
-        type: Constant
-  - line: 655
-    params:
-      - name: mode
-        description: ''
-        type: Constant
-      - name: gridSize
-        description: |
-          <p>side length of the grid.</p>
-        type: Number
-        optional: true
-      - name: gridDivisions
-        description: |
-          <p>number of divisions in the grid.</p>
-        type: Number
-        optional: true
-      - name: xOff
-        description: |
-          <p>offset from origin along the x-axis.</p>
-        type: Number
-        optional: true
-      - name: yOff
-        description: |
-          <p>offset from origin along the y-axis.</p>
-        type: Number
-        optional: true
-      - name: zOff
-        description: |
-          <p>offset from origin along the z-axis.</p>
-        type: Number
-        optional: true
-  - line: 665
-    params:
-      - name: mode
-        description: ''
-        type: Constant
-      - name: axesSize
-        description: |
-          <p>length of axes icon markers.</p>
-        type: Number
-        optional: true
-      - name: xOff
-        description: ''
-        type: Number
-        optional: true
-      - name: yOff
-        description: ''
-        type: Number
-        optional: true
-      - name: zOff
-        description: ''
-        type: Number
-        optional: true
-  - line: 674
-    params:
-      - name: gridSize
-        description: ''
-        type: Number
-        optional: true
-      - name: gridDivisions
-        description: ''
-        type: Number
-        optional: true
-      - name: gridXOff
-        description: |
-          <p>grid offset from the origin along the x-axis.</p>
-        type: Number
-        optional: true
-      - name: gridYOff
-        description: |
-          <p>grid offset from the origin along the y-axis.</p>
-        type: Number
-        optional: true
-      - name: gridZOff
-        description: |
-          <p>grid offset from the origin along the z-axis.</p>
-        type: Number
-        optional: true
-      - name: axesSize
-        description: ''
-        type: Number
-        optional: true
-      - name: axesXOff
-        description: |
-          <p>axes icon offset from the origin along the x-axis.</p>
-        type: Number
-        optional: true
-      - name: axesYOff
-        description: |
-          <p>axes icon offset from the origin along the y-axis.</p>
-        type: Number
-        optional: true
-      - name: axesZOff
-        description: |
-          <p>axes icon offset from the origin along the z-axis.</p>
-        type: Number
-        optional: true
-chainable: false
----
-
-
-# debugMode
diff --git a/src/content/reference/en/p5 copy/degrees.mdx b/src/content/reference/en/p5 copy/degrees.mdx
deleted file mode 100644
index 730b361384..0000000000
--- a/src/content/reference/en/p5 copy/degrees.mdx	
+++ /dev/null
@@ -1,53 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L485
-title: degrees
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: |
-  <p>Converts an angle measured in radians to its value in degrees.</p>
-  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
-  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
-  <p>The same angle can be expressed in with either unit. For example, 90° is a
-  quarter of a full rotation. The same angle is 2 × π ÷ 4
-  (about 1.57) radians.</p>
-line: 485
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the angle conversion.
-      let rad = QUARTER_PI;
-      let deg = degrees(rad);
-
-      // Display the conversion.
-      text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
-
-      describe('The text "0.79 rad = 45˚".');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radians
-    description: |
-      <p>radians value to convert to degrees.</p>
-    type: Number
-return:
-  description: converted angle.
-  type: Number
-chainable: false
----
-
-
-# degrees
diff --git a/src/content/reference/en/p5 copy/deltaTime.mdx b/src/content/reference/en/p5 copy/deltaTime.mdx
deleted file mode 100644
index 0915a014c2..0000000000
--- a/src/content/reference/en/p5 copy/deltaTime.mdx	
+++ /dev/null
@@ -1,68 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L124
-title: deltaTime
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that tracks the number of milliseconds it
-  took to draw
-
-  the last frame.</p>
-
-  <p><code>deltaTime</code> contains the amount of time it took
-
-  <a href="/reference/p5/draw/">draw()</a> to execute during the previous frame.
-  It's
-
-  useful for simulating physics.</p>
-line: 124
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    let x = 0;
-    let speed = 0.05;
-
-    function setup()  {
-      createCanvas(100, 100);
-
-      // Set the frameRate to 30.
-      frameRate(30);
-
-      describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use deltaTime to calculate
-      // a change in position.
-      let deltaX = speed * deltaTime;
-
-      // Update the x variable.
-      x += deltaX;
-
-      // Reset x to 0 if it's
-      // greater than 100.
-      if (x > 100)  {
-        x = 0;
-      }
-
-      // Use x to set the circle's
-      // position.
-      circle(x, 50, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Integer
----
-
-
-# deltaTime
diff --git a/src/content/reference/en/p5 copy/describe.mdx b/src/content/reference/en/p5 copy/describe.mdx
deleted file mode 100644
index dee815b9f1..0000000000
--- a/src/content/reference/en/p5 copy/describe.mdx	
+++ /dev/null
@@ -1,137 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L18
-title: describe
-module: Environment
-submodule: Environment
-file: src/accessibility/describe.js
-description: >
-  <p>Creates a screen reader-accessible description of the canvas.</p>
-
-  <p>The first parameter, <code>text</code>, is the description of the
-  canvas.</p>
-
-  <p>The second parameter, <code>display</code>, is optional. It determines how
-  the
-
-  description is displayed. If <code>LABEL</code> is passed, as in
-
-  <code>describe('A description.', LABEL)</code>, the description will be
-  visible in
-
-  a div element next to the canvas. If <code>FALLBACK</code> is passed, as in
-
-  <code>describe('A description.', FALLBACK)</code>, the description will only
-  be
-
-  visible to screen readers. This is the default mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-line: 18
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Draw a heart.
-      fill('red');
-      noStroke();
-      circle(67, 67, 20);
-      circle(83, 67, 20);
-      triangle(91, 73, 75, 95, 59, 73);
-
-      // Add a general description of the canvas.
-      describe('A pink square with a red heart in the bottom-right corner.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Draw a heart.
-      fill('red');
-      noStroke();
-      circle(67, 67, 20);
-      circle(83, 67, 20);
-      triangle(91, 73, 75, 95, 59, 73);
-
-      // Add a general description of the canvas
-      // and display it for debugging.
-      describe('A pink square with a red heart in the bottom-right corner.', LABEL);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function draw() {
-      background(200);
-
-      // The expression
-      // frameCount % 100
-      // causes x to increase from 0
-      // to 99, then restart from 0.
-      let x = frameCount % 100;
-
-      // Draw the circle.
-      fill(0, 255, 0);
-      circle(x, 50, 40);
-
-      // Add a general description of the canvas.
-      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function draw() {
-      background(200);
-
-      // The expression
-      // frameCount % 100
-      // causes x to increase from 0
-      // to 99, then restart from 0.
-      let x = frameCount % 100;
-
-      // Draw the circle.
-      fill(0, 255, 0);
-      circle(x, 50, 40);
-
-      // Add a general description of the canvas
-      // and display it for debugging.
-      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: text
-    description: |
-      <p>description of the canvas.</p>
-    type: String
-  - name: display
-    description: |
-      <p>either LABEL or FALLBACK.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# describe
diff --git a/src/content/reference/en/p5 copy/describeElement.mdx b/src/content/reference/en/p5 copy/describeElement.mdx
deleted file mode 100644
index 0b7bc8b330..0000000000
--- a/src/content/reference/en/p5 copy/describeElement.mdx	
+++ /dev/null
@@ -1,127 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L162
-title: describeElement
-module: Environment
-submodule: Environment
-file: src/accessibility/describe.js
-description: >
-  <p>Creates a screen reader-accessible description of elements in the
-  canvas.</p>
-
-  <p>Elements are shapes or groups of shapes that create meaning together. For
-
-  example, a few overlapping circles could make an "eye" element.</p>
-
-  <p>The first parameter, <code>name</code>, is the name of the element.</p>
-
-  <p>The second parameter, <code>text</code>, is the description of the
-  element.</p>
-
-  <p>The third parameter, <code>display</code>, is optional. It determines how
-  the
-
-  description is displayed. If <code>LABEL</code> is passed, as in
-
-  <code>describe('A description.', LABEL)</code>, the description will be
-  visible in
-
-  a div element next to the canvas. Using <code>LABEL</code> creates unhelpful
-
-  duplicates for screen readers. Only use <code>LABEL</code> during development.
-  If
-
-  <code>FALLBACK</code> is passed, as in <code>describe('A description.',
-  FALLBACK)</code>, the
-
-  description will only be visible to screen readers. This is the default
-
-  mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-line: 162
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Describe the first element
-      // and draw it.
-      describeElement('Circle', 'A yellow circle in the top-left corner.');
-      noStroke();
-      fill('yellow');
-      circle(25, 25, 40);
-
-      // Describe the second element
-      // and draw it.
-      describeElement('Heart', 'A red heart in the bottom-right corner.');
-      fill('red');
-      circle(66.6, 66.6, 20);
-      circle(83.2, 66.6, 20);
-      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
-
-      // Add a general description of the canvas.
-      describe('A red heart and yellow circle over a pink background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Describe the first element
-      // and draw it. Display the
-      // description for debugging.
-      describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
-      noStroke();
-      fill('yellow');
-      circle(25, 25, 40);
-
-      // Describe the second element
-      // and draw it. Display the
-      // description for debugging.
-      describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
-      fill('red');
-      circle(66.6, 66.6, 20);
-      circle(83.2, 66.6, 20);
-      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
-
-      // Add a general description of the canvas.
-      describe('A red heart and yellow circle over a pink background.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: name
-    description: |
-      <p>name of the element.</p>
-    type: String
-  - name: text
-    description: |
-      <p>description of the element.</p>
-    type: String
-  - name: display
-    description: |
-      <p>either LABEL or FALLBACK.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# describeElement
diff --git a/src/content/reference/en/p5 copy/deviceMoved.mdx b/src/content/reference/en/p5 copy/deviceMoved.mdx
deleted file mode 100644
index 90e9ce91fb..0000000000
--- a/src/content/reference/en/p5 copy/deviceMoved.mdx	
+++ /dev/null
@@ -1,49 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L501
-title: deviceMoved
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function is
-  called when the device is moved by more than
-
-  the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
-
-  The threshold value can be changed using <a
-  href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>.</p>
-line: 501
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // Move the device around
-    // to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device moves`);
-    }
-    function deviceMoved() {
-      value = value + 5;
-      if (value > 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# deviceMoved
diff --git a/src/content/reference/en/p5 copy/deviceOrientation.mdx b/src/content/reference/en/p5 copy/deviceOrientation.mdx
deleted file mode 100644
index a18763fc87..0000000000
--- a/src/content/reference/en/p5 copy/deviceOrientation.mdx	
+++ /dev/null
@@ -1,22 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L11
-title: deviceOrientation
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable deviceOrientation always contains the orientation of
-  the device. The value of this variable will either be set 'landscape'
-  or 'portrait'. If no data is available it will be set to 'undefined'.
-  either LANDSCAPE or PORTRAIT.</p>
-line: 11
-isConstructor: false
-itemtype: property
-class: p5
-type: Constant
----
-
-
-# deviceOrientation
diff --git a/src/content/reference/en/p5 copy/deviceShaken.mdx b/src/content/reference/en/p5 copy/deviceShaken.mdx
deleted file mode 100644
index 0c1cce17f8..0000000000
--- a/src/content/reference/en/p5 copy/deviceShaken.mdx	
+++ /dev/null
@@ -1,50 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L589
-title: deviceShaken
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function is
-  called when the device total acceleration
-
-  changes of accelerationX and accelerationY values is more than
-
-  the threshold value. The default threshold is set to 30.
-
-  The threshold value can be changed using <a
-  href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>.</p>
-line: 589
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // Shake the device to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device shakes`);
-    }
-    function deviceShaken() {
-      value = value + 5;
-      if (value > 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# deviceShaken
diff --git a/src/content/reference/en/p5 copy/deviceTurned.mdx b/src/content/reference/en/p5 copy/deviceTurned.mdx
deleted file mode 100644
index 28f760eb6f..0000000000
--- a/src/content/reference/en/p5 copy/deviceTurned.mdx	
+++ /dev/null
@@ -1,80 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L531
-title: deviceTurned
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> function is
-  called when the device rotates by
-
-  more than 90 degrees continuously.</p>
-
-  <p>The axis that triggers the <a
-  href="/reference/p5/deviceTurned/">deviceTurned()</a> method is stored in the
-  turnAxis
-
-  variable. The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> method
-  can be locked to trigger on any axis:
-
-  X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>
-line: 531
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // Rotate the device by 90 degrees
-    // to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device turns`);
-    }
-    function deviceTurned() {
-      if (value === 0) {
-        value = 255;
-      } else if (value === 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-    <div>
-    <code>
-    // Run this example on a mobile device
-    // Rotate the device by 90 degrees in the
-    // X-axis to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when x-axis turns`);
-    }
-    function deviceTurned() {
-      if (turnAxis === 'X') {
-        if (value === 0) {
-          value = 255;
-        } else if (value === 255) {
-          value = 0;
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# deviceTurned
diff --git a/src/content/reference/en/p5 copy/directionalLight.mdx b/src/content/reference/en/p5 copy/directionalLight.mdx
deleted file mode 100644
index b2b3e011a3..0000000000
--- a/src/content/reference/en/p5 copy/directionalLight.mdx	
+++ /dev/null
@@ -1,277 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L461
-title: directionalLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines in one direction.</p>
-
-  <p>Directional lights don’t shine from a specific point. They’re like a sun
-
-  that shines from somewhere offscreen. The light’s direction is set using
-
-  three <code>(x, y, z)</code> values between -1 and 1. For example, setting a
-  light’s
-
-  direction as <code>(1, 0, 0)</code> will light <a
-  href="/reference/p5/p5.Geometry">p5.Geometry</a>
-
-  objects from the left since the light faces directly to the right. A
-
-  maximum of 5 directional lights can be active at once.</p>
-
-  <p>There are four ways to call <code>directionalLight()</code> with parameters
-  to set the
-
-  light’s color and direction.</p>
-
-  <p>The first way to call <code>directionalLight()</code> has six parameters.
-  The first
-
-  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
-  the light’s color using the
-
-  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last three
-
-  parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the
-  light’s direction. For example,
-
-  <code>directionalLight(255, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0,
-  0)</code> light
-
-  that shines to the right <code>(1, 0, 0)</code>.</p>
-
-  <p>The second way to call <code>directionalLight()</code> has four parameters.
-  The first
-
-  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
-  the light’s color using the
-
-  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last
-  parameter,
-
-  <code>direction</code> sets the light’s direction using a
-   <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
-  <code>directionalLight(255, 0, 0, lightDir)</code> creates a red <code>(255,
-  0, 0)</code> light
-
-  that shines in the direction the <code>lightDir</code> vector points.</p>
-
-  <p>The third way to call <code>directionalLight()</code> has four parameters.
-  The first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
-  the light’s direction. For
-
-  example, <code>directionalLight(myColor, 1, 0, 0)</code> creates a light that
-  shines
-
-  to the right <code>(1, 0, 0)</code> with the color value of
-  <code>myColor</code>.</p>
-
-  <p>The fourth way to call <code>directionalLight()</code> has two parameters.
-  The first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  second parameter, <code>direction</code>, sets the light’s direction using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object. For example,
-
-  <code>directionalLight(myColor, lightDir)</code> creates a light that shines
-  in the
-
-  direction the <code>lightDir</code> vector points with the color value of
-  <code>myColor</code>.</p>
-line: 461
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to turn on the directional light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the light.
-      if (isLit === true) {
-        // Add a red directional light from above.
-        // Use RGB values and XYZ directions.
-        directionalLight(255, 0, 0, 0, 1, 0);
-      }
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red directional light from above.
-      // Use a p5.Color object and XYZ directions.
-      let c = color(255, 0, 0);
-      directionalLight(c, 0, 1, 0);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red directional light from above.
-      // Use a p5.Color object and a p5.Vector object.
-      let c = color(255, 0, 0);
-      let lightDir = createVector(0, 1, 0);
-      directionalLight(c, lightDir);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 461
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: x
-        description: |
-          <p>x-component of the light's direction between -1 and 1.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-component of the light's direction between -1 and 1.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-component of the light's direction between -1 and 1.</p>
-        type: Number
-    chainable: 1
-  - line: 614
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: direction
-        description: |
-          <p>direction of the light as a
-                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
-        type: p5.Vector
-    chainable: 1
-  - line: 624
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                                                    an array of color values, or as a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-    chainable: 1
-  - line: 634
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: direction
-        description: ''
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# directionalLight
diff --git a/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx b/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
deleted file mode 100644
index a72ec28678..0000000000
--- a/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L872
-title: disableFriendlyErrors
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>Turns off the parts of the Friendly Error System (FES) that impact
-  performance.</p>
-
-  <p>The <a
-  href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md"
-  target="_blank">FES</a>
-
-  can cause sketches to draw slowly because it does extra work behind the
-
-  scenes. For example, the FES checks the arguments passed to functions,
-
-  which takes time to process. Disabling the FES can significantly improve
-
-  performance by turning off these checks.</p>
-line: 872
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Disable the FES.
-    p5.disableFriendlyErrors = true;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // The circle() function requires three arguments. The
-      // next line would normally display a friendly error that
-      // points this out. Instead, nothing happens and it fails
-      // silently.
-      circle(50, 50);
-
-      describe('A gray square.');
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# disableFriendlyErrors
diff --git a/src/content/reference/en/p5 copy/displayDensity.mdx b/src/content/reference/en/p5 copy/displayDensity.mdx
deleted file mode 100644
index e52be83ec2..0000000000
--- a/src/content/reference/en/p5 copy/displayDensity.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1078
-title: displayDensity
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: |
-  <p>Returns the display's current pixel density.</p>
-line: 1078
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Set the pixel density to 1.
-      pixelDensity(1);
-
-      // Create a canvas and draw
-      // a circle.
-      createCanvas(100, 100);
-      background(200);
-      circle(50, 50, 70);
-
-      describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');
-    }
-
-    function mousePressed() {
-      // Get the current display density.
-      let d = displayDensity();
-
-      // Use the display density to set
-      // the sketch's pixel density.
-      pixelDensity(d);
-
-      // Paint the background and
-      // draw a circle.
-      background(200);
-      circle(50, 50, 70);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current pixel density of the display.
-  type: Number
-chainable: false
----
-
-
-# displayDensity
diff --git a/src/content/reference/en/p5 copy/displayHeight.mdx b/src/content/reference/en/p5 copy/displayHeight.mdx
deleted file mode 100644
index d392419e70..0000000000
--- a/src/content/reference/en/p5 copy/displayHeight.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L621
-title: displayHeight
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the height of the screen
-  display.</p>
-
-  <p><code>displayHeight</code> is useful for running full-screen programs. Its
-  value
-
-  depends on the current <a
-  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
-
-  <p>Note: The actual screen height can be computed as
-
-  <code>displayHeight * pixelDensity()</code>.</p>
-line: 621
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the display's dimensions.
-      createCanvas(displayWidth, displayHeight);
-
-      background(200);
-
-      describe('A gray canvas that is the same size as the display.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# displayHeight
diff --git a/src/content/reference/en/p5 copy/displayWidth.mdx b/src/content/reference/en/p5 copy/displayWidth.mdx
deleted file mode 100644
index 9ab79a09db..0000000000
--- a/src/content/reference/en/p5 copy/displayWidth.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L590
-title: displayWidth
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the width of the screen
-  display.</p>
-
-  <p><code>displayWidth</code> is useful for running full-screen programs. Its
-  value
-
-  depends on the current <a
-  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
-
-  <p>Note: The actual screen width can be computed as
-
-  <code>displayWidth * pixelDensity()</code>.</p>
-line: 590
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the display's dimensions.
-      createCanvas(displayWidth, displayHeight);
-
-      background(200);
-
-      describe('A gray canvas that is the same size as the display.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# displayWidth
diff --git a/src/content/reference/en/p5 copy/dist.mdx b/src/content/reference/en/p5 copy/dist.mdx
deleted file mode 100644
index 60b7155b9b..0000000000
--- a/src/content/reference/en/p5 copy/dist.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L155
-title: dist
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the distance between two points.</p>
-
-  <p>The version of <code>dist()</code> with four parameters calculates distance
-  in two
-
-  dimensions.</p>
-
-  <p>The version of <code>dist()</code> with six parameters calculates distance
-  in three
-
-  dimensions.</p>
-
-  <p>Use <a href="/reference/p5.Vector/dist/">p5.Vector.dist()</a> to calculate
-  the
-
-  distance between two <a href="/reference/p5/p5.Vector">p5.Vector</a>
-  objects.</p>
-line: 155
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates.
-      let x1 = 10;
-      let y1 = 50;
-      let x2 = 90;
-      let y2 = 50;
-
-      // Draw the points and a line connecting them.
-      line(x1, y1, x2, y2);
-      strokeWeight(5);
-      point(x1, y1);
-      point(x2, y2);
-
-      // Calculate the distance.
-      let d = dist(x1, y1, x2, y2);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the distance.
-      text(d, 43, 40);
-
-      describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: distance between the two points.
-  type: Number
-overloads:
-  - line: 155
-    params:
-      - name: x1
-        description: |
-          <p>x-coordinate of the first point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>y-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>x-coordinate of the second point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the second point.</p>
-        type: Number
-    return:
-      description: distance between the two points.
-      type: Number
-  - line: 209
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>z-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the second point.</p>
-        type: Number
-    return:
-      description: distance between the two points.
-      type: Number
-chainable: false
----
-
-
-# dist
diff --git a/src/content/reference/en/p5 copy/doubleClicked.mdx b/src/content/reference/en/p5 copy/doubleClicked.mdx
deleted file mode 100644
index 3e148c677f..0000000000
--- a/src/content/reference/en/p5 copy/doubleClicked.mdx	
+++ /dev/null
@@ -1,157 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1599
-title: doubleClicked
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when a mouse button is clicked twice
-  quickly.</p>
-
-  <p>Declaring the function <code>doubleClicked()</code> sets a code block to
-  run
-
-  automatically when the user presses and releases the mouse button twice
-
-  quickly:</p>
-
-  <pre><code class="language-js">function doubleClicked() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>doubleClicked()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function doubleClicked() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional.
-  <code>doubleClicked()</code> is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the double-click event:</p>
-
-  <pre><code class="language-js">function doubleClicked(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, code placed in <code>doubleClicked()</code> will
-  run after two
-
-  touches that occur within a short time.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-line: 1599
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the square's color when the user double-clicks.
-    function doubleClicked() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the circle.
-      fill(value);
-
-      // Draw the circle.
-      circle(50, 50, 80);
-    }
-
-    // Reassign value to 255 when the user double-clicks on the circle.
-    function doubleClicked() {
-      if (dist(50, 50, mouseX, mouseY) < 40) {
-        value = 255;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# doubleClicked
diff --git a/src/content/reference/en/p5 copy/draw.mdx b/src/content/reference/en/p5 copy/draw.mdx
deleted file mode 100644
index dba2e2b44a..0000000000
--- a/src/content/reference/en/p5 copy/draw.mdx	
+++ /dev/null
@@ -1,129 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L176
-title: draw
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>A function that's called repeatedly while the sketch runs.</p>
-
-  <p>Declaring the function <code>draw()</code> sets a code block to run
-  repeatedly
-
-  once the sketch starts. It’s used to create animations and respond to
-
-  user inputs:</p>
-
-  <pre><code class="language-js">function draw() {
-    // Code to run repeatedly.
-  }
-
-  </code></pre>
-
-  <p>This is often called the "draw loop" because p5.js calls the code in
-
-  <code>draw()</code> in a loop behind the scenes. By default,
-  <code>draw()</code> tries to run
-
-  60 times per second. The actual rate depends on many factors. The
-
-  drawing rate, called the "frame rate", can be controlled by calling
-
-  <a href="/reference/p5/frameRate/">frameRate()</a>. The number of times
-  <code>draw()</code>
-
-  has run is stored in the system variable
-
-  <a href="/reference/p5/frameCount/">frameCount()</a>.</p>
-
-  <p>Code placed within <code>draw()</code> begins looping after
-
-  <a href="/reference/p5/setup/">setup()</a> runs. <code>draw()</code> will run
-  until the user
-
-  closes the sketch. <code>draw()</code> can be stopped by calling the
-
-  <a href="/reference/p5/noLoop/">noLoop()</a> function. <code>draw()</code> can
-  be resumed by
-
-  calling the <a href="/reference/p5/loop/">loop()</a> function.</p>
-line: 176
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Paint the background once.
-      background(200);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
-      );
-    }
-
-    function draw() {
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves.'
-      );
-    }
-
-    function draw() {
-      // Paint the background repeatedly.
-      background(200);
-
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click the canvas to change the circle's color.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      // Paint the background repeatedly.
-      background(200);
-
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-
-    // Change the fill color when the user double-clicks.
-    function doubleClicked() {
-      fill('deeppink');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# draw
diff --git a/src/content/reference/en/p5 copy/drawingContext.mdx b/src/content/reference/en/p5 copy/drawingContext.mdx
deleted file mode 100644
index 3cf1335733..0000000000
--- a/src/content/reference/en/p5 copy/drawingContext.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L1198
-title: drawingContext
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>A system variable that provides direct access to the sketch's
-
-  <code><canvas></code> element.</p>
-
-  <p>The <code><canvas></code> element provides many specialized features that
-  aren't
-
-  included in the p5.js library. The <code>drawingContext</code> system variable
-
-  provides access to these features by exposing the sketch's
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/">CanvasRenderingContext2D</a>
-
-  object.</p>
-line: 1198
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Style the circle using shadows.
-      drawingContext.shadowOffsetX = 5;
-      drawingContext.shadowOffsetY = -5;
-      drawingContext.shadowBlur = 10;
-      drawingContext.shadowColor = 'black';
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe("A white circle on a gray background. The circle's edges are shadowy.");
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background('skyblue');
-
-      // Style the circle using a color gradient.
-      let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);
-      myGradient.addColorStop(0, 'yellow');
-      myGradient.addColorStop(0.6, 'orangered');
-      myGradient.addColorStop(1, 'yellow');
-      drawingContext.fillStyle = myGradient;
-      drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A fiery sun drawn on a light blue background.');
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# drawingContext
diff --git a/src/content/reference/en/p5 copy/ellipse.mdx b/src/content/reference/en/p5 copy/ellipse.mdx
deleted file mode 100644
index 6c07765230..0000000000
--- a/src/content/reference/en/p5 copy/ellipse.mdx	
+++ /dev/null
@@ -1,164 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L371
-title: ellipse
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws an ellipse (oval).</p>
-
-  <p>An ellipse is a round shape defined by the <code>x</code>, <code>y</code>,
-  <code>w</code>, and
-
-  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
-  of its center. <code>w</code> and
-
-  <code>h</code> set its width and height. See
-
-  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to set
-
-  its position.</p>
-
-  <p>If no height is set, the value of width is used for both the width and
-
-  height. If a negative height or width is specified, the absolute value is
-
-  taken.</p>
-
-  <p>The fifth parameter, <code>detail</code>, is also optional. It determines
-  how many
-
-  vertices are used to draw the ellipse in WebGL mode. The default value is
-
-  25.</p>
-line: 371
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      ellipse(50, 50, 80, 80);
-
-      describe('A white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      ellipse(50, 50, 80);
-
-      describe('A white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      ellipse(50, 50, 80, 40);
-
-      describe('A white ellipse on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      ellipse(0, 0, 80, 40);
-
-      describe('A white ellipse on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Use 6 vertices.
-      ellipse(0, 0, 80, 40, 6);
-
-      describe('A white hexagon on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 371
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the center of the ellipse.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the center of the ellipse.</p>
-        type: Number
-      - name: w
-        description: |
-          <p>width of the ellipse.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>height of the ellipse.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 472
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: w
-        description: ''
-        type: Number
-      - name: h
-        description: ''
-        type: Number
-      - name: detail
-        description: |
-          <p>optional parameter for WebGL mode only. This is to
-                                  specify the number of vertices that makes up the
-                                  perimeter of the ellipse. Default value is 25. Won't
-                                  draw a stroke for a detail of more than 50.</p>
-        type: Integer
-        optional: true
-chainable: true
----
-
-
-# ellipse
diff --git a/src/content/reference/en/p5 copy/ellipseMode.mdx b/src/content/reference/en/p5 copy/ellipseMode.mdx
deleted file mode 100644
index 0826de63f4..0000000000
--- a/src/content/reference/en/p5 copy/ellipseMode.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L12
-title: ellipseMode
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Changes where ellipses, circles, and arcs are drawn.</p>
-
-  <p>By default, the first two parameters of
-
-  <a href="/reference/p5/ellipse/">ellipse()</a>, <a
-  href="/reference/p5/circle/">circle()</a>,
-
-  and <a href="/reference/p5/arc/">arc()</a>
-
-  are the x- and y-coordinates of the shape's center. The next parameters set
-
-  the shape's width and height. This is the same as calling
-
-  <code>ellipseMode(CENTER)</code>.</p>
-
-  <p><code>ellipseMode(RADIUS)</code> also uses the first two parameters to set
-  the x- and
-
-  y-coordinates of the shape's center. The next parameters are half of the
-
-  shapes's width and height. Calling <code>ellipse(0, 0, 10, 15)</code> draws a
-  shape
-
-  with a width of 20 and height of 30.</p>
-
-  <p><code>ellipseMode(CORNER)</code> uses the first two parameters as the
-  upper-left
-
-  corner of the shape. The next parameters are its width and height.</p>
-
-  <p><code>ellipseMode(CORNERS)</code> uses the first two parameters as the
-  location of one
-
-  corner of the ellipse's bounding box. The next parameters are the location
-
-  of the opposite corner.</p>
-
-  <p>The argument passed to <code>ellipseMode()</code> must be written in ALL
-  CAPS because
-
-  the constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>,
-  and <code>CORNERS</code> are defined this
-
-  way. JavaScript is a case-sensitive language.</p>
-line: 12
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // White ellipse.
-      ellipseMode(RADIUS);
-      fill(255);
-      ellipse(50, 50, 30, 30);
-
-      // Gray ellipse.
-      ellipseMode(CENTER);
-      fill(100);
-      ellipse(50, 50, 30, 30);
-
-      describe('A white circle with a gray circle at its center. Both circles have black outlines.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // White ellipse.
-      ellipseMode(CORNER);
-      fill(255);
-      ellipse(25, 25, 50, 50);
-
-      // Gray ellipse.
-      ellipseMode(CORNERS);
-      fill(100);
-      ellipse(25, 25, 50, 50);
-
-      describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either CENTER, RADIUS, CORNER, or CORNERS</p>
-    type: Constant
-chainable: true
----
-
-
-# ellipseMode
diff --git a/src/content/reference/en/p5 copy/ellipsoid.mdx b/src/content/reference/en/p5 copy/ellipsoid.mdx
deleted file mode 100644
index 56d86709b7..0000000000
--- a/src/content/reference/en/p5 copy/ellipsoid.mdx	
+++ /dev/null
@@ -1,233 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1965
-title: ellipsoid
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws an ellipsoid.</p>
-
-  <p>An ellipsoid is a 3D shape with triangular faces that connect to form a
-
-  round surface. Ellipsoids with few faces look like crystals. Ellipsoids
-
-  with many faces have smooth surfaces and look like eggs.
-  <code>ellipsoid()</code>
-
-  defines a shape by its radii. This is different from
-
-  <a href="/reference/p5/ellipse/">ellipse()</a> which uses diameters
-
-  (width and height).</p>
-
-  <p>The first parameter, <code>radiusX</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>ellipsoid(20)</code>, it sets the radius of the ellipsoid along the
-  x-axis. By
-
-  default, <code>radiusX</code> is 50.</p>
-
-  <p>The second parameter, <code>radiusY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30)</code>, it sets the ellipsoid’s radius along the
-  y-axis.
-
-  By default, <code>radiusY</code> is set to the ellipsoid’s
-  <code>radiusX</code>.</p>
-
-  <p>The third parameter, <code>radiusZ</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30, 40)</code>, it sets the ellipsoid’s radius along
-  the
-
-  z-axis. By default, <code>radiusZ</code> is set to the ellipsoid’s
-  <code>radiusY</code>.</p>
-
-  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30, 40, 5)</code>, it sets the number of triangle
-
-  subdivisions to use along the x-axis. All 3D shapes are made by connecting
-
-  triangles to form their surfaces. By default, <code>detailX</code> is 24.</p>
-
-  <p>The fifth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30, 40, 5, 7)</code>, it sets the number of triangle
-
-  subdivisions to use along the y-axis. All 3D shapes are made by connecting
-
-  triangles to form their surfaces. By default, <code>detailY</code> is 16.</p>
-
-  <p>Note: <code>ellipsoid()</code> can only be used in WebGL mode.</p>
-line: 1965
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      ellipsoid(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      ellipsoid(30, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      // Set its radiusZ to 50.
-      ellipsoid(30, 40, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      // Set its radiusZ to 50.
-      // Set its detailX to 4.
-      ellipsoid(30, 40, 50, 4);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      // Set its radiusZ to 50.
-      // Set its detailX to 4.
-      // Set its detailY to 3.
-      ellipsoid(30, 40, 50, 4, 3);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radiusX
-    description: |
-      <p>radius of the ellipsoid along the x-axis. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: radiusY
-    description: >
-      <p>radius of the ellipsoid along the y-axis. Defaults to
-      <code>radiusX</code>.</p>
-    type: Number
-    optional: true
-  - name: radiusZ
-    description: >
-      <p>radius of the ellipsoid along the z-axis. Defaults to
-      <code>radiusY</code>.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# ellipsoid
diff --git a/src/content/reference/en/p5 copy/emissiveMaterial.mdx b/src/content/reference/en/p5 copy/emissiveMaterial.mdx
deleted file mode 100644
index 10037c3c86..0000000000
--- a/src/content/reference/en/p5 copy/emissiveMaterial.mdx	
+++ /dev/null
@@ -1,140 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2647
-title: emissiveMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the emissive color of shapes’ surface material.</p>
-
-  <p>The <code>emissiveMaterial()</code> color sets a color shapes display at
-  full
-
-  strength, regardless of lighting. This can give the appearance that a shape
-
-  is glowing. However, emissive materials don’t actually emit light that
-
-  can affect surrounding objects.</p>
-
-  <p><code>emissiveMaterial()</code> can be called three ways with different
-  parameters to
-
-  set the material’s color.</p>
-
-  <p>The first way to call <code>emissiveMaterial()</code> has one parameter,
-  <code>gray</code>.
-
-  Grayscale values between 0 and 255, as in <code>emissiveMaterial(50)</code>,
-  can be
-
-  passed to set the material’s color. Higher grayscale values make shapes
-
-  appear brighter.</p>
-
-  <p>The second way to call <code>emissiveMaterial()</code> has one parameter,
-  <code>color</code>. A
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  values, or a
-
-  CSS color string, as in <code>emissiveMaterial('magenta')</code>, can be
-  passed to set
-
-  the material’s color.</p>
-
-  <p>The third way to call <code>emissiveMaterial()</code> has four parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
-  HSBA, or HSLA values can be
-
-  passed to set the material’s colors, as in <code>emissiveMaterial(255, 0,
-  0)</code> or
-
-  <code>emissiveMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
-  using
-
-  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-
-  <p>Note: <code>emissiveMaterial()</code> can only be used in WebGL mode.</p>
-line: 2647
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white ambient light.
-      ambientLight(255, 255, 255);
-
-      // Add a red emissive material using RGB values.
-      emissiveMaterial(255, 0, 0);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2647
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the
-                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the
-                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha value in the current
-                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2717
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 (black) and 255 (white).</p>
-        type: Number
-    chainable: 1
-  - line: 2723
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                     an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-    chainable: 1
-chainable: true
----
-
-
-# emissiveMaterial
diff --git a/src/content/reference/en/p5 copy/endClip.mdx b/src/content/reference/en/p5 copy/endClip.mdx
deleted file mode 100644
index 69bf243858..0000000000
--- a/src/content/reference/en/p5 copy/endClip.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L190
-title: endClip
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: |
-  <p>Ends defining a mask that was started with
-  <a href="/reference/p5/beginClip/">beginClip()</a>.</p>
-line: 190
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white triangle and circle on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# endClip
diff --git a/src/content/reference/en/p5 copy/endContour.mdx b/src/content/reference/en/p5 copy/endContour.mdx
deleted file mode 100644
index 5965b72db8..0000000000
--- a/src/content/reference/en/p5 copy/endContour.mdx	
+++ /dev/null
@@ -1,133 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1224
-title: endContour
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Stops creating a hole within a flat shape.</p>
-
-  <p>The <a href="/reference/p5/beginContour/">beginContour()</a> and
-  <code>endContour()</code>
-
-  functions allow for creating negative space within custom shapes that are
-
-  flat. <a href="/reference/p5/beginContour/">beginContour()</a> begins adding
-  vertices
-
-  to a negative space and <code>endContour()</code> stops adding them.
-
-  <a href="/reference/p5/beginContour/">beginContour()</a> and
-  <code>endContour()</code> must be
-
-  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a>.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and <a
-  href="/reference/p5/scale/">scale()</a>
-
-  don't work between <a href="/reference/p5/beginContour/">beginContour()</a>
-  and
-
-  <code>endContour()</code>. It's also not possible to use other shapes, such as
-
-  <a href="/reference/p5/ellipse/">ellipse()</a> or <a
-  href="/reference/p5/rect/">rect()</a>,
-
-  between <a href="/reference/p5/beginContour/">beginContour()</a> and
-  <code>endContour()</code>.</p>
-
-  <p>Note: The vertices that define a negative space must "wind" in the opposite
-
-  direction from the outer shape. First, draw vertices for the outer shape
-
-  clockwise order. Then, draw vertices for the negative space in
-
-  counter-clockwise order.</p>
-line: 1224
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(10, 10);
-      vertex(90, 10);
-      vertex(90, 90);
-      vertex(10, 90);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(30, 30);
-      vertex(30, 70);
-      vertex(70, 70);
-      vertex(70, 30);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(-40, -40);
-      vertex(40, -40);
-      vertex(40, 40);
-      vertex(-40, 40);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(-20, -20);
-      vertex(-20, 20);
-      vertex(20, 20);
-      vertex(20, -20);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# endContour
diff --git a/src/content/reference/en/p5 copy/endGeometry.mdx b/src/content/reference/en/p5 copy/endGeometry.mdx
deleted file mode 100644
index bfbeb81c7b..0000000000
--- a/src/content/reference/en/p5 copy/endGeometry.mdx	
+++ /dev/null
@@ -1,285 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L266
-title: endGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Stops adding shapes to a new
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and returns the
-  object.</p>
-
-  <p>The <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>
-
-  functions help with creating complex 3D shapes from simpler ones such as
-
-  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
-  begins adding shapes
-
-  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
-
-  <p><code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a> can help
-
-  to make sketches more performant. For example, if a complex 3D shape
-
-  doesn’t change while a sketch runs, then it can be created with
-
-  <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>.
-
-  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
-  then
-
-  drawing it will run faster than repeatedly drawing the individual pieces.</p>
-
-  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
-  way to
-
-  build 3D shapes.</p>
-
-  <p>Note: <code>endGeometry()</code> can only be used in WebGL mode.</p>
-line: 266
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add a cone.
-      cone();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      createArrow();
-
-      describe('A white arrow drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let blueArrow;
-    let redArrow;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the arrows.
-      redArrow = createArrow('red');
-      blueArrow = createArrow('blue');
-
-      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the red arrow.
-      model(redArrow);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the blue arrow.
-      model(blueArrow);
-    }
-
-    function createArrow(fillColor) {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      fill(fillColor);
-
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = createParticles();
-    }
-
-    function createParticles() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new 3D shape.
-  type: p5.Geometry
-chainable: false
----
-
-
-# endGeometry
diff --git a/src/content/reference/en/p5 copy/endShape.mdx b/src/content/reference/en/p5 copy/endShape.mdx
deleted file mode 100644
index 198b6d7497..0000000000
--- a/src/content/reference/en/p5 copy/endShape.mdx	
+++ /dev/null
@@ -1,256 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1344
-title: endShape
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Stops adding vertices to a custom shape.</p>
-
-  <p>The <a href="/reference/p5/beginShape/">beginShape()</a> and
-  <code>endShape()</code> functions
-
-  allow for creating custom shapes in 2D or 3D.
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> begins adding vertices to
-  a
-
-  custom shape and <code>endShape()</code> stops adding them.</p>
-
-  <p>The first parameter, <code>mode</code>, is optional. By default, the first
-  and last
-
-  vertices of a shape aren't connected. If the constant <code>CLOSE</code> is
-  passed, as
-
-  in <code>endShape(CLOSE)</code>, then the first and last vertices will be
-  connected.</p>
-
-  <p>The second parameter, <code>count</code>, is also optional. In WebGL mode,
-  it’s more
-
-  efficient to draw many copies of the same shape using a technique called
-
-  <a
-  href="https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html"
-  target="_blank">instancing</a>.
-
-  The <code>count</code> parameter tells WebGL mode how many copies to draw. For
-
-  example, calling <code>endShape(CLOSE, 400)</code> after drawing a custom
-  shape will
-
-  make it efficient to draw 400 copies. This feature requires
-
-  <a href="https://p5js.org/tutorials/intro-to-shaders/" target="_blank">writing
-  a custom shader</a>.</p>
-
-  <p>After calling <a href="/reference/p5/beginShape/">beginShape()</a>, shapes
-  can be
-
-  built by calling <a href="/reference/p5/vertex/">vertex()</a>,
-
-  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
-
-  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
-
-  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
-
-  <code>endShape()</code> will stop adding vertices to the
-
-  shape. Each shape will be outlined with the current stroke color and filled
-
-  with the current fill color.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and
-
-  <a href="/reference/p5/scale/">scale()</a> don't work between
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-  <code>endShape()</code>. It's also not
-
-  possible to use other shapes, such as <a
-  href="/reference/p5/ellipse/">ellipse()</a> or
-
-  <a href="/reference/p5/rect/">rect()</a>, between
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-  <code>endShape()</code>.</p>
-line: 1344
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shapes.
-      noFill();
-
-      // Left triangle.
-      beginShape();
-      vertex(20, 20);
-      vertex(45, 20);
-      vertex(45, 80);
-      endShape(CLOSE);
-
-      // Right triangle.
-      beginShape();
-      vertex(50, 20);
-      vertex(75, 20);
-      vertex(75, 80);
-      endShape();
-
-      describe(
-        'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(200, 100);
-
-      background(240);
-
-      noFill();
-      stroke(0);
-
-      // Open shape (left)
-      beginShape();
-      vertex(20, 20);
-      vertex(80, 20);
-      vertex(80, 80);
-      endShape();  // Not closed
-
-      // Closed shape (right)
-      beginShape();
-      vertex(120, 20);
-      vertex(180, 20);
-      vertex(180, 80);
-      endShape(CLOSE);  // Closed
-
-      describe(
-        'Two right-angled shapes on a light gray background. The left shape is open with three lines. The right shape is closed, forming a triangle.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `#version 300 es
-
-    precision mediump float;
-
-    in vec3 aPosition;
-    flat out int instanceID;
-
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    void main() {
-
-      // Copy the instance ID to the fragment shader.
-      instanceID = gl_InstanceID;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-
-      // gl_InstanceID represents a numeric value for each instance.
-      // Using gl_InstanceID allows us to move each instance separately.
-      // Here we move each instance horizontally by ID * 23.
-      float xOffset = float(gl_InstanceID) * 23.0;
-
-      // Apply the offset to the final position.
-      gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
-        vec4(xOffset, 0.0, 0.0, 0.0));
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `#version 300 es
-
-    precision mediump float;
-
-    out vec4 outColor;
-    flat in int instanceID;
-    uniform float numInstances;
-
-    void main() {
-      vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
-      vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
-
-      // Normalize the instance ID.
-      float normId = float(instanceID) / numInstances;
-
-      // Mix between two colors using the normalized instance ID.
-      outColor = mix(red, blue, normId);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let myShader = createShader(vertSrc, fragSrc);
-
-      background(220);
-
-      // Compile and apply the p5.Shader.
-      shader(myShader);
-
-      // Set the numInstances uniform.
-      myShader.setUniform('numInstances', 4);
-
-      // Translate the origin to help align the drawing.
-      translate(25, -10);
-
-      // Style the shapes.
-      noStroke();
-
-      // Draw the shapes.
-      beginShape();
-      vertex(0, 0);
-      vertex(0, 20);
-      vertex(20, 20);
-      vertex(20, 0);
-      vertex(0, 0);
-      endShape(CLOSE, 4);
-
-      describe('A row of four squares. Their colors transition from purple on the left to red on the right');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>use CLOSE to close the shape</p>
-    type: Constant
-    optional: true
-  - name: count
-    description: >
-      <p>number of times you want to draw/instance the shape (for WebGL
-      mode).</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# endShape
diff --git a/src/content/reference/en/p5 copy/erase.mdx b/src/content/reference/en/p5 copy/erase.mdx
deleted file mode 100644
index 24f1397e8e..0000000000
--- a/src/content/reference/en/p5 copy/erase.mdx	
+++ /dev/null
@@ -1,123 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1629
-title: erase
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Starts using shapes to erase parts of the canvas.</p>
-
-  <p>All drawing that follows <code>erase()</code> will subtract from the
-  canvas, revealing
-
-  the web page underneath. The erased areas will become transparent, allowing
-
-  the content behind the canvas to show through. The
-
-  <a href="/reference/p5/fill/">fill()</a>, <a
-  href="/reference/p5/stroke/">stroke()</a>, and
-
-  <a href="/reference/p5/blendMode/">blendMode()</a> have no effect once
-  <code>erase()</code> is
-
-  called.</p>
-
-  <p>The <code>erase()</code> function has two optional parameters. The first
-  parameter
-
-  sets the strength of erasing by the shape's interior. A value of 0 means
-
-  that no erasing will occur. A value of 255 means that the shape's interior
-
-  will fully erase the content underneath. The default value is 255
-
-  (full strength).</p>
-
-  <p>The second parameter sets the strength of erasing by the shape's edge. A
-
-  value of 0 means that no erasing will occur. A value of 255 means that the
-
-  shape's edge will fully erase the content underneath. The default value is
-
-  255 (full strength).</p>
-
-  <p>To cancel the erasing effect, use the <a
-  href="/reference/p5/noErase/">noErase()</a>
-
-  function.</p>
-
-  <p><code>erase()</code> has no effect on drawing done with the
-
-  <a href="/reference/p5/image/">image()</a> and
-
-  <a href="/reference/p5/background/">background()</a> functions.</p>
-line: 1629
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(100, 100, 250);
-
-      // Draw a pink square.
-      fill(250, 100, 100);
-      square(20, 20, 60);
-
-      // Erase a circular area.
-      erase();
-      circle(25, 30, 30);
-      noErase();
-
-      describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(100, 100, 250);
-
-      // Draw a pink square.
-      fill(250, 100, 100);
-      square(20, 20, 60);
-
-      // Erase a circular area.
-      strokeWeight(5);
-      erase(150, 255);
-      circle(25, 30, 30);
-      noErase();
-
-      describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: strengthFill
-    description: |
-      <p>a number (0-255) for the strength of erasing under a shape's interior.
-                                             Defaults to 255, which is full strength.</p>
-    type: Number
-    optional: true
-  - name: strengthStroke
-    description: |
-      <p>a number (0-255) for the strength of erasing under a shape's edge.
-                                             Defaults to 255, which is full strength.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# erase
diff --git a/src/content/reference/en/p5 copy/exitPointerLock.mdx b/src/content/reference/en/p5 copy/exitPointerLock.mdx
deleted file mode 100644
index db8a989422..0000000000
--- a/src/content/reference/en/p5 copy/exitPointerLock.mdx	
+++ /dev/null
@@ -1,82 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1946
-title: exitPointerLock
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>Exits a pointer lock started with
-
-  <a href="/reference/p5/requestPointerLock/">requestPointerLock</a>.</p>
-
-  <p>Calling <code>requestPointerLock()</code> locks the values of
-
-  <a href="/reference/p5/mouseX/">mouseX</a>, <a
-  href="/reference/p5/mouseY/">mouseY</a>,
-
-  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
-  href="/reference/p5/pmouseY/">pmouseY</a>.
-
-  Calling <code>exitPointerLock()</code> resumes updating the mouse system
-  variables.</p>
-
-  <p>Note: Most browsers require an input, such as a click, before calling
-
-  <code>requestPointerLock()</code>. It’s recommended to call
-  <code>requestPointerLock()</code> in
-
-  an event function such as <a
-  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
-line: 1946
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let isLocked = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a word at its center. The word changes between "Unlocked" and "Locked" when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Tell the user whether the pointer is locked.
-      if (isLocked === true) {
-        text('Locked', 50, 50);
-      } else {
-        text('Unlocked', 50, 50);
-      }
-    }
-
-    // Toggle the pointer lock when the user double-clicks.
-    function doubleClicked() {
-      if (isLocked === true) {
-        exitPointerLock();
-        isLocked = false;
-      } else {
-        requestPointerLock();
-        isLocked = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# exitPointerLock
diff --git a/src/content/reference/en/p5 copy/exp.mdx b/src/content/reference/en/p5 copy/exp.mdx
deleted file mode 100644
index e75a420dab..0000000000
--- a/src/content/reference/en/p5 copy/exp.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L230
-title: exp
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates the value of Euler's number e (2.71828...) raised to the power
-  of a number.</p>
-line: 230
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = exp(1);
-      circle(10, 10, d);
-
-      // Left-center.
-      d = exp(2);
-      circle(20, 20, d);
-
-      // Right-center.
-      d = exp(3);
-      circle(40, 40, d);
-
-      // Bottom-right.
-      d = exp(4);
-      circle(80, 80, d);
-
-      describe('A series of circles that grow exponentially from top left to bottom right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that grow exponentially from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 0.005 * exp(x * 0.1);
-
-      // Draw a point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>exponent to raise.</p>
-    type: Number
-return:
-  description: e^n
-  type: Number
-chainable: false
----
-
-
-# exp
diff --git a/src/content/reference/en/p5 copy/fill.mdx b/src/content/reference/en/p5 copy/fill.mdx
deleted file mode 100644
index 84f074abd4..0000000000
--- a/src/content/reference/en/p5 copy/fill.mdx	
+++ /dev/null
@@ -1,312 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1000
-title: fill
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Sets the color used to fill shapes.</p>
-
-  <p>Calling <code>fill(255, 165, 0)</code> or <code>fill('orange')</code> means
-  all shapes drawn
-
-  after the fill command will be filled with the color orange.</p>
-
-  <p>The version of <code>fill()</code> with one parameter interprets the value
-  one of
-
-  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
-  grayscale
-
-  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
-  color
-
-  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
-  provided to
-
-  set the fill color.</p>
-
-  <p>The version of <code>fill()</code> with three parameters interprets them as
-  RGB, HSB,
-
-  or HSL colors, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The default color space is
-  RGB,
-
-  with each value in the range from 0 to 255.</p>
-
-  <p>The version of <code>fill()</code> with four parameters interprets them as
-  <code>RGBA</code>, <code>HSBA</code>,
-
-  or <code>HSLA</code> colors, depending on the current <a
-  href="/reference/p5/colorMode/">colorMode()</a>. The last parameter
-
-  sets the alpha (transparency) value.</p>
-line: 1000
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A grayscale value.
-      fill(51);
-      square(20, 20, 60);
-
-      describe('A dark charcoal gray square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // R, G & B values.
-      fill(255, 204, 0);
-      square(20, 20, 60);
-
-      describe('A yellow square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // R, G, B, and Alpha values.
-      fill(255, 0, 0, 128);
-      square(20, 20, 60);
-
-      describe('A semi-transparent red square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(100);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // H, S & B values.
-      fill(255, 204, 100);
-      square(20, 20, 60);
-
-      describe('A royal blue square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A CSS named color.
-      fill('red');
-      square(20, 20, 60);
-
-      describe('A red square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Three-digit hex RGB notation.
-      fill('#fae');
-      square(20, 20, 60);
-
-      describe('A pink square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Six-digit hex RGB notation.
-      fill('#A251FA');
-      square(20, 20, 60);
-
-      describe('A purple square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGB notation.
-      fill('rgb(0, 255, 0)');
-      square(20, 20, 60);
-
-      describe('A bright green square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGBA notation.
-      fill('rgba(0, 255, 0, 0.25)');
-      square(20, 20, 60);
-
-      describe('A soft green rectange with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGB notation.
-      fill('rgb(100%, 0%, 10%)');
-      square(20, 20, 60);
-
-      describe('A red square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGBA notation.
-      fill('rgba(100%, 0%, 100%, 0.5)');
-      square(20, 20, 60);
-
-      describe('A dark fuchsia square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A p5.Color object.
-      let c = color(0, 0, 255);
-      fill(c);
-      square(20, 20, 60);
-
-      describe('A blue square with a black outline.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1000
-    params:
-      - name: v1
-        description: >
-          <p>red value if color mode is RGB or hue value if color mode is
-          HSB.</p>
-        type: Number
-      - name: v2
-        description: >
-          <p>green value if color mode is RGB or saturation value if color mode
-          is HSB.</p>
-        type: Number
-      - name: v3
-        description: >
-          <p>blue value if color mode is RGB or brightness value if color mode
-          is HSB.</p>
-        type: Number
-      - name: alpha
-        description: >
-          <p>alpha value, controls transparency (0 - transparent, 255 -
-          opaque).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1225
-    params:
-      - name: value
-        description: |
-          <p>a color string.</p>
-        type: String
-    chainable: 1
-  - line: 1231
-    params:
-      - name: gray
-        description: |
-          <p>a grayscale value.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1238
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue &
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 1245
-    params:
-      - name: color
-        description: |
-          <p>the fill color.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# fill
diff --git a/src/content/reference/en/p5 copy/filter.mdx b/src/content/reference/en/p5 copy/filter.mdx
deleted file mode 100644
index 5496568d48..0000000000
--- a/src/content/reference/en/p5 copy/filter.mdx	
+++ /dev/null
@@ -1,330 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L442
-title: filter
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Applies an image filter to the canvas.</p>
-
-  <p>The preset options are:</p>
-
-  <p><code>INVERT</code>
-
-  Inverts the colors in the image. No parameter is used.</p>
-
-  <p><code>GRAY</code>
-
-  Converts the image to grayscale. No parameter is used.</p>
-
-  <p><code>THRESHOLD</code>
-
-  Converts the image to black and white. Pixels with a grayscale value
-
-  above a given threshold are converted to white. The rest are converted to
-
-  black. The threshold must be between 0.0 (black) and 1.0 (white). If no
-
-  value is specified, 0.5 is used.</p>
-
-  <p><code>OPAQUE</code>
-
-  Sets the alpha channel to entirely opaque. No parameter is used.</p>
-
-  <p><code>POSTERIZE</code>
-
-  Limits the number of colors in the image. Each color channel is limited to
-
-  the number of colors specified. Values between 2 and 255 are valid, but
-
-  results are most noticeable with lower values. The default value is 4.</p>
-
-  <p><code>BLUR</code>
-
-  Blurs the image. The level of blurring is specified by a blur radius. Larger
-
-  values increase the blur. The default value is 4. A gaussian blur is used
-
-  in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>
-
-  <p><code>ERODE</code>
-
-  Reduces the light areas. No parameter is used.</p>
-
-  <p><code>DILATE</code>
-
-  Increases the light areas. No parameter is used.</p>
-
-  <p><code>filter()</code> uses WebGL in the background by default because it's
-  faster.
-
-  This can be disabled in <code>P2D</code> mode by adding a <code>false</code>
-  argument, as in
-
-  <code>filter(BLUR, false)</code>. This may be useful to keep computation off
-  the GPU
-
-  or to work around a lack of WebGL support.</p>
-
-  <p>In WebgL mode, <code>filter()</code> can also use custom shaders. See
-
-  <a href="/reference/p5/createFilterShader/">createFilterShader()</a> for more
-
-  information.</p>
-line: 442
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the INVERT filter.
-      filter(INVERT);
-
-      describe('A blue brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the GRAY filter.
-      filter(GRAY);
-
-      describe('A brick wall drawn in grayscale.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the THRESHOLD filter.
-      filter(THRESHOLD);
-
-      describe('A brick wall drawn in black and white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the OPAQUE filter.
-      filter(OPAQUE);
-
-      describe('A red brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the POSTERIZE filter.
-      filter(POSTERIZE, 3);
-
-      describe('An image of a red brick wall drawn with limited color palette.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the BLUR filter.
-      filter(BLUR, 3);
-
-      describe('A blurry image of a red brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the DILATE filter.
-      filter(DILATE);
-
-      describe('A red brick wall with bright lines between each brick.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the ERODE filter.
-      filter(ERODE);
-
-      describe('A red brick wall with faint lines between each brick.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the BLUR filter.
-      // Don't use WebGL.
-      filter(BLUR, 3, false);
-
-      describe('A blurry image of a red brick wall.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 442
-    params:
-      - name: filterType
-        description: |
-          <p>either THRESHOLD, GRAY, OPAQUE, INVERT,
-                                         POSTERIZE, BLUR, ERODE, DILATE or BLUR.</p>
-        type: Constant
-      - name: filterParam
-        description: |
-          <p>parameter unique to each filter.</p>
-        type: Number
-        optional: true
-      - name: useWebGL
-        description: |
-          <p>flag to control whether to use fast
-                                         WebGL filters (GPU) or original image
-                                         filters (CPU); defaults to <code>true</code>.</p>
-        type: Boolean
-        optional: true
-  - line: 715
-    params:
-      - name: filterType
-        description: ''
-        type: Constant
-      - name: useWebGL
-        description: ''
-        type: Boolean
-        optional: true
-  - line: 720
-    params:
-      - name: shaderFilter
-        description: |
-          <p>shader that's been loaded, with the
-                                            frag shader using a <code>tex0</code> uniform.</p>
-        type: p5.Shader
-chainable: false
----
-
-
-# filter
diff --git a/src/content/reference/en/p5 copy/float.mdx b/src/content/reference/en/p5 copy/float.mdx
deleted file mode 100644
index fffd6bfc1b..0000000000
--- a/src/content/reference/en/p5 copy/float.mdx	
+++ /dev/null
@@ -1,116 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L10
-title: float
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>String</code> to a floating point (decimal)
-  <code>Number</code>.</p>
-
-  <p><code>float()</code> converts strings that resemble numbers, such as
-  <code>'12.34'</code>, into
-
-  numbers.</p>
-
-  <p>The parameter, <code>str</code>, is the string value to convert. For
-  example, calling
-
-  <code>float('12.34')</code> returns the number <code>12.34</code>.  If an
-  array of strings is
-
-  passed, as in <code>float(['12.34', '56.78'])</code>, then an array of numbers
-  will be
-
-  returned.</p>
-
-  <p>Note: If a string can't be converted to a number, as in
-  <code>float('giraffe')</code>,
-
-  then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '12.3';
-
-      // Convert the string to a number.
-      let converted = float(original);
-
-      // Double the converted value.
-      let twice = converted * 2;
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(12);
-
-      // Display the original and converted values.
-      text(`${original} × 2 = ${twice}`, 50, 50);
-
-      describe('The text "12.3 × 2 = 24.6" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let original = ['60', '30', '15'];
-
-      // Convert the strings to numbers.
-      let diameters = float(original);
-
-      for (let d of diameters) {
-        // Draw a circle.
-        circle(50, 50, d);
-      }
-
-      describe('Three white, concentric circles on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 10
-    params:
-      - name: str
-        description: |
-          <p>string to convert.</p>
-        type: String
-    return:
-      description: converted number.
-      type: Number
-  - line: 80
-    params:
-      - name: ns
-        description: |
-          <p>array of strings to convert.</p>
-        type: 'String[]'
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# float
diff --git a/src/content/reference/en/p5 copy/floor.mdx b/src/content/reference/en/p5 copy/floor.mdx
deleted file mode 100644
index a9e97965a3..0000000000
--- a/src/content/reference/en/p5 copy/floor.mdx	
+++ /dev/null
@@ -1,57 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L294
-title: floor
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates the closest integer value that is less than or equal to the
-  value of a number.</p>
-line: 294
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use RGB color with values from 0 to 1.
-      colorMode(RGB, 1);
-
-      noStroke();
-
-      // Draw the left rectangle.
-      let r = 0.8;
-      fill(r, 0, 0);
-      rect(0, 0, 50, 100);
-
-      // Round r down to 0.
-      r = floor(r);
-
-      // Draw the right rectangle.
-      fill(r, 0, 0);
-      rect(50, 0, 50, 100);
-
-      describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to round down.</p>
-    type: Number
-return:
-  description: rounded down number.
-  type: Integer
-chainable: false
----
-
-
-# floor
diff --git a/src/content/reference/en/p5 copy/focused.mdx b/src/content/reference/en/p5 copy/focused.mdx
deleted file mode 100644
index 1e95f25927..0000000000
--- a/src/content/reference/en/p5 copy/focused.mdx	
+++ /dev/null
@@ -1,50 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L174
-title: focused
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Boolean</code> variable that's <code>true</code> if the browser is
-  focused and <code>false</code> if
-
-  not.</p>
-
-  <p>Note: The browser window can only receive input if it's focused.</p>
-line: 174
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Open this example in two separate browser
-    // windows placed side-by-side to demonstrate.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A square changes color from green to red when the browser window is out of focus.');
-    }
-
-    function draw() {
-      // Change the background color
-      // when the browser window
-      // goes in/out of focus.
-      if (focused === true) {
-        background(0, 255, 0);
-      } else {
-        background(255, 0, 0);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# focused
diff --git a/src/content/reference/en/p5 copy/for.mdx b/src/content/reference/en/p5 copy/for.mdx
deleted file mode 100644
index dc71d1c2ca..0000000000
--- a/src/content/reference/en/p5 copy/for.mdx	
+++ /dev/null
@@ -1,290 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1648
-title: for
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A way to repeat a block of code when the number of iterations is known.</p>
-
-  <p><code>for</code> loops are helpful for repeating statements a certain
-  number of times.
-
-  For example, a <code>for</code> loop makes it easy to express the idea
-
-  "draw five lines" like so:</p>
-
-  <pre><code class="language-js">for (let x = 10; x < 100; x += 20) {
-    line(x, 25, x, 75);
-  }
-
-  </code></pre>
-
-  <p>The loop's header begins with the keyword <code>for</code>. Loops generally
-  count up
-
-  or count down as they repeat, or iterate. The statements in parentheses
-
-  <code>let x = 10; x < 100; x += 20</code> tell the loop how it should
-  repeat:</p>
-
-  <ul>
-
-  <li><code>let x = 10</code> tells the loop to start counting at
-  <code>10</code> and keep track of iterations using the variable
-  <code>x</code>.</li>
-
-  <li><code>x < 100</code> tells the loop to count up to, but not including,
-  <code>100</code>.</li>
-
-  <li><code>x += 20</code>  tells the loop to count up by <code>20</code> at the
-  end of each iteration.</li>
-
-  </ul>
-
-  <p>The code between the curly braces <code>{}</code> is the loop's body.
-  Statements in the
-
-  loop body are repeated during each iteration of the loop.</p>
-
-  <p>It's common to create infinite loops accidentally. When this happens,
-
-  sketches may become unresponsive and the web browser may display a warning.
-
-  For example, the following loop never stops iterating because it doesn't
-
-  count up:</p>
-
-  <pre><code class="language-js">for (let x = 10; x < 100; x = 20) {
-    line(x, 25, x, 75);
-  }
-
-  </code></pre>
-
-  <p>The statement <code>x = 20</code> keeps the variable <code>x</code> stuck
-  at <code>20</code>, which is
-
-  always less than <code>100</code>.</p>
-
-  <p><code>for</code> loops can also count down:</p>
-
-  <pre><code class="language-js">for (let d = 100; d > 0; d -= 10) {
-    circle(50, 50, d);
-  }
-
-  </code></pre>
-
-  <p><code>for</code> loops can also contain other loops. The following nested
-  loop draws a
-
-  grid of points:</p>
-
-  <pre><code class="language-js">// Loop from left to right.
-
-  for (let x = 10; x < 100; x += 10) {
-
-    // Loop from top to bottom.
-    for (let y = 10; y < 100; y += 10) {
-      point(x, y);
-    }
-
-  }
-
-  </code></pre>
-
-  <p><code>for</code> loops are also helpful for iterating through the elements
-  of an
-
-  array. For example, it's common to iterate through an array that contains
-
-  information about where or what to draw:</p>
-
-  <pre><code class="language-js">// Create an array of x-coordinates.
-
-  let xCoordinates = [20, 40, 60];
-
-
-  for (let i = 0; i < xCoordinates.length; i += 1) {
-    // Update the element.
-    xCoordinates[i] += random(-1, 1);
-
-    // Draw a circle.
-    circle(xCoordinates[i], 50, 20);
-  }
-
-  </code></pre>
-
-  <p>If the array's values aren't modified, the <code>for...of</code> statement
-  can
-
-  simplify the code. They're similar to <code>for</code> loops in Python and
-  <code>for-each</code>
-
-  loops in C++ and Java. The following loops have the same effect:</p>
-
-  <pre><code class="language-js">// Draw circles with a for loop.
-
-  let xCoordinates = [20, 40, 60];
-
-
-  for (let i = 0; i < xCoordinates.length; i += 1) {
-    circle(xCoordinates[i], 50, 20);
-  }
-
-  </code></pre>
-
-  <pre><code class="language-js">// Draw circles with a for...of statement.
-
-  let xCoordinates = [20, 40, 60];
-
-
-  for (let x of xCoordinates) {
-    circle(x, 50, 20);
-  }
-
-  </code></pre>
-
-  <p>In the code snippets above, the variables <code>i</code> and <code>x</code>
-  have different roles.</p>
-
-  <p>In the first snippet, <code>i</code> counts from <code>0</code> up to
-  <code>2</code>, which is one less than
-
-  <code>xCoordinates.length</code>. <code>i</code> is used to access the element
-  in <code>xCoordinates</code>
-
-  at index <code>i</code>.</p>
-
-  <p>In the second code snippet, <code>x</code> isn't keeping track of the
-  loop's progress
-
-  or an index. During each iteration, <code>x</code> contains the next element
-  of
-
-  <code>xCoordinates</code>. <code>x</code> starts from the beginning of
-  <code>xCoordinates</code> (<code>20</code>) and
-
-  updates its value to <code>40</code> and then <code>60</code> during the next
-  iterations.</p>
-line: 1648
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Five black vertical lines on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw vertical lines using a loop.
-      for (let x = 10; x < 100; x += 20) {
-        line(x, 25, x, 75);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Five white concentric circles drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw concentric circles using a loop.
-      for (let d = 100; d > 0; d -= 20) {
-        circle(50, 50, d);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A grid of black dots on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the spacing for points on the grid.
-      let space = 10;
-
-      // Increase the stroke weight.
-      strokeWeight(3);
-
-      // Loop from the left to the right.
-      for (let x = space; x < 100; x += space) {
-        // Loop from the top to the bottom.
-        for (let y = space; y < 100; y += space) {
-          point(x, y);
-        }
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable xCoordinates and assign it an array of numbers.
-    let xCoordinates = [20, 40, 60, 80];
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the element at index i and use it to draw a circle.
-      for (let i = 0; i < xCoordinates.length; i += 1) {
-        circle(xCoordinates[i], 50, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable xCoordinates and assign it an array of numbers.
-    let xCoordinates = [20, 40, 60, 80];
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access each element of the array and use it to draw a circle.
-      for (let x of xCoordinates) {
-        circle(x, 50, 20);
-      }
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# for
diff --git a/src/content/reference/en/p5 copy/fract.mdx b/src/content/reference/en/p5 copy/fract.mdx
deleted file mode 100644
index 399f144c09..0000000000
--- a/src/content/reference/en/p5 copy/fract.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L1048
-title: fract
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates the fractional part of a number.</p>
-  <p>A number's fractional part includes its decimal values. For example,
-  <code>fract(12.34)</code> returns 0.34.</p>
-line: 1048
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Original number.
-      let n = 56.78;
-      text(n, 50, 33);
-
-      // Fractional part.
-      let f = fract(n);
-      text(f, 50, 67);
-
-      describe('The number 56.78 written above the number 0.78.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number whose fractional part will be found.</p>
-    type: Number
-return:
-  description: fractional part of n.
-  type: Number
-chainable: false
----
-
-
-# fract
diff --git a/src/content/reference/en/p5 copy/frameCount.mdx b/src/content/reference/en/p5 copy/frameCount.mdx
deleted file mode 100644
index f2d02603a0..0000000000
--- a/src/content/reference/en/p5 copy/frameCount.mdx	
+++ /dev/null
@@ -1,73 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L69
-title: frameCount
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that tracks the number of frames drawn since
-  the sketch
-
-  started.</p>
-
-  <p><code>frameCount</code>'s value is 0 inside <a
-  href="/reference/p5/setup/">setup()</a>. It
-
-  increments by 1 each time the code in <a href="/reference/p5/draw/">draw()</a>
-
-  finishes executing.</p>
-line: 69
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Display the value of
-      // frameCount.
-      textSize(30);
-      textAlign(CENTER, CENTER);
-      text(frameCount, 50, 50);
-
-      describe('The number 0 written in black in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Set the frameRate to 30.
-      frameRate(30);
-
-      textSize(30);
-      textAlign(CENTER, CENTER);
-
-      describe('A number written in black in the middle of a gray square. Its value increases rapidly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Display the value of
-      // frameCount.
-      text(frameCount, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Integer
----
-
-
-# frameCount
diff --git a/src/content/reference/en/p5 copy/frameRate.mdx b/src/content/reference/en/p5 copy/frameRate.mdx
deleted file mode 100644
index 38ccddd0d6..0000000000
--- a/src/content/reference/en/p5 copy/frameRate.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L330
-title: frameRate
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Sets the number of frames to draw per second.</p>
-
-  <p>Calling <code>frameRate()</code> with one numeric argument, as in
-  <code>frameRate(30)</code>,
-
-  attempts to draw 30 frames per second (FPS). The target frame rate may not
-
-  be achieved depending on the sketch's processing needs. Most computers
-
-  default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
-
-  fast enough for smooth animations.</p>
-
-  <p>Calling <code>frameRate()</code> without an argument returns the current
-  frame rate.
-
-  The value returned is an approximation.</p>
-line: 330
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the x variable based
-      // on the current frameCount.
-      let x = frameCount % 100;
-
-      // If the mouse is pressed,
-      // decrease the frame rate.
-      if (mouseIsPressed === true) {
-        frameRate(10);
-      } else {
-        frameRate(60);
-      }
-
-      // Use x to set the circle's
-      // position.
-      circle(x, 50, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the mouse is pressed, do lots
-      // of math to slow down drawing.
-      if (mouseIsPressed === true) {
-        for (let i = 0; i < 1000000; i += 1) {
-          random();
-        }
-      }
-
-      // Get the current frame rate
-      // and display it.
-      let fps = frameRate();
-      text(fps, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 330
-    params:
-      - name: fps
-        description: |
-          <p>number of frames to draw per second.</p>
-        type: Number
-    chainable: 1
-  - line: 404
-    params: []
-    return:
-      description: current frame rate.
-      type: Number
-chainable: true
----
-
-
-# frameRate
diff --git a/src/content/reference/en/p5 copy/freeGeometry.mdx b/src/content/reference/en/p5 copy/freeGeometry.mdx
deleted file mode 100644
index 7af36d8620..0000000000
--- a/src/content/reference/en/p5 copy/freeGeometry.mdx	
+++ /dev/null
@@ -1,152 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L748
-title: freeGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Clears a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object from
-  the graphics
-
-  processing unit (GPU) memory.</p>
-
-  <p><a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can contain
-  lots of data
-
-  about their vertices, surface normals, colors, and so on. Complex 3D shapes
-
-  can use lots of memory which is a limited resource in many GPUs. Calling
-
-  <code>freeGeometry()</code> can improve performance by freeing a
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object’s resources from
-  GPU memory.
-
-  <code>freeGeometry()</code> works with <a
-  href="/reference/p5/p5.Geometry">p5.Geometry</a> objects
-
-  created with <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a>,
-
-  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, and
-
-  <a href="/reference/p5/loadModel/">loadModel()</a>.</p>
-
-  <p>The parameter, <code>geometry</code>, is the <a
-  href="/reference/p5/p5.Geometry">p5.Geometry</a>
-
-  object to be freed.</p>
-
-  <p>Note: A <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object can
-  still be drawn
-
-  after its resources are cleared from GPU memory. It may take longer to draw
-
-  the first time it’s redrawn.</p>
-
-  <p>Note: <code>freeGeometry()</code> can only be used in WebGL mode.</p>
-line: 748
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Create a p5.Geometry object.
-      beginGeometry();
-      cone();
-      let shape = endGeometry();
-
-      // Draw the shape.
-      model(shape);
-
-      // Free the shape's resources.
-      freeGeometry(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = buildGeometry(createParticles);
-    }
-
-    function createParticles() {
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: geometry
-    description: |
-      <p>3D shape whose resources should be freed.</p>
-    type: p5.Geometry
-chainable: false
----
-
-
-# freeGeometry
diff --git a/src/content/reference/en/p5 copy/freqToMidi.mdx b/src/content/reference/en/p5 copy/freqToMidi.mdx
deleted file mode 100644
index 12c6e1eff9..0000000000
--- a/src/content/reference/en/p5 copy/freqToMidi.mdx	
+++ /dev/null
@@ -1,29 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L825
-title: freqToMidi
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns the closest MIDI note value for
-  a given frequency.</p>
-line: 825
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: frequency
-    description: |
-      <p>A freqeuncy, for example, the "A"
-                                 above Middle C is 440Hz</p>
-    type: Number
-return:
-  description: MIDI note value
-  type: Number
-chainable: false
----
-
-
-# freqToMidi
diff --git a/src/content/reference/en/p5 copy/frustum.mdx b/src/content/reference/en/p5 copy/frustum.mdx
deleted file mode 100644
index 01ffd87883..0000000000
--- a/src/content/reference/en/p5 copy/frustum.mdx	
+++ /dev/null
@@ -1,175 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L522
-title: frustum
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets the frustum of the current camera in a 3D sketch.</p>
-
-  <p>In a frustum projection, shapes that are further from the camera appear
-
-  smaller than shapes that are near the camera. This technique, called
-
-  foreshortening, creates realistic 3D scenes.</p>
-
-  <p><code>frustum()</code> changes the default camera’s perspective by changing
-  its
-
-  viewing frustum. The frustum is the volume of space that’s visible to the
-
-  camera. The frustum’s shape is a pyramid with its top cut off. The camera
-
-  is placed where the top of the pyramid should be and points towards the
-
-  base of the pyramid. It views everything within the frustum.</p>
-
-  <p>The first four parameters, <code>left</code>, <code>right</code>,
-  <code>bottom</code>, and <code>top</code>, set the
-
-  coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-  <code>frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
-  wide
-
-  and 400 pixels tall. By default, these coordinates are set based on the
-
-  sketch’s width and height, as in
-
-  <code>ortho(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>
-
-  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
-  distance of the
-
-  frustum’s near and far plane from the camera. For example, calling
-
-  <code>ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s
-  200 pixels
-
-  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
-
-  pixels from the camera. By default, near is set to <code>0.1 * 800</code>,
-  which is
-
-  1/10th the default distance between the camera and the origin.
-  <code>far</code> is set
-
-  to <code>10 * 800</code>, which is 10 times the default distance between the
-  camera
-
-  and the origin.</p>
-
-  <p>Note: <code>frustum()</code> can only be used in WebGL mode.</p>
-line: 522
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A row of white cubes on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Apply the default frustum projection.
-      frustum();
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust the frustum.
-      // Center it.
-      // Set its width and height to 20 pixels.
-      // Place its near plane 300 pixels from the camera.
-      // Place its far plane 350 pixels from the camera.
-      frustum(-10, 10, -10, 10, 300, 350);
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: left
-    description: >
-      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: right
-    description: >
-      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: bottom
-    description: >
-      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: top
-    description: >
-      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: near
-    description: >
-      <p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
-      800</code>.</p>
-    type: Number
-    optional: true
-  - name: far
-    description: >
-      <p>z-coordinate of the frustum’s far plane. Defaults to <code>10 *
-      800</code>.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# frustum
diff --git a/src/content/reference/en/p5 copy/fullscreen.mdx b/src/content/reference/en/p5 copy/fullscreen.mdx
deleted file mode 100644
index 1c6b2eb7fe..0000000000
--- a/src/content/reference/en/p5 copy/fullscreen.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L950
-title: fullscreen
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Toggles full-screen mode or returns the current mode.</p>
-
-  <p>Calling <code>fullscreen(true)</code> makes the sketch full-screen. Calling
-
-  <code>fullscreen(false)</code> makes the sketch its original size.</p>
-
-  <p>Calling <code>fullscreen()</code> without an argument returns
-  <code>true</code> if the sketch
-
-  is in full-screen mode and <code>false</code> if not.</p>
-
-  <p>Note: Due to browser restrictions, <code>fullscreen()</code> can only be
-  called with
-
-  user input such as a mouse press.</p>
-line: 950
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      describe('A gray canvas that switches between default and full-screen display when clicked.');
-    }
-
-    // If the mouse is pressed,
-    // toggle full-screen mode.
-    function mousePressed() {
-      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
-        let fs = fullscreen();
-        fullscreen(!fs);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: val
-    description: |
-      <p>whether the sketch should be in fullscreen mode.</p>
-    type: Boolean
-    optional: true
-return:
-  description: current fullscreen state.
-  type: Boolean
-chainable: false
----
-
-
-# fullscreen
diff --git a/src/content/reference/en/p5 copy/function.mdx b/src/content/reference/en/p5 copy/function.mdx
deleted file mode 100644
index e213633c86..0000000000
--- a/src/content/reference/en/p5 copy/function.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L317
-title: function
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions/\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();\n</code></pre>\n<p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n</code></pre>\n<p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code></pre>\n<p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n  let answer = 2 * x;\n  return answer;\n}\n</code></pre>\n<p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n</code></pre>\n"
-line: 317
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function.\n  drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function and pass values for\n  // its position and size.\n  drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('The message \"Hello, \U0001F30D!\" written on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Create a greeting.\n  let greeting = createGreeting('\U0001F30D');\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(16);\n\n  // Display the greeting.\n  text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n  let message = `Hello, ${name}!`;\n  return message;\n}\n</code>\n</div>"
-class: p5
----
-
-
-# function
diff --git a/src/content/reference/en/p5 copy/get.mdx b/src/content/reference/en/p5 copy/get.mdx
deleted file mode 100644
index 42cbb8e7f8..0000000000
--- a/src/content/reference/en/p5 copy/get.mdx	
+++ /dev/null
@@ -1,178 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L820
-title: get
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Gets a pixel or a region of pixels from the canvas.</p>
-
-  <p><code>get()</code> is easy to use but it's not as fast as
-
-  <a href="/reference/p5/pixels/">pixels</a>. Use <a
-  href="/reference/p5/pixels/">pixels</a>
-
-  to read many pixel values.</p>
-
-  <p>The version of <code>get()</code> with no parameters returns the entire
-  canvas.</p>
-
-  <p>The version of <code>get()</code> with two parameters interprets them as
-
-  coordinates. It returns an array with the <code>[R, G, B, A]</code> values of
-  the
-
-  pixel at the given point.</p>
-
-  <p>The version of <code>get()</code> with four parameters interprets them as
-  coordinates
-
-  and dimensions. It returns a subsection of the canvas as a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two parameters
-  are the
-
-  coordinates for the upper-left corner of the subsection. The last two
-
-  parameters are the width and height of the subsection.</p>
-
-  <p>Use <a href="/reference/p5.Image/get/">p5.Image.get()</a> to work directly
-  with
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> objects.</p>
-line: 820
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Get the entire canvas.
-      let c = get();
-
-      // Display half the canvas.
-      image(c, 50, 0);
-
-      describe('Two identical mountain landscapes shown side-by-side.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Get the color of a pixel.
-      let c = get(50, 90);
-
-      // Style the square with the pixel's color.
-      fill(c);
-      noStroke();
-
-      // Display the square.
-      square(25, 25, 50);
-
-      describe('A mountain landscape with an olive green square in its center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Get a region of the image.
-      let c = get(0, 0, 50, 50);
-
-      // Display the region.
-      image(c, 50, 50);
-
-      describe('A mountain landscape drawn on top of another mountain landscape.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
-  type: p5.Image
-overloads:
-  - line: 820
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the pixel.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the pixel.</p>
-        type: Number
-      - name: w
-        description: |
-          <p>width of the subsection to be returned.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>height of the subsection to be returned.</p>
-        type: Number
-    return:
-      description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
-      type: p5.Image
-  - line: 931
-    params: []
-    return:
-      description: whole canvas as a <a href="#/p5.Image">p5.Image</a>.
-      type: p5.Image
-  - line: 935
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-    return:
-      description: 'color of the pixel at (x, y) in array format `[R, G, B, A]`.'
-      type: 'Number[]'
-chainable: false
----
-
-
-# get
diff --git a/src/content/reference/en/p5 copy/getAudioContext.mdx b/src/content/reference/en/p5 copy/getAudioContext.mdx
deleted file mode 100644
index c7291c5cdf..0000000000
--- a/src/content/reference/en/p5 copy/getAudioContext.mdx	
+++ /dev/null
@@ -1,56 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L159
-title: getAudioContext
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >-
-  <p>Returns the Audio Context for this sketch. Useful for users
-
-  who would like to dig deeper into the <a target="_blank"
-  href="http://webaudio.github.io/web-audio-api/">Web Audio API
-
-  </a>.</p>
-
-
-  <p>Some browsers require users to startAudioContext
-
-  with a user gesture, such as touchStarted in the example below.</p>
-line: 159
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-     function draw() {
-       background(255);
-       textAlign(CENTER);
-
-       if (getAudioContext().state !== 'running') {
-         text('click to start audio', width/2, height/2);
-       } else {
-         text('audio is enabled', width/2, height/2);
-       }
-     }
-
-     function touchStarted() {
-       if (getAudioContext().state !== 'running') {
-         getAudioContext().resume();
-       }
-       var synth = new p5.MonoSynth();
-       synth.play('A4', 0.5, 0, 0.2);
-     }
-
-    </div></code>
-class: p5
-return:
-  description: AudioContext for this sketch
-  type: Object
-chainable: false
----
-
-
-# getAudioContext
diff --git a/src/content/reference/en/p5 copy/getItem.mdx b/src/content/reference/en/p5 copy/getItem.mdx
deleted file mode 100644
index 5747f67366..0000000000
--- a/src/content/reference/en/p5 copy/getItem.mdx	
+++ /dev/null
@@ -1,151 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L164
-title: getItem
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Returns a value in the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs.</p>
-
-  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
-  values in
-
-  <code>localStorage</code> and <code>getItem()</code> makes it easy to retrieve
-  them.</p>
-
-  <p>The first parameter, <code>key</code>, is the name of the value to be
-  stored as a
-
-  string.</p>
-
-  <p>The second parameter, <code>value</code>, is the value to be retrieved a
-  string. For
-
-  example, calling <code>getItem('size')</code> retrieves the value with the key
-  <code>size</code>.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 164
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe('The text "Feist: 1234" written in black on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an object.
-      let p = { x: 50, y: 50 };
-
-      // Store the object.
-      storeItem('position', p);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let p = getItem('position');
-
-      // Draw the circle.
-      circle(p.x, p.y, 30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let c = color('deeppink');
-
-      // Store the object.
-      storeItem('color', c);
-
-      describe('A pink circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let c = getItem('color');
-
-      // Style the circle.
-      fill(c);
-
-      // Draw the circle.
-      circle(50, 50, 30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: key
-    description: |
-      <p>name of the value.</p>
-    type: String
-return:
-  description: stored item.
-  type: String|Number|Boolean|Object|Array
-chainable: false
----
-
-
-# getItem
diff --git a/src/content/reference/en/p5 copy/getOutputVolume.mdx b/src/content/reference/en/p5 copy/getOutputVolume.mdx
deleted file mode 100644
index 6542c5edb6..0000000000
--- a/src/content/reference/en/p5 copy/getOutputVolume.mdx	
+++ /dev/null
@@ -1,25 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L726
-title: getOutputVolume
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns a number representing the output volume for sound
-  in this sketch.</p>
-line: 726
-isConstructor: false
-itemtype: method
-class: p5
-return:
-  description: |-
-    Output volume for sound in this sketch.
-                     Should be between 0.0 (silence) and 1.0.
-  type: Number
-chainable: false
----
-
-
-# getOutputVolume
diff --git a/src/content/reference/en/p5 copy/getTargetFrameRate.mdx b/src/content/reference/en/p5 copy/getTargetFrameRate.mdx
deleted file mode 100644
index 10e3c74a4b..0000000000
--- a/src/content/reference/en/p5 copy/getTargetFrameRate.mdx	
+++ /dev/null
@@ -1,48 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L447
-title: getTargetFrameRate
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: |
-  <p>Returns the target frame rate.</p>
-  <p>The value is either the system frame rate or the last value passed to
-  <a href="/reference/p5/frameRate/">frameRate()</a>.</p>
-line: 447
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('The number 20 written in black on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the frame rate to 20.
-      frameRate(20);
-
-      // Get the target frame rate and
-      // display it.
-      let fps = getTargetFrameRate();
-      text(fps, 43, 54);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: _targetFrameRate
-  type: Number
-chainable: false
----
-
-
-# getTargetFrameRate
diff --git a/src/content/reference/en/p5 copy/getURL.mdx b/src/content/reference/en/p5 copy/getURL.mdx
deleted file mode 100644
index 01ccdc8e11..0000000000
--- a/src/content/reference/en/p5 copy/getURL.mdx	
+++ /dev/null
@@ -1,46 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1149
-title: getURL
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Returns the sketch's current
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/"
-  target="_blank">URL</a>
-
-  as a <code>String</code>.</p>
-line: 1149
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Get the sketch's URL
-      // and display it.
-      let url = getURL();
-      textWrap(CHAR);
-      text(url, 0, 40, 100);
-
-      describe('The URL "https://p5js.org/reference/p5/getURL" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: url
-  type: String
-chainable: false
----
-
-
-# getURL
diff --git a/src/content/reference/en/p5 copy/getURLParams.mdx b/src/content/reference/en/p5 copy/getURLParams.mdx
deleted file mode 100644
index c08c77f23f..0000000000
--- a/src/content/reference/en/p5 copy/getURLParams.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1208
-title: getURLParams
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Returns the current
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters"
-  target="_blank">URL parameters</a>
-
-  in an <code>Object</code>.</p>
-
-  <p>For example, calling <code>getURLParams()</code> in a sketch hosted at the
-  URL
-
-  <code>https://p5js.org?year=2014&month=May&day=15</code> returns
-
-  <code>{ year: 2014, month: 'May', day: 15 }</code>.</p>
-line: 1208
-isConstructor: false
-itemtype: method
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class='norender notest'>
-    <code>
-    // Imagine this sketch is hosted at the following URL:
-    // https://p5js.org?year=2014&month=May&day=15
-
-    function setup() {
-      background(200);
-
-      // Get the sketch's URL
-      // parameters and display
-      // them.
-      let params = getURLParams();
-      text(params.day, 10, 20);
-      text(params.month, 10, 40);
-      text(params.year, 10, 60);
-
-      describe('The text "15", "May", and "2014" written in black on separate lines.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: URL params
-  type: Object
-chainable: false
----
-
-
-# getURLParams
diff --git a/src/content/reference/en/p5 copy/getURLPath.mdx b/src/content/reference/en/p5 copy/getURLPath.mdx
deleted file mode 100644
index e71b7746ad..0000000000
--- a/src/content/reference/en/p5 copy/getURLPath.mdx	
+++ /dev/null
@@ -1,58 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1175
-title: getURLPath
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Returns the current
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource"
-  target="_blank">URL</a>
-
-  path as an <code>Array</code> of <code>String</code>s.</p>
-
-  <p>For example, consider a sketch hosted at the URL
-
-  <code>https://example.com/sketchbook</code>. Calling <code>getURLPath()</code>
-  returns
-
-  <code>['sketchbook']</code>. For a sketch hosted at the URL
-
-  <code>https://example.com/sketchbook/monday</code>, <code>getURLPath()</code>
-  returns
-
-  <code>['sketchbook', 'monday']</code>.</p>
-line: 1175
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Get the sketch's URL path
-      // and display the first
-      // part.
-      let path = getURLPath();
-      text(path[0], 25, 54);
-
-      describe('The word "reference" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: path components.
-  type: 'String[]'
-chainable: false
----
-
-
-# getURLPath
diff --git a/src/content/reference/en/p5 copy/green.mdx b/src/content/reference/en/p5 copy/green.mdx
deleted file mode 100644
index 72634492fb..0000000000
--- a/src/content/reference/en/p5 copy/green.mdx	
+++ /dev/null
@@ -1,159 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L692
-title: green
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the green value of a color.</p>
-
-  <p><code>green()</code> extracts the green value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>green()</code> returns a color's green value in the range
-  0
-
-  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  RGB, it
-
-  returns the green value in the given range.</p>
-line: 692
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let c = color(175, 100, 220);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 100.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [175, 100, 220];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 100.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgb(175, 100, 220)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 100.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(69, 39, 86);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 39.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the green value.
-  type: Number
-chainable: false
----
-
-
-# green
diff --git a/src/content/reference/en/p5 copy/gridOutput.mdx b/src/content/reference/en/p5 copy/gridOutput.mdx
deleted file mode 100644
index c80c3efaf2..0000000000
--- a/src/content/reference/en/p5 copy/gridOutput.mdx	
+++ /dev/null
@@ -1,189 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L161
-title: gridOutput
-module: Environment
-submodule: Environment
-file: src/accessibility/outputs.js
-description: >
-  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
-
-  <p><code>gridOutput()</code> adds a general description, table of shapes, and
-  list of
-
-  shapes to the web page. The general description includes the canvas size,
-
-  canvas color, and number of shapes. For example,
-
-  <code>gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1
-  square</code>.</p>
-
-  <p><code>gridOutput()</code> uses its table of shapes as a grid. Each shape in
-  the grid
-
-  is placed in a cell whose row and column correspond to the shape's location
-
-  on the canvas. The grid cells describe the color and type of shape at that
-
-  location. For example, <code>red circle</code>. These descriptions can be
-  selected
-
-  individually to get more details. This is different from
-
-  <a href="/reference/p5/textOutput/">textOutput()</a>, which uses its table as
-  a list.</p>
-
-  <p>A list of shapes follows the table. The list describes the color, type,
-
-  location, and area of each shape. For example,
-
-  <code>red circle, location = middle, area = 3 %</code>.</p>
-
-  <p>The <code>display</code> parameter is optional. It determines how the
-  description is
-
-  displayed. If <code>LABEL</code> is passed, as in
-  <code>gridOutput(LABEL)</code>, the description
-
-  will be visible in a div element next to the canvas. Using <code>LABEL</code>
-  creates
-
-  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
-
-  development. If <code>FALLBACK</code> is passed, as in
-  <code>gridOutput(FALLBACK)</code>, the
-
-  description will only be visible to screen readers. This is the default
-
-  mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-
-  <p><code>gridOutput()</code> generates descriptions in English only. Text
-  drawn with
-
-  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
-  mode
-
-  and 3D shapes are not supported.</p>
-
-  <p>Use <a href="/reference/p5/describe/">describe()</a> and
-
-  <a href="/reference/p5/describeElement/">describeElement()</a> for more
-  control
-
-  over canvas descriptions.</p>
-line: 161
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Add the grid description.
-      gridOutput();
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Add the grid description and
-      // display it for debugging.
-      gridOutput(LABEL);
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the grid description.
-      gridOutput();
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the grid description and
-      // display it for debugging.
-      gridOutput(LABEL);
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: display
-    description: |
-      <p>either FALLBACK or LABEL.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# gridOutput
diff --git a/src/content/reference/en/p5 copy/height.mdx b/src/content/reference/en/p5 copy/height.mdx
deleted file mode 100644
index f6321218df..0000000000
--- a/src/content/reference/en/p5 copy/height.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L881
-title: height
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the height of the canvas in
-  pixels.</p>
-
-  <p><code>height</code>'s default value is 100. Calling
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
-
-  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
-
-  <code>height</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
-  sets its value to
-
-  0.</p>
-line: 881
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Display the canvas' height.
-      text(height, 42, 54);
-
-      describe('The number 100 written in black on a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 50);
-
-      background(200);
-
-      // Display the canvas' height.
-      text(height, 42, 27);
-
-      describe('The number 50 written in black on a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Display the canvas' height.
-      text(height, 42, 54);
-
-      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
-    }
-
-    // If the mouse is pressed, reisze
-    // the canvas and display its new
-    // height.
-    function mousePressed() {
-      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
-        resizeCanvas(100, 50);
-        background(200);
-        text(height, 42, 27);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# height
diff --git a/src/content/reference/en/p5 copy/hex.mdx b/src/content/reference/en/p5 copy/hex.mdx
deleted file mode 100644
index 5475af324a..0000000000
--- a/src/content/reference/en/p5 copy/hex.mdx	
+++ /dev/null
@@ -1,166 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L818
-title: hex
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Number</code> to a <code>String</code> with its
-  hexadecimal value.</p>
-
-  <p><code>hex()</code> converts a number to a string with its hexadecimal
-  number value.
-
-  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
-
-  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
-
-  number <code>11</code> (eleven) in base-10 is written as the letter
-  <code>B</code> in hex.</p>
-
-  <p>The first parameter, <code>n</code>, is the number to convert. For example,
-  <code>hex(20)</code>,
-
-  returns the string <code>'00000014'</code>. If an array is passed, as in
-
-  <code>hex([1, 10, 100])</code>, an array of hexadecimal strings is
-  returned.</p>
-
-  <p>The second parameter, <code>digits</code>, is optional. If a number is
-  passed, as in
-
-  <code>hex(20, 2)</code>, it sets the number of hexadecimal digits to display.
-  For
-
-  example, calling <code>hex(20, 2)</code> returns the string
-  <code>'14'</code>.</p>
-line: 818
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 20;
-
-      // Convert the number to a hex string.
-      let converted = hex(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "20 = 00000014" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 20;
-
-      // Convert the number to a hex string.
-      // Only display two hex digits.
-      let converted = hex(original, 2);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "20 = 14" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = [1, 10, 100];
-
-      // Convert the numbers to hex strings.
-      // Only use two hex digits.
-      let converted = hex(original, 2);
-
-      // Style the text.
-      textAlign(RIGHT, CENTER);
-      textSize(16);
-
-      // Iterate over the converted values.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${ original[i]} = ${converted[i]}`, 75, y);
-      }
-
-      describe(
-        'The text "1 = 01", "10 = 0A", and "100 = 64" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted hexadecimal value.
-  type: String
-overloads:
-  - line: 818
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: Number
-      - name: digits
-        description: |
-          <p>number of digits to include.</p>
-        type: Number
-        optional: true
-    return:
-      description: converted hexadecimal value.
-      type: String
-  - line: 926
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: 'Number[]'
-      - name: digits
-        description: ''
-        type: Number
-        optional: true
-    return:
-      description: converted hexadecimal values.
-      type: 'String[]'
-chainable: false
----
-
-
-# hex
diff --git a/src/content/reference/en/p5 copy/hour.mdx b/src/content/reference/en/p5 copy/hour.mdx
deleted file mode 100644
index 802a809d72..0000000000
--- a/src/content/reference/en/p5 copy/hour.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L44
-title: hour
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current hour as a number from 0–23.</p>
-line: 44
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current hour.
-      let h = hour();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the hour.
-      text(`Current hour: ${h}`, 20, 50, 60);
-
-      describe(`The text 'Current hour: ${h}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current hour between 0 and 23.
-  type: Integer
-chainable: false
----
-
-
-# hour
diff --git a/src/content/reference/en/p5 copy/httpDo.mdx b/src/content/reference/en/p5 copy/httpDo.mdx
deleted file mode 100644
index 52d6553248..0000000000
--- a/src/content/reference/en/p5 copy/httpDo.mdx	
+++ /dev/null
@@ -1,150 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1208
-title: httpDo
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Method for executing an HTTP request. If data type is not specified,
-
-  p5 will try to guess based on the URL, defaulting to text.<br><br>
-
-  For more advanced use, you may also pass in the path as the first argument
-
-  and a object as the second argument, the signature follows the one specified
-
-  in the Fetch API specification.
-
-  This method is suitable for fetching files up to size of 64MB when "GET" is
-  used.</br></br></p>
-line: 1208
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Examples use USGS Earthquake API:
-    // https://earthquake.usgs.gov/fdsnws/event/1/#methods
-
-    // displays an animation of all USGS earthquakes
-    let earthquakes;
-    let eqFeatureIndex = 0;
-
-    function preload() {
-      let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
-      httpDo(
-        url,
-        {
-          method: 'GET',
-          // Other Request options, like special headers for apis
-          headers: { authorization: 'Bearer secretKey' }
-        },
-        function(res) {
-          earthquakes = res;
-        }
-      );
-    }
-
-    function draw() {
-      // wait until the data is loaded
-      if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
-        return;
-      }
-      clear();
-
-      let feature = earthquakes.features[eqFeatureIndex];
-      let mag = feature.properties.mag;
-      let rad = mag / 11 * ((width + height) / 2);
-      fill(255, 0, 0, 100);
-      ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
-
-      if (eqFeatureIndex >= earthquakes.features.length) {
-        eqFeatureIndex = 0;
-      } else {
-        eqFeatureIndex += 1;
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: |-
-    A promise that resolves with the data when the operation
-                      completes successfully or rejects with the error after
-                      one occurs.
-  type: Promise
-overloads:
-  - line: 1208
-    params:
-      - name: path
-        description: |
-          <p>name of the file or url to load</p>
-        type: String
-      - name: method
-        description: |
-          <p>either "GET", "POST", or "PUT",
-                                             defaults to "GET"</p>
-        type: String
-        optional: true
-      - name: datatype
-        description: |
-          <p>"json", "jsonp", "xml", or "text"</p>
-        type: String
-        optional: true
-      - name: data
-        description: |
-          <p>param data passed sent with request</p>
-        type: Object
-        optional: true
-      - name: callback
-        description: |
-          <p>function to be executed after
-                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
-                                             as first argument</p>
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: |
-          <p>function to be executed if
-                                             there is an error, response is passed
-                                             in as first argument</p>
-        type: Function
-        optional: true
-    return:
-      description: |-
-        A promise that resolves with the data when the operation
-                          completes successfully or rejects with the error after
-                          one occurs.
-      type: Promise
-  - line: 1279
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: options
-        description: >
-          <p>Request object options as documented in the
-                                             "fetch" API
-          <a
-          href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API">reference</a></p>
-        type: Object
-      - name: callback
-        description: ''
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-chainable: false
----
-
-
-# httpDo
diff --git a/src/content/reference/en/p5 copy/httpGet.mdx b/src/content/reference/en/p5 copy/httpGet.mdx
deleted file mode 100644
index 9e8591e059..0000000000
--- a/src/content/reference/en/p5 copy/httpGet.mdx	
+++ /dev/null
@@ -1,140 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1043
-title: httpGet
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Method for executing an HTTP GET request. If data type is not specified,
-
-  p5 will try to guess based on the URL, defaulting to text. This is equivalent
-  to
-
-  calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
-
-  a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
-
-  which can be used to initialize typed arrays (such as Uint8Array).</p>
-line: 1043
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    // Examples use USGS Earthquake API:
-    //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
-    let earthquakes;
-    function preload() {
-      // Get the most recent earthquake in the database
-      let url =
-       'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
-        'format=geojson&limit=1&orderby=time';
-      httpGet(url, 'jsonp', false, function(response) {
-        // when the HTTP request completes, populate the variable that holds the
-        // earthquake data used in the visualization.
-        earthquakes = response;
-      });
-    }
-
-    function draw() {
-      if (!earthquakes) {
-        // Wait until the earthquake data has loaded before drawing.
-        return;
-      }
-      background(200);
-      // Get the magnitude and name of the earthquake out of the loaded JSON
-      let earthquakeMag = earthquakes.features[0].properties.mag;
-      let earthquakeName = earthquakes.features[0].properties.place;
-      ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
-      textAlign(CENTER);
-      text(earthquakeName, 0, height - 30, width, 30);
-      noLoop();
-    }
-    </code></div>
-class: p5
-return:
-  description: |-
-    A promise that resolves with the data when the operation
-                      completes successfully or rejects with the error after
-                      one occurs.
-  type: Promise
-overloads:
-  - line: 1043
-    params:
-      - name: path
-        description: |
-          <p>name of the file or url to load</p>
-        type: String
-      - name: datatype
-        description: |
-          <p>"json", "jsonp", "binary", "arrayBuffer",
-                                             "xml", or "text"</p>
-        type: String
-        optional: true
-      - name: data
-        description: |
-          <p>param data passed sent with request</p>
-        type: Object|Boolean
-        optional: true
-      - name: callback
-        description: |
-          <p>function to be executed after
-                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
-                                             as first argument</p>
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: |
-          <p>function to be executed if
-                                             there is an error, response is passed
-                                             in as first argument</p>
-        type: Function
-        optional: true
-    return:
-      description: |-
-        A promise that resolves with the data when the operation
-                          completes successfully or rejects with the error after
-                          one occurs.
-      type: Promise
-  - line: 1097
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: data
-        description: ''
-        type: Object|Boolean
-      - name: callback
-        description: ''
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-  - line: 1105
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: callback
-        description: ''
-        type: Function
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-chainable: false
----
-
-
-# httpGet
diff --git a/src/content/reference/en/p5 copy/httpPost.mdx b/src/content/reference/en/p5 copy/httpPost.mdx
deleted file mode 100644
index 39f4fc75a0..0000000000
--- a/src/content/reference/en/p5 copy/httpPost.mdx	
+++ /dev/null
@@ -1,165 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1119
-title: httpPost
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Method for executing an HTTP POST request. If data type is not specified,
-
-  p5 will try to guess based on the URL, defaulting to text. This is equivalent
-  to
-
-  calling <code>httpDo(path, 'POST')</code>.</p>
-line: 1119
-isConstructor: false
-itemtype: method
-example:
-  - >-
-
-    <div>
-
-    <code>
-
-    // Examples use jsonplaceholder.typicode.com for a Mock Data API
-
-
-    let url = 'https://jsonplaceholder.typicode.com/posts';
-
-    let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very
-    cool.' };
-
-
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-    }
-
-
-    function mousePressed() {
-      httpPost(url, 'json', postData, function(result) {
-        strokeWeight(2);
-        text(result.body, mouseX, mouseY);
-      });
-    }
-
-    </code>
-
-    </div>
-
-
-    <div><code>
-
-    let url = 'ttps://invalidURL'; // A bad URL that will cause errors
-
-    let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
-
-
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-    }
-
-
-    function mousePressed() {
-      httpPost(
-        url,
-        'json',
-        postData,
-        function(result) {
-          // ... won't be called
-        },
-        function(error) {
-          strokeWeight(2);
-          text(error.toString(), mouseX, mouseY);
-        }
-      );
-    }
-
-    </code></div>
-class: p5
-return:
-  description: |-
-    A promise that resolves with the data when the operation
-                      completes successfully or rejects with the error after
-                      one occurs.
-  type: Promise
-overloads:
-  - line: 1119
-    params:
-      - name: path
-        description: |
-          <p>name of the file or url to load</p>
-        type: String
-      - name: datatype
-        description: |
-          <p>"json", "jsonp", "xml", or "text".
-                                             If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.</p>
-        type: String
-        optional: true
-      - name: data
-        description: |
-          <p>param data passed sent with request</p>
-        type: Object|Boolean
-        optional: true
-      - name: callback
-        description: |
-          <p>function to be executed after
-                                             <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
-                                             as first argument</p>
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: |
-          <p>function to be executed if
-                                             there is an error, response is passed
-                                             in as first argument</p>
-        type: Function
-        optional: true
-    return:
-      description: |-
-        A promise that resolves with the data when the operation
-                          completes successfully or rejects with the error after
-                          one occurs.
-      type: Promise
-  - line: 1186
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: data
-        description: ''
-        type: Object|Boolean
-      - name: callback
-        description: ''
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-  - line: 1194
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: callback
-        description: ''
-        type: Function
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-chainable: false
----
-
-
-# httpPost
diff --git a/src/content/reference/en/p5 copy/hue.mdx b/src/content/reference/en/p5 copy/hue.mdx
deleted file mode 100644
index 6baca2b9ce..0000000000
--- a/src/content/reference/en/p5 copy/hue.mdx	
+++ /dev/null
@@ -1,145 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L828
-title: hue
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the hue value of a color.</p>
-
-  <p><code>hue()</code> extracts the hue value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>Hue describes a color's position on the color wheel. By default,
-  <code>hue()</code>
-
-  returns a color's HSL hue in the range 0 to 360. If the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
-  returns the hue
-
-  value in the given mode.</p>
-line: 828
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a p5.Color object.
-      let c = color(0, 50, 100);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 20, 35, 60);
-
-      // Set 'hueValue' to 0.
-      let hueValue = hue(c);
-
-      // Draw the right rectangle.
-      fill(hueValue);
-      rect(50, 20, 35, 60);
-
-      describe(
-        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a color array.
-      let c = [0, 50, 100];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 20, 35, 60);
-
-      // Set 'hueValue' to 0.
-      let hueValue = hue(c);
-
-      // Draw the right rectangle.
-      fill(hueValue);
-      rect(50, 20, 35, 60);
-
-      describe(
-        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 20, 35, 60);
-
-      // Set 'hueValue' to 0.
-      let hueValue = hue(c);
-
-      // Draw the right rectangle.
-      fill(hueValue);
-      rect(50, 20, 35, 60);
-
-      describe(
-        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the hue value.
-  type: Number
-chainable: false
----
-
-
-# hue
diff --git a/src/content/reference/en/p5 copy/if.mdx b/src/content/reference/en/p5 copy/if.mdx
deleted file mode 100644
index 88228b3ed0..0000000000
--- a/src/content/reference/en/p5 copy/if.mdx	
+++ /dev/null
@@ -1,268 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L110
-title: if
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A way to choose whether to run a block of code.</p>
-
-  <p><code>if</code> statements are helpful for running a block of code based on
-  a
-
-  condition. For example, an <code>if</code> statement makes it easy to express
-  the
-
-  idea "Draw a circle if the mouse is pressed.":</p>
-
-  <pre><code class="language-js">if (mouseIsPressed === true) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>The statement header begins with the keyword <code>if</code>. The
-  expression in
-
-  parentheses <code>mouseIsPressed === true</code> is a <code>Boolean</code>
-  expression that's
-
-  either <code>true</code> or <code>false</code>. The code between the curly
-  braces <code>{}</code> is the if
-
-  statement's body. The body only runs if the <code>Boolean</code> expression is
-  <code>true</code>.</p>
-
-  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
-  variable is
-
-  always <code>true</code> or <code>false</code>, so the code snippet above
-  could also be written
-
-  as follows:</p>
-
-  <pre><code class="language-js">if (mouseIsPressed) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>An <code>if</code>-<code>else</code> statement adds a block of code that
-  runs if the <code>Boolean</code>
-
-  expression is <code>false</code>. For example, here's an
-  <code>if</code>-<code>else</code> statement that
-
-  expresses the idea "Draw a circle if the mouse is pressed. Otherwise,
-
-  display a message.":</p>
-
-  <pre><code class="language-js">if (mouseIsPressed === true) {
-    // When true.
-    circle(mouseX, mouseY, 20);
-  } else {
-    // When false.
-    text('Click me!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>There are two possible paths, or branches, in this code snippet. The
-
-  program must follow one branch or the other.</p>
-
-  <p>An <code>else</code>-<code>if</code> statement makes it possible to add
-  more branches.
-
-  <code>else</code>-<code>if</code> statements run different blocks of code
-  under different
-
-  conditions. For example, an <code>else</code>-<code>if</code> statement makes
-  it easy to express
-
-  the idea "If the mouse is on the left, paint the canvas white. If the mouse
-
-  is in the middle, paint the canvas gray. Otherwise, paint the canvas
-
-  black.":</p>
-
-  <pre><code class="language-js">if (mouseX < 33) {
-    background(255);
-  } else if (mouseX < 67) {
-    background(200);
-  } else {
-    background(0);
-  }
-
-  </code></pre>
-
-  <p><code>if</code> statements can add as many
-  <code>else</code>-<code>if</code> statements as needed. However,
-
-  there can only be one <code>else</code> statement and it must be last.</p>
-
-  <p><code>if</code> statements can also check for multiple conditions at once.
-  For
-
-  example, the <code>Boolean</code> operator <code>&&</code> (AND) checks
-  whether two expressions
-
-  are both <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
-    text('You pressed the "p" key!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
-  message will
-
-  display.</p>
-
-  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
-  least one of two
-
-  expressions is <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
-  true) {
-    text('You did something!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user presses a key, or presses a mouse button, or both, then a
-
-  message will display.</p>
-
-  <p>The body of an <code>if</code> statement can contain another
-  <code>if</code> statement. This is
-
-  called a "nested <code>if</code> statement." For example, nested
-  <code>if</code> statements make
-
-  it easy to express the idea "If a key is pressed, then check if the key is
-
-  <code>'r'</code>. If it is, then set the fill to red.":</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true) {
-    if (key === 'r') {
-      fill('red');
-    }
-  }
-
-  </code></pre>
-
-  <p>See <a href="/reference/p5/Boolean/">Boolean</a> and <a
-  href="/reference/p5/Number/">Number</a>
-
-  to learn more about these data types and the operations they support.</p>
-line: 110
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click the mouse to show the circle.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (mouseIsPressed === true) {
-        circle(mouseX, mouseY, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse to show different shapes.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (mouseIsPressed === true) {
-        circle(50, 50, 20);
-      } else {
-        ellipse(50, 50, 20, 50);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Move the mouse to change the background color.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A square changes color from white to black as the user moves the mouse from left to right.'
-      );
-    }
-
-    function draw() {
-      if (mouseX < 33) {
-        background(255);
-      } else if (mouseX < 67) {
-        background(200);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle drawn on a gray background. The circle changes color to red when the user presses the "r" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (keyIsPressed === true) {
-        if (key === 'r') {
-          fill('red');
-        }
-      }
-
-      circle(50, 50, 40);
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# if
diff --git a/src/content/reference/en/p5 copy/image.mdx b/src/content/reference/en/p5 copy/image.mdx
deleted file mode 100644
index 9dbd36fd22..0000000000
--- a/src/content/reference/en/p5 copy/image.mdx	
+++ /dev/null
@@ -1,327 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L888
-title: image
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Draws an image to the canvas.</p>
-
-  <p>The first parameter, <code>img</code>, is the source image to be drawn.
-  <code>img</code> can be
-
-  any of the following objects:</p>
-
-  <ul>
-
-  <li><a href="/reference/p5/p5.Image">p5.Image</a></li>
-
-  <li><a href="/reference/p5/p5.Element">p5.Element</a></li>
-
-  <li><a href="/reference/p5/p5.Texture">p5.Texture</a></li>
-
-  <li><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a></li>
-
-  <li><a
-  href="/reference/p5/p5.FramebufferTexture">p5.FramebufferTexture</a></li>
-
-  </ul>
-
-  <p>The second and third parameters, <code>dx</code> and <code>dy</code>, set
-  the coordinates of the
-
-  destination image's top left corner. See
-
-  <a href="/reference/p5/imageMode/">imageMode()</a> for other ways to position
-  images.</p>
-
-  <p>Here's a diagram that explains how optional parameters work in
-  <code>image()</code>:</p>
-
-  <p><img src="/assets/drawImage.png"/></p>
-
-  <p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are
-  optional. They set the
-
-  the width and height to draw the destination image. By default,
-  <code>image()</code>
-
-  draws the full source image at its original size.</p>
-
-  <p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are
-  also optional.
-
-  These coordinates define the top left corner of a subsection to draw from
-
-  the source image.</p>
-
-  <p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are
-  also optional.
-
-  They define the width and height of a subsection to draw from the source
-
-  image. By default, <code>image()</code> draws the full subsection that begins
-  at
-
-  <code>(sx, sy)</code> and extends to the edges of the source image.</p>
-
-  <p>The ninth parameter, <code>fit</code>, is also optional. It enables a
-  subsection of
-
-  the source image to be drawn without affecting its aspect ratio. If
-
-  <code>CONTAIN</code> is passed, the full subsection will appear within the
-  destination
-
-  rectangle. If <code>COVER</code> is passed, the subsection will completely
-  cover the
-
-  destination rectangle. This may have the effect of zooming into the
-
-  subsection.</p>
-
-  <p>The tenth and eleventh parameters, <code>xAlign</code> and
-  <code>yAlign</code>, are also
-
-  optional. They determine how to align the fitted subsection.
-  <code>xAlign</code> can
-
-  be set to either <code>LEFT</code>, <code>RIGHT</code>, or
-  <code>CENTER</code>. <code>yAlign</code> can be set to
-
-  either <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By
-  default, both <code>xAlign</code> and <code>yAlign</code>
-
-  are set to <code>CENTER</code>.</p>
-line: 888
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe('An image of the underside of a white umbrella with a gridded ceiling above.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image.
-      image(img, 10, 10);
-
-      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image 50x50.
-      image(img, 0, 0, 50, 50);
-
-      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the center of the image.
-      image(img, 25, 25, 50, 50, 25, 25, 50, 50);
-
-      describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/moonwalk.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image and scale it to fit within the canvas.
-      image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
-
-      describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      // Image is 50 x 50 pixels.
-      img = loadImage('/assets/laDefense50.png');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image and scale it to cover the canvas.
-      image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
-
-      describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 888
-    params:
-      - name: img
-        description: |
-          <p>image to display.</p>
-        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
-      - name: x
-        description: |
-          <p>x-coordinate of the top-left corner of the image.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the top-left corner of the image.</p>
-        type: Number
-      - name: width
-        description: |
-          <p>width to draw the image.</p>
-        type: Number
-        optional: true
-      - name: height
-        description: |
-          <p>height to draw the image.</p>
-        type: Number
-        optional: true
-  - line: 1074
-    params:
-      - name: img
-        description: ''
-        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
-      - name: dx
-        description: |
-          <p>the x-coordinate of the destination
-                                    rectangle in which to draw the source image</p>
-        type: Number
-      - name: dy
-        description: |
-          <p>the y-coordinate of the destination
-                                    rectangle in which to draw the source image</p>
-        type: Number
-      - name: dWidth
-        description: |
-          <p>the width of the destination rectangle</p>
-        type: Number
-      - name: dHeight
-        description: |
-          <p>the height of the destination rectangle</p>
-        type: Number
-      - name: sx
-        description: |
-          <p>the x-coordinate of the subsection of the source
-          image to draw into the destination rectangle</p>
-        type: Number
-      - name: sy
-        description: |
-          <p>the y-coordinate of the subsection of the source
-          image to draw into the destination rectangle</p>
-        type: Number
-      - name: sWidth
-        description: |
-          <p>the width of the subsection of the
-                                    source image to draw into the destination
-                                    rectangle</p>
-        type: Number
-        optional: true
-      - name: sHeight
-        description: |
-          <p>the height of the subsection of the
-                                     source image to draw into the destination rectangle</p>
-        type: Number
-        optional: true
-      - name: fit
-        description: |
-          <p>either CONTAIN or COVER</p>
-        type: Constant
-        optional: true
-      - name: xAlign
-        description: |
-          <p>either LEFT, RIGHT or CENTER default is CENTER</p>
-        type: Constant
-        optional: true
-      - name: yAlign
-        description: |
-          <p>either TOP, BOTTOM or CENTER default is CENTER</p>
-        type: Constant
-        optional: true
-chainable: false
----
-
-
-# image
diff --git a/src/content/reference/en/p5 copy/imageLight.mdx b/src/content/reference/en/p5 copy/imageLight.mdx
deleted file mode 100644
index 70b001f3e5..0000000000
--- a/src/content/reference/en/p5 copy/imageLight.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L956
-title: imageLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates an ambient light from an image.</p>
-
-  <p><code>imageLight()</code> simulates a light shining from all directions.
-  The effect is
-
-  like placing the sketch at the center of a giant sphere that uses the image
-
-  as its texture. The image's diffuse light will be affected by
-
-  <a href="/reference/p5/fill/">fill()</a> and the specular reflections will be
-
-  affected by <a href="/reference/p5/specularMaterial/">specularMaterial()</a>
-  and
-
-  <a href="/reference/p5/shininess/">shininess()</a>.</p>
-
-  <p>The parameter, <code>img</code>, is the <a
-  href="/reference/p5/p5.Image">p5.Image</a> object to
-
-  use as the light source.</p>
-line: 956
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="notest">
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
-    }
-
-    function draw() {
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the image as a panorama (360˚ background).
-      panorama(img);
-
-      // Add a soft ambient light.
-      ambientLight(50);
-
-      // Add light from the image.
-      imageLight(img);
-
-      // Style the sphere.
-      specularMaterial(20);
-      shininess(100);
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: img
-    description: |
-      <p>image to use as the light source.</p>
-    type: p5.image
-chainable: false
----
-
-
-# imageLight
diff --git a/src/content/reference/en/p5 copy/imageMode.mdx b/src/content/reference/en/p5 copy/imageMode.mdx
deleted file mode 100644
index f7d41c6d54..0000000000
--- a/src/content/reference/en/p5 copy/imageMode.mdx	
+++ /dev/null
@@ -1,129 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1395
-title: imageMode
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Changes the location from which images are drawn when
-
-  <a href="/reference/p5/image/">image()</a> is called.</p>
-
-  <p>By default, the first
-
-  two parameters of <a href="/reference/p5/image/">image()</a> are the x- and
-
-  y-coordinates of the image's upper-left corner. The next parameters are
-
-  its width and height. This is the same as calling
-  <code>imageMode(CORNER)</code>.</p>
-
-  <p><code>imageMode(CORNERS)</code> also uses the first two parameters of
-
-  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
-  image's
-
-  top-left corner. The third and fourth parameters are the coordinates of its
-
-  bottom-right corner.</p>
-
-  <p><code>imageMode(CENTER)</code> uses the first two parameters of
-
-  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
-  image's
-
-  center. The next parameters are its width and height.</p>
-line: 1395
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use CORNER mode.
-      imageMode(CORNER);
-
-      // Display the image.
-      image(img, 10, 10, 50, 50);
-
-      describe('A square image of a brick wall is drawn at the top left of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use CORNERS mode.
-      imageMode(CORNERS);
-
-      // Display the image.
-      image(img, 10, 10, 90, 40);
-
-      describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use CENTER mode.
-      imageMode(CENTER);
-
-      // Display the image.
-      image(img, 50, 50, 80, 80);
-
-      describe('A square image of a brick wall is drawn on a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either CORNER, CORNERS, or CENTER.</p>
-    type: Constant
-chainable: false
----
-
-
-# imageMode
diff --git a/src/content/reference/en/p5 copy/input.mdx b/src/content/reference/en/p5 copy/input.mdx
deleted file mode 100644
index 83f71feabc..0000000000
--- a/src/content/reference/en/p5 copy/input.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L405
-title: input
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Calls a function when the element receives input.</p>
-
-  <p><code>myElement.input()</code> is often used to with text inputs and
-  sliders. Calling
-
-  <code>myElement.input(false)</code> disables the function.</p>
-line: 405
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a slider and place it beneath the canvas.
-      slider = createSlider(0, 255, 200);
-      slider.position(0, 100);
-
-      // Call repaint() when the slider changes.
-      slider.input(repaint);
-
-      describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');
-    }
-
-    // Paint the background using slider's value.
-    function repaint() {
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let input;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an input and place it beneath the canvas.
-      input = createInput('');
-      input.position(0, 100);
-
-      // Call repaint() when input is detected.
-      input.input(repaint);
-
-      describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');
-    }
-
-    // Paint the background gray and display the input's value.
-    function repaint() {
-      background(200);
-      let msg = input.value();
-      text(msg, 5, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fxn
-    description: |
-      <p>function to call when input is detected within
-                                     the element.
-                                     <code>false</code> disables the function.</p>
-    type: Function|Boolean
-chainable: true
----
-
-
-# input
diff --git a/src/content/reference/en/p5 copy/int.mdx b/src/content/reference/en/p5 copy/int.mdx
deleted file mode 100644
index 5d5fe8826a..0000000000
--- a/src/content/reference/en/p5 copy/int.mdx	
+++ /dev/null
@@ -1,169 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L92
-title: int
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Boolean</code>, <code>String</code>, or decimal
-  <code>Number</code> to an integer.</p>
-
-  <p><code>int()</code> converts values to integers. Integers are positive or
-  negative
-
-  numbers without decimals. If the original value has decimals, as in -34.56,
-
-  they're removed to produce an integer such as -34.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a Boolean, as in
-
-  <code>int(false)</code> or <code>int(true)</code>, then the number 0
-  (<code>false</code>) or 1 (<code>true</code>) will
-
-  be returned. If <code>n</code> is a string or number, as in
-  <code>int('45')</code> or
-
-  <code>int(67.89)</code>, then an integer will be returned. If an array is
-  passed, as
-
-  in <code>int([12.34, 56.78])</code>, then an array of integers will be
-  returned.</p>
-
-  <p>Note: If a value can't be converted to a number, as in
-  <code>int('giraffe')</code>,
-
-  then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 92
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a Boolean variable.
-      let original = false;
-
-      // Convert the Boolean to an integer.
-      let converted = int(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "false : 0" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '12.34';
-
-      // Convert the string to an integer.
-      let converted = int(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and converted values.
-      text(`${original} ≈ ${converted}`, 50, 50);
-
-      describe('The text "12.34 ≈ 12" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a decimal number variable.
-      let original = 12.34;
-
-      // Convert the decimal number to an integer.
-      let converted = int(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and converted values.
-      text(`${original} ≈ ${converted}`, 50, 50);
-
-      describe('The text "12.34 ≈ 12" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let original = ['60', '30', '15'];
-
-      // Convert the strings to integers.
-      let diameters = int(original);
-
-      for (let d of diameters) {
-        // Draw a circle.
-        circle(50, 50, d);
-      }
-
-      describe('Three white, concentric circles on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 92
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Boolean|Number
-    return:
-      description: converted number.
-      type: Number
-  - line: 211
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# int
diff --git a/src/content/reference/en/p5 copy/isLooping.mdx b/src/content/reference/en/p5 copy/isLooping.mdx
deleted file mode 100644
index 622fd77d9b..0000000000
--- a/src/content/reference/en/p5 copy/isLooping.mdx	
+++ /dev/null
@@ -1,65 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L224
-title: isLooping
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Returns <code>true</code> if the draw loop is running and
-  <code>false</code> if not.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
-
-  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
-
-  restarted by calling <a href="/reference/p5/loop/">loop()</a>.</p>
-
-  <p>The <code>isLooping()</code> function can be used to check whether a sketch
-  is
-
-  looping, as in <code>isLooping() === true</code>.</p>
-line: 224
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle at the mouse's position.
-      circle(mouseX, mouseY, 20);
-    }
-
-    // Toggle the draw loop when the user double-clicks.
-    function doubleClicked() {
-      if (isLooping() === true) {
-        noLoop();
-      } else {
-        loop();
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: ''
-  type: Boolean
-chainable: false
----
-
-
-# isLooping
diff --git a/src/content/reference/en/p5 copy/join.mdx b/src/content/reference/en/p5 copy/join.mdx
deleted file mode 100644
index 23222a6db4..0000000000
--- a/src/content/reference/en/p5 copy/join.mdx	
+++ /dev/null
@@ -1,70 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L15
-title: join
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Combines an array of strings into one string.</p>
-
-  <p>The first parameter, <code>list</code>, is the array of strings to
-  join.</p>
-
-  <p>The second parameter, <code>separator</code>, is the character(s) that
-  should be used
-
-  to separate the combined strings. For example, calling
-
-  <code>join(myWords, ' : ')</code> would return a string of words each
-  separated by a
-
-  colon and spaces.</p>
-line: 15
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let myWords = ['one', 'two', 'three'];
-
-      // Create a combined string
-      let combined = join(myWords, ' : ');
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-
-      // Display the combined string.
-      text(combined, 50, 50);
-
-      describe('The text "one : two : three" written in black on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>array of strings to combine.</p>
-    type: Array
-  - name: separator
-    description: |
-      <p>character(s) to place between strings when they're combined.</p>
-    type: String
-return:
-  description: combined string.
-  type: String
-chainable: false
----
-
-
-# join
diff --git a/src/content/reference/en/p5 copy/key.mdx b/src/content/reference/en/p5 copy/key.mdx
deleted file mode 100644
index 63fc144fa3..0000000000
--- a/src/content/reference/en/p5 copy/key.mdx	
+++ /dev/null
@@ -1,106 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L102
-title: key
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A <code>String</code> system variable that contains the value of the last
-  key typed.</p>
-
-  <p>The key variable is helpful for checking whether an
-
-  <a href="https://en.wikipedia.org/wiki/ASCII#Printable_characters"
-  target="_blank">ASCII</a>
-
-  key has been typed. For example, the expression <code>key === "a"</code>
-  evaluates to
-
-  <code>true</code> if the <code>a</code> key was typed and <code>false</code>
-  if not. <code>key</code> doesn’t update
-
-  for special keys such as <code>LEFT_ARROW</code> and <code>ENTER</code>. Use
-  keyCode instead for
-
-  special keys. The <a href="/reference/p5/keyIsDown/">keyIsDown()</a> function
-  should
-
-  be used to check for multiple different key presses at the same time.</p>
-line: 102
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The last key pressed is displayed at the center.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the last key pressed.
-      text(key, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses the keys "w", "a", "s", or "d". It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if a key is pressed.
-      if (keyIsPressed === true) {
-        if (key === 'w') {
-          y -= 1;
-        } else if (key === 's') {
-          y += 1;
-        } else if (key === 'a') {
-          x -= 1;
-        } else if (key === 'd') {
-          x += 1;
-        }
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle at (x, y).
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# key
diff --git a/src/content/reference/en/p5 copy/keyCode.mdx b/src/content/reference/en/p5 copy/keyCode.mdx
deleted file mode 100644
index 808526b788..0000000000
--- a/src/content/reference/en/p5 copy/keyCode.mdx	
+++ /dev/null
@@ -1,128 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L184
-title: keyCode
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A <code>Number</code> system variable that contains the code of the last
-  key typed.</p>
-
-  <p>All keys have a <code>keyCode</code>. For example, the <code>a</code> key
-  has the <code>keyCode</code> 65.
-
-  The <code>keyCode</code> variable is helpful for checking whether a special
-  key has
-
-  been typed. For example, the following conditional checks whether the enter
-
-  key has been typed:</p>
-
-  <pre><code class="language-js">if (keyCode === 13) {
-    // Code to run if the enter key was pressed.
-  }
-
-  </code></pre>
-
-  <p>The same code can be written more clearly using the system variable
-  <code>ENTER</code>
-
-  which has a value of 13:</p>
-
-  <pre><code class="language-js">if (keyCode === ENTER) {
-    // Code to run if the enter key was pressed.
-  }
-
-  </code></pre>
-
-  <p>The system variables <code>BACKSPACE</code>, <code>DELETE</code>,
-  <code>ENTER</code>, <code>RETURN</code>, <code>TAB</code>,
-
-  <code>ESCAPE</code>, <code>SHIFT</code>, <code>CONTROL</code>,
-  <code>OPTION</code>, <code>ALT</code>, <code>UP_ARROW</code>,
-  <code>DOWN_ARROW</code>,
-
-  <code>LEFT_ARROW</code>, and <code>RIGHT_ARROW</code> are all helpful
-  shorthands the key codes of
-
-  special keys. Key codes can be found on websites such as
-
-  <a href="http://keycode.info/">keycode.info</a>.</p>
-line: 184
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The last key pressed and its code are displayed at the center.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the last key pressed and its code.
-      text(`${key} : ${keyCode}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if an arrow key is pressed.
-      if (keyIsPressed === true) {
-        if (keyCode === UP_ARROW) {
-          y -= 1;
-        } else if (keyCode === DOWN_ARROW) {
-          y += 1;
-        } else if (keyCode === LEFT_ARROW) {
-          x -= 1;
-        } else if (keyCode === RIGHT_ARROW) {
-          x += 1;
-        }
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle at (x, y).
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-type: Integer
----
-
-
-# keyCode
diff --git a/src/content/reference/en/p5 copy/keyIsDown.mdx b/src/content/reference/en/p5 copy/keyIsDown.mdx
deleted file mode 100644
index 8afe4b0bdf..0000000000
--- a/src/content/reference/en/p5 copy/keyIsDown.mdx	
+++ /dev/null
@@ -1,142 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L811
-title: keyIsDown
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>Returns <code>true</code> if the key it’s checking is pressed and
-  <code>false</code> if not.</p>
-
-  <p><code>keyIsDown()</code> is helpful when checking for multiple different
-  key presses.
-
-  For example, <code>keyIsDown()</code> can be used to check if both
-  <code>LEFT_ARROW</code> and
-
-  <code>UP_ARROW</code> are pressed:</p>
-
-  <pre><code class="language-js">if (keyIsDown(LEFT_ARROW) &&
-  keyIsDown(UP_ARROW)) {
-    // Move diagonally.
-  }
-
-  </code></pre>
-
-  <p><code>keyIsDown()</code> can check for key presses using
-
-  <a href="/reference/p5/keyCode/">keyCode</a> values, as in
-  <code>keyIsDown(37)</code> or
-
-  <code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as
-
-  <a href="https://keycode.info" target="_blank">keycode.info</a>.</p>
-line: 811
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if an arrow key is pressed.
-      if (keyIsDown(LEFT_ARROW) === true) {
-        x -= 1;
-      }
-
-      if (keyIsDown(RIGHT_ARROW) === true) {
-        x += 1;
-      }
-
-      if (keyIsDown(UP_ARROW) === true) {
-        y -= 1;
-      }
-
-      if (keyIsDown(DOWN_ARROW) === true) {
-        y += 1;
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle.
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if an arrow key is pressed.
-      if (keyIsDown(37) === true) {
-        x -= 1;
-      }
-
-      if (keyIsDown(39) === true) {
-        x += 1;
-      }
-
-      if (keyIsDown(38) === true) {
-        y -= 1;
-      }
-
-      if (keyIsDown(40) === true) {
-        y += 1;
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle.
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: code
-    description: |
-      <p>key to check.</p>
-    type: Number
-return:
-  description: whether the key is down or not.
-  type: Boolean
-chainable: false
----
-
-
-# keyIsDown
diff --git a/src/content/reference/en/p5 copy/keyIsPressed.mdx b/src/content/reference/en/p5 copy/keyIsPressed.mdx
deleted file mode 100644
index 0b129c49e8..0000000000
--- a/src/content/reference/en/p5 copy/keyIsPressed.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L10
-title: keyIsPressed
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A <code>Boolean</code> system variable that's <code>true</code> if any key
-  is currently pressed
-
-  and <code>false</code> if not.</p>
-line: 10
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      if (keyIsPressed === true) {
-        fill(0);
-      } else {
-        fill(255);
-      }
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      if (keyIsPressed) {
-        fill(0);
-      } else {
-        fill(255);
-      }
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the word "false" at its center. The word switches to "true" when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the value of keyIsPressed.
-      text(keyIsPressed, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# keyIsPressed
diff --git a/src/content/reference/en/p5 copy/keyPressed.mdx b/src/content/reference/en/p5 copy/keyPressed.mdx
deleted file mode 100644
index 4a4007f09a..0000000000
--- a/src/content/reference/en/p5 copy/keyPressed.mdx	
+++ /dev/null
@@ -1,192 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L284
-title: keyPressed
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A function that's called once when any key is pressed.</p>
-
-  <p>Declaring the function <code>keyPressed()</code> sets a code block to run
-  once
-
-  automatically when the user presses any key:</p>
-
-  <pre><code class="language-js">function keyPressed() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/key/">key</a> and <a
-  href="/reference/p5/keyCode/">keyCode</a>
-
-  variables will be updated with the most recently typed value when
-
-  <code>keyPressed()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function keyPressed() {
-    if (key === 'c') {
-      // Code to run.
-    }
-
-    if (keyCode === ENTER) {
-      // Code to run.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>keyPressed()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
-  target="_blank">KeyboardEvent</a>
-
-  object with properties that describe the key press event:</p>
-
-  <pre><code class="language-js">function keyPressed(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Browsers may have default behaviors attached to various key events. For
-
-  example, some browsers may jump to the bottom of a web page when the
-
-  <code>SPACE</code> key is pressed. To prevent any default behavior for this
-  event, add
-
-  <code>return false;</code> to the end of the function.</p>
-line: 284
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the background color when the user presses a key.
-    function keyPressed() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square turns black when the user presses the "b" key. It turns white when the user presses the "a" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Reassign value when the user presses the 'a' or 'b' key.
-    function keyPressed() {
-      if (key === 'a') {
-        value = 255;
-      } else if (key === 'b') {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the background color when the user presses an arrow key.
-    function keyPressed() {
-      if (keyCode === LEFT_ARROW) {
-        value = 255;
-      } else if (keyCode === RIGHT_ARROW) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>KeyboardEvent</code> callback argument.</p>
-    type: KeyboardEvent
-    optional: true
-chainable: false
----
-
-
-# keyPressed
diff --git a/src/content/reference/en/p5 copy/keyReleased.mdx b/src/content/reference/en/p5 copy/keyReleased.mdx
deleted file mode 100644
index e19da953f1..0000000000
--- a/src/content/reference/en/p5 copy/keyReleased.mdx	
+++ /dev/null
@@ -1,188 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L474
-title: keyReleased
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A function that's called once when any key is released.</p>
-
-  <p>Declaring the function <code>keyReleased()</code> sets a code block to run
-  once
-
-  automatically when the user releases any key:</p>
-
-  <pre><code class="language-js">function keyReleased() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/key/">key</a> and <a
-  href="/reference/p5/keyCode/">keyCode</a>
-
-  variables will be updated with the most recently released value when
-
-  <code>keyReleased()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function keyReleased() {
-    if (key === 'c') {
-      // Code to run.
-    }
-
-    if (keyCode === ENTER) {
-      // Code to run.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>keyReleased()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
-  target="_blank">KeyboardEvent</a>
-
-  object with properties that describe the key press event:</p>
-
-  <pre><code class="language-js">function keyReleased(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Browsers may have default behaviors attached to various key events. To
-
-  prevent any default behavior for this event, add <code>return false;</code> to
-  the end
-
-  of the function.</p>
-line: 474
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user releases a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle value when the user releases a key.
-    function keyReleased() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes white when the user releases the "w" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Set value to 255 the user releases the 'w' key.
-    function keyReleased() {
-      if (key === 'w') {
-        value = 255;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the background color when the user releases an arrow key.
-    function keyReleased() {
-      if (keyCode === LEFT_ARROW) {
-        value = 255;
-      } else if (keyCode === RIGHT_ARROW) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>KeyboardEvent</code> callback argument.</p>
-    type: KeyboardEvent
-    optional: true
-chainable: false
----
-
-
-# keyReleased
diff --git a/src/content/reference/en/p5 copy/keyTyped.mdx b/src/content/reference/en/p5 copy/keyTyped.mdx
deleted file mode 100644
index a591db9e60..0000000000
--- a/src/content/reference/en/p5 copy/keyTyped.mdx	
+++ /dev/null
@@ -1,170 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L655
-title: keyTyped
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A function that's called once when keys with printable characters are
-  pressed.</p>
-
-  <p>Declaring the function <code>keyTyped()</code> sets a code block to run
-  once
-
-  automatically when the user presses any key with a printable character such
-
-  as <code>a</code> or 1. Modifier keys such as <code>SHIFT</code>,
-  <code>CONTROL</code>, and the arrow keys
-
-  will be ignored:</p>
-
-  <pre><code class="language-js">function keyTyped() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/key/">key</a> and <a
-  href="/reference/p5/keyCode/">keyCode</a>
-
-  variables will be updated with the most recently released value when
-
-  <code>keyTyped()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function keyTyped() {
-    // Check for the "c" character using key.
-    if (key === 'c') {
-      // Code to run.
-    }
-
-    // Check for "c" using keyCode.
-    if (keyCode === 67) {
-      // Code to run.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>keyTyped()</code> is
-  always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
-  target="_blank">KeyboardEvent</a>
-
-  object with properties that describe the key press event:</p>
-
-  <pre><code class="language-js">function keyReleased(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Note: Use the <a href="/reference/p5/keyPressed/">keyPressed()</a> function
-  and
-
-  <a href="/reference/p5/keyCode/">keyCode</a> system variable to respond to
-  modifier
-
-  keys such as <code>ALT</code>.</p>
-
-  <p>Browsers may have default behaviors attached to various key events. To
-
-  prevent any default behavior for this event, add <code>return false;</code> to
-  the end
-
-  of the function.</p>
-line: 655
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-    // Note: Pressing special keys such as SPACE have no effect.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square changes color when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the square's color when the user types a printable key.
-    function keyTyped() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square turns black when the user types the "b" key. It turns white when the user types the "a" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Reassign value when the user types the 'a' or 'b' key.
-    function keyTyped() {
-      if (key === 'a') {
-        value = 255;
-      } else if (key === 'b') {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>KeyboardEvent</code> callback argument.</p>
-    type: KeyboardEvent
-    optional: true
-chainable: false
----
-
-
-# keyTyped
diff --git a/src/content/reference/en/p5 copy/lerp.mdx b/src/content/reference/en/p5 copy/lerp.mdx
deleted file mode 100644
index 84c4b5bc7a..0000000000
--- a/src/content/reference/en/p5 copy/lerp.mdx	
+++ /dev/null
@@ -1,122 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L332
-title: lerp
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates a number between two numbers at a specific increment.</p>
-
-  <p>The <code>amt</code> parameter is the amount to interpolate between the two
-  numbers.
-
-  0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is
-
-  half-way in between, and 1.0 is equal to the second number. The
-  <code>lerp()</code>
-
-  function is convenient for creating motion along a straight path and for
-
-  drawing dotted lines.</p>
-
-  <p>If the value of <code>amt</code> is less than 0 or more than 1,
-  <code>lerp()</code> will return a
-
-  number outside of the original interval. For example, calling
-
-  <code>lerp(0, 10, 1.5)</code> will return 15.</p>
-line: 332
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Declare variables for coordinates.
-      let a = 20;
-      let b = 80;
-      let c = lerp(a, b, 0.2);
-      let d = lerp(a, b, 0.5);
-      let e = lerp(a, b, 0.8);
-
-      strokeWeight(5);
-
-      // Draw the original points in black.
-      stroke(0);
-      point(a, 50);
-      point(b, 50);
-
-      // Draw the lerped points in gray.
-      stroke(100);
-      point(c, 50);
-      point(d, 50);
-      point(e, 50);
-
-      describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let x = 50;
-    let y = 50;
-    let targetX = 50;
-    let targetY = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');
-    }
-
-    function draw() {
-      background(220);
-
-      // Move x and y toward the target.
-      x = lerp(x, targetX, 0.05);
-      y = lerp(y, targetY, 0.05);
-
-      // Draw the circle.
-      circle(x, y, 20);
-    }
-
-    // Set x and y when the user clicks the mouse.
-    function mouseClicked() {
-      x = mouseX;
-      y = mouseY;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: start
-    description: |
-      <p>first value.</p>
-    type: Number
-  - name: stop
-    description: |
-      <p>second value.</p>
-    type: Number
-  - name: amt
-    description: |
-      <p>number.</p>
-    type: Number
-return:
-  description: lerped value.
-  type: Number
-chainable: false
----
-
-
-# lerp
diff --git a/src/content/reference/en/p5 copy/lerpColor.mdx b/src/content/reference/en/p5 copy/lerpColor.mdx
deleted file mode 100644
index d815ba9ddb..0000000000
--- a/src/content/reference/en/p5 copy/lerpColor.mdx	
+++ /dev/null
@@ -1,96 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L949
-title: lerpColor
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Blends two colors to find a third color between them.</p>
-
-  <p>The <code>amt</code> parameter specifies the amount to interpolate between
-  the two
-
-  values. 0 is equal to the first color, 0.1 is very near the first color,
-
-  0.5 is halfway between the two colors, and so on. Negative numbers are set
-
-  to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
-
-  <a href="/reference/p5/lerp/">lerp</a>. It's necessary because numbers outside
-  of the
-
-  interval [0, 1] will produce strange and unexpected colors.</p>
-
-  <p>The way that colors are interpolated depends on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 949
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create p5.Color objects to interpolate between.
-      let from = color(218, 165, 32);
-      let to = color(72, 61, 139);
-
-      // Create intermediate colors.
-      let interA = lerpColor(from, to, 0.33);
-      let interB = lerpColor(from, to, 0.66);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(from);
-      rect(10, 20, 20, 60);
-
-      // Draw the left-center rectangle.
-      fill(interA);
-      rect(30, 20, 20, 60);
-
-      // Draw the right-center rectangle.
-      fill(interB);
-      rect(50, 20, 20, 60);
-
-      // Draw the right rectangle.
-      fill(to);
-      rect(70, 20, 20, 60);
-
-      describe(
-        'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: c1
-    description: >
-      <p>interpolate from this color (any value created by the color()
-      function).</p>
-    type: p5.Color
-  - name: c2
-    description: >
-      <p>interpolate to this color (any value created by the color()
-      function).</p>
-    type: p5.Color
-  - name: amt
-    description: |
-      <p>number between 0 and 1.</p>
-    type: Number
-return:
-  description: interpolated color.
-  type: p5.Color
-chainable: false
----
-
-
-# lerpColor
diff --git a/src/content/reference/en/p5 copy/let.mdx b/src/content/reference/en/p5 copy/let.mdx
deleted file mode 100644
index f04902a9b0..0000000000
--- a/src/content/reference/en/p5 copy/let.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L7
-title: let
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>Declares a new variable.</p>
-
-  <p>A variable is a container for a value. For example, a variable might
-
-  contain a creature's x-coordinate as a <code>Number</code> or its name as a
-
-  <code>String</code>. Variables can change value by reassigning them as
-  follows:</p>
-
-  <pre><code class="language-js">// Declare the variable x and assign it the
-  value 10.
-
-  let x = 10;
-
-
-  // Reassign x to 50.
-
-  x = 50;
-
-  </code></pre>
-
-  <p>Variables have block scope. When a variable is declared between curly
-
-  braces <code>{}</code>, it only exists within the block defined by those
-  braces. For
-
-  example, the following code would throw a <code>ReferenceError</code> because
-  <code>x</code> is
-
-  declared within the <code>setup()</code> function's block:</p>
-
-  <pre><code class="language-js">function setup() {
-    createCanvas(100, 100);
-
-    let x = 50;
-  }
-
-
-  function draw() {
-    background(200);
-
-    // x was declared in setup(), so it can't be referenced here.
-    circle(x, 50, 20);
-  }
-
-  </code></pre>
-
-  <p>Variables declared outside of all curly braces <code>{}</code> are in the
-  global
-
-  scope. A variable that's in the global scope can be used and changed
-
-  anywhere in a sketch:</p>
-
-  <pre><code class="language-js">let x = 50;
-
-
-  function setup() {
-    createCanvas(100, 100);
-  }
-
-
-  function draw() {
-    background(200);
-
-    // Change the value of x.
-    x += 10;
-
-    circle(x, 50, 20);
-  }
-
-  </code></pre>
-line: 7
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(220);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(16);\n\n  // Create the message variable.\n  let message = 'Hello, \U0001F30D!';\n\n  // Display the message.\n  text(message, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n  background(220);\n\n  // Change the value of x.\n  x += 1;\n\n  circle(x, 50, 20);\n}\n</code>\n</div>"
-class: p5
----
-
-
-# let
diff --git a/src/content/reference/en/p5 copy/lightFalloff.mdx b/src/content/reference/en/p5 copy/lightFalloff.mdx
deleted file mode 100644
index e8b8245064..0000000000
--- a/src/content/reference/en/p5 copy/lightFalloff.mdx	
+++ /dev/null
@@ -1,100 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1161
-title: lightFalloff
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Sets the falloff rate for <a
-  href="/reference/p5/pointLight/">pointLight()</a>
-
-  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
-
-  <p>A light’s falloff describes the intensity of its beam at a distance. For
-
-  example, a lantern has a slow falloff, a flashlight has a medium falloff,
-
-  and a laser pointer has a sharp falloff.</p>
-
-  <p><code>lightFalloff()</code> has three parameters, <code>constant</code>,
-  <code>linear</code>, and
-
-  <code>quadratic</code>. They’re numbers used to calculate falloff at a
-  distance, <code>d</code>,
-
-  as follows:</p>
-
-  <p><code>falloff = 1 / (constant + d * linear + (d * d) *
-  quadratic)</code></p>
-
-  <p>Note: <code>constant</code>, <code>linear</code>, and
-  <code>quadratic</code> should always be set to values
-
-  greater than 0.</p>
-line: 1161
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to change the falloff rate.
-
-    let useFalloff = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Set the light falloff.
-      if (useFalloff === true) {
-        lightFalloff(2, 0, 0);
-      }
-
-      // Add a white point light from the front.
-      pointLight(255, 255, 255, 0, 0, 100);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Change the falloff value when the user double-clicks.
-    function doubleClicked() {
-      useFalloff = true;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: constant
-    description: |
-      <p>constant value for calculating falloff.</p>
-    type: Number
-  - name: linear
-    description: |
-      <p>linear value for calculating falloff.</p>
-    type: Number
-  - name: quadratic
-    description: |
-      <p>quadratic value for calculating falloff.</p>
-    type: Number
-chainable: true
----
-
-
-# lightFalloff
diff --git a/src/content/reference/en/p5 copy/lightness.mdx b/src/content/reference/en/p5 copy/lightness.mdx
deleted file mode 100644
index 284523dcc8..0000000000
--- a/src/content/reference/en/p5 copy/lightness.mdx	
+++ /dev/null
@@ -1,168 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1134
-title: lightness
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the lightness value of a color.</p>
-
-  <p><code>lightness()</code> extracts the HSL lightness value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>lightness()</code> returns a color's HSL lightness in the
-  range 0
-
-  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  HSL, it
-
-  returns the lightness value in the given range.</p>
-line: 1134
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a p5.Color object using HSL values.
-      let c = color(0, 100, 75);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 75.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a color array.
-      let c = [0, 100, 75];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 75.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 75.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color with values in the range 0-255.
-      colorMode(HSL, 255);
-
-      // Create a p5.Color object using HSL values.
-      let c = color(0, 255, 191.5);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 191.5.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the lightness value.
-  type: Number
-chainable: false
----
-
-
-# lightness
diff --git a/src/content/reference/en/p5 copy/lights.mdx b/src/content/reference/en/p5 copy/lights.mdx
deleted file mode 100644
index a7cf3ba7ae..0000000000
--- a/src/content/reference/en/p5 copy/lights.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1077
-title: lights
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: |
-  <p>Places an ambient and directional light in the scene.
-  The lights are set to ambientLight(128, 128, 128) and
-  directionalLight(128, 128, 128, 0, 0, -1).</p>
-  <p>Note: lights need to be called (whether directly or indirectly)
-  within draw() to remain persistent in a looping program.
-  Placing them in setup() will cause them to only have an effect
-  the first time through the loop.</p>
-line: 1077
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to turn on the lights.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the lights.
-      if (isLit === true) {
-        lights();
-      }
-
-      // Draw the box.
-      box();
-    }
-
-    // Turn on the lights when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box drawn against a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      ambientLight(128, 128, 128);
-      directionalLight(128, 128, 128, 0, 0, -1);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# lights
diff --git a/src/content/reference/en/p5 copy/line.mdx b/src/content/reference/en/p5 copy/line.mdx
deleted file mode 100644
index b225222235..0000000000
--- a/src/content/reference/en/p5 copy/line.mdx	
+++ /dev/null
@@ -1,194 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L564
-title: line
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a straight line between two points.</p>
-
-  <p>A line's default width is one pixel. The version of <code>line()</code>
-  with four
-
-  parameters draws the line in 2D. To color a line, use the
-
-  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
-  use the
-
-  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A line
-
-  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
-  won't
-
-  affect the line's color.</p>
-
-  <p>The version of <code>line()</code> with six parameters allows the line to
-  be drawn in
-
-  3D space. Doing so requires adding the <code>WEBGL</code> argument to
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
-line: 564
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      line(30, 20, 85, 75);
-
-      describe(
-        'A black line on a gray canvas running from top-center to bottom-right.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      stroke('magenta');
-      strokeWeight(5);
-
-      line(30, 20, 85, 75);
-
-      describe(
-        'A thick, magenta line on a gray canvas running from top-center to bottom-right.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      line(30, 20, 85, 20);
-
-      // Right.
-      stroke(126);
-      line(85, 20, 85, 75);
-
-      // Bottom.
-      stroke(255);
-      line(85, 75, 30, 75);
-
-      describe(
-        'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      line(-20, -30, 35, 25);
-
-      describe(
-        'A black line on a gray canvas running from top-center to bottom-right.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black line connecting two spheres. The scene spins slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw a line.
-      line(0, 0, 0, 30, 20, -10);
-
-      // Draw the center sphere.
-      sphere(10);
-
-      // Translate to the second point.
-      translate(30, 20, -10);
-
-      // Draw the bottom-right sphere.
-      sphere(10);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 564
-    params:
-      - name: x1
-        description: |
-          <p>the x-coordinate of the first point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>the y-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>the x-coordinate of the second point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>the y-coordinate of the second point.</p>
-        type: Number
-    chainable: 1
-  - line: 696
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>the z-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>the z-coordinate of the second point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# line
diff --git a/src/content/reference/en/p5 copy/linePerspective.mdx b/src/content/reference/en/p5 copy/linePerspective.mdx
deleted file mode 100644
index 80bf539c73..0000000000
--- a/src/content/reference/en/p5 copy/linePerspective.mdx	
+++ /dev/null
@@ -1,164 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L280
-title: linePerspective
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Enables or disables perspective for lines in 3D sketches.</p>
-
-  <p>In WebGL mode, lines can be drawn with a thinner stroke when they’re
-
-  further from the camera. Doing so gives them a more realistic appearance.</p>
-
-  <p>By default, lines are drawn differently based on the type of perspective
-
-  being used:</p>
-
-  <ul>
-
-  <li><code>perspective()</code> and <code>frustum()</code> simulate a realistic
-  perspective. In
-
-  these modes, stroke weight is affected by the line’s distance from the
-
-  camera. Doing so results in a more natural appearance.
-  <code>perspective()</code> is
-
-  the default mode for 3D sketches.</li>
-
-  <li><code>ortho()</code> doesn’t simulate a realistic perspective. In this
-  mode, stroke
-
-  weights are consistent regardless of the line’s distance from the camera.
-
-  Doing so results in a more predictable and consistent appearance.</li>
-
-  </ul>
-
-  <p><code>linePerspective()</code> can override the default line drawing
-  mode.</p>
-
-  <p>The parameter, <code>enable</code>, is optional. It’s a
-  <code>Boolean</code> value that sets the
-
-  way lines are drawn. If <code>true</code> is passed, as in
-  <code>linePerspective(true)</code>,
-
-  then lines will appear thinner when they are further from the camera. If
-
-  <code>false</code> is passed, as in <code>linePerspective(false)</code>, then
-  lines will have
-
-  consistent stroke weights regardless of their distance from the camera. By
-
-  default, <code>linePerspective()</code> is enabled.</p>
-
-  <p>Calling <code>linePerspective()</code> without passing an argument returns
-  <code>true</code> if
-
-  it's enabled and <code>false</code> if not.</p>
-
-  <p>Note: <code>linePerspective()</code> can only be used in WebGL mode.</p>
-line: 280
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click the canvas to toggle the line perspective.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-
-    // Toggle the line perspective when the user double-clicks.
-    function doubleClicked() {
-      let isEnabled = linePerspective();
-      linePerspective(!isEnabled);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click the canvas to toggle the line perspective.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Use an orthographic projection.
-      ortho();
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-
-    // Toggle the line perspective when the user double-clicks.
-    function doubleClicked() {
-      let isEnabled = linePerspective();
-      linePerspective(!isEnabled);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 280
-    params:
-      - name: enable
-        description: |
-          <p>whether to enable line perspective.</p>
-        type: Boolean
-  - line: 392
-    params: []
-    return:
-      description: whether line perspective is enabled.
-      type: Boolean
-chainable: false
----
-
-
-# linePerspective
diff --git a/src/content/reference/en/p5 copy/loadBytes.mdx b/src/content/reference/en/p5 copy/loadBytes.mdx
deleted file mode 100644
index 8b02c0683e..0000000000
--- a/src/content/reference/en/p5 copy/loadBytes.mdx	
+++ /dev/null
@@ -1,56 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L986
-title: loadBytes
-module: IO
-submodule: Input
-file: src/io/files.js
-description: |
-  <p>This method is suitable for fetching files up to size of 64MB.</p>
-line: 986
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    let data;
-
-    function preload() {
-      data = loadBytes('/assets/mammals.xml');
-    }
-
-    function setup() {
-      for (let i = 0; i < 5; i++) {
-        console.log(data.bytes[i].toString(16));
-      }
-      describe('no image displayed');
-    }
-    </code></div>
-class: p5
-params:
-  - name: file
-    description: |
-      <p>name of the file or URL to load</p>
-    type: String
-  - name: callback
-    description: |
-      <p>function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
-                                         completes</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to be executed if there
-                                         is an error</p>
-    type: Function
-    optional: true
-return:
-  description: an object whose 'bytes' property will be the loaded buffer
-  type: Object
-chainable: false
----
-
-
-# loadBytes
diff --git a/src/content/reference/en/p5 copy/loadFont.mdx b/src/content/reference/en/p5 copy/loadFont.mdx
deleted file mode 100644
index 86af4b7123..0000000000
--- a/src/content/reference/en/p5 copy/loadFont.mdx	
+++ /dev/null
@@ -1,171 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L16
-title: loadFont
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/loading_displaying.js
-description: >
-  <p>Loads a font and creates a <a href="/reference/p5/p5.Font">p5.Font</a>
-  object.
-
-  <code>loadFont()</code> can load fonts in either .otf or .ttf format. Loaded
-  fonts can
-
-  be used to style text on the canvas and in HTML elements.</p>
-
-  <p>The first parameter, <code>path</code>, is the path to a font file.
-
-  Paths to local files should be relative. For example,
-
-  <code>'/assets/inconsolata.otf'</code>. The Inconsolata font used in the
-  following
-
-  examples can be downloaded for free
-
-  <a href="https://www.fontsquirrel.com/fonts/inconsolata/"
-  target="_blank">here</a>.
-
-  Paths to remote files should be URLs. For example,
-
-  <code>'https://example.com/inconsolata.otf'</code>. URLs may be blocked due to
-  browser
-
-  security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, it will be called once the font has loaded. The callback function
-
-  may use the new <a href="/reference/p5/p5.Font">p5.Font</a> object if
-  needed.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, it will be called if the font fails to load. The callback function
-
-  may use the error
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/"
-  target="_blank">Event</a>
-
-  object if needed.</p>
-
-  <p>Fonts can take time to load. Calling <code>loadFont()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures fonts load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or
-
-  <a href="/reference/p5/draw/">draw()</a>.</p>
-line: 16
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      fill('deeppink');
-      textFont(font);
-      textSize(36);
-      text('p5*js', 10, 50);
-
-      describe('The text "p5*js" written in pink on a white background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      loadFont('/assets/inconsolata.otf', font => {
-        fill('deeppink');
-        textFont(font);
-        textSize(36);
-        text('p5*js', 10, 50);
-
-        describe('The text "p5*js" written in pink on a white background.');
-      });
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      loadFont('/assets/inconsolata.otf', success, failure);
-    }
-
-    function success(font) {
-      fill('deeppink');
-      textFont(font);
-      textSize(36);
-      text('p5*js', 10, 50);
-
-      describe('The text "p5*js" written in pink on a white background.');
-    }
-
-    function failure(event) {
-      console.error('Oops!', event);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function preload() {
-      loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      let p = createP('p5*js');
-      p.style('color', 'deeppink');
-      p.style('font-family', 'Inconsolata');
-      p.style('font-size', '36px');
-      p.position(10, 50);
-
-      describe('The text "p5*js" written in pink on a white background.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the font to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function called with the
-                                                <a href="#/p5.Font">p5.Font</a> object after it
-                                                loads.</p>
-    type: Function
-    optional: true
-  - name: failureCallback
-    description: |
-      <p>function called with the error
-                                                <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
-                                                object if the font fails to load.</p>
-    type: Function
-    optional: true
-return:
-  description: <a href="#/p5.Font">p5.Font</a> object.
-  type: p5.Font
-chainable: false
----
-
-
-# loadFont
diff --git a/src/content/reference/en/p5 copy/loadImage.mdx b/src/content/reference/en/p5 copy/loadImage.mdx
deleted file mode 100644
index 7e5b8bf0b7..0000000000
--- a/src/content/reference/en/p5 copy/loadImage.mdx	
+++ /dev/null
@@ -1,137 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L18
-title: loadImage
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Loads an image to create a <a href="/reference/p5/p5.Image">p5.Image</a>
-  object.</p>
-
-  <p><code>loadImage()</code> interprets the first parameter one of three ways.
-  If the path
-
-  to an image file is provided, <code>loadImage()</code> will load it. Paths to
-  local
-
-  files should be relative, such as <code>'/assets/thundercat.jpg'</code>. URLs
-  such as
-
-  <code>'https://example.com/thundercat.jpg'</code> may be blocked due to
-  browser
-
-  security. Raw image data can also be passed as a base64 encoded image in
-
-  the form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>.</p>
-
-  <p>The second parameter is optional. If a function is passed, it will be
-
-  called once the image has loaded. The callback function can optionally use
-
-  the new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-  <p>The third parameter is also optional. If a function is passed, it will be
-
-  called if the image fails to load. The callback function can optionally use
-
-  the event error.</p>
-
-  <p>Images can take time to load. Calling <code>loadImage()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures images load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 18
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe('Image of the underside of a white umbrella and a gridded ceiling.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Call handleImage() once the image loads.
-      loadImage('/assets/laDefense.jpg', handleImage);
-
-      describe('Image of the underside of a white umbrella and a gridded ceiling.');
-    }
-
-    // Display the image.
-    function handleImage(img) {
-      image(img, 0, 0);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Call handleImage() once the image loads or
-      // call handleError() if an error occurs.
-      loadImage('/assets/laDefense.jpg', handleImage, handleError);
-    }
-
-    // Display the image.
-    function handleImage(img) {
-      image(img, 0, 0);
-
-      describe('Image of the underside of a white umbrella and a gridded ceiling.');
-    }
-
-    // Log the error.
-    function handleError(event) {
-      console.error('Oops!', event);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the image to be loaded or base64 encoded image.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function called with
-                                    <a href="#/p5.Image">p5.Image</a> once it
-                                    loads.</p>
-    type: function(p5.Image)
-    optional: true
-  - name: failureCallback
-    description: |
-      <p>function called with event
-                                    error if the image fails to load.</p>
-    type: Function(Event)
-    optional: true
-return:
-  description: the <a href="#/p5.Image">p5.Image</a> object.
-  type: p5.Image
-chainable: false
----
-
-
-# loadImage
diff --git a/src/content/reference/en/p5 copy/loadJSON.mdx b/src/content/reference/en/p5 copy/loadJSON.mdx
deleted file mode 100644
index 95fd0552b5..0000000000
--- a/src/content/reference/en/p5 copy/loadJSON.mdx	
+++ /dev/null
@@ -1,288 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L17
-title: loadJSON
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Loads a JSON file to create an <code>Object</code>.</p>
-
-  <p>JavaScript Object Notation
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
-  target="_blank">JSON</a>)
-
-  is a standard format for sending data between applications. The format is
-
-  based on JavaScript objects which have keys and values. JSON files store
-
-  data in an object with strings as keys. Values can be strings, numbers,
-
-  Booleans, arrays, <code>null</code>, or other objects.</p>
-
-  <p>The first parameter, <code>path</code>, is always a string with the path to
-  the file.
-
-  Paths to local files should be relative, as in
-
-  <code>loadJSON('/assets/data.json')</code>. URLs such as
-
-  <code>'https://example.com/data.json'</code> may be blocked due to browser
-  security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, as in <code>loadJSON('/assets/data.json', handleData)</code>, then the
-
-  <code>handleData()</code> function will be called once the data loads. The
-  object
-
-  created from the JSON data will be passed to <code>handleData()</code> as its
-  only argument.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, as in <code>loadJSON('/assets/data.json', handleData,
-  handleFailure)</code>,
-
-  then the <code>handleFailure()</code> function will be called if an error
-  occurs while
-
-  loading. The <code>Error</code> object will be passed to
-  <code>handleFailure()</code> as its only
-
-  argument.</p>
-
-  <p>Note: Data can take time to load. Calling <code>loadJSON()</code> within
-
-  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
-  used in
-
-  <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 17
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the JSON and create an object.
-    function preload() {
-      myData = loadJSON('/assets/data.json');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the circle.
-      fill(myData.color);
-      noStroke();
-
-      // Draw the circle.
-      circle(myData.x, myData.y, myData.d);
-
-      describe('A pink circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the JSON and create an object.
-    function preload() {
-      myData = loadJSON('/assets/data.json');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object and make it transparent.
-      let c = color(myData.color);
-      c.setAlpha(80);
-
-      // Style the circles.
-      fill(c);
-      noStroke();
-
-      // Iterate over the myData.bubbles array.
-      for (let b of myData.bubbles) {
-        // Draw a circle for each bubble.
-        circle(b.x, b.y, b.d);
-      }
-
-      describe('Several pink bubbles floating in a blue sky.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the GeoJSON and create an object.
-    function preload() {
-      myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get data about the most recent earthquake.
-      let quake = myData.features[0].properties;
-
-      // Draw a circle based on the earthquake's magnitude.
-      circle(50, 50, quake.mag * 10);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display the earthquake's location.
-      text(quake.place, 5, 80, 100);
-
-      describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let bigQuake;
-
-    // Load the GeoJSON and preprocess it.
-    function preload() {
-      loadJSON(
-        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
-        handleData
-      );
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a circle based on the earthquake's magnitude.
-      circle(50, 50, bigQuake.mag * 10);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display the earthquake's location.
-      text(bigQuake.place, 5, 80, 100);
-
-      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
-    }
-
-    // Find the biggest recent earthquake.
-    function handleData(data) {
-      let maxMag = 0;
-      // Iterate over the earthquakes array.
-      for (let quake of data.features) {
-        // Reassign bigQuake if a larger
-        // magnitude quake is found.
-        if (quake.properties.mag > maxMag) {
-          bigQuake = quake.properties;
-        }
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let bigQuake;
-
-    // Load the GeoJSON and preprocess it.
-    function preload() {
-      loadJSON(
-        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
-        handleData,
-        handleError
-      );
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a circle based on the earthquake's magnitude.
-      circle(50, 50, bigQuake.mag * 10);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display the earthquake's location.
-      text(bigQuake.place, 5, 80, 100);
-
-      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
-    }
-
-    // Find the biggest recent earthquake.
-    function handleData(data) {
-      let maxMag = 0;
-      // Iterate over the earthquakes array.
-      for (let quake of data.features) {
-        // Reassign bigQuake if a larger
-        // magnitude quake is found.
-        if (quake.properties.mag > maxMag) {
-          bigQuake = quake.properties;
-        }
-      }
-    }
-
-    // Log any errors to the console.
-    function handleError(error) {
-      console.log('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the JSON file to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: >
-      <p>function to call once the data is loaded. Will be passed the
-      object.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: >
-      <p>function to call if the data fails to load. Will be passed an
-      <code>Error</code> event object.</p>
-    type: Function
-    optional: true
-return:
-  description: object containing the loaded data.
-  type: Object
-chainable: false
----
-
-
-# loadJSON
diff --git a/src/content/reference/en/p5 copy/loadModel.mdx b/src/content/reference/en/p5 copy/loadModel.mdx
deleted file mode 100644
index 56b2230e1e..0000000000
--- a/src/content/reference/en/p5 copy/loadModel.mdx	
+++ /dev/null
@@ -1,469 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L13
-title: loadModel
-module: Shape
-submodule: 3D Models
-file: src/webgl/loading.js
-description: >
-  <p>Loads a 3D model to create a
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
-
-  <p><code>loadModel()</code> can load 3D models from OBJ and STL files. Once
-  the model is
-
-  loaded, it can be displayed with the
-
-  <a href="/reference/p5/model/">model()</a> function, as in
-  <code>model(shape)</code>.</p>
-
-  <p>There are three ways to call <code>loadModel()</code> with optional
-  parameters to help
-
-  process the model.</p>
-
-  <p>The first parameter, <code>path</code>, is always a <code>String</code>
-  with the path to the
-
-  file. Paths to local files should be relative, as in
-
-  <code>loadModel('/assets/model.obj')</code>. URLs such as
-
-  <code>'https://example.com/model.obj'</code> may be blocked due to browser
-  security.</p>
-
-  <p>Note: When loading a <code>.obj</code> file that references materials
-  stored in
-
-  <code>.mtl</code> files, p5.js will attempt to load and apply those materials.
-
-  To ensure that the <code>.obj</code> file reads the <code>.mtl</code> file
-  correctly include the
-
-  <code>.mtl</code> file alongside it.</p>
-
-  <p>The first way to call <code>loadModel()</code> has three optional
-  parameters after the
-
-  file path. The first optional parameter, <code>successCallback</code>, is a
-  function
-
-  to call once the model loads. For example,
-
-  <code>loadModel('/assets/model.obj', handleModel)</code> will call the
-  <code>handleModel()</code>
-
-  function once the model loads. The second optional parameter,
-
-  <code>failureCallback</code>, is a function to call if the model fails to
-  load. For
-
-  example, <code>loadModel('/assets/model.obj', handleModel,
-  handleFailure)</code> will
-
-  call the <code>handleFailure()</code> function if an error occurs while
-  loading. The
-
-  third optional parameter, <code>fileType</code>, is the model’s file extension
-  as a
-
-  string. For example,
-
-  <code>loadModel('/assets/model', handleModel, handleFailure, '.obj')</code>
-  will try to
-
-  load the file model as a <code>.obj</code> file.</p>
-
-  <p>The second way to call <code>loadModel()</code> has four optional
-  parameters after the
-
-  file path. The first optional parameter is a <code>Boolean</code> value. If
-  <code>true</code> is
-
-  passed, as in <code>loadModel('/assets/model.obj', true)</code>, then the
-  model will be
-
-  resized to ensure it fits the canvas. The next three parameters are
-
-  <code>successCallback</code>, <code>failureCallback</code>, and
-  <code>fileType</code> as described above.</p>
-
-  <p>The third way to call <code>loadModel()</code> has one optional parameter
-  after the
-
-  file path. The optional parameter, <code>options</code>, is an
-  <code>Object</code> with options,
-
-  as in <code>loadModel('/assets/model.obj', options)</code>. The
-  <code>options</code> object can
-
-  have the following properties:</p>
-
-  <pre><code class="language-js">let options = {
-    // Enables standardized size scaling during loading if set to true.
-    normalize: true,
-
-    // Function to call once the model loads.
-    successCallback: handleModel,
-
-    // Function to call if an error occurs while loading.
-    failureCallback: handleError,
-
-    // Model's file extension.
-    fileType: '.stl',
-
-    // Flips the U texture coordinates of the model.
-    flipU: false,
-
-    // Flips the V texture coordinates of the model.
-    flipV: false
-  };
-
-
-  // Pass the options object to loadModel().
-
-  loadModel('/assets/model.obj', options);
-
-  </code></pre>
-
-  <p>Models can take time to load. Calling <code>loadModel()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures models load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-
-  <p>Note: There’s no support for colored STL files. STL files with color will
-
-  be rendered without color.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      shape = loadModel('/assets/teapot.obj');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    // Normalize the geometry's size to fit the canvas.
-    function preload() {
-      shape = loadModel('/assets/teapot.obj', true);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/teapot.obj', true, handleModel);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and log the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/wrong.obj', true, handleModel, handleError);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and print the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-
-    // Print an error message if the file doesn't load.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/teapot.obj', true, handleModel, handleError, '.obj');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and print the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-
-    // Print an error message if the file doesn't load.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-    let options = {
-      normalize: true,
-      successCallback: handleModel,
-      failureCallback: handleError,
-      fileType: '.obj'
-    };
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/teapot.obj', options);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and print the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-
-    // Print an error message if the file doesn't load.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-  type: p5.Geometry
-overloads:
-  - line: 13
-    params:
-      - name: path
-        description: |
-          <p>path of the model to be loaded.</p>
-        type: String
-      - name: normalize
-        description: |
-          <p>if <code>true</code>, scale the model to fit the canvas.</p>
-        type: Boolean
-      - name: successCallback
-        description: |
-          <p>function to call once the model is loaded. Will be passed
-                                                            the <a href="#/p5.Geometry">p5.Geometry</a> object.</p>
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: >
-          <p>function to call if the model fails to load. Will be passed an
-          <code>Error</code> event object.</p>
-        type: Function(Event)
-        optional: true
-      - name: fileType
-        description: >
-          <p>model’s file extension. Either <code>'.obj'</code> or
-          <code>'.stl'</code>.</p>
-        type: String
-        optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-  - line: 324
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: successCallback
-        description: ''
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: ''
-        type: Function(Event)
-        optional: true
-      - name: fileType
-        description: ''
-        type: String
-        optional: true
-    return:
-      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
-      type: p5.Geometry
-  - line: 332
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: options
-        description: |
-          <p>loading options.</p>
-        type: Object
-        optional: true
-        props:
-          - name: successCallback
-            description: ''
-            type: function(p5.Geometry)
-            optional: true
-          - name: failureCallback
-            description: ''
-            type: Function(Event)
-            optional: true
-          - name: fileType
-            description: ''
-            type: String
-            optional: true
-          - name: normalize
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipU
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipV
-            description: ''
-            type: Boolean
-            optional: true
-    return:
-      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
-      type: p5.Geometry
-chainable: false
----
-
-
-# loadModel
diff --git a/src/content/reference/en/p5 copy/loadPixels.mdx b/src/content/reference/en/p5 copy/loadPixels.mdx
deleted file mode 100644
index 424a87765f..0000000000
--- a/src/content/reference/en/p5 copy/loadPixels.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L946
-title: loadPixels
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: |
-  <p>Loads the current value of each pixel on the canvas into the
-  <a href="/reference/p5/pixels/">pixels</a> array.</p>
-  <p><code>loadPixels()</code> must be called before reading from or writing to
-  <a href="/reference/p5/pixels/">pixels</a>.</p>
-line: 946
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0, 100, 100);
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Copy the top half of the canvas to the bottom.
-      for (let i = 0; i < halfImage; i += 1) {
-        pixels[i + halfImage] = pixels[i];
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Two identical images of mountain landscapes, one on top of the other.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# loadPixels
diff --git a/src/content/reference/en/p5 copy/loadShader.mdx b/src/content/reference/en/p5 copy/loadShader.mdx
deleted file mode 100644
index 1180e6c487..0000000000
--- a/src/content/reference/en/p5 copy/loadShader.mdx	
+++ /dev/null
@@ -1,172 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L12
-title: loadShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Loads vertex and fragment shaders to create a
-
-  <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
-
-  <p>Shaders are programs that run on the graphics processing unit (GPU). They
-
-  can process many pixels at the same time, making them fast for many
-
-  graphics tasks. They’re written in a language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.</p>
-
-  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
-  it can be
-
-  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
-
-  <code>shader(myShader)</code>. A shader program consists of two files, a
-  vertex shader
-
-  and a fragment shader. The vertex shader affects where 3D geometry is drawn
-
-  on the screen and the fragment shader affects color.</p>
-
-  <p><code>loadShader()</code> loads the vertex and fragment shaders from their
-  <code>.vert</code> and
-
-  <code>.frag</code> files. For example, calling
-
-  <code>loadShader('/assets/shader.vert', '/assets/shader.frag')</code> loads
-  both
-
-  required shaders and returns a <a href="/reference/p5/p5.Shader">p5.Shader</a>
-  object.</p>
-
-  <p>The third parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, it will be called once the shader has loaded. The callback function
-
-  can use the new <a href="/reference/p5/p5.Shader">p5.Shader</a> object as its
-
-  parameter.</p>
-
-  <p>The fourth parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, it will be called if the shader fails to load. The callback
-
-  function can use the event error as its parameter.</p>
-
-  <p>Shaders can take time to load. Calling <code>loadShader()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures shaders load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-
-  <p>Note: Shaders can only be used in WebGL mode.</p>
-line: 12
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Compile and apply the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      // Set the shader uniform r to the value 1.5.
-      mandelbrot.setUniform('r', 1.5);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-
-      describe('A black fractal image on a magenta background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates between 0 and 2.
-      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: vertFilename
-    description: |
-      <p>path of the vertex shader to be loaded.</p>
-    type: String
-  - name: fragFilename
-    description: |
-      <p>path of the fragment shader to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function to call once the shader is loaded. Can be passed the
-                                          <a href="#/p5.Shader">p5.Shader</a> object.</p>
-    type: Function
-    optional: true
-  - name: failureCallback
-    description: |
-      <p>function to call if the shader fails to load. Can be passed an
-                                          <code>Error</code> event object.</p>
-    type: Function
-    optional: true
-return:
-  description: new shader created from the vertex and fragment shader files.
-  type: p5.Shader
-chainable: false
----
-
-
-# loadShader
diff --git a/src/content/reference/en/p5 copy/loadSound.mdx b/src/content/reference/en/p5 copy/loadSound.mdx
deleted file mode 100644
index be9dd1ac29..0000000000
--- a/src/content/reference/en/p5 copy/loadSound.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L2946
-title: loadSound
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>loadSound() returns a new p5.SoundFile from a specified
-  path. If called during preload(), the p5.SoundFile will be ready
-  to play in time for setup() and draw(). If called outside of
-  preload, the p5.SoundFile will not be ready immediately, so
-  loadSound accepts a callback as the second parameter. Using a
-  <a href="https://github.com/processing/p5.js/wiki/Local-server/">
-  local server</a> is recommended when loading external files.</p>
-line: 2946
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    let mySound;
-    function preload() {
-      soundFormats('mp3', 'ogg');
-      mySound = loadSound('/assets/doorbell');
-    }
-
-    function setup() {
-      let cnv = createCanvas(100, 100);
-      cnv.mousePressed(canvasPressed);
-      background(220);
-      text('tap here to play', 10, 20);
-    }
-
-    function canvasPressed() {
-      // playing a sound file on a user gesture
-      // is equivalent to `userStartAudio()`
-      mySound.play();
-    }
-    </code></div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>Path to the sound file, or an array with
-                                        paths to soundfiles in multiple formats
-                                        i.e. ['sound.ogg', 'sound.mp3'].
-                                        Alternately, accepts an object: either
-                                        from the HTML5 File API, or a p5.File.</p>
-    type: String|Array
-  - name: successCallback
-    description: |
-      <p>Name of a function to call once file loads</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>Name of a function to call if there is
-                                          an error loading the file.</p>
-    type: Function
-    optional: true
-  - name: whileLoading
-    description: |
-      <p>Name of a function to call while file is loading.
-                                     This function will receive the percentage loaded
-                                     so far, from 0.0 to 1.0.</p>
-    type: Function
-    optional: true
-return:
-  description: Returns a p5.SoundFile
-  type: SoundFile
-chainable: false
----
-
-
-# loadSound
diff --git a/src/content/reference/en/p5 copy/loadStrings.mdx b/src/content/reference/en/p5 copy/loadStrings.mdx
deleted file mode 100644
index ce011835bc..0000000000
--- a/src/content/reference/en/p5 copy/loadStrings.mdx	
+++ /dev/null
@@ -1,188 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L309
-title: loadStrings
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Loads a text file to create an <code>Array</code>.</p>
-
-  <p>The first parameter, <code>path</code>, is always a string with the path to
-  the file.
-
-  Paths to local files should be relative, as in
-
-  <code>loadStrings('/assets/data.txt')</code>. URLs such as
-
-  <code>'https://example.com/data.txt'</code> may be blocked due to browser
-  security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, as in <code>loadStrings('/assets/data.txt', handleData)</code>, then
-  the
-
-  <code>handleData()</code> function will be called once the data loads. The
-  array
-
-  created from the text data will be passed to <code>handleData()</code> as its
-  only
-
-  argument.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, as in <code>loadStrings('/assets/data.txt', handleData,
-  handleFailure)</code>,
-
-  then the <code>handleFailure()</code> function will be called if an error
-  occurs while
-
-  loading. The <code>Error</code> object will be passed to
-  <code>handleFailure()</code> as its only
-
-  argument.</p>
-
-  <p>Note: Data can take time to load. Calling <code>loadStrings()</code> within
-
-  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
-  used in
-
-  <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 309
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the text and create an array.
-    function preload() {
-      myData = loadStrings('/assets/test.txt');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Select a random line from the text.
-      let phrase = random(myData);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display the text.
-      text(phrase, 10, 50, 90);
-
-      describe(`The text "${phrase}" written in black on a gray background.`);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastLine;
-
-    // Load the text and preprocess it.
-    function preload() {
-      loadStrings('/assets/test.txt', handleData);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display the text.
-      text(lastLine, 10, 50, 90);
-
-      describe('The text "I talk like an orange" written in black on a gray background.');
-    }
-
-    // Select the last line from the text.
-    function handleData(data) {
-      lastLine = data[data.length - 1];
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastLine;
-
-    // Load the text and preprocess it.
-    function preload() {
-      loadStrings('/assets/test.txt', handleData, handleError);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display the text.
-      text(lastLine, 10, 50, 90);
-
-      describe('The text "I talk like an orange" written in black on a gray background.');
-    }
-
-    // Select the last line from the text.
-    function handleData(data) {
-      lastLine = data[data.length - 1];
-    }
-
-    // Log any errors to the console.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the text file to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function to call once the data is
-                                           loaded. Will be passed the array.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to call if the data fails to
-                                         load. Will be passed an <code>Error</code> event
-                                         object.</p>
-    type: Function
-    optional: true
-return:
-  description: new array containing the loaded text.
-  type: 'String[]'
-chainable: false
----
-
-
-# loadStrings
diff --git a/src/content/reference/en/p5 copy/loadTable.mdx b/src/content/reference/en/p5 copy/loadTable.mdx
deleted file mode 100644
index d93e40a3da..0000000000
--- a/src/content/reference/en/p5 copy/loadTable.mdx	
+++ /dev/null
@@ -1,124 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L505
-title: loadTable
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Reads the contents of a file or URL and creates a <a
-  href="/reference/p5/p5.Table">p5.Table</a> object with
-
-  its values. If a file is specified, it must be located in the sketch's
-
-  "data" folder. The filename parameter can also be a URL to a file found
-
-  online. By default, the file is assumed to be comma-separated (in CSV
-
-  format). Table only looks for a header row if the 'header' option is
-
-  included.</p>
-
-  <p>This method is asynchronous, meaning it may not finish before the next
-
-  line in your sketch is executed. Calling <a
-  href="/reference/p5/loadTable/">loadTable()</a> inside <a
-  href="/reference/p5/preload/">preload()</a>
-
-  guarantees to complete the operation before <a
-  href="/reference/p5/setup/">setup()</a> and <a
-  href="/reference/p5/draw/">draw()</a> are called.
-
-  Outside of <a href="/reference/p5/preload/">preload()</a>, you may supply a
-  callback function to handle the
-
-  object:</p>
-
-  <p>All files loaded and saved use UTF-8 encoding. This method is suitable for
-  fetching files up to size of 64MB.</p>
-line: 505
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // Given the following CSV file called "mammals.csv"
-    // located in the project's "assets" folder:
-    //
-    // id,species,name
-    // 0,Capra hircus,Goat
-    // 1,Panthera pardus,Leopard
-    // 2,Equus zebra,Zebra
-
-    let table;
-
-    function preload() {
-      //my table is comma separated value "csv"
-      //and has a header specifying the columns labels
-      table = loadTable('/assets/mammals.csv', 'csv', 'header');
-      //the file can be remote
-      //table = loadTable("https://p5js.org/reference//assets/mammals.csv",
-      //                  "csv", "header");
-    }
-
-    function setup() {
-      //count the columns
-      print(table.getRowCount() + ' total rows in table');
-      print(table.getColumnCount() + ' total columns in table');
-
-      print(table.getColumn('name'));
-      //["Goat", "Leopard", "Zebra"]
-
-      //cycle through the table
-      for (let r = 0; r < table.getRowCount(); r++)
-        for (let c = 0; c < table.getColumnCount(); c++) {
-          print(table.getString(r, c));
-        }
-      describe(`randomly generated text from a file,
-        for example "i smell like butter"`);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: filename
-    description: |
-      <p>name of the file or URL to load</p>
-    type: String
-  - name: extension
-    description: |
-      <p>parse the table by comma-separated values "csv", semicolon-separated
-                                           values "ssv", or tab-separated values "tsv"</p>
-    type: String
-    optional: true
-  - name: header
-    description: |
-      <p>"header" to indicate table has header row</p>
-    type: String
-    optional: true
-  - name: callback
-    description: |
-      <p>function to be executed after
-                                           <a href="#/p5/loadTable">loadTable()</a> completes. On success, the
-                                           <a href="#/p5.Table">Table</a> object is passed in as the
-                                           first argument.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to be executed if
-                                           there is an error, response is passed
-                                           in as first argument</p>
-    type: Function
-    optional: true
-return:
-  description: <a href="#/p5.Table">Table</a> object containing data
-  type: Object
-chainable: false
----
-
-
-# loadTable
diff --git a/src/content/reference/en/p5 copy/loadXML.mdx b/src/content/reference/en/p5 copy/loadXML.mdx
deleted file mode 100644
index 859a3c895d..0000000000
--- a/src/content/reference/en/p5 copy/loadXML.mdx	
+++ /dev/null
@@ -1,220 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L780
-title: loadXML
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Loads an XML file to create a <a href="/reference/p5/p5.XML">p5.XML</a>
-  object.</p>
-
-  <p>Extensible Markup Language
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
-  target="_blank">XML</a>)
-
-  is a standard format for sending data between applications. Like HTML, the
-
-  XML format is based on tags and attributes, as in
-
-  <code><time units="s">1234</time></code>.</p>
-
-  <p>The first parameter, <code>path</code>, is always a string with the path to
-  the file.
-
-  Paths to local files should be relative, as in
-
-  <code>loadXML('/assets/data.xml')</code>. URLs such as
-  <code>'https://example.com/data.xml'</code>
-
-  may be blocked due to browser security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, as in <code>loadXML('/assets/data.xml', handleData)</code>, then the
-
-  <code>handleData()</code> function will be called once the data loads. The
-
-  <a href="/reference/p5/p5.XML">p5.XML</a> object created from the data will be
-  passed
-
-  to <code>handleData()</code> as its only argument.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, as in <code>loadXML('/assets/data.xml', handleData,
-  handleFailure)</code>, then
-
-  the <code>handleFailure()</code> function will be called if an error occurs
-  while
-
-  loading. The <code>Error</code> object will be passed to
-  <code>handleFailure()</code> as its only
-
-  argument.</p>
-
-  <p>Note: Data can take time to load. Calling <code>loadXML()</code> within
-
-  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
-  used in
-
-  <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 780
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myXML;
-
-    // Load the XML and create a p5.XML object.
-    function preload() {
-      myXML = loadXML('/assets/animals.xml');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get an array with all mammal tags.
-      let mammals = myXML.getChildren('mammal');
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(14);
-
-      // Iterate over the mammals array.
-      for (let i = 0; i < mammals.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Get the mammal's common name.
-        let name = mammals[i].getContent();
-
-        // Display the mammal's name.
-        text(name, 20, y);
-      }
-
-      describe(
-        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastMammal;
-
-    // Load the XML and create a p5.XML object.
-    function preload() {
-      loadXML('/assets/animals.xml', handleData);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display the content of the last mammal element.
-      text(lastMammal, 50, 50);
-
-      describe('The word "Zebra" written in black on a gray background.');
-    }
-
-    // Get the content of the last mammal element.
-    function handleData(data) {
-      // Get an array with all mammal elements.
-      let mammals = data.getChildren('mammal');
-
-      // Get the content of the last mammal.
-      lastMammal = mammals[mammals.length - 1].getContent();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastMammal;
-
-    // Load the XML and preprocess it.
-    function preload() {
-      loadXML('/assets/animals.xml', handleData, handleError);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display the content of the last mammal element.
-      text(lastMammal, 50, 50);
-
-      describe('The word "Zebra" written in black on a gray background.');
-    }
-
-    // Get the content of the last mammal element.
-    function handleData(data) {
-      // Get an array with all mammal elements.
-      let mammals = data.getChildren('mammal');
-
-      // Get the content of the last mammal.
-      lastMammal = mammals[mammals.length - 1].getContent();
-    }
-
-    // Log any errors to the console.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the XML file to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function to call once the data is
-                                           loaded. Will be passed the
-                                           <a href="#/p5.XML">p5.XML</a> object.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to call if the data fails to
-                                         load. Will be passed an <code>Error</code> event
-                                         object.</p>
-    type: Function
-    optional: true
-return:
-  description: |-
-    XML data loaded into a <a href="#/p5.XML">p5.XML</a>
-                     object.
-  type: p5.XML
-chainable: false
----
-
-
-# loadXML
diff --git a/src/content/reference/en/p5 copy/log.mdx b/src/content/reference/en/p5 copy/log.mdx
deleted file mode 100644
index c84c6d5a4b..0000000000
--- a/src/content/reference/en/p5 copy/log.mdx	
+++ /dev/null
@@ -1,79 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L423
-title: log
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the natural logarithm (the base-e logarithm) of a number.</p>
-
-  <p><code>log()</code> expects the <code>n</code> parameter to be a value
-  greater than 0 because
-
-  the natural logarithm is defined that way.</p>
-line: 423
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = log(50);
-      circle(33, 33, d);
-
-      // Bottom-right.
-      d = log(500000000);
-      circle(67, 67, d);
-
-      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that get higher slowly from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate coordinates.
-      let x = frameCount;
-      let y = 15 * log(x);
-
-      // Draw a point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number greater than 0.</p>
-    type: Number
-return:
-  description: natural logarithm of n.
-  type: Number
-chainable: false
----
-
-
-# log
diff --git a/src/content/reference/en/p5 copy/loop.mdx b/src/content/reference/en/p5 copy/loop.mdx
deleted file mode 100644
index a73432d2c1..0000000000
--- a/src/content/reference/en/p5 copy/loop.mdx	
+++ /dev/null
@@ -1,111 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L127
-title: loop
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Resumes the draw loop after <a href="/reference/p5/noLoop/">noLoop()</a>
-  has been
-
-  called.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
-
-  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
-
-  restarted by calling <code>loop()</code>.</p>
-
-  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
-  to check
-
-  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
-line: 127
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe(
-        'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's x-coordinate.
-      let x = frameCount;
-
-      // Draw the circle.
-      circle(x, 50, 20);
-    }
-
-    // Resume the draw loop when the user double-clicks.
-    function doubleClicked() {
-      loop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let startButton;
-    let stopButton;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the button elements and place them
-      // beneath the canvas.
-      startButton = createButton('▶');
-      startButton.position(0, 100);
-      startButton.size(50, 20);
-      stopButton = createButton('◾');
-      stopButton.position(50, 100);
-      stopButton.size(50, 20);
-
-      // Set functions to call when the buttons are pressed.
-      startButton.mousePressed(loop);
-      stopButton.mousePressed(noLoop);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe(
-        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# loop
diff --git a/src/content/reference/en/p5 copy/mag.mdx b/src/content/reference/en/p5 copy/mag.mdx
deleted file mode 100644
index 4d46565b07..0000000000
--- a/src/content/reference/en/p5 copy/mag.mdx	
+++ /dev/null
@@ -1,84 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L481
-title: mag
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the magnitude, or length, of a vector.</p>
-
-  <p>A vector can be thought of in different ways. In one view, a vector is a
-
-  point in space. The vector's components, <code>x</code> and <code>y</code>,
-  are the point's
-
-  coordinates <code>(x, y)</code>. A vector's magnitude is the distance from the
-  origin
-
-  <code>(0, 0)</code> to <code>(x, y)</code>. <code>mag(x, y)</code> is a
-  shortcut for calling
-
-  <code>dist(0, 0, x, y)</code>.</p>
-
-  <p>A vector can also be thought of as an arrow pointing in space. This view is
-
-  helpful for programming motion. See <a
-  href="/reference/p5/p5.Vector">p5.Vector</a> for
-
-  more details.</p>
-
-  <p>Use <a href="/reference/p5.Vector/mag/">p5.Vector.mag()</a> to calculate
-  the
-
-  magnitude of a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-line: 481
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the vector's components.
-      let x = 30;
-      let y = 40;
-
-      // Calculate the magnitude.
-      let m = mag(x, y);
-
-      // Style the text.
-      textSize(16);
-
-      // Display the vector and its magnitude.
-      line(0, 0, x, y);
-      text(m, x, y);
-
-      describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>first component.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>second component.</p>
-    type: Number
-return:
-  description: magnitude of vector.
-  type: Number
-chainable: false
----
-
-
-# mag
diff --git a/src/content/reference/en/p5 copy/map.mdx b/src/content/reference/en/p5 copy/map.mdx
deleted file mode 100644
index a94e6e4dd7..0000000000
--- a/src/content/reference/en/p5 copy/map.mdx	
+++ /dev/null
@@ -1,119 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L534
-title: map
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Re-maps a number from one range to another.</p>
-
-  <p>For example, calling <code>map(2, 0, 10, 0, 100)</code> returns 20. The
-  first three
-
-  arguments set the original value to 2 and the original range from 0 to 10.
-
-  The last two arguments set the target range from 0 to 100. 20's position
-
-  in the target range [0, 100] is proportional to 2's position in the
-
-  original range [0, 10].</p>
-
-  <p>The sixth parameter, <code>withinBounds</code>, is optional. By default,
-  <code>map()</code> can
-
-  return values outside of the target range. For example,
-
-  <code>map(11, 0, 10, 0, 100)</code> returns 110. Passing <code>true</code> as
-  the sixth parameter
-
-  constrains the remapped value to the target range. For example,
-
-  <code>map(11, 0, 10, 0, 100, true)</code> returns 100.</p>
-line: 534
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the top line.
-      line(0, 25, mouseX, 25);
-
-      // Remap mouseX from [0, 100] to [0, 50].
-      let x = map(mouseX, 0, 100, 0, 50);
-
-      // Draw the bottom line.
-      line(0, 75, x, 75);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A circle changes color from black to white as the mouse moves from left to right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Remap mouseX from [0, 100] to [0, 255]
-      let c = map(mouseX, 0, 100, 0, 255);
-
-      // Style the circle.
-      fill(c);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>the value to be remapped.</p>
-    type: Number
-  - name: start1
-    description: |
-      <p>lower bound of the value's current range.</p>
-    type: Number
-  - name: stop1
-    description: |
-      <p>upper bound of the value's current range.</p>
-    type: Number
-  - name: start2
-    description: |
-      <p>lower bound of the value's target range.</p>
-    type: Number
-  - name: stop2
-    description: |
-      <p>upper bound of the value's target range.</p>
-    type: Number
-  - name: withinBounds
-    description: |
-      <p>constrain the value to the newly mapped range.</p>
-    type: Boolean
-    optional: true
-return:
-  description: remapped number.
-  type: Number
-chainable: false
----
-
-
-# map
diff --git a/src/content/reference/en/p5 copy/match.mdx b/src/content/reference/en/p5 copy/match.mdx
deleted file mode 100644
index c93425e96d..0000000000
--- a/src/content/reference/en/p5 copy/match.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L60
-title: match
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Applies a regular expression to a string and returns an array with the
-
-  first match.</p>
-
-  <p><code>match()</code> uses regular expressions (regex) to match patterns in
-  text. For
-
-  example, the regex <code>abc</code> can be used to search a string for the
-  exact
-
-  sequence of characters <code>abc</code>. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
-  target="_blank">MDN</a>.
-
-  for more information about regexes.</p>
-
-  <p>The first parameter, <code>str</code>, is the string to search.</p>
-
-  <p>The second parameter, <code>regex</code>, is a string with the regular
-  expression to
-
-  apply. For example, calling <code>match('Hello, p5*js!', '[a-z][0-9]')</code>
-  would
-
-  return the array <code>['p5']</code>.</p>
-
-  <p>Note: If no matches are found, <code>null</code> is returned.</p>
-line: 60
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'Hello, p5*js!';
-
-      // Match the characters that are lowercase
-      // letters followed by digits.
-      let matches = match(string, '[a-z][0-9]');
-
-      // Print the matches array to the console:
-      // ['p5']
-      print(matches);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the matches.
-      text(matches, 50, 50);
-
-      describe('The text "p5" written in black on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: str
-    description: |
-      <p>string to search.</p>
-    type: String
-  - name: regexp
-    description: |
-      <p>regular expression to match.</p>
-    type: String
-return:
-  description: match if found.
-  type: 'String[]'
-chainable: false
----
-
-
-# match
diff --git a/src/content/reference/en/p5 copy/matchAll.mdx b/src/content/reference/en/p5 copy/matchAll.mdx
deleted file mode 100644
index 371d596b61..0000000000
--- a/src/content/reference/en/p5 copy/matchAll.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L119
-title: matchAll
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Applies a regular expression to a string and returns an array of
-  matches.</p>
-
-  <p><code>match()</code> uses regular expressions (regex) to match patterns in
-  text. For
-
-  example, the regex <code>abc</code> can be used to search a string for the
-  exact
-
-  sequence of characters <code>abc</code>. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
-  target="_blank">MDN</a>.
-
-  for more information about regexes. <code>matchAll()</code> is different from
-
-  <a href="/reference/p5/match/">match()</a> because it returns every match, not
-  just
-
-  the first.</p>
-
-  <p>The first parameter, <code>str</code>, is the string to search.</p>
-
-  <p>The second parameter, <code>regex</code>, is a string with the regular
-  expression to
-
-  apply. For example, calling
-
-  <code>matchAll('p5*js is easier than abc123', '[a-z][0-9]')</code> would
-  return the
-
-  2D array <code>[['p5'], ['c1']]</code>.</p>
-
-  <p>Note: If no matches are found, an empty array <code>[]</code> is
-  returned.</p>
-line: 119
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'p5*js is easier than abc123';
-
-      // Match the character sequences that are
-      // lowercase letters followed by digits.
-      let matches = matchAll(string, '[a-z][0-9]');
-
-      // Print the matches array to the console:
-      // [['p5'], ['c1']]
-      print(matches);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Iterate over the matches array.
-      for (let i = 0; i < matches.length; i += 1) {
-
-        // Calculate the y-coordainate.
-        let y = (i + 1) * 33;
-
-        // Display the match.
-        text(matches[i], 50, y);
-      }
-
-      describe(
-        'The text "p5" and "c1" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: str
-    description: |
-      <p>string to search.</p>
-    type: String
-  - name: regexp
-    description: |
-      <p>regular expression to match.</p>
-    type: String
-return:
-  description: matches found.
-  type: 'String[]'
-chainable: false
----
-
-
-# matchAll
diff --git a/src/content/reference/en/p5 copy/max.mdx b/src/content/reference/en/p5 copy/max.mdx
deleted file mode 100644
index 0dd0ee142c..0000000000
--- a/src/content/reference/en/p5 copy/max.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L618
-title: max
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Returns the largest value in a sequence of numbers.</p>
-
-  <p>The version of <code>max()</code> with one parameter interprets it as an
-  array of
-
-  numbers and returns the largest number.</p>
-
-  <p>The version of <code>max()</code> with two or more parameters interprets
-  them as
-
-  individual numbers and returns the largest number.</p>
-line: 618
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the maximum of 10, 5, and 20.
-      let m = max(10, 5, 20);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the max.
-      text(m, 50, 50);
-
-      describe('The number 20 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let numbers = [10, 5, 20];
-
-      // Calculate the maximum of the array.
-      let m = max(numbers);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the max.
-      text(m, 50, 50);
-
-      describe('The number 20 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: maximum number.
-  type: Number
-overloads:
-  - line: 618
-    params:
-      - name: n0
-        description: |
-          <p>first number to compare.</p>
-        type: Number
-      - name: n1
-        description: |
-          <p>second number to compare.</p>
-        type: Number
-    return:
-      description: maximum number.
-      type: Number
-  - line: 680
-    params:
-      - name: nums
-        description: |
-          <p>numbers to compare.</p>
-        type: 'Number[]'
-    return:
-      description: ''
-      type: Number
-chainable: false
----
-
-
-# max
diff --git a/src/content/reference/en/p5 copy/metalness.mdx b/src/content/reference/en/p5 copy/metalness.mdx
deleted file mode 100644
index ef378bc2a9..0000000000
--- a/src/content/reference/en/p5 copy/metalness.mdx	
+++ /dev/null
@@ -1,142 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L3069
-title: metalness
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the amount of "metalness" of a
-
-  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
-
-  <p><code>metalness()</code> can make materials appear more metallic. It
-  affects the way
-
-  materials reflect light sources including
-
-  affects the way materials reflect light sources including
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>,
-
-  <a href="/reference/p5/spotLight/">spotLight()</a>, and
-
-  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
-
-  <p>The parameter, <code>metallic</code>, is a number that sets the amount of
-  metalness.
-
-  <code>metallic</code> must be greater than 1, which is its default value.
-  Higher
-
-  values, such as <code>metalness(100)</code>, make specular materials appear
-  more
-
-  metallic.</p>
-line: 3069
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn on an ambient light.
-      ambientLight(200);
-
-      // Get the mouse's coordinates.
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Turn on a white point light that follows the mouse.
-      pointLight(255, 255, 255, mx, my, 50);
-
-      // Style the spheres.
-      noStroke();
-      fill(30, 30, 255);
-      specularMaterial(255);
-      shininess(20);
-
-      // Draw the left sphere with low metalness.
-      translate(-25, 0, 0);
-      metalness(1);
-      sphere(20);
-
-      // Draw the right sphere with high metalness.
-      translate(50, 0, 0);
-      metalness(50);
-      sphere(20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(100 ,100 ,WEBGL);
-
-      describe(
-        'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'
-      );
-    }
-
-    function draw() {
-      // Add the panorama.
-      panorama(img);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Use the image as a light source.
-      imageLight(img);
-
-      // Style the spheres.
-      noStroke();
-      specularMaterial(50);
-      shininess(200);
-
-      // Draw the left sphere with low metalness.
-      translate(-25, 0, 0);
-      metalness(1);
-      sphere(20);
-
-      // Draw the right sphere with high metalness.
-      translate(50, 0, 0);
-      metalness(50);
-      sphere(20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: metallic
-    description: |
-      <p>amount of metalness.</p>
-    type: Number
-chainable: false
----
-
-
-# metalness
diff --git a/src/content/reference/en/p5 copy/midiToFreq.mdx b/src/content/reference/en/p5 copy/midiToFreq.mdx
deleted file mode 100644
index ada29d80ea..0000000000
--- a/src/content/reference/en/p5 copy/midiToFreq.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L841
-title: midiToFreq
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns the frequency value of a MIDI note value.
-  General MIDI treats notes as integers where middle C
-  is 60, C# is 61, D is 62 etc. Useful for generating
-  musical frequencies with oscillators.</p>
-line: 841
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    let midiNotes = [60, 64, 67, 72];
-    let noteIndex = 0;
-    let midiVal, freq;
-
-    function setup() {
-      let cnv = createCanvas(100, 100);
-      cnv.mousePressed(startSound);
-      osc = new p5.TriOsc();
-      env = new p5.Envelope();
-    }
-
-    function draw() {
-      background(220);
-      text('tap to play', 10, 20);
-      if (midiVal) {
-        text('MIDI: ' + midiVal, 10, 40);
-        text('Freq: ' + freq, 10, 60);
-      }
-    }
-
-    function startSound() {
-      // see also: userStartAudio();
-      osc.start();
-
-      midiVal = midiNotes[noteIndex % midiNotes.length];
-      freq = midiToFreq(midiVal);
-      osc.freq(freq);
-      env.ramp(osc, 0, 1.0, 0);
-
-      noteIndex++;
-    }
-    </code></div>
-class: p5
-params:
-  - name: midiNote
-    description: |
-      <p>The number of a MIDI note</p>
-    type: Number
-return:
-  description: Frequency value of the given MIDI note
-  type: Number
-chainable: false
----
-
-
-# midiToFreq
diff --git a/src/content/reference/en/p5 copy/millis.mdx b/src/content/reference/en/p5 copy/millis.mdx
deleted file mode 100644
index 18f1ac06d0..0000000000
--- a/src/content/reference/en/p5 copy/millis.mdx	
+++ /dev/null
@@ -1,147 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L112
-title: millis
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: >
-  <p>Returns the number of milliseconds since a sketch started running.</p>
-
-  <p><code>millis()</code> keeps track of how long a sketch has been running in
-
-  milliseconds (thousandths of a second). This information is often
-
-  helpful for timing events and animations.</p>
-
-  <p>If a sketch has a
-
-  <a href="/reference/p5/setup/">setup()</a> function, then
-  <code>millis()</code> begins tracking
-
-  time before the code in <a href="/reference/p5/setup/">setup()</a> runs. If a
-
-  sketch includes a <a href="/reference/p5/preload/">preload()</a> function,
-  then
-
-  <code>millis()</code> begins tracking time as soon as the code in
-
-  <a href="/reference/p5/preload/">preload()</a> starts running.</p>
-line: 112
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the number of milliseconds the sketch has run.
-      let ms = millis();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(10);
-      textFont('Courier New');
-
-      // Display how long it took setup() to be called.
-      text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
-
-      describe(
-        `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Get the number of seconds the sketch has run.
-      let s = millis() / 1000;
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(10);
-      textFont('Courier New');
-
-      // Display how long the sketch has run.
-      text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle oscillates left and right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Get the number of seconds the sketch has run.
-      let s = millis() / 1000;
-
-      // Calculate an x-coordinate.
-      let x = 30 * sin(s) + 50;
-
-      // Draw the circle.
-      circle(x, 50, 30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Load the GeoJSON.
-    function preload() {
-      loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the number of milliseconds the sketch has run.
-      let ms = millis();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display how long it took to load the data.
-      text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
-
-      describe(
-        `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: number of milliseconds since starting the sketch.
-  type: Number
-chainable: false
----
-
-
-# millis
diff --git a/src/content/reference/en/p5 copy/min.mdx b/src/content/reference/en/p5 copy/min.mdx
deleted file mode 100644
index 67af3b37f1..0000000000
--- a/src/content/reference/en/p5 copy/min.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L695
-title: min
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Returns the smallest value in a sequence of numbers.</p>
-
-  <p>The version of <code>min()</code> with one parameter interprets it as an
-  array of
-
-  numbers and returns the smallest number.</p>
-
-  <p>The version of <code>min()</code> with two or more parameters interprets
-  them as
-
-  individual numbers and returns the smallest number.</p>
-line: 695
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the minimum of 10, 5, and 20.
-      let m = min(10, 5, 20);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the min.
-      text(m, 50, 50);
-
-      describe('The number 5 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let numbers = [10, 5, 20];
-
-      // Calculate the minimum of the array.
-      let m = min(numbers);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the min.
-      text(m, 50, 50);
-
-      describe('The number 5 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: minimum number.
-  type: Number
-overloads:
-  - line: 695
-    params:
-      - name: n0
-        description: |
-          <p>first number to compare.</p>
-        type: Number
-      - name: n1
-        description: |
-          <p>second number to compare.</p>
-        type: Number
-    return:
-      description: minimum number.
-      type: Number
-  - line: 757
-    params:
-      - name: nums
-        description: |
-          <p>numbers to compare.</p>
-        type: 'Number[]'
-    return:
-      description: ''
-      type: Number
-chainable: false
----
-
-
-# min
diff --git a/src/content/reference/en/p5 copy/minute.mdx b/src/content/reference/en/p5 copy/minute.mdx
deleted file mode 100644
index 3ac966c800..0000000000
--- a/src/content/reference/en/p5 copy/minute.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L78
-title: minute
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current minute as a number from 0–59.</p>
-line: 78
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current minute.
-      let m = minute();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the minute.
-      text(`Current minute: ${m}`, 10, 50, 80);
-
-      describe(`The text 'Current minute: ${m}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current minute between 0 and 59.
-  type: Integer
-chainable: false
----
-
-
-# minute
diff --git a/src/content/reference/en/p5 copy/model.mdx b/src/content/reference/en/p5 copy/model.mdx
deleted file mode 100644
index e925350407..0000000000
--- a/src/content/reference/en/p5 copy/model.mdx	
+++ /dev/null
@@ -1,155 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L991
-title: model
-module: Shape
-submodule: 3D Models
-file: src/webgl/loading.js
-description: >
-  <p>Draws a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to the
-  canvas.</p>
-
-  <p>The parameter, <code>model</code>, is the
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to draw.
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can be built with
-
-  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, or
-
-  <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a>. They can also be
-  loaded from
-
-  a file with <a href="/reference/p5/loadGeometry/">loadGeometry()</a>.</p>
-
-  <p>Note: <code>model()</code> can only be used in WebGL mode.</p>
-line: 991
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createShape);
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    // Create p5.Geometry object from a single cone.
-    function createShape() {
-      cone();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createArrow);
-
-      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the p5.Geometry object again.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      shape = loadModel('/assets/octahedron.obj');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white octahedron drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: model
-    description: |
-      <p>3D shape to be drawn.</p>
-    type: p5.Geometry
-chainable: false
----
-
-
-# model
diff --git a/src/content/reference/en/p5 copy/month.mdx b/src/content/reference/en/p5 copy/month.mdx
deleted file mode 100644
index d2e248235c..0000000000
--- a/src/content/reference/en/p5 copy/month.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L242
-title: month
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current month as a number from 1–12.</p>
-line: 242
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current month.
-      let m = month();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the month.
-      text(`Current month: ${m}`, 10, 50, 80);
-
-      describe(`The text 'Current month: ${m}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current month between 1 and 12.
-  type: Integer
-chainable: false
----
-
-
-# month
diff --git a/src/content/reference/en/p5 copy/mouseButton.mdx b/src/content/reference/en/p5 copy/mouseButton.mdx
deleted file mode 100644
index 82128f97a3..0000000000
--- a/src/content/reference/en/p5 copy/mouseButton.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L687
-title: mouseButton
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A String system variable that contains the value of the last mouse button
-
-  pressed.</p>
-
-  <p>The <code>mouseButton</code> variable is either <code>LEFT</code>,
-  <code>RIGHT</code>, or <code>CENTER</code>,
-
-  depending on which button was pressed last.</p>
-
-  <p>Note: Different browsers may track <code>mouseButton</code> differently.
-  See
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons/"
-  target="_blank">MDN</a>
-
-  for more information.</p>
-line: 687
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with black text at its center. The text changes from 0 to either "left" or "right" when the user clicks a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse button.
-      text(mouseButton, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        "A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (mouseIsPressed === true) {
-        if (mouseButton === LEFT) {
-          circle(50, 50, 50);
-        }
-        if (mouseButton === RIGHT) {
-          square(25, 25, 50);
-        }
-        if (mouseButton === CENTER) {
-          triangle(23, 75, 50, 20, 78, 75);
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Constant
----
-
-
-# mouseButton
diff --git a/src/content/reference/en/p5 copy/mouseClicked.mdx b/src/content/reference/en/p5 copy/mouseClicked.mdx
deleted file mode 100644
index 80bd80b0a2..0000000000
--- a/src/content/reference/en/p5 copy/mouseClicked.mdx	
+++ /dev/null
@@ -1,196 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1443
-title: mouseClicked
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once after a mouse button is pressed and
-  released.</p>
-
-  <p>Declaring the function <code>mouseClicked()</code> sets a code block to run
-
-  automatically when the user releases a mouse button after having pressed
-
-  it:</p>
-
-  <pre><code class="language-js">function mouseClicked() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseClicked()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseClicked() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseClicked()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse click event:</p>
-
-  <pre><code class="language-js">function mouseClicked(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mouseClicked()</code> will run when a user’s
-  touch
-
-  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
-  If
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
-  touch
-
-  ends and <code>mouseClicked()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
-
-  <a href="/reference/p5/mouseReleased/">mouseReleased()</a>,
-
-  and <code>mouseClicked()</code> are all related.
-
-  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
-  user
-
-  clicks the mouse. <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
-  runs as
-
-  soon as the user releases the mouse click. <code>mouseClicked()</code> runs
-
-  immediately after <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
-line: 1443
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the square's color when the user clicks.
-    function mouseClicked() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the circle.
-      fill('orange');
-      stroke('royalblue');
-      strokeWeight(10);
-
-      describe(
-        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
-      );
-    }
-
-    function draw() {
-      background(220);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-
-    // Set the stroke color and weight as soon as the user clicks.
-    function mousePressed() {
-      stroke('deeppink');
-      strokeWeight(3);
-    }
-
-    // Set the stroke and fill colors as soon as the user releases
-    // the mouse.
-    function mouseReleased() {
-      stroke('royalblue');
-
-      // This is never visible because fill() is called
-      // in mouseClicked() which runs immediately after
-      // mouseReleased();
-      fill('limegreen');
-    }
-
-    // Set the fill color and stroke weight after
-    // mousePressed() and mouseReleased() are called.
-    function mouseClicked() {
-      fill('orange');
-      strokeWeight(10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseClicked
diff --git a/src/content/reference/en/p5 copy/mouseDragged.mdx b/src/content/reference/en/p5 copy/mouseDragged.mdx
deleted file mode 100644
index 26fea21fe9..0000000000
--- a/src/content/reference/en/p5 copy/mouseDragged.mdx	
+++ /dev/null
@@ -1,130 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L982
-title: mouseDragged
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called when the mouse moves while a button is
-  pressed.</p>
-
-  <p>Declaring the function <code>mouseDragged()</code> sets a code block to run
-
-  automatically when the user clicks and drags the mouse:</p>
-
-  <pre><code class="language-js">function mouseDragged() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseDragged()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseDragged() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseDragged()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse drag event:</p>
-
-  <pre><code class="language-js">function mouseDragged(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mouseDragged()</code> will run when a user
-  moves a touch
-
-  point if <a href="/reference/p5/touchMoved/">touchMoved()</a> isn’t declared.
-  If
-
-  <a href="/reference/p5/touchMoved/">touchMoved()</a> is declared, then
-
-  <a href="/reference/p5/touchMoved/">touchMoved()</a> will run when a user
-  moves a
-
-  touch point and <code>mouseDragged()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-line: 982
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mouseDragged() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseDragged
diff --git a/src/content/reference/en/p5 copy/mouseIsPressed.mdx b/src/content/reference/en/p5 copy/mouseIsPressed.mdx
deleted file mode 100644
index 37109eb364..0000000000
--- a/src/content/reference/en/p5 copy/mouseIsPressed.mdx	
+++ /dev/null
@@ -1,73 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L755
-title: mouseIsPressed
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Boolean</code> system variable that's <code>true</code> if the
-  mouse is pressed and
-
-  <code>false</code> if not.</p>
-line: 755
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the word "false" at its center. The word changes to "true" when the user presses a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouseIsPressed variable.
-      text(mouseIsPressed, 25, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      if (mouseIsPressed === true) {
-        fill(0);
-      } else {
-        fill(255);
-      }
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# mouseIsPressed
diff --git a/src/content/reference/en/p5 copy/mouseMoved.mdx b/src/content/reference/en/p5 copy/mouseMoved.mdx
deleted file mode 100644
index 14928fdc5e..0000000000
--- a/src/content/reference/en/p5 copy/mouseMoved.mdx	
+++ /dev/null
@@ -1,118 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L896
-title: mouseMoved
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called when the mouse moves.</p>
-
-  <p>Declaring the function <code>mouseMoved()</code> sets a code block to run
-
-  automatically when the user moves the mouse without clicking any mouse
-
-  buttons:</p>
-
-  <pre><code class="language-js">function mouseMoved() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseMoved()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseMoved() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseMoved()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse move event:</p>
-
-  <pre><code class="language-js">function mouseMoved(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-line: 896
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mouseMoved() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseMoved
diff --git a/src/content/reference/en/p5 copy/mousePressed.mdx b/src/content/reference/en/p5 copy/mousePressed.mdx
deleted file mode 100644
index 81181859c1..0000000000
--- a/src/content/reference/en/p5 copy/mousePressed.mdx	
+++ /dev/null
@@ -1,193 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1098
-title: mousePressed
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when a mouse button is pressed.</p>
-
-  <p>Declaring the function <code>mousePressed()</code> sets a code block to run
-
-  automatically when the user presses a mouse button:</p>
-
-  <pre><code class="language-js">function mousePressed() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mousePressed()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mousePressed() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mousePressed()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse press event:</p>
-
-  <pre><code class="language-js">function mousePressed(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mousePressed()</code> will run when a user’s
-  touch
-
-  begins if <a href="/reference/p5/touchStarted/">touchStarted()</a> isn’t
-  declared. If
-
-  <a href="/reference/p5/touchStarted/">touchStarted()</a> is declared, then
-
-  <a href="/reference/p5/touchStarted/">touchStarted()</a> will run when a
-  user’s touch
-
-  begins and <code>mousePressed()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: <code>mousePressed()</code>, <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a>,
-
-  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
-
-  <code>mousePressed()</code> runs as soon as the user clicks the mouse.
-
-  <a href="/reference/p5/mouseReleased/">mouseReleased()</a> runs as soon as the
-  user
-
-  releases the mouse click. <a
-  href="/reference/p5/mouseClicked/">mouseClicked()</a>
-
-  runs immediately after <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
-line: 1098
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mousePressed() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the circle.
-      fill('orange');
-      stroke('royalblue');
-      strokeWeight(10);
-
-      describe(
-        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
-      );
-    }
-
-    function draw() {
-      background(220);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-
-    // Set the stroke color and weight as soon as the user clicks.
-    function mousePressed() {
-      stroke('deeppink');
-      strokeWeight(3);
-    }
-
-    // Set the stroke and fill colors as soon as the user releases
-    // the mouse.
-    function mouseReleased() {
-      stroke('royalblue');
-
-      // This is never visible because fill() is called
-      // in mouseClicked() which runs immediately after
-      // mouseReleased();
-      fill('limegreen');
-    }
-
-    // Set the fill color and stroke weight after
-    // mousePressed() and mouseReleased() are called.
-    function mouseClicked() {
-      fill('orange');
-      strokeWeight(10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mousePressed
diff --git a/src/content/reference/en/p5 copy/mouseReleased.mdx b/src/content/reference/en/p5 copy/mouseReleased.mdx
deleted file mode 100644
index 6f52911162..0000000000
--- a/src/content/reference/en/p5 copy/mouseReleased.mdx	
+++ /dev/null
@@ -1,195 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1270
-title: mouseReleased
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when a mouse button is released.</p>
-
-  <p>Declaring the function <code>mouseReleased()</code> sets a code block to
-  run
-
-  automatically when the user releases a mouse button after having pressed
-
-  it:</p>
-
-  <pre><code class="language-js">function mouseReleased() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseReleased()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseReleased() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional.
-  <code>mouseReleased()</code> is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse release event:</p>
-
-  <pre><code class="language-js">function mouseReleased(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mouseReleased()</code> will run when a user’s
-  touch
-
-  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
-  If
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
-  touch
-
-  ends and <code>mouseReleased()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
-  <code>mouseReleased()</code>,
-
-  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
-
-  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
-  user
-
-  clicks the mouse. <code>mouseReleased()</code> runs as soon as the user
-  releases the
-
-  mouse click. <a href="/reference/p5/mouseClicked/">mouseClicked()</a> runs
-
-  immediately after <code>mouseReleased()</code>.</p>
-line: 1270
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mouseReleased() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the circle.
-      fill('orange');
-      stroke('royalblue');
-      strokeWeight(10);
-
-      describe(
-        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
-      );
-    }
-
-    function draw() {
-      background(220);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-
-    // Set the stroke color and weight as soon as the user clicks.
-    function mousePressed() {
-      stroke('deeppink');
-      strokeWeight(3);
-    }
-
-    // Set the stroke and fill colors as soon as the user releases
-    // the mouse.
-    function mouseReleased() {
-      stroke('royalblue');
-
-      // This is never visible because fill() is called
-      // in mouseClicked() which runs immediately after
-      // mouseReleased();
-      fill('limegreen');
-    }
-
-    // Set the fill color and stroke weight after
-    // mousePressed() and mouseReleased() are called.
-    function mouseClicked() {
-      fill('orange');
-      strokeWeight(10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseReleased
diff --git a/src/content/reference/en/p5 copy/mouseWheel.mdx b/src/content/reference/en/p5 copy/mouseWheel.mdx
deleted file mode 100644
index a659ea3cec..0000000000
--- a/src/content/reference/en/p5 copy/mouseWheel.mdx	
+++ /dev/null
@@ -1,162 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1746
-title: mouseWheel
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when the mouse wheel moves.</p>
-
-  <p>Declaring the function <code>mouseWheel()</code> sets a code block to run
-
-  automatically when the user scrolls with the mouse wheel:</p>
-
-  <pre><code class="language-js">function mouseWheel() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseWheel()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseWheel() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseWheel()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse scroll event:</p>
-
-  <pre><code class="language-js">function mouseWheel(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>The <code>event</code> object has many properties including
-  <code>delta</code>, a <code>Number</code>
-
-  containing the distance that the user scrolled. For example,
-  <code>event.delta</code>
-
-  might have the value 5 when the user scrolls up. <code>event.delta</code> is
-  positive
-
-  if the user scrolls up and negative if they scroll down. The signs are
-
-  opposite on macOS with "natural" scrolling enabled.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: On Safari, <code>mouseWheel()</code> may only work as expected if
-
-  <code>return false;</code> is added at the end of the function.</p>
-line: 1746
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let circleSize = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle
-      circle(50, 50, circleSize);
-    }
-
-    // Increment circleSize when the user scrolls the mouse wheel.
-    function mouseWheel() {
-      circleSize += 1;
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let direction = '';
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Draw an arrow that points where
-      // the mouse last scrolled.
-      text(direction, 50, 50);
-    }
-
-    // Change direction when the user scrolls the mouse wheel.
-    function mouseWheel(event) {
-      if (event.delta > 0) {
-        direction = '▲';
-      } else {
-        direction = '▼';
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>WheelEvent</code> argument.</p>
-    type: WheelEvent
-    optional: true
-chainable: false
----
-
-
-# mouseWheel
diff --git a/src/content/reference/en/p5 copy/mouseX.mdx b/src/content/reference/en/p5 copy/mouseX.mdx
deleted file mode 100644
index 7c0ba7f4a3..0000000000
--- a/src/content/reference/en/p5 copy/mouseX.mdx	
+++ /dev/null
@@ -1,124 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L119
-title: mouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
-  position.</p>
-
-  <p><code>mouseX</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. For example, if the mouse is 50 pixels from
-
-  the left edge of the canvas, then <code>mouseX</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>mouseX</code> will hold
-  the
-
-  x-coordinate of the most recent touch point.</p>
-line: 119
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A vertical black line moves left and right following the mouse's x-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a vertical line that follows the mouse's x-coordinate.
-      line(mouseX, 0, mouseX, 100);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A vertical black line moves left and right following the mouse's x-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let mx = mouseX - 50;
-
-      // Draw the line.
-      line(mx, -50, mx, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    // Load a font for WebGL mode.
-    function preload() {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      textFont(font);
-      fill(0);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# mouseX
diff --git a/src/content/reference/en/p5 copy/mouseY.mdx b/src/content/reference/en/p5 copy/mouseY.mdx
deleted file mode 100644
index dc268025a4..0000000000
--- a/src/content/reference/en/p5 copy/mouseY.mdx	
+++ /dev/null
@@ -1,124 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L226
-title: mouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's vertical
-  position.</p>
-
-  <p><code>mouseY</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. For example, if the mouse is 50 pixels from
-
-  the top edge of the canvas, then <code>mouseY</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>mouseY</code> will hold
-  the
-
-  y-coordinate of the most recent touch point.</p>
-line: 226
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A horizontal black line moves up and down following the mouse's y-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a horizontal line that follows the mouse's y-coordinate.
-      line(0, mouseY, 100, mouseY);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A horizontal black line moves up and down following the mouse's y-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let my = mouseY - 50;
-
-      // Draw the line.
-      line(-50, my, 50, my);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    // Load a font for WebGL mode.
-    function preload() {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      textFont(font);
-      fill(0);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# mouseY
diff --git a/src/content/reference/en/p5 copy/movedX.mdx b/src/content/reference/en/p5 copy/movedX.mdx
deleted file mode 100644
index 454b577166..0000000000
--- a/src/content/reference/en/p5 copy/movedX.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L12
-title: movedX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
-  movement.</p>
-
-  <p><code>movedX</code> tracks how many pixels the mouse moves left or right
-  between
-
-  frames. <code>movedX</code> will have a negative value if the mouse moves left
-  between
-
-  frames and a positive value if it moves right. <code>movedX</code> can be
-  calculated
-
-  as <code>mouseX - pmouseX</code>.</p>
-
-  <p>Note: <code>movedX</code> continues updating even when
-
-  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
-  active.
-
-  But keep in mind that during an active pointer lock, mouseX and pmouseX
-
-  are locked, so <code>movedX</code> is based on
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
-  MouseEvent's movementX value</a>
-
-  (which may behave differently in different browsers when the user
-
-  is zoomed in or out).</p>
-line: 12
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The text ">>" appears when the user moves the mouse to the right. The text "<<" appears when the user moves the mouse to the left.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display >> when movedX is positive and
-      // << when it's negative.
-      if (movedX > 0) {
-        text('>>', 50, 50);
-      } else if (movedX < 0) {
-        text('<<', 50, 50);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# movedX
diff --git a/src/content/reference/en/p5 copy/movedY.mdx b/src/content/reference/en/p5 copy/movedY.mdx
deleted file mode 100644
index 00f4a28d5b..0000000000
--- a/src/content/reference/en/p5 copy/movedY.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L62
-title: movedY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's vertical
-  movement.</p>
-
-  <p><code>movedY</code> tracks how many pixels the mouse moves up or down
-  between
-
-  frames. <code>movedY</code> will have a negative value if the mouse moves up
-  between
-
-  frames and a positive value if it moves down. <code>movedY</code> can be
-  calculated
-
-  as <code>mouseY - pmouseY</code>.</p>
-
-  <p>Note: <code>movedY</code> continues updating even when
-
-  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
-  active.
-
-  But keep in mind that during an active pointer lock, mouseX and pmouseX
-
-  are locked, so <code>movedX</code> is based on
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
-  MouseEvent's movementX value</a>
-
-  (which may behave differently in different browsers when the user
-
-  is zoomed in or out).</p>
-line: 62
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The text "▲" appears when the user moves the mouse upward. The text "▼" appears when the user moves the mouse downward.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display ▼ when movedY is positive and
-      // ▲ when it's negative.
-      if (movedY > 0) {
-        text('▼', 50, 50);
-      } else if (movedY < 0) {
-        text('▲', 50, 50);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# movedY
diff --git a/src/content/reference/en/p5 copy/nf.mdx b/src/content/reference/en/p5 copy/nf.mdx
deleted file mode 100644
index ab64244d9f..0000000000
--- a/src/content/reference/en/p5 copy/nf.mdx	
+++ /dev/null
@@ -1,159 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L199
-title: nf
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a <code>Number</code> into a <code>String</code> with a given
-  number of digits.</p>
-
-  <p><code>nf()</code> converts numbers such as <code>123.45</code> into strings
-  formatted with a set
-
-  number of digits, as in <code>'123.4500'</code>.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nf(123.45)</code> returns the string
-  <code>'123.45'</code>. If an array of
-
-  numbers is passed, as in <code>nf([123.45, 67.89])</code>, an array of
-  formatted
-
-  strings will be returned.</p>
-
-  <p>The second parameter, <code>left</code>, is optional. If a number is
-  passed, as in
-
-  <code>nf(123.45, 4)</code>, it sets the minimum number of digits to include to
-  the
-
-  left of the decimal place. If <code>left</code> is larger than the number of
-  digits in
-
-  <code>num</code>, then unused digits will be set to 0. For example, calling
-
-  <code>nf(123.45, 4)</code> returns the string <code>'0123.45'</code>.</p>
-
-  <p>The third parameter, <code>right</code>, is also optional. If a number is
-  passed, as
-
-  in <code>nf(123.45, 4, 1)</code>, it sets the minimum number of digits to
-  include to
-
-  the right of the decimal place. If <code>right</code> is smaller than the
-  number of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places. For example, calling <code>nf(123.45, 4, 1)</code> returns the
-  string
-
-  <code>'0123.5'</code>. If right is larger than the number of decimal places in
-  <code>num</code>,
-
-  then unused decimal places will be set to 0. For example, calling
-
-  <code>nf(123.45, 4, 3)</code> returns the string <code>'0123.450'</code>.</p>
-
-  <p>When the number is negative, for example, calling <code>nf(-123.45, 5,
-  2)</code>
-
-  returns the string <code>'-00123.45'</code>.</p>
-line: 199
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(16);
-
-      // Create a number variable.
-      let number = 123.45;
-
-      // Display the number as a string.
-      let formatted = nf(number);
-      text(formatted, 20, 20);
-
-      let negative = nf(-number, 4, 2);
-      text(negative, 20, 40);
-
-      // Display the number with four digits
-      // to the left of the decimal.
-      let left = nf(number, 4);
-      text(left, 20, 60);
-
-      // Display the number with four digits
-      // to the left of the decimal and one
-      // to the right.
-      let right = nf(number, 4, 1);
-      text(right, 20, 80);
-
-      describe(
-        'The numbers "123.45", "-0123.45", "0123.45", and "0123.5" written on four separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 199
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number|String
-      - name: left
-        description: |
-          <p>number of digits to include to the left of
-                                         the decimal point.</p>
-        type: Integer|String
-        optional: true
-      - name: right
-        description: |
-          <p>number of digits to include to the right
-                                          of the decimal point.</p>
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 276
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: 'Number[]'
-      - name: left
-        description: ''
-        type: Integer|String
-        optional: true
-      - name: right
-        description: ''
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nf
diff --git a/src/content/reference/en/p5 copy/nfc.mdx b/src/content/reference/en/p5 copy/nfc.mdx
deleted file mode 100644
index ba49f689fa..0000000000
--- a/src/content/reference/en/p5 copy/nfc.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L322
-title: nfc
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a <code>Number</code> into a <code>String</code> with commas to
-  mark units of 1,000.</p>
-
-  <p><code>nfc()</code> converts numbers such as 12345 into strings formatted
-  with commas
-
-  to mark the thousands place, as in <code>'12,345'</code>.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nfc(12345)</code> returns the string
-  <code>'12,345'</code>.</p>
-
-  <p>The second parameter, <code>right</code>, is optional. If a number is
-  passed, as in
-
-  <code>nfc(12345, 1)</code>, it sets the minimum number of digits to include to
-  the
-
-  right of the decimal place. If <code>right</code> is smaller than the number
-  of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places. For example, calling <code>nfc(12345.67, 1)</code> returns the
-  string
-
-  <code>'12,345.7'</code>. If <code>right</code> is larger than the number of
-  decimal places in
-
-  <code>num</code>, then unused decimal places will be set to 0. For example,
-  calling
-
-  <code>nfc(12345.67, 3)</code> returns the string
-  <code>'12,345.670'</code>.</p>
-line: 322
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(16);
-
-      // Create a number variable.
-      let number = 12345;
-
-      // Display the number as a string.
-      let commas = nfc(number);
-      text(commas, 15, 33);
-
-      // Display the number with four digits
-      // to the left of the decimal.
-      let decimals = nfc(number, 2);
-      text(decimals, 15, 67);
-
-      describe(
-        'The numbers "12,345" and "12,345.00" written on separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let numbers = [12345, 6789];
-
-      // Convert the numbers to formatted strings.
-      let formatted = nfc(numbers);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Iterate over the array.
-      for (let i = 0; i < formatted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 33;
-
-        // Display the original and formatted numbers.
-        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "12345 : 12,345" and "6789 : 6,789" written on two separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 322
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number|String
-      - name: right
-        description: |
-          <p>number of digits to include to the right
-                                           of the decimal point.</p>
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 411
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: 'Number[]'
-      - name: right
-        description: ''
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nfc
diff --git a/src/content/reference/en/p5 copy/nfp.mdx b/src/content/reference/en/p5 copy/nfp.mdx
deleted file mode 100644
index dbd80ca5d7..0000000000
--- a/src/content/reference/en/p5 copy/nfp.mdx	
+++ /dev/null
@@ -1,188 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L447
-title: nfp
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a <code>Number</code> into a <code>String</code> with a plus or
-  minus sign.</p>
-
-  <p><code>nfp()</code> converts numbers such as 123 into strings formatted with
-  a <code>+</code> or
-
-  <code>-</code> symbol to mark whether they're positive or negative, as in
-  <code>'+123'</code>.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nfp(123.45)</code> returns the string
-  <code>'+123.45'</code>. If an array
-
-  of numbers is passed, as in <code>nfp([123.45, -6.78])</code>, an array of
-  formatted
-
-  strings will be returned.</p>
-
-  <p>The second parameter, <code>left</code>, is optional. If a number is
-  passed, as in
-
-  <code>nfp(123.45, 4)</code>, it sets the minimum number of digits to include
-  to the
-
-  left of the decimal place. If <code>left</code> is larger than the number of
-  digits in
-
-  <code>num</code>, then unused digits will be set to 0. For example, calling
-
-  <code>nfp(123.45, 4)</code> returns the string <code>'+0123.45'</code>.</p>
-
-  <p>The third parameter, <code>right</code>, is also optional. If a number is
-  passed, as
-
-  in <code>nfp(123.45, 4, 1)</code>, it sets the minimum number of digits to
-  include to
-
-  the right of the decimal place. If <code>right</code> is smaller than the
-  number of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places.  For example, calling <code>nfp(123.45, 4, 1)</code> returns
-  the
-
-  string <code>'+0123.5'</code>. If <code>right</code> is larger than the number
-  of decimal places
-
-  in <code>num</code>, then unused decimal places will be set to 0.  For
-  example,
-
-  calling <code>nfp(123.45, 4, 3)</code> returns the string
-  <code>'+0123.450'</code>.</p>
-line: 447
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create number variables.
-      let positive = 123;
-      let negative = -123;
-
-      // Convert the positive number to a formatted string.
-      let p = nfp(positive);
-
-      // Convert the negative number to a formatted string
-      // with four digits to the left of the decimal
-      // and two digits to the right of the decimal.
-      let n = nfp(negative, 4, 2);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and formatted numbers.
-      text(`${positive} : ${p}`, 50, 33);
-      text(`${negative} : ${n}`, 50, 67);
-
-      describe(
-        'The text "123 : +123" and "-123 : -123.00" written on separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create number variables.
-      let numbers = [123, -4.56];
-
-      // Convert the numbers to formatted strings
-      // with four digits to the left of the decimal
-      // and one digit to the right of the decimal.
-      let formatted = nfp(numbers, 4, 1);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Iterate over the array.
-      for (let i = 0; i < formatted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 33;
-
-        // Display the original and formatted numbers.
-        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "123 : +0123.0" and "-4.56 : 00-4.6" written on separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 447
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number
-      - name: left
-        description: |
-          <p>number of digits to include to the left of the
-                                  decimal point.</p>
-        type: Integer
-        optional: true
-      - name: right
-        description: |
-          <p>number of digits to include to the right of the
-                                   decimal point.</p>
-        type: Integer
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 552
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: 'Number[]'
-      - name: left
-        description: ''
-        type: Integer
-        optional: true
-      - name: right
-        description: ''
-        type: Integer
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nfp
diff --git a/src/content/reference/en/p5 copy/nfs.mdx b/src/content/reference/en/p5 copy/nfs.mdx
deleted file mode 100644
index 80c144e391..0000000000
--- a/src/content/reference/en/p5 copy/nfs.mdx	
+++ /dev/null
@@ -1,176 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L573
-title: nfs
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a positive <code>Number</code> into a <code>String</code> with an
-  extra space in front.</p>
-
-  <p><code>nfs()</code> converts positive numbers such as 123.45 into strings
-  formatted
-
-  with an extra space in front, as in ' 123.45'. Doing so can be helpful for
-
-  aligning positive and negative numbers.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nfs(123.45)</code> returns the string <code>'
-  123.45'</code>.</p>
-
-  <p>The second parameter, <code>left</code>, is optional. If a number is
-  passed, as in
-
-  <code>nfs(123.45, 4)</code>, it sets the minimum number of digits to include
-  to the
-
-  left of the decimal place. If <code>left</code> is larger than the number of
-  digits in
-
-  <code>num</code>, then unused digits will be set to 0. For example, calling
-
-  <code>nfs(123.45, 4)</code> returns the string <code>' 0123.45'</code>.</p>
-
-  <p>The third parameter, <code>right</code>, is also optional. If a number is
-  passed, as
-
-  in <code>nfs(123.45, 4, 1)</code>, it sets the minimum number of digits to
-  include to
-
-  the right of the decimal place. If <code>right</code> is smaller than the
-  number of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places.  For example, calling <code>nfs(123.45, 4, 1)</code> returns
-  the
-
-  string <code>' 0123.5'</code>. If <code>right</code> is larger than the number
-  of decimal places
-
-  in <code>num</code>, then unused decimal places will be set to 0.  For
-  example,
-
-  calling <code>nfs(123.45, 4, 3)</code> returns the string <code>'
-  0123.450'</code>.</p>
-line: 573
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create number variables.
-      let positive = 123;
-      let negative = -123;
-
-      // Convert the positive number to a formatted string.
-      let formatted = nfs(positive);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display the negative number and the formatted positive number.
-      text(negative, 50, 33);
-      text(formatted, 50, 67);
-
-      describe(
-        'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let number = 123.45;
-
-      // Convert the positive number to a formatted string.
-      // Use four digits to the left of the decimal and
-      // one digit to the right.
-      let formatted = nfs(number, 4, 1);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display a negative version of the number and
-      // the formatted positive version.
-      text('-0123.5', 50, 33);
-      text(formatted, 50, 67);
-
-      describe(
-        'The numbers "-0123.5" and "0123.5" written on separate lines. The numbers align vertically. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 573
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number
-      - name: left
-        description: |
-          <p>number of digits to include to the left of the
-                                  decimal point.</p>
-        type: Integer
-        optional: true
-      - name: right
-        description: |
-          <p>number of digits to include to the right of the
-                                   decimal point.</p>
-        type: Integer
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 669
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: Array
-      - name: left
-        description: ''
-        type: Integer
-        optional: true
-      - name: right
-        description: ''
-        type: Integer
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nfs
diff --git a/src/content/reference/en/p5 copy/noCanvas.mdx b/src/content/reference/en/p5 copy/noCanvas.mdx
deleted file mode 100644
index 08fcdda5e5..0000000000
--- a/src/content/reference/en/p5 copy/noCanvas.mdx	
+++ /dev/null
@@ -1,36 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L346
-title: noCanvas
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Removes the default canvas.</p>
-
-  <p>By default, a 100×100 pixels canvas is created without needing to call
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.
-  <code>noCanvas()</code> removes the
-
-  default canvas for sketches that don't need it.</p>
-line: 346
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      noCanvas();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noCanvas
diff --git a/src/content/reference/en/p5 copy/noCursor.mdx b/src/content/reference/en/p5 copy/noCursor.mdx
deleted file mode 100644
index 37ac72c0cf..0000000000
--- a/src/content/reference/en/p5 copy/noCursor.mdx	
+++ /dev/null
@@ -1,38 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L482
-title: noCursor
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: |
-  <p>Hides the cursor from view.</p>
-line: 482
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Hide the cursor.
-      noCursor();
-    }
-
-    function draw() {
-      background(200);
-
-      circle(mouseX, mouseY, 10);
-
-      describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noCursor
diff --git a/src/content/reference/en/p5 copy/noDebugMode.mdx b/src/content/reference/en/p5 copy/noDebugMode.mdx
deleted file mode 100644
index 19d36eba2b..0000000000
--- a/src/content/reference/en/p5 copy/noDebugMode.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L725
-title: noDebugMode
-module: 3D
-submodule: Interaction
-file: src/webgl/interaction.js
-description: >
-  <p>Turns off <a href="/reference/p5/debugMode/">debugMode()</a> in a 3D
-  sketch.</p>
-line: 725
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      debugMode();
-
-      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.  box(20, 40);
-    }
-
-    // Disable debug mode when the user double-clicks.
-    function doubleClicked() {
-      noDebugMode();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noDebugMode
diff --git a/src/content/reference/en/p5 copy/noErase.mdx b/src/content/reference/en/p5 copy/noErase.mdx
deleted file mode 100644
index e959433b77..0000000000
--- a/src/content/reference/en/p5 copy/noErase.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1716
-title: noErase
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Ends erasing that was started with <a
-  href="/reference/p5/erase/">erase()</a>.</p>
-
-  <p>The <a href="/reference/p5/fill/">fill()</a>, <a
-  href="/reference/p5/stroke/">stroke()</a>, and
-
-  <a href="/reference/p5/blendMode/">blendMode()</a> settings will return to
-  what they
-
-  were prior to calling <a href="/reference/p5/erase/">erase()</a>.</p>
-line: 1716
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(235, 145, 15);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(30, 45, 220);
-      rect(30, 10, 10, 80);
-
-      // Erase a circle.
-      erase();
-      circle(50, 50, 60);
-      noErase();
-
-      // Draw the right rectangle.
-      rect(70, 10, 10, 80);
-
-      describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noErase
diff --git a/src/content/reference/en/p5 copy/noFill.mdx b/src/content/reference/en/p5 copy/noFill.mdx
deleted file mode 100644
index 67a3979778..0000000000
--- a/src/content/reference/en/p5 copy/noFill.mdx	
+++ /dev/null
@@ -1,73 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1257
-title: noFill
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Disables setting the fill color for shapes.</p>
-
-  <p>Calling <code>noFill()</code> is the same as making the fill completely
-  transparent,
-
-  as in <code>fill(0, 0)</code>. If both <a
-  href="/reference/p5/noStroke/">noStroke()</a> and
-
-  <code>noFill()</code> are called, nothing will be drawn to the screen.</p>
-line: 1257
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the top square.
-      square(32, 10, 35);
-
-      // Draw the bottom square.
-      noFill();
-      square(32, 55, 35);
-
-      describe('A white square on above an empty square. Both squares have black outlines.');
-    }
-    </code>
-    </div>
-
-    <div modernizr='webgl'>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A purple cube wireframe spinning on a black canvas.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the box.
-      noFill();
-      stroke(100, 100, 240);
-
-      // Rotate the coordinates.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Draw the box.
-      box(45);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noFill
diff --git a/src/content/reference/en/p5 copy/noLights.mdx b/src/content/reference/en/p5 copy/noLights.mdx
deleted file mode 100644
index 1f85888bf6..0000000000
--- a/src/content/reference/en/p5 copy/noLights.mdx	
+++ /dev/null
@@ -1,79 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1687
-title: noLights
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Removes all lights from the sketch.</p>
-
-  <p>Calling <code>noLights()</code> removes any lights created with
-
-  <a href="/reference/p5/lights/">lights()</a>,
-
-  <a href="/reference/p5/ambientLight/">ambientLight()</a>,
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>, or
-
-  <a href="/reference/p5/spotLight/">spotLight()</a>. These functions may be
-  called
-
-  after <code>noLights()</code> to create a new lighting scheme.</p>
-line: 1687
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw the top sphere.
-      push();
-      translate(0, -25, 0);
-      sphere(20);
-      pop();
-
-      // Turn off the lights.
-      noLights();
-
-      // Add a red directional light that points into the screen.
-      directionalLight(255, 0, 0, 0, 0, -1);
-
-      // Draw the bottom sphere.
-      push();
-      translate(0, 25, 0);
-      sphere(20);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noLights
diff --git a/src/content/reference/en/p5 copy/noLoop.mdx b/src/content/reference/en/p5 copy/noLoop.mdx
deleted file mode 100644
index fe1897a8cb..0000000000
--- a/src/content/reference/en/p5 copy/noLoop.mdx	
+++ /dev/null
@@ -1,139 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L9
-title: noLoop
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Stops the code in <a href="/reference/p5/draw/">draw()</a> from running
-  repeatedly.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <code>noLoop()</code> stops <a
-  href="/reference/p5/draw/">draw()</a> from
-
-  repeating. The draw loop can be restarted by calling
-
-  <a href="/reference/p5/loop/">loop()</a>. <a
-  href="/reference/p5/draw/">draw()</a> can be run
-
-  once by calling <a href="/reference/p5/redraw/">redraw()</a>.</p>
-
-  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
-  to check
-
-  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
-line: 9
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe('A white half-circle on the left edge of a gray square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's x-coordinate.
-      let x = frameCount;
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, 50, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click to stop the draw loop.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, y, 20);
-    }
-
-    // Stop the draw loop when the user double-clicks.
-    function doubleClicked() {
-      noLoop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let startButton;
-    let stopButton;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the button elements and place them
-      // beneath the canvas.
-      startButton = createButton('▶');
-      startButton.position(0, 100);
-      startButton.size(50, 20);
-      stopButton = createButton('◾');
-      stopButton.position(50, 100);
-      stopButton.size(50, 20);
-
-      // Set functions to call when the buttons are pressed.
-      startButton.mousePressed(loop);
-      stopButton.mousePressed(noLoop);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe(
-        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noLoop
diff --git a/src/content/reference/en/p5 copy/noSmooth.mdx b/src/content/reference/en/p5 copy/noSmooth.mdx
deleted file mode 100644
index a1af76d10d..0000000000
--- a/src/content/reference/en/p5 copy/noSmooth.mdx	
+++ /dev/null
@@ -1,92 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L100
-title: noSmooth
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Draws certain features with jagged (aliased) edges.</p>
-
-  <p><a href="/reference/p5/smooth/">smooth()</a> is active by default. In 2D
-  mode,
-
-  <code>noSmooth()</code> is helpful for scaling up images without blurring. The
-
-  functions don't affect shapes or fonts.</p>
-
-  <p>In WebGL mode, <code>noSmooth()</code> causes all shapes to be drawn with
-  jagged
-
-  (aliased) edges. The functions don't affect images or fonts.</p>
-line: 100
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let heart;
-
-    // Load a pixelated heart image from an image data string.
-    function preload() {
-      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Antialiased hearts.
-      image(heart, 10, 10);
-      image(heart, 20, 10, 16, 16);
-      image(heart, 40, 10, 32, 32);
-
-      // Aliased hearts.
-      noSmooth();
-      image(heart, 10, 60);
-      image(heart, 20, 60, 16, 16);
-      image(heart, 40, 60, 32, 32);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A white circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Disable smoothing.
-      noSmooth();
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A pixelated white circle on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noSmooth
diff --git a/src/content/reference/en/p5 copy/noStroke.mdx b/src/content/reference/en/p5 copy/noStroke.mdx
deleted file mode 100644
index 7c4fe80960..0000000000
--- a/src/content/reference/en/p5 copy/noStroke.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1317
-title: noStroke
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Disables drawing points, lines, and the outlines of shapes.</p>
-
-  <p>Calling <code>noStroke()</code> is the same as making the stroke completely
-  transparent,
-
-  as in <code>stroke(0, 0)</code>. If both <code>noStroke()</code> and
-
-  <a href="/reference/p5/noFill/">noFill()</a> are called, nothing will be drawn
-  to the
-
-  screen.</p>
-line: 1317
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      noStroke();
-      square(20, 20, 60);
-
-      describe('A white square with no outline.');
-    }
-    </code>
-    </div>
-
-    <div modernizr='webgl'>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A pink cube with no edge outlines spinning on a black canvas.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the box.
-      noStroke();
-      fill(240, 150, 150);
-
-      // Rotate the coordinates.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Draw the box.
-      box(45);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noStroke
diff --git a/src/content/reference/en/p5 copy/noTint.mdx b/src/content/reference/en/p5 copy/noTint.mdx
deleted file mode 100644
index e3b0aeea19..0000000000
--- a/src/content/reference/en/p5 copy/noTint.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1345
-title: noTint
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Removes the current tint set by <a
-  href="/reference/p5/tint/">tint()</a>.</p>
-
-  <p><code>noTint()</code> restores images to their original colors.</p>
-line: 1345
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left.
-      // Tint with a CSS color string.
-      tint('red');
-      image(img, 0, 0);
-
-      // Right.
-      // Remove the tint.
-      noTint();
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noTint
diff --git a/src/content/reference/en/p5 copy/noise.mdx b/src/content/reference/en/p5 copy/noise.mdx
deleted file mode 100644
index 1b67f49cb9..0000000000
--- a/src/content/reference/en/p5 copy/noise.mdx	
+++ /dev/null
@@ -1,282 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L36
-title: noise
-module: Math
-submodule: Noise
-file: src/math/noise.js
-description: >
-  <p>Returns random numbers that can be tuned to feel organic.</p>
-
-  <p>Values returned by <a href="/reference/p5/random/">random()</a> and
-
-  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> can change by
-  large
-
-  amounts between function calls. By contrast, values returned by
-  <code>noise()</code>
-
-  can be made "smooth". Calls to <code>noise()</code> with similar inputs will
-  produce
-
-  similar outputs. <code>noise()</code> is used to create textures, motion,
-  shapes,
-
-  terrains, and so on. Ken Perlin invented <code>noise()</code> while animating
-  the
-
-  original <em>Tron</em> film in the 1980s.</p>
-
-  <p><code>noise()</code> always returns values between 0 and 1. It returns the
-  same value
-
-  for a given input while a sketch is running. <code>noise()</code> produces
-  different
-
-  results each time a sketch runs. The
-
-  <a href="/reference/p5/noiseSeed/">noiseSeed()</a> function can be used to
-  generate
-
-  the same sequence of Perlin noise values each time a sketch runs.</p>
-
-  <p>The character of the noise can be adjusted in two ways. The first way is to
-
-  scale the inputs. <code>noise()</code> interprets inputs as coordinates. The
-  sequence
-
-  of noise values will be smoother when the input coordinates are closer. The
-
-  second way is to use the <a
-  href="/reference/p5/noiseDetail/">noiseDetail()</a>
-
-  function.</p>
-
-  <p>The version of <code>noise()</code> with one parameter computes noise
-  values in one
-
-  dimension. This dimension can be thought of as space, as in
-  <code>noise(x)</code>, or
-
-  time, as in <code>noise(t)</code>.</p>
-
-  <p>The version of <code>noise()</code> with two parameters computes noise
-  values in two
-
-  dimensions. These dimensions can be thought of as space, as in
-
-  <code>noise(x, y)</code>, or space and time, as in <code>noise(x,
-  t)</code>.</p>
-
-  <p>The version of <code>noise()</code> with three parameters computes noise
-  values in
-
-  three dimensions. These dimensions can be thought of as space, as in
-
-  <code>noise(x, y, z)</code>, or space and time, as in <code>noise(x, y,
-  t)</code>.</p>
-line: 36
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black dot moves randomly on a gray square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 100 * noise(0.005 * frameCount);
-      let y = 100 * noise(0.005 * frameCount + 10000);
-
-      // Draw the point.
-      strokeWeight(5);
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black dot moves randomly on a gray square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.005;
-
-      // Scale the input coordinate.
-      let nt = noiseScale * frameCount;
-
-      // Compute the noise values.
-      let x = noiseLevel * noise(nt);
-      let y = noiseLevel * noise(nt + 10000);
-
-      // Draw the point.
-      strokeWeight(5);
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A hilly terrain drawn in gray against a black sky.');
-    }
-
-    function draw() {
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.02;
-
-      // Scale the input coordinate.
-      let x = frameCount;
-      let nx = noiseScale * x;
-
-      // Compute the noise value.
-      let y = noiseLevel * noise(nx);
-
-      // Draw the line.
-      line(x, 0, x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A calm sea drawn in gray against a black sky.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.002;
-
-      // Iterate from left to right.
-      for (let x = 0; x < width; x += 1) {
-        // Scale the input coordinates.
-        let nx = noiseScale * x;
-        let nt = noiseScale * frameCount;
-
-        // Compute the noise value.
-        let y = noiseLevel * noise(nx, nt);
-
-        // Draw the line.
-        line(x, 0, x, y);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the noise level and scale.
-      let noiseLevel = 255;
-      let noiseScale = 0.01;
-
-      // Iterate from top to bottom.
-      for (let y = 0; y < height; y += 1) {
-        // Iterate from left to right.
-        for (let x = 0; x < width; x += 1) {
-          // Scale the input coordinates.
-          let nx = noiseScale * x;
-          let ny = noiseScale * y;
-
-          // Compute the noise value.
-          let c = noiseLevel * noise(nx, ny);
-
-          // Draw the point.
-          stroke(c);
-          point(x, y);
-        }
-      }
-
-      describe('A gray cloudy pattern.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray cloudy pattern that changes.');
-    }
-
-    function draw() {
-      // Set the noise level and scale.
-      let noiseLevel = 255;
-      let noiseScale = 0.009;
-
-      // Iterate from top to bottom.
-      for (let y = 0; y < height; y += 1) {
-        // Iterate from left to right.
-        for (let x = 0; x < width; x += 1) {
-          // Scale the input coordinates.
-          let nx = noiseScale * x;
-          let ny = noiseScale * y;
-          let nt = noiseScale * frameCount;
-
-          // Compute the noise value.
-          let c = noiseLevel * noise(nx, ny, nt);
-
-          // Draw the point.
-          stroke(c);
-          point(x, y);
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate in noise space.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate in noise space.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z-coordinate in noise space.</p>
-    type: Number
-    optional: true
-return:
-  description: Perlin noise value at specified coordinates.
-  type: Number
-chainable: false
----
-
-
-# noise
diff --git a/src/content/reference/en/p5 copy/noiseDetail.mdx b/src/content/reference/en/p5 copy/noiseDetail.mdx
deleted file mode 100644
index 973ac515ab..0000000000
--- a/src/content/reference/en/p5 copy/noiseDetail.mdx	
+++ /dev/null
@@ -1,100 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L331
-title: noiseDetail
-module: Math
-submodule: Noise
-file: src/math/noise.js
-description: >
-  <p>Adjusts the character of the noise produced by the
-
-  <a href="/reference/p5/noise/">noise()</a> function.</p>
-
-  <p>Perlin noise values are created by adding layers of noise together. The
-
-  noise layers, called octaves, are similar to harmonics in music. Lower
-
-  octaves contribute more to the output signal. They define the overall
-
-  intensity of the noise. Higher octaves create finer-grained details.</p>
-
-  <p>By default, noise values are created by combining four octaves. Each higher
-
-  octave contributes half as much (50% less) compared to its predecessor.
-
-  <code>noiseDetail()</code> changes the number of octaves and the falloff
-  amount. For
-
-  example, calling <code>noiseDetail(6, 0.25)</code> ensures that
-
-  <a href="/reference/p5/noise/">noise()</a> will use six octaves. Each higher
-  octave
-
-  will contribute 25% as much (75% less) compared to its predecessor. Falloff
-
-  values between 0 and 1 are valid. However, falloff values greater than 0.5
-
-  might result in noise values greater than 1.</p>
-line: 331
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Set the noise level and scale.
-      let noiseLevel = 255;
-      let noiseScale = 0.02;
-
-      // Iterate from top to bottom.
-      for (let y = 0; y < height; y += 1) {
-        // Iterate from left to right.
-        for (let x = 0; x < width / 2; x += 1) {
-          // Scale the input coordinates.
-          let nx = noiseScale * x;
-          let ny = noiseScale * y;
-
-          // Compute the noise value with six octaves
-          // and a low falloff factor.
-          noiseDetail(6, 0.25);
-          let c = noiseLevel * noise(nx, ny);
-
-          // Draw the left side.
-          stroke(c);
-          point(x, y);
-
-          // Compute the noise value with four octaves
-          // and a high falloff factor.
-          noiseDetail(4, 0.5);
-          c = noiseLevel * noise(nx, ny);
-
-          // Draw the right side.
-          stroke(c);
-          point(x + 50, y);
-        }
-      }
-
-      describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: lod
-    description: |
-      <p>number of octaves to be used by the noise.</p>
-    type: Number
-  - name: falloff
-    description: |
-      <p>falloff factor for each octave.</p>
-    type: Number
-chainable: false
----
-
-
-# noiseDetail
diff --git a/src/content/reference/en/p5 copy/noiseSeed.mdx b/src/content/reference/en/p5 copy/noiseSeed.mdx
deleted file mode 100644
index a1f2ce6fbd..0000000000
--- a/src/content/reference/en/p5 copy/noiseSeed.mdx	
+++ /dev/null
@@ -1,68 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L405
-title: noiseSeed
-module: Math
-submodule: Noise
-file: src/math/noise.js
-description: >
-  <p>Sets the seed value for the <a href="/reference/p5/noise/">noise()</a>
-  function.</p>
-
-  <p>By default, <a href="/reference/p5/noise/">noise()</a> produces different
-  results
-
-  each time a sketch is run. Calling <code>noiseSeed()</code> with a constant
-  argument,
-
-  such as <code>noiseSeed(99)</code>, makes <a
-  href="/reference/p5/noise/">noise()</a> produce the
-
-  same results each time a sketch is run.</p>
-line: 405
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the noise seed for consistent results.
-      noiseSeed(99);
-
-      describe('A black rectangle that grows randomly, first to the right and then to the left.');
-    }
-
-    function draw() {
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.005;
-
-      // Scale the input coordinate.
-      let nt = noiseScale * frameCount;
-
-      // Compute the noise value.
-      let x = noiseLevel * noise(nt);
-
-      // Draw the line.
-      line(x, 0, x, height);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: seed
-    description: |
-      <p>seed value.</p>
-    type: Number
-chainable: false
----
-
-
-# noiseSeed
diff --git a/src/content/reference/en/p5 copy/norm.mdx b/src/content/reference/en/p5 copy/norm.mdx
deleted file mode 100644
index d52a73e4c5..0000000000
--- a/src/content/reference/en/p5 copy/norm.mdx	
+++ /dev/null
@@ -1,69 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L772
-title: norm
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Maps a number from one range to a value between 0 and 1.</p>
-
-  <p>For example, <code>norm(2, 0, 10)</code> returns 0.2. 2's position in the
-  original
-
-  range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
-
-  is the same as calling <code>map(2, 0, 10, 0, 1)</code>.</p>
-
-  <p>Numbers outside of the original range are not constrained between 0 and 1.
-
-  Out-of-range values are often intentional and useful.</p>
-line: 772
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use RGB color with values from 0 to 1.
-      colorMode(RGB, 1);
-
-      describe('A square changes color from black to red as the mouse moves from left to right.');
-    }
-
-    function draw() {
-      // Calculate the redValue.
-      let redValue = norm(mouseX, 0, 100);
-
-      // Paint the background.
-      background(redValue, 0, 0);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>incoming value to be normalized.</p>
-    type: Number
-  - name: start
-    description: |
-      <p>lower bound of the value's current range.</p>
-    type: Number
-  - name: stop
-    description: |
-      <p>upper bound of the value's current range.</p>
-    type: Number
-return:
-  description: normalized number.
-  type: Number
-chainable: false
----
-
-
-# norm
diff --git a/src/content/reference/en/p5 copy/normal.mdx b/src/content/reference/en/p5 copy/normal.mdx
deleted file mode 100644
index a109745b80..0000000000
--- a/src/content/reference/en/p5 copy/normal.mdx	
+++ /dev/null
@@ -1,250 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L2097
-title: normal
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Sets the normal vector for vertices in a custom 3D shape.</p>
-
-  <p>3D shapes created with <a href="/reference/p5/beginShape/">beginShape()</a>
-  and
-
-  <a href="/reference/p5/endShape/">endShape()</a> are made by connecting sets
-  of
-
-  points called vertices. Each vertex added with
-
-  <a href="/reference/p5/vertex/">vertex()</a> has a normal vector that points
-  away
-
-  from it. The normal vector controls how light reflects off the shape.</p>
-
-  <p><code>normal()</code> can be called two ways with different parameters to
-  define the
-
-  normal vector's components.</p>
-
-  <p>The first way to call <code>normal()</code> has three parameters,
-  <code>x</code>, <code>y</code>, and <code>z</code>.
-
-  If <code>Number</code>s are passed, as in <code>normal(1, 2, 3)</code>, they
-  set the x-, y-, and
-
-  z-components of the normal vector.</p>
-
-  <p>The second way to call <code>normal()</code> has one parameter,
-  <code>vector</code>. If a
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object is passed, as in
-
-  <code>normal(myVector)</code>, its components will be used to set the normal
-  vector.</p>
-
-  <p><code>normal()</code> changes the normal vector of vertices added to a
-  custom shape
-
-  with <a href="/reference/p5/vertex/">vertex()</a>. <code>normal()</code> must
-  be called between
-
-  the <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions, just like
-
-  <a href="/reference/p5/vertex/">vertex()</a>. The normal vector set by calling
-
-  <code>normal()</code> will affect all following vertices until
-  <code>normal()</code> is called
-
-  again:</p>
-
-  <pre><code class="language-js">beginShape();
-
-
-  // Set the vertex normal.
-
-  normal(-0.4, -0.4, 0.8);
-
-
-  // Add a vertex.
-
-  vertex(-30, -30, 0);
-
-
-  // Set the vertex normal.
-
-  normal(0, 0, 1);
-
-
-  // Add vertices.
-
-  vertex(30, -30, 0);
-
-  vertex(30, 30, 0);
-
-
-  // Set the vertex normal.
-
-  normal(0.4, -0.4, 0.8);
-
-
-  // Add a vertex.
-
-  vertex(-30, 30, 0);
-
-
-  endShape();
-
-  </code></pre>
-line: 2097
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the shape.
-      normalMaterial();
-      noStroke();
-
-      // Draw the shape.
-      beginShape();
-      vertex(-30, -30, 0);
-      vertex(30, -30, 0);
-      vertex(30, 30, 0);
-      vertex(-30, 30, 0);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the shape.
-      normalMaterial();
-      noStroke();
-
-      // Draw the shape.
-      // Use normal() to set vertex normals.
-      beginShape();
-      normal(-0.4, -0.4, 0.8);
-      vertex(-30, -30, 0);
-
-      normal(0, 0, 1);
-      vertex(30, -30, 0);
-      vertex(30, 30, 0);
-
-      normal(0.4, -0.4, 0.8);
-      vertex(-30, 30, 0);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the shape.
-      normalMaterial();
-      noStroke();
-
-      // Create p5.Vector objects.
-      let n1 = createVector(-0.4, -0.4, 0.8);
-      let n2 = createVector(0, 0, 1);
-      let n3 = createVector(0.4, -0.4, 0.8);
-
-      // Draw the shape.
-      // Use normal() to set vertex normals.
-      beginShape();
-      normal(n1);
-      vertex(-30, -30, 0);
-
-      normal(n2);
-      vertex(30, -30, 0);
-      vertex(30, 30, 0);
-
-      normal(n3);
-      vertex(-30, 30, 0);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2097
-    params:
-      - name: vector
-        description: |
-          <p>vertex normal as a <a href="#/p5.Vector">p5.Vector</a> object.</p>
-        type: p5.Vector
-    chainable: 1
-  - line: 2272
-    params:
-      - name: x
-        description: |
-          <p>x-component of the vertex normal.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-component of the vertex normal.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-component of the vertex normal.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# normal
diff --git a/src/content/reference/en/p5 copy/normalMaterial.mdx b/src/content/reference/en/p5 copy/normalMaterial.mdx
deleted file mode 100644
index 0652b349d4..0000000000
--- a/src/content/reference/en/p5 copy/normalMaterial.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2365
-title: normalMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the current material as a normal material.</p>
-
-  <p>A normal material sets surfaces facing the x-axis to red, those facing the
-
-  y-axis to green, and those facing the z-axis to blue. Normal material isn't
-
-  affected by light. It’s often used as a placeholder material when
-  debugging.</p>
-
-  <p>Note: <code>normalMaterial()</code> can only be used in WebGL mode.</p>
-line: 2365
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor torus drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the torus.
-      normalMaterial();
-
-      // Draw the torus.
-      torus(30);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# normalMaterial
diff --git a/src/content/reference/en/p5 copy/orbitControl.mdx b/src/content/reference/en/p5 copy/orbitControl.mdx
deleted file mode 100644
index be2fd25452..0000000000
--- a/src/content/reference/en/p5 copy/orbitControl.mdx	
+++ /dev/null
@@ -1,203 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L11
-title: orbitControl
-module: 3D
-submodule: Interaction
-file: src/webgl/interaction.js
-description: >
-  <p>Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
-
-  touchscreen.</p>
-
-  <p>3D sketches are viewed through an imaginary camera. Calling
-
-  <code>orbitControl()</code> within the <a
-  href="/reference/p5/draw/">draw()</a> function allows
-
-  the user to change the camera’s position:</p>
-
-  <pre><code class="language-js">function draw() {
-    background(200);
-
-    // Enable orbiting with the mouse.
-    orbitControl();
-
-    // Rest of sketch.
-  }
-
-  </code></pre>
-
-  <p>Left-clicking and dragging or swipe motion will rotate the camera position
-
-  about the center of the sketch. Right-clicking and dragging or multi-swipe
-
-  will pan the camera position without rotation. Using the mouse wheel
-
-  (scrolling) or pinch in/out will move the camera further or closer from the
-
-  center of the sketch.</p>
-
-  <p>The first three parameters, <code>sensitivityX</code>,
-  <code>sensitivityY</code>, and
-
-  <code>sensitivityZ</code>, are optional. They’re numbers that set the sketch’s
-
-  sensitivity to movement along each axis. For example, calling
-
-  <code>orbitControl(1, 2, -1)</code> keeps movement along the x-axis at its
-  default
-
-  value, makes the sketch twice as sensitive to movement along the y-axis,
-
-  and reverses motion along the z-axis. By default, all sensitivity values
-
-  are 1.</p>
-
-  <p>The fourth parameter, <code>options</code>, is also optional. It’s an
-  object that
-
-  changes the behavior of orbiting. For example, calling
-
-  <code>orbitControl(1, 1, 1, options)</code> keeps the default sensitivity
-  values while
-
-  changing the behaviors set with <code>options</code>. The object can have the
-
-  following properties:</p>
-
-  <pre><code class="language-js">let options = {
-    // Setting this to false makes mobile interactions smoother by
-    // preventing accidental interactions with the page while orbiting.
-    // By default, it's true.
-    disableTouchActions: true,
-
-    // Setting this to true makes the camera always rotate in the
-    // direction the mouse/touch is moving.
-    // By default, it's false.
-    freeRotation: false
-  };
-
-
-  orbitControl(1, 1, 1, options);
-
-  </code></pre>
-line: 11
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      // Make the interactions 3X sensitive.
-      orbitControl(3, 3, 3);
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create an options object.
-      let options = {
-        disableTouchActions: false,
-        freeRotation: true
-      };
-
-      // Enable orbiting with the mouse.
-      // Prevent accidental touch actions on touchscreen devices
-      // and enable free rotation.
-      orbitControl(1, 1, 1, options);
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(30, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: sensitivityX
-    description: |
-      <p>sensitivity to movement along the x-axis. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: sensitivityY
-    description: |
-      <p>sensitivity to movement along the y-axis. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: sensitivityZ
-    description: |
-      <p>sensitivity to movement along the z-axis. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: options
-    description: |
-      <p>object with two optional properties, <code>disableTouchActions</code>
-                                 and <code>freeRotation</code>. Both are <code>Boolean</code>s. <code>disableTouchActions</code>
-                                 defaults to <code>true</code> and <code>freeRotation</code> defaults to <code>false</code>.</p>
-    type: Object
-    optional: true
-chainable: true
----
-
-
-# orbitControl
diff --git a/src/content/reference/en/p5 copy/ortho.mdx b/src/content/reference/en/p5 copy/ortho.mdx
deleted file mode 100644
index 5fb384ba48..0000000000
--- a/src/content/reference/en/p5 copy/ortho.mdx	
+++ /dev/null
@@ -1,168 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L412
-title: ortho
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets an orthographic projection for the current camera in a 3D sketch.</p>
-
-  <p>In an orthographic projection, shapes with the same size always appear the
-
-  same size, regardless of whether they are near or far from the camera.</p>
-
-  <p><code>ortho()</code> changes the camera’s perspective by changing its
-  viewing frustum
-
-  from a truncated pyramid to a rectangular prism. The camera is placed in
-
-  front of the frustum and views everything between the frustum’s near plane
-
-  and its far plane. <code>ortho()</code> has six optional parameters to define
-  the
-
-  frustum.</p>
-
-  <p>The first four parameters, <code>left</code>, <code>right</code>,
-  <code>bottom</code>, and <code>top</code>, set the
-
-  coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-  <code>ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
-  wide and
-
-  400 pixels tall. By default, these coordinates are set based on the
-
-  sketch’s width and height, as in
-
-  <code>ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>
-
-  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
-  distance of the
-
-  frustum’s near and far plane from the camera. For example, calling
-
-  <code>ortho(-100, 100, 200, 200, 50, 1000)</code> creates a frustum that’s 200
-  pixels
-
-  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
-
-  pixels from the camera. By default, <code>near</code> and <code>far</code> are
-  set to 0 and
-
-  <code>max(width, height) + 800</code>, respectively.</p>
-
-  <p>Note: <code>ortho()</code> can only be used in WebGL mode.</p>
-line: 412
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Apply an orthographic projection.
-      ortho();
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Apply an orthographic projection.
-      // Center the frustum.
-      // Set its width and height to 20.
-      // Place its near plane 300 pixels from the camera.
-      // Place its far plane 350 pixels from the camera.
-      ortho(-10, 10, -10, 10, 300, 350);
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: left
-    description: >
-      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: right
-    description: >
-      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: bottom
-    description: >
-      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: top
-    description: >
-      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: near
-    description: |
-      <p>z-coordinate of the frustum’s near plane. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: far
-    description: >
-      <p>z-coordinate of the frustum’s far plane. Defaults to <code>max(width,
-      height) + 800</code>.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# ortho
diff --git a/src/content/reference/en/p5 copy/outputVolume.mdx b/src/content/reference/en/p5 copy/outputVolume.mdx
deleted file mode 100644
index fe618922fb..0000000000
--- a/src/content/reference/en/p5 copy/outputVolume.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L738
-title: outputVolume
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |-
-  <p>Scale the output of all sound in this sketch</p>
-  Scaled between 0.0 (silence) and 1.0 (full volume).
-  1.0 is the maximum amplitude of a digital sound, so multiplying
-  by greater than 1.0 may cause digital distortion. To
-  fade, provide a <code>rampTime</code> parameter. For more
-  complex fades, see the Envelope class.
-
-  <p>Alternately, you can pass in a signal source such as an
-  oscillator to modulate the amplitude with an audio signal.</p>
-  <p><b>How This Works</b>: When you load the p5.sound module, it
-  creates a single instance of p5sound. All sound objects in this
-  module output to p5sound before reaching your computer's output.
-  So if you change the amplitude of p5sound, it impacts all of the
-  sound in this module.</p>
-
-  <p>If no value is provided, returns a Web Audio API Gain Node</p>
-line: 738
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: volume
-    description: |
-      <p>Volume (amplitude) between 0.0
-                                         and 1.0 or modulating signal/oscillator</p>
-    type: Number|Object
-  - name: rampTime
-    description: |
-      <p>Fade for t seconds</p>
-    type: Number
-    optional: true
-  - name: timeFromNow
-    description: |
-      <p>Schedule this event to happen at
-                                     t seconds in the future</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# outputVolume
diff --git a/src/content/reference/en/p5 copy/p5.Camera.mdx b/src/content/reference/en/p5 copy/p5.Camera.mdx
deleted file mode 100644
index cc2090e329..0000000000
--- a/src/content/reference/en/p5 copy/p5.Camera.mdx	
+++ /dev/null
@@ -1,659 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L723
-title: p5.Camera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>A class to describe a camera for viewing a 3D sketch.</p>
-
-  <p>Each <code>p5.Camera</code> object represents a camera that views a section
-  of 3D
-
-  space. It stores information about the camera’s position, orientation, and
-
-  projection.</p>
-
-  <p>In WebGL mode, the default camera is a <code>p5.Camera</code> object that
-  can be
-
-  controlled with the <a href="/reference/p5/camera/">camera()</a>,
-
-  <a href="/reference/p5/perspective/">perspective()</a>,
-
-  <a href="/reference/p5/ortho/">ortho()</a>, and
-
-  <a href="/reference/p5/frustum/">frustum()</a> functions. Additional cameras
-  can be
-
-  created with <a href="/reference/p5/createCamera/">createCamera()</a> and
-  activated
-
-  with <a href="/reference/p5/setCamera/">setCamera()</a>.</p>
-
-  <p>Note: <code>p5.Camera</code>’s methods operate in two coordinate
-  systems:</p>
-
-  <ul>
-
-  <li>The “world” coordinate system describes positions in terms of their
-
-  relationship to the origin along the x-, y-, and z-axes. For example,
-
-  calling <code>myCamera.setPosition()</code> places the camera in 3D space
-  using
-
-  "world" coordinates.</li>
-
-  <li>The "local" coordinate system describes positions from the camera's point
-
-  of view: left-right, up-down, and forward-backward. For example, calling
-
-  <code>myCamera.move()</code> moves the camera along its own axes.</li>
-
-  </ul>
-line: 723
-isConstructor: true
-params:
-  - name: rendererGL
-    description: |
-      <p>instance of WebGL renderer</p>
-    type: RendererGL
-example:
-  - |-
-
-    <div>
-    <code>
-    let cam;
-    let delta = 0.001;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Camera object.
-      cam = createCamera();
-
-      // Place the camera at the top-center.
-      cam.setPosition(0, -400, 800);
-
-      // Point the camera at the origin.
-      cam.lookAt(0, 0, 0);
-
-      describe(
-        'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn the camera left and right, called "panning".
-      cam.pan(delta);
-
-      // Switch directions every 120 frames.
-      if (frameCount % 120 === 0) {
-        delta *= -1;
-      }
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click to toggle between cameras.
-
-    let cam1;
-    let cam2;
-    let isDefaultCamera = true;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the first camera.
-      // Keep its default settings.
-      cam1 = createCamera();
-
-      // Create the second camera.
-      // Place it at the top-left.
-      // Point it at the origin.
-      cam2 = createCamera();
-      cam2.setPosition(400, -400, 800);
-      cam2.lookAt(0, 0, 0);
-
-      // Set the current camera to cam1.
-      setCamera(cam1);
-
-      describe(
-        'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the box.
-      box();
-    }
-
-    // Toggle the current camera when the user double-clicks.
-    function doubleClicked() {
-      if (isDefaultCamera === true) {
-        setCamera(cam2);
-        isDefaultCamera = false;
-      } else {
-        setCamera(cam1);
-        isDefaultCamera = true;
-      }
-    }
-    </code>
-    </div>
-methods:
-  perspective:
-    description: >
-      <p>Sets a perspective projection for the camera.</p>
-
-      <p>In a perspective projection, shapes that are further from the camera
-      appear
-
-      smaller than shapes that are near the camera. This technique, called
-
-      foreshortening, creates realistic 3D scenes. It’s applied by default in
-      new
-
-      <code>p5.Camera</code> objects.</p>
-
-      <p><code>myCamera.perspective()</code> changes the camera’s perspective by
-      changing its
-
-      viewing frustum. The frustum is the volume of space that’s visible to the
-
-      camera. The frustum’s shape is a pyramid with its top cut off. The camera
-
-      is placed where the top of the pyramid should be and points towards the
-
-      base of the pyramid. It views everything within the frustum.</p>
-
-      <p>The first parameter, <code>fovy</code>, is the camera’s vertical field
-      of view. It’s
-
-      an angle that describes how tall or narrow a view the camera has. For
-
-      example, calling <code>myCamera.perspective(0.5)</code> sets the camera’s
-      vertical
-
-      field of view to 0.5 radians. By default, <code>fovy</code> is calculated
-      based on the
-
-      sketch’s height and the camera’s default z-coordinate, which is 800. The
-
-      formula for the default <code>fovy</code> is <code>2 * atan(height / 2 /
-      800)</code>.</p>
-
-      <p>The second parameter, <code>aspect</code>, is the camera’s aspect
-      ratio. It’s a number
-
-      that describes the ratio of the top plane’s width to its height. For
-
-      example, calling <code>myCamera.perspective(0.5, 1.5)</code> sets the
-      camera’s field
-
-      of view to 0.5 radians and aspect ratio to 1.5, which would make shapes
-
-      appear thinner on a square canvas. By default, <code>aspect</code> is set
-      to
-
-      <code>width / height</code>.</p>
-
-      <p>The third parameter, <code>near</code>, is the distance from the camera
-      to the near
-
-      plane. For example, calling <code>myCamera.perspective(0.5, 1.5,
-      100)</code> sets the
-
-      camera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places
-
-      the near plane 100 pixels from the camera. Any shapes drawn less than 100
-
-      pixels from the camera won’t be visible. By default, <code>near</code> is
-      set to
-
-      <code>0.1 * 800</code>, which is 1/10th the default distance between the
-      camera and
-
-      the origin.</p>
-
-      <p>The fourth parameter, <code>far</code>, is the distance from the camera
-      to the far
-
-      plane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100,
-      10000)</code>
-
-      sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,
-
-      places the near plane 100 pixels from the camera, and places the far plane
-
-      10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels
-
-      from the camera won’t be visible. By default, <code>far</code> is set to
-      <code>10 * 800</code>,
-
-      which is 10 times the default distance between the camera and the
-      origin.</p>
-    path: p5.Camera/perspective
-  ortho:
-    description: >
-      <p>Sets an orthographic projection for the camera.</p>
-
-      <p>In an orthographic projection, shapes with the same size always appear
-      the
-
-      same size, regardless of whether they are near or far from the camera.</p>
-
-      <p><code>myCamera.ortho()</code> changes the camera’s perspective by
-      changing its viewing
-
-      frustum from a truncated pyramid to a rectangular prism. The frustum is
-      the
-
-      volume of space that’s visible to the camera. The camera is placed in
-      front
-
-      of the frustum and views everything within the frustum.
-      <code>myCamera.ortho()</code>
-
-      has six optional parameters to define the viewing frustum.</p>
-
-      <p>The first four parameters, <code>left</code>, <code>right</code>,
-      <code>bottom</code>, and <code>top</code>, set the
-
-      coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-      <code>myCamera.ortho(-100, 100, 200, -200)</code> creates a frustum that’s
-      200 pixels
-
-      wide and 400 pixels tall. By default, these dimensions are set based on
-
-      the sketch’s width and height, as in
-
-      <code>myCamera.ortho(-width / 2, width / 2, -height / 2, height /
-      2)</code>.</p>
-
-      <p>The last two parameters, <code>near</code> and <code>far</code>, set
-      the distance of the
-
-      frustum’s near and far plane from the camera. For example, calling
-
-      <code>myCamera.ortho(-100, 100, 200, -200, 50, 1000)</code> creates a
-      frustum that’s
-
-      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
-
-      ends 1,000 pixels from the camera. By default, <code>near</code> and
-      <code>far</code> are set to
-
-      0 and <code>max(width, height) + 800</code>, respectively.</p>
-    path: p5.Camera/ortho
-  frustum:
-    description: >
-      <p>Sets the camera's frustum.</p>
-
-      <p>In a frustum projection, shapes that are further from the camera appear
-
-      smaller than shapes that are near the camera. This technique, called
-
-      foreshortening, creates realistic 3D scenes.</p>
-
-      <p><code>myCamera.frustum()</code> changes the camera’s perspective by
-      changing its
-
-      viewing frustum. The frustum is the volume of space that’s visible to the
-
-      camera. The frustum’s shape is a pyramid with its top cut off. The camera
-
-      is placed where the top of the pyramid should be and points towards the
-
-      base of the pyramid. It views everything within the frustum.</p>
-
-      <p>The first four parameters, <code>left</code>, <code>right</code>,
-      <code>bottom</code>, and <code>top</code>, set the
-
-      coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-      <code>myCamera.frustum(-100, 100, 200, -200)</code> creates a frustum
-      that’s 200
-
-      pixels wide and 400 pixels tall. By default, these coordinates are set
-
-      based on the sketch’s width and height, as in
-
-      <code>myCamera.frustum(-width / 20, width / 20, height / 20, -height /
-      20)</code>.</p>
-
-      <p>The last two parameters, <code>near</code> and <code>far</code>, set
-      the distance of the
-
-      frustum’s near and far plane from the camera. For example, calling
-
-      <code>myCamera.frustum(-100, 100, 200, -200, 50, 1000)</code> creates a
-      frustum that’s
-
-      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
-      ends
-
-      1,000 pixels from the camera. By default, near is set to <code>0.1 *
-      800</code>, which
-
-      is 1/10th the default distance between the camera and the origin.
-      <code>far</code> is
-
-      set to <code>10 * 800</code>, which is 10 times the default distance
-      between the
-
-      camera and the origin.</p>
-    path: p5.Camera/frustum
-  roll:
-    description: >
-      <p>Rotates the camera in a clockwise/counter-clockwise direction.</p>
-
-      <p>Rolling rotates the camera without changing its orientation. The
-      rotation
-
-      happens in the camera’s "local" space.</p>
-
-      <p>The parameter, <code>angle</code>, is the angle the camera should
-      rotate. Passing a
-
-      positive angle, as in <code>myCamera.roll(0.001)</code>, rotates the
-      camera in counter-clockwise direction.
-
-      Passing a negative angle, as in <code>myCamera.roll(-0.001)</code>,
-      rotates the
-
-      camera in clockwise direction.</p>
-
-      <p>Note: Angles are interpreted based on the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Camera/roll
-  pan:
-    description: >
-      <p>Rotates the camera left and right.</p>
-
-      <p>Panning rotates the camera without changing its position. The rotation
-
-      happens in the camera’s "local" space.</p>
-
-      <p>The parameter, <code>angle</code>, is the angle the camera should
-      rotate. Passing a
-
-      positive angle, as in <code>myCamera.pan(0.001)</code>, rotates the camera
-      to the
-
-      right. Passing a negative angle, as in <code>myCamera.pan(-0.001)</code>,
-      rotates the
-
-      camera to the left.</p>
-
-      <p>Note: Angles are interpreted based on the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Camera/pan
-  tilt:
-    description: >
-      <p>Rotates the camera up and down.</p>
-
-      <p>Tilting rotates the camera without changing its position. The rotation
-
-      happens in the camera’s "local" space.</p>
-
-      <p>The parameter, <code>angle</code>, is the angle the camera should
-      rotate. Passing a
-
-      positive angle, as in <code>myCamera.tilt(0.001)</code>, rotates the
-      camera down.
-
-      Passing a negative angle, as in <code>myCamera.tilt(-0.001)</code>,
-      rotates the camera
-
-      up.</p>
-
-      <p>Note: Angles are interpreted based on the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Camera/tilt
-  lookAt:
-    description: >
-      <p>Points the camera at a location.</p>
-
-      <p><code>myCamera.lookAt()</code> changes the camera’s orientation without
-      changing its
-
-      position.</p>
-
-      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
-      the coordinates in "world" space
-
-      where the camera should point. For example, calling
-
-      <code>myCamera.lookAt(10, 20, 30)</code> points the camera at the
-      coordinates
-
-      <code>(10, 20, 30)</code>.</p>
-    path: p5.Camera/lookAt
-  camera:
-    description: >
-      <p>Sets the position and orientation of the camera.</p>
-
-      <p><code>myCamera.camera()</code> allows objects to be viewed from
-      different angles. It
-
-      has nine parameters that are all optional.</p>
-
-      <p>The first three parameters, <code>x</code>, <code>y</code>, and
-      <code>z</code>, are the coordinates of the
-
-      camera’s position in "world" space. For example, calling
-
-      <code>myCamera.camera(0, 0, 0)</code> places the camera at the origin
-      <code>(0, 0, 0)</code>. By
-
-      default, the camera is placed at <code>(0, 0, 800)</code>.</p>
-
-      <p>The next three parameters, <code>centerX</code>, <code>centerY</code>,
-      and <code>centerZ</code> are the
-
-      coordinates of the point where the camera faces in "world" space. For
-
-      example, calling <code>myCamera.camera(0, 0, 0, 10, 20, 30)</code> places
-      the camera
-
-      at the origin <code>(0, 0, 0)</code> and points it at <code>(10, 20,
-      30)</code>. By default, the
-
-      camera points at the origin <code>(0, 0, 0)</code>.</p>
-
-      <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
-      <code>upZ</code> are the components of
-
-      the "up" vector in "local" space. The "up" vector orients the camera’s
-
-      y-axis. For example, calling
-
-      <code>myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the
-      camera at the
-
-      origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
-      sets the "up" vector
-
-      to <code>(0, -1, 0)</code> which is like holding it upside-down. By
-      default, the "up"
-
-      vector is <code>(0, 1, 0)</code>.</p>
-    path: p5.Camera/camera
-  move:
-    description: >
-      <p>Moves the camera along its "local" axes without changing its
-      orientation.</p>
-
-      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
-      the distances the camera should
-
-      move. For example, calling <code>myCamera.move(10, 20, 30)</code> moves
-      the camera 10
-
-      pixels to the right, 20 pixels down, and 30 pixels backward in its "local"
-
-      space.</p>
-    path: p5.Camera/move
-  setPosition:
-    description: >
-      <p>Sets the camera’s position in "world" space without changing its
-
-      orientation.</p>
-
-      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
-      the coordinates where the camera
-
-      should be placed. For example, calling <code>myCamera.setPosition(10, 20,
-      30)</code>
-
-      places the camera at coordinates <code>(10, 20, 30)</code> in "world"
-      space.</p>
-    path: p5.Camera/setPosition
-  set:
-    description: >
-      <p>Sets the camera’s position, orientation, and projection by copying
-      another
-
-      camera.</p>
-
-      <p>The parameter, <code>cam</code>, is the <code>p5.Camera</code> object
-      to copy. For example, calling
-
-      <code>cam2.set(cam1)</code> will set <code>cam2</code> using
-      <code>cam1</code>’s configuration.</p>
-    path: p5.Camera/set
-  slerp:
-    description: >
-      <p>Sets the camera’s position and orientation to values that are
-      in-between
-
-      those of two other cameras.</p>
-
-      <p><code>myCamera.slerp()</code> uses spherical linear interpolation to
-      calculate a
-
-      position and orientation that’s in-between two other cameras. Doing so is
-
-      helpful for transitioning smoothly between two perspectives.</p>
-
-      <p>The first two parameters, <code>cam0</code> and <code>cam1</code>, are
-      the <code>p5.Camera</code> objects
-
-      that should be used to set the current camera.</p>
-
-      <p>The third parameter, <code>amt</code>, is the amount to interpolate
-      between <code>cam0</code> and
-
-      <code>cam1</code>. 0.0 keeps the camera’s position and orientation equal
-      to <code>cam0</code>’s,
-
-      0.5 sets them halfway between <code>cam0</code>’s and <code>cam1</code>’s
-      , and 1.0 sets the
-
-      position and orientation equal to <code>cam1</code>’s.</p>
-
-      <p>For example, calling <code>myCamera.slerp(cam0, cam1, 0.1)</code> sets
-      cam’s position
-
-      and orientation very close to <code>cam0</code>’s. Calling
-
-      <code>myCamera.slerp(cam0, cam1, 0.9)</code> sets cam’s position and
-      orientation very
-
-      close to <code>cam1</code>’s.</p>
-
-      <p>Note: All of the cameras must use the same projection.</p>
-    path: p5.Camera/slerp
-properties:
-  eyeX:
-    description: |
-      <p>The camera’s x-coordinate.</p>
-      <p>By default, the camera’s x-coordinate is set to 0 in "world" space.</p>
-    path: p5.Camera/eyeX
-  eyeY:
-    description: |
-      <p>The camera’s y-coordinate.</p>
-      <p>By default, the camera’s y-coordinate is set to 0 in "world" space.</p>
-    path: p5.Camera/eyeY
-  eyeZ:
-    description: >
-      <p>The camera’s z-coordinate.</p>
-
-      <p>By default, the camera’s z-coordinate is set to 800 in "world"
-      space.</p>
-    path: p5.Camera/eyeZ
-  centerX:
-    description: >
-      <p>The x-coordinate of the place where the camera looks.</p>
-
-      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
-      "world" space, so
-
-      <code>myCamera.centerX</code> is 0.</p>
-    path: p5.Camera/centerX
-  centerY:
-    description: >
-      <p>The y-coordinate of the place where the camera looks.</p>
-
-      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
-      "world" space, so
-
-      <code>myCamera.centerY</code> is 0.</p>
-    path: p5.Camera/centerY
-  centerZ:
-    description: >
-      <p>The y-coordinate of the place where the camera looks.</p>
-
-      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
-      "world" space, so
-
-      <code>myCamera.centerZ</code> is 0.</p>
-    path: p5.Camera/centerZ
-  upX:
-    description: >
-      <p>The x-component of the camera's "up" vector.</p>
-
-      <p>The camera's "up" vector orients its y-axis. By default, the "up"
-      vector is
-
-      <code>(0, 1, 0)</code>, so its x-component is 0 in "local" space.</p>
-    path: p5.Camera/upX
-  upY:
-    description: >
-      <p>The y-component of the camera's "up" vector.</p>
-
-      <p>The camera's "up" vector orients its y-axis. By default, the "up"
-      vector is
-
-      <code>(0, 1, 0)</code>, so its y-component is 1 in "local" space.</p>
-    path: p5.Camera/upY
-  upZ:
-    description: >
-      <p>The z-component of the camera's "up" vector.</p>
-
-      <p>The camera's "up" vector orients its y-axis. By default, the "up"
-      vector is
-
-      <code>(0, 1, 0)</code>, so its z-component is 0 in "local" space.</p>
-    path: p5.Camera/upZ
-chainable: false
----
-
-
-# p5.Camera
diff --git a/src/content/reference/en/p5 copy/p5.Color.mdx b/src/content/reference/en/p5 copy/p5.Color.mdx
deleted file mode 100644
index b804e5ee95..0000000000
--- a/src/content/reference/en/p5 copy/p5.Color.mdx	
+++ /dev/null
@@ -1,116 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/p5.Color.js#L318
-title: p5.Color
-module: Color
-submodule: Creating & Reading
-file: src/color/p5.Color.js
-description: >
-  <p>A class to describe a color.</p>
-
-  <p>Each <code>p5.Color</code> object stores the color mode
-
-  and level maxes that were active during its construction. These values are
-
-  used to interpret the arguments passed to the object's constructor. They
-
-  also determine output formatting such as when
-
-  <a href="/reference/p5/saturation/">saturation()</a> is called.</p>
-
-  <p>Color is stored internally as an array of ideal RGBA values in floating
-
-  point form, normalized from 0 to 1. These values are used to calculate the
-
-  closest screen colors, which are RGBA levels from 0 to 255. Screen colors
-
-  are sent to the renderer.</p>
-
-  <p>When different color representations are calculated, the results are cached
-
-  for performance. These values are normalized, floating-point numbers.</p>
-
-  <p>Note: <a href="/reference/p5/color/">color()</a> is the recommended way to
-  create an
-
-  instance of this class.</p>
-line: 318
-isConstructor: true
-params:
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance.</p>
-    type: P5
-    optional: true
-  - name: vals
-    description: |
-      <p>an array containing the color values
-                                               for red, green, blue and alpha channel
-                                               or CSS color.</p>
-    type: 'Number[]|String'
-methods:
-  toString:
-    description: >
-      <p>Returns the color formatted as a <code>String</code>.</p>
-
-      <p>Calling <code>myColor.toString()</code> can be useful for debugging, as
-      in
-
-      <code>print(myColor.toString())</code>. It's also helpful for using p5.js
-      with other
-
-      libraries.</p>
-
-      <p>The parameter, <code>format</code>, is optional. If a format string is
-      passed, as in
-
-      <code>myColor.toString('#rrggbb')</code>, it will determine how the color
-      string is
-
-      formatted. By default, color strings are formatted as <code>'rgba(r, g, b,
-      a)'</code>.</p>
-    path: p5.Color/toString
-  setRed:
-    description: >
-      <p>Sets the red component of a color.</p>
-
-      <p>The range depends on the <a
-      href="/reference/p5/colorMode/">colorMode()</a>. In the
-
-      default RGB mode it's between 0 and 255.</p>
-    path: p5.Color/setRed
-  setGreen:
-    description: >
-      <p>Sets the green component of a color.</p>
-
-      <p>The range depends on the <a
-      href="/reference/p5/colorMode/">colorMode()</a>. In the
-
-      default RGB mode it's between 0 and 255.</p>
-    path: p5.Color/setGreen
-  setBlue:
-    description: >
-      <p>Sets the blue component of a color.</p>
-
-      <p>The range depends on the <a
-      href="/reference/p5/colorMode/">colorMode()</a>. In the
-
-      default RGB mode it's between 0 and 255.</p>
-    path: p5.Color/setBlue
-  setAlpha:
-    description: >
-      <p>Sets the alpha (transparency) value of a color.</p>
-
-      <p>The range depends on the
-
-      <a href="/reference/p5/colorMode/">colorMode()</a>. In the default RGB
-      mode it's
-
-      between 0 and 255.</p>
-    path: p5.Color/setAlpha
-chainable: false
----
-
-
-# p5.Color
diff --git a/src/content/reference/en/p5 copy/p5.Element.mdx b/src/content/reference/en/p5 copy/p5.Element.mdx
deleted file mode 100644
index c07b10ae79..0000000000
--- a/src/content/reference/en/p5 copy/p5.Element.mdx	
+++ /dev/null
@@ -1,545 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Element.js#L9
-title: p5.Element
-module: DOM
-submodule: DOM
-file: src/core/p5.Element.js
-description: >
-  <p>A class to describe an
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/"
-  target="_blank">HTML element</a>.</p>
-
-  <p>Sketches can use many elements. Common elements include the drawing canvas,
-
-  buttons, sliders, webcam feeds, and so on.</p>
-
-  <p>All elements share the methods of the <code>p5.Element</code> class.
-  They're created
-
-  with functions such as <a
-  href="/reference/p5/createCanvas/">createCanvas()</a> and
-
-  <a href="/reference/p5/createButton/">createButton()</a>.</p>
-line: 9
-isConstructor: true
-params:
-  - name: elt
-    description: |
-      <p>wrapped DOM element.</p>
-    type: HTMLElement
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance.</p>
-    type: P5
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a button element and
-      // place it beneath the canvas.
-      let btn = createButton('change');
-      btn.position(0, 100);
-
-      // Call randomColor() when
-      // the button is pressed.
-      btn.mousePressed(randomColor);
-
-      describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
-    }
-
-    // Paint the background either
-    // red, yellow, blue, or green.
-    function randomColor() {
-      let c = random(['red', 'yellow', 'blue', 'green']);
-      background(c);
-    }
-    </code>
-    </div>
-methods:
-  parent:
-    description: >
-      <p>Attaches the element to a parent element.</p>
-
-      <p>For example, a <code><div></div></code> element may be used as a box to
-
-      hold two pieces of text, a header and a paragraph. The
-
-      <code><div></div></code> is the parent element of both the header and
-
-      paragraph.</p>
-
-      <p>The parameter <code>parent</code> can have one of three types.
-      <code>parent</code> can be a
-
-      string with the parent element's ID, as in
-
-      <code>myElement.parent('container')</code>. It can also be another
-
-      <a href="/reference/p5/p5.Element">p5.Element</a> object, as in
-
-      <code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be
-      an <code>HTMLElement</code>
-
-      object, as in <code>myElement.parent(anotherElement)</code>.</p>
-
-      <p>Calling <code>myElement.parent()</code> without an argument returns the
-      element's
-
-      parent.</p>
-    path: p5.Element/parent
-  id:
-    description: >
-      <p>Sets the element's ID using a given string.</p>
-
-      <p>Calling <code>myElement.id()</code> without an argument returns its ID
-      as a string.</p>
-    path: p5.Element/id
-  class:
-    description: >
-      <p>Adds a
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class/"
-      target="_blank">class attribute</a>
-
-      to the element using a given string.</p>
-
-      <p>Calling <code>myElement.class()</code> without an argument returns a
-      string with its current classes.</p>
-    path: p5.Element/class
-  mousePressed:
-    description: >
-      <p>Calls a function when the mouse is pressed over the element.</p>
-
-      <p>Calling <code>myElement.mousePressed(false)</code> disables the
-      function.</p>
-
-      <p>Note: Some mobile browsers may also trigger this event when the element
-
-      receives a quick tap.</p>
-    path: p5.Element/mousePressed
-  doubleClicked:
-    description: >
-      <p>Calls a function when the mouse is pressed twice over the element.</p>
-
-      <p>Calling <code>myElement.doubleClicked(false)</code> disables the
-      function.</p>
-    path: p5.Element/doubleClicked
-  mouseWheel:
-    description: >
-      <p>Calls a function when the mouse wheel scrolls over the element.</p>
-
-      <p>The callback function, <code>fxn</code>, is passed an
-      <code>event</code> object. <code>event</code> has
-
-      two numeric properties, <code>deltaY</code> and <code>deltaX</code>.
-      <code>event.deltaY</code> is
-
-      negative if the mouse wheel rotates away from the user. It's positive if
-
-      the mouse wheel rotates toward the user. <code>event.deltaX</code> is
-      positive if
-
-      the mouse wheel moves to the right. It's negative if the mouse wheel moves
-
-      to the left.</p>
-
-      <p>Calling <code>myElement.mouseWheel(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseWheel
-  mouseReleased:
-    description: >
-      <p>Calls a function when the mouse is released over the element.</p>
-
-      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
-      function.</p>
-
-      <p>Note: Some mobile browsers may also trigger this event when the element
-
-      receives a quick tap.</p>
-    path: p5.Element/mouseReleased
-  mouseClicked:
-    description: >
-      <p>Calls a function when the mouse is pressed and released over the
-      element.</p>
-
-      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
-      function.</p>
-
-      <p>Note: Some mobile browsers may also trigger this event when the element
-
-      receives a quick tap.</p>
-    path: p5.Element/mouseClicked
-  mouseMoved:
-    description: >
-      <p>Calls a function when the mouse moves over the element.</p>
-
-      <p>Calling <code>myElement.mouseMoved(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseMoved
-  mouseOver:
-    description: >
-      <p>Calls a function when the mouse moves onto the element.</p>
-
-      <p>Calling <code>myElement.mouseOver(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseOver
-  mouseOut:
-    description: >
-      <p>Calls a function when the mouse moves off the element.</p>
-
-      <p>Calling <code>myElement.mouseOut(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseOut
-  touchStarted:
-    description: >
-      <p>Calls a function when the element is touched.</p>
-
-      <p>Calling <code>myElement.touchStarted(false)</code> disables the
-      function.</p>
-
-      <p>Note: Touch functions only work on mobile devices.</p>
-    path: p5.Element/touchStarted
-  touchMoved:
-    description: >
-      <p>Calls a function when the user touches the element and moves.</p>
-
-      <p>Calling <code>myElement.touchMoved(false)</code> disables the
-      function.</p>
-
-      <p>Note: Touch functions only work on mobile devices.</p>
-    path: p5.Element/touchMoved
-  touchEnded:
-    description: >
-      <p>Calls a function when the user stops touching the element.</p>
-
-      <p>Calling <code>myElement.touchMoved(false)</code> disables the
-      function.</p>
-
-      <p>Note: Touch functions only work on mobile devices.</p>
-    path: p5.Element/touchEnded
-  dragOver:
-    description: >
-      <p>Calls a function when a file is dragged over the element.</p>
-
-      <p>Calling <code>myElement.dragOver(false)</code> disables the
-      function.</p>
-    path: p5.Element/dragOver
-  dragLeave:
-    description: >
-      <p>Calls a function when a file is dragged off the element.</p>
-
-      <p>Calling <code>myElement.dragLeave(false)</code> disables the
-      function.</p>
-    path: p5.Element/dragLeave
-  addClass:
-    description: |
-      <p>Adds a class to the element.</p>
-    path: p5.Element/addClass
-  removeClass:
-    description: |
-      <p>Removes a class from the element.</p>
-    path: p5.Element/removeClass
-  hasClass:
-    description: |
-      <p>Checks if a class is already applied to element.</p>
-    path: p5.Element/hasClass
-  toggleClass:
-    description: |
-      <p>Toggles whether a class is applied to the element.</p>
-    path: p5.Element/toggleClass
-  child:
-    description: >
-      <p>Attaches the element as a child of another element.</p>
-
-      <p><code>myElement.child()</code> accepts either a string ID, DOM node, or
-
-      <a href="/reference/p5/p5.Element">p5.Element</a>. For example,
-
-      <code>myElement.child(otherElement)</code>. If no argument is provided, an
-      array of
-
-      children DOM nodes is returned.</p>
-    path: p5.Element/child
-  center:
-    description: >
-      <p>Centers the element either vertically, horizontally, or both.</p>
-
-      <p><code>center()</code> will center the element relative to its parent or
-      according to
-
-      the page's body if the element has no parent.</p>
-
-      <p>If no argument is passed, as in <code>myElement.center()</code> the
-      element is aligned
-
-      both vertically and horizontally.</p>
-    path: p5.Element/center
-  html:
-    description: >
-      <p>Sets the inner HTML of the element, replacing any existing HTML.</p>
-
-      <p>The second parameter, <code>append</code>, is optional. If
-      <code>true</code> is passed, as in
-
-      <code>myElement.html('hi', true)</code>, the HTML is appended instead of
-      replacing
-
-      existing HTML.</p>
-
-      <p>If no arguments are passed, as in <code>myElement.html()</code>, the
-      element's inner
-
-      HTML is returned.</p>
-    path: p5.Element/html
-  position:
-    description: >
-      <p>Sets the element's position.</p>
-
-      <p>The first two parameters, <code>x</code> and <code>y</code>, set the
-      element's position relative
-
-      to the top-left corner of the web page.</p>
-
-      <p>The third parameter, <code>positionType</code>, is optional. It sets
-      the element's
-
-      <a target="_blank"
-      href="https://developer.mozilla.org/en-US/docs/Web/CSS/position/">positioning
-      scheme</a>.
-
-      <code>positionType</code> is a string that can be either
-      <code>'static'</code>, <code>'fixed'</code>,
-
-      <code>'relative'</code>, <code>'sticky'</code>, <code>'initial'</code>, or
-      <code>'inherit'</code>.</p>
-
-      <p>If no arguments passed, as in <code>myElement.position()</code>, the
-      method returns
-
-      the element's position in an object, as in <code>{ x: 0, y: 0
-      }</code>.</p>
-    path: p5.Element/position
-  style:
-    description: >
-      <p>Applies a style to the element by adding a
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax/"
-      target="_blank">CSS declaration</a>.</p>
-
-      <p>The first parameter, <code>property</code>, is a string. If the name of
-      a style
-
-      property is passed, as in <code>myElement.style('color')</code>, the
-      method returns
-
-      the current value as a string or <code>null</code> if it hasn't been set.
-      If a
-
-      <code>property:style</code> string is passed, as in
-
-      <code>myElement.style('color:deeppink')</code>, the method sets the style
-      <code>property</code>
-
-      to <code>value</code>.</p>
-
-      <p>The second parameter, <code>value</code>, is optional. It sets the
-      property's value.
-
-      <code>value</code> can be a string, as in
-
-      <code>myElement.style('color', 'deeppink')</code>, or a
-
-      <a href="/reference/p5/p5.Color">p5.Color</a> object, as in
-
-      <code>myElement.style('color', myColor)</code>.</p>
-    path: p5.Element/style
-  attribute:
-    description: >
-      <p>Adds an
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes"
-      target="_blank">attribute</a>
-
-      to the element.</p>
-
-      <p>This method is useful for advanced tasks. Most commonly-used
-      attributes,
-
-      such as <code>id</code>, can be set with their dedicated methods. For
-      example,
-
-      <code>nextButton.id('next')</code> sets an element's <code>id</code>
-      attribute. Calling
-
-      <code>nextButton.attribute('id', 'next')</code> has the same effect.</p>
-
-      <p>The first parameter, <code>attr</code>, is the attribute's name as a
-      string. Calling
-
-      <code>myElement.attribute('align')</code> returns the attribute's current
-      value as a
-
-      string or <code>null</code> if it hasn't been set.</p>
-
-      <p>The second parameter, <code>value</code>, is optional. It's a string
-      used to set the
-
-      attribute's value. For example, calling
-
-      <code>myElement.attribute('align', 'center')</code> sets the element's
-      horizontal
-
-      alignment to <code>center</code>.</p>
-    path: p5.Element/attribute
-  removeAttribute:
-    description: >
-      <p>Removes an attribute from the element.</p>
-
-      <p>The parameter <code>attr</code> is the attribute's name as a string.
-      For example,
-
-      calling <code>myElement.removeAttribute('align')</code> removes its
-      <code>align</code>
-
-      attribute if it's been set.</p>
-    path: p5.Element/removeAttribute
-  value:
-    description: >
-      <p>Returns or sets the element's value.</p>
-
-      <p>Calling <code>myElement.value()</code> returns the element's current
-      value.</p>
-
-      <p>The parameter, <code>value</code>, is an optional number or string. If
-      provided,
-
-      as in <code>myElement.value(123)</code>, it's used to set the element's
-      value.</p>
-    path: p5.Element/value
-  show:
-    description: |
-      <p>Shows the current element.</p>
-    path: p5.Element/show
-  hide:
-    description: |
-      <p>Hides the current element.</p>
-    path: p5.Element/hide
-  size:
-    description: >
-      <p>Sets the element's width and height.</p>
-
-      <p>Calling <code>myElement.size()</code> without an argument returns the
-      element's size
-
-      as an object with the properties <code>width</code> and
-      <code>height</code>. For example,
-       <code>{ width: 20, height: 10 }</code>.</p>
-      <p>The first parameter, <code>width</code>, is optional. It's a number
-      used to set the
-
-      element's width. Calling <code>myElement.size(10)</code></p>
-
-      <p>The second parameter, 'height<code>, is also optional. It's a number
-      used to set the element's height. For example, calling
-      </code>myElement.size(20, 10)` sets the element's width to 20 pixels and
-      height
-
-      to 10 pixels.</p>
-
-      <p>The constant <code>AUTO</code> can be used to adjust one dimension at a
-      time while
-
-      maintaining the aspect ratio, which is <code>width / height</code>. For
-      example,
-
-      consider an element that's 200 pixels wide and 100 pixels tall. Calling
-
-      <code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and
-      height to 10
-
-      pixels.</p>
-
-      <p>Note: In the case of elements that need to load data, such as images,
-      wait
-
-      to call <code>myElement.size()</code> until after the data loads.</p>
-    path: p5.Element/size
-  remove:
-    description: |
-      <p>Removes the element, stops all audio/video streams, and removes all
-      callback functions.</p>
-    path: p5.Element/remove
-  drop:
-    description: >
-      <p>Calls a function when the user drops a file on the element.</p>
-
-      <p>The first parameter, <code>callback</code>, is a function to call once
-      the file loads.
-
-      The callback function should have one parameter, <code>file</code>, that's
-      a
-
-      <a href="/reference/p5/p5.File">p5.File</a> object. If the user drops
-      multiple files on
-
-      the element, <code>callback</code>, is called once for each file.</p>
-
-      <p>The second parameter, <code>fxn</code>, is a function to call when the
-      browser detects
-
-      one or more dropped files. The callback function should have one
-
-      parameter, <code>event</code>, that's a
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/">DragEvent</a>.</p>
-    path: p5.Element/drop
-  draggable:
-    description: >
-      <p>Makes the element draggable.</p>
-
-      <p>The parameter, <code>elmnt</code>, is optional. If another
-
-      <a href="/reference/p5/p5.Element">p5.Element</a> object is passed, as in
-
-      <code>myElement.draggable(otherElement)</code>, the other element will
-      become draggable.</p>
-    path: p5.Element/draggable
-properties:
-  elt:
-    description: >
-      <p>The element's underlying <code>HTMLElement</code> object.</p>
-
-      <p>The
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
-      target="_blank">HTMLElement</a>
-
-      object's properties and methods can be used directly.</p>
-    path: p5.Element/elt
-  width:
-    description: |
-      <p>A <code>Number</code> property that stores the element's width.</p>
-    path: p5.Element/width
-  height:
-    description: |
-      <p>A <code>Number</code> property that stores the element's height.</p>
-    path: p5.Element/height
-chainable: false
----
-
-
-# p5.Element
diff --git a/src/content/reference/en/p5 copy/p5.File.mdx b/src/content/reference/en/p5 copy/p5.File.mdx
deleted file mode 100644
index 78675c7a98..0000000000
--- a/src/content/reference/en/p5 copy/p5.File.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L5482
-title: p5.File
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: |
-  <p>A class to describe a file.</p>
-  <p><code>p5.File</code> objects are used by
-  <a href="/reference/p5.Element/drop/">myElement.drop()</a> and
-  created by
-  <a href="/reference/p5/createFileInput/">createFileInput</a>.</p>
-line: 5482
-isConstructor: true
-params:
-  - name: file
-    description: |
-      <p>wrapped file.</p>
-    type: File
-example:
-  - |-
-
-    <div>
-    <code>
-    // Use the file input to load a
-    // file and display its info.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a file input and place it beneath the canvas.
-      // Call displayInfo() when the file loads.
-      let input = createFileInput(displayInfo);
-      input.position(0, 100);
-
-      describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
-    }
-
-    // Display the p5.File's info once it loads.
-    function displayInfo(file) {
-      background(200);
-
-      // Display the p5.File's name.
-      text(file.name, 10, 10, 80, 40);
-
-      // Display the p5.File's type and subtype.
-      text(`${file.type}/${file.subtype}`, 10, 70);
-
-      // Display the p5.File's size in bytes.
-      text(file.size, 10, 90);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Use the file input to select an image to
-    // load and display.
-    let img;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a file input and place it beneath the canvas.
-      // Call handleImage() when the file image loads.
-      let input = createFileInput(handleImage);
-      input.position(0, 100);
-
-      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the image if it's ready.
-      if (img) {
-        image(img, 0, 0, width, height);
-      }
-    }
-
-    // Use the p5.File's data once it loads.
-    function handleImage(file) {
-      // Check the p5.File's type.
-      if (file.type === 'image') {
-        // Create an image using using the p5.File's data.
-        img = createImg(file.data, '');
-
-        // Hide the image element so it doesn't appear twice.
-        img.hide();
-      } else {
-        img = null;
-      }
-    }
-    </code>
-    </div>
-properties:
-  file:
-    description: >
-      <p>Underlying
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/File/"
-      target="_blank">File</a>
-
-      object. All <code>File</code> properties and methods are accessible.</p>
-    path: p5.File/file
-  type:
-    description: >
-      <p>The file
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
-      target="_blank">MIME type</a>
-
-      as a string.</p>
-
-      <p>For example, <code>'image'</code> and <code>'text'</code> are both MIME
-      types.</p>
-    path: p5.File/type
-  subtype:
-    description: >
-      <p>The file subtype as a string.</p>
-
-      <p>For example, a file with an <code>'image'</code>
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
-      target="_blank">MIME type</a>
-
-      may have a subtype such as <code>png</code> or <code>jpeg</code>.</p>
-    path: p5.File/subtype
-  name:
-    description: |
-      <p>The file name as a string.</p>
-    path: p5.File/name
-  size:
-    description: |
-      <p>The number of bytes in the file.</p>
-    path: p5.File/size
-  data:
-    description: |
-      <p>A string containing the file's data.</p>
-      <p>Data can be either image data, text contents, or a parsed object in the
-      case of JSON and <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
-    path: p5.File/data
-chainable: false
----
-
-
-# p5.File
diff --git a/src/content/reference/en/p5 copy/p5.Font.mdx b/src/content/reference/en/p5 copy/p5.Font.mdx
deleted file mode 100644
index 615d0406ee..0000000000
--- a/src/content/reference/en/p5 copy/p5.Font.mdx	
+++ /dev/null
@@ -1,146 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/p5.Font.js#L13
-title: p5.Font
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/p5.Font.js
-description: |
-  <p>A class to describe fonts.</p>
-line: 13
-isConstructor: true
-params:
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance.</p>
-    type: P5
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      // Creates a p5.Font object.
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the text.
-      fill('deeppink');
-      textFont(font);
-      textSize(36);
-
-      // Display the text.
-      text('p5*js', 10, 50);
-
-      describe('The text "p5*js" written in pink on a gray background.');
-    }
-    </code>
-    </div>
-methods:
-  textBounds:
-    description: >
-      <p>Returns the bounding box for a string of text written using the
-      font.</p>
-
-      <p>The bounding box is the smallest rectangle that can contain a string of
-
-      text. <code>font.textBounds()</code> returns an object with the bounding
-      box's
-
-      location and size. For example, calling <code>font.textBounds('p5*js', 5,
-      20)</code>
-
-      returns an object in the format
-
-      <code>{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }</code>. The <code>x</code> and
-      <code>y</code> properties are
-
-      always the coordinates of the bounding box's top-left corner.</p>
-
-      <p>The first parameter, <code>str</code>, is a string of text. The second
-      and third
-
-      parameters, <code>x</code> and <code>y</code>, are the text's position. By
-      default, they set the
-
-      coordinates of the bounding box's bottom-left corner. See
-
-      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
-      text.</p>
-
-      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
-      font size used to
-
-      determine the bounding box. By default, <code>font.textBounds()</code>
-      will use the
-
-      current <a href="/reference/p5/textSize/">textSize()</a>.</p>
-    path: p5.Font/textBounds
-  textToPoints:
-    description: >
-      <p>Returns an array of points outlining a string of text written using the
-
-      font.</p>
-
-      <p>Each point object in the array has three properties that describe the
-
-      point's location and orientation, called its path angle. For example,
-
-      <code>{ x: 10, y: 20, alpha: 450 }</code>.</p>
-
-      <p>The first parameter, <code>str</code>, is a string of text. The second
-      and third
-
-      parameters, <code>x</code> and <code>y</code>, are the text's position. By
-      default, they set the
-
-      coordinates of the bounding box's bottom-left corner. See
-
-      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
-      text.</p>
-
-      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
-      text's font
-
-      size. By default, <code>font.textToPoints()</code> will use the current
-
-      <a href="/reference/p5/textSize/">textSize()</a>.</p>
-
-      <p>The fifth parameter, <code>options</code>, is also optional.
-      <code>font.textToPoints()</code>
-
-      expects an object with the following properties:</p>
-
-      <p><code>sampleFactor</code> is the ratio of the text's path length to the
-      number of
-
-      samples. It defaults to 0.1. Higher values produce more points along the
-
-      path and are more precise.</p>
-
-      <p><code>simplifyThreshold</code> removes collinear points if it's set to
-      a number other
-
-      than 0. The value represents the threshold angle to use when determining
-
-      whether two edges are collinear.</p>
-    path: p5.Font/textToPoints
-properties:
-  font:
-    description: |
-      <p>The font's underlying
-      <a href="https://opentype.js.org/" target="_blank">opentype.js</a>
-      font object.</p>
-    path: p5.Font/font
-chainable: false
----
-
-
-# p5.Font
diff --git a/src/content/reference/en/p5 copy/p5.Framebuffer.mdx b/src/content/reference/en/p5 copy/p5.Framebuffer.mdx
deleted file mode 100644
index 8100f48199..0000000000
--- a/src/content/reference/en/p5 copy/p5.Framebuffer.mdx	
+++ /dev/null
@@ -1,443 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Framebuffer.js#L76
-title: p5.Framebuffer
-module: Rendering
-file: src/webgl/p5.Framebuffer.js
-description: >
-  <p>A class to describe a high-performance drawing surface for textures.</p>
-
-  <p>Each <code>p5.Framebuffer</code> object provides a dedicated drawing
-  surface called
-
-  a <em>framebuffer</em>. They're similar to
-
-  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects but can run much
-  faster.
-
-  Performance is improved because the framebuffer shares the same WebGL
-
-  context as the canvas used to create it.</p>
-
-  <p><code>p5.Framebuffer</code> objects have all the drawing features of the
-  main
-
-  canvas. Drawing instructions meant for the framebuffer must be placed
-
-  between calls to
-
-  <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
-
-  <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>. The resulting
-  image
-
-  can be applied as a texture by passing the <code>p5.Framebuffer</code> object
-  to the
-
-  <a href="/reference/p5/texture/">texture()</a> function, as in
-  <code>texture(myBuffer)</code>.
-
-  It can also be displayed on the main canvas by passing it to the
-
-  <a href="/reference/p5/image/">image()</a> function, as in
-  <code>image(myBuffer, 0, 0)</code>.</p>
-
-  <p>Note: <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a> is
-  the
-
-  recommended way to create an instance of this class.</p>
-line: 76
-isConstructor: true
-params:
-  - name: target
-    description: |
-      <p>sketch instance or
-                                     <a href="#/p5.Graphics">p5.Graphics</a>
-                                     object.</p>
-    type: p5.Graphics|p5
-  - name: settings
-    description: |
-      <p>configuration options.</p>
-    type: Object
-    optional: true
-methods:
-  resize:
-    description: >
-      <p>Resizes the framebuffer to a given width and height.</p>
-
-      <p>The parameters, <code>width</code> and <code>height</code>, set the
-      dimensions of the
-
-      framebuffer. For example, calling <code>myBuffer.resize(300, 500)</code>
-      resizes
-
-      the framebuffer to 300×500 pixels, then sets <code>myBuffer.width</code>
-      to 300
-
-      and <code>myBuffer.height</code> 500.</p>
-    path: p5.Framebuffer/resize
-  pixelDensity:
-    description: >
-      <p>Sets the framebuffer's pixel density or returns its current
-      density.</p>
-
-      <p>Computer displays are grids of little lights called pixels. A display's
-
-      pixel density describes how many pixels it packs into an area. Displays
-
-      with smaller pixels have a higher pixel density and create sharper
-
-      images.</p>
-
-      <p>The parameter, <code>density</code>, is optional. If a number is
-      passed, as in
-
-      <code>myBuffer.pixelDensity(1)</code>, it sets the framebuffer's pixel
-      density. By
-
-      default, the framebuffer's pixel density will match that of the canvas
-
-      where it was created. All canvases default to match the display's pixel
-
-      density.</p>
-
-      <p>Calling <code>myBuffer.pixelDensity()</code> without an argument
-      returns its current
-
-      pixel density.</p>
-    path: p5.Framebuffer/pixelDensity
-  autoSized:
-    description: >
-      <p>Toggles the framebuffer's autosizing mode or returns the current
-      mode.</p>
-
-      <p>By default, the framebuffer automatically resizes to match the canvas
-
-      that created it. Calling <code>myBuffer.autoSized(false)</code> disables
-      this
-
-      behavior and calling <code>myBuffer.autoSized(true)</code> re-enables
-      it.</p>
-
-      <p>Calling <code>myBuffer.autoSized()</code> without an argument returns
-      <code>true</code> if
-
-      the framebuffer automatically resizes and <code>false</code> if not.</p>
-    path: p5.Framebuffer/autoSized
-  createCamera:
-    description: >
-      <p>Creates a new
-
-      <a href="/reference/p5/p5.Camera">p5.Camera</a> object to use with the
-      framebuffer.</p>
-
-      <p>The new camera is initialized with a default position <code>(0, 0,
-      800)</code> and a
-
-      default perspective projection. Its properties can be controlled with
-
-      <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
-      <code>myCamera.lookAt(0, 0, 0)</code>.</p>
-
-      <p>Framebuffer cameras should be created between calls to
-
-      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
-
-      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> like so:</p>
-
-      <pre><code class="language-js">let myCamera;
-
-
-      myBuffer.begin();
-
-
-      // Create the camera for the framebuffer.
-
-      myCamera = myBuffer.createCamera();
-
-
-      myBuffer.end();
-
-      </code></pre>
-
-      <p>Calling <a href="/reference/p5/setCamera/">setCamera()</a> updates the
-
-      framebuffer's projection using the camera.
-
-      <a href="/reference/p5/resetMatrix/">resetMatrix()</a> must also be called
-      for the
-
-      view to change properly:</p>
-
-      <pre><code class="language-js">myBuffer.begin();
-
-
-      // Set the camera for the framebuffer.
-
-      setCamera(myCamera);
-
-
-      // Reset all transformations.
-
-      resetMatrix();
-
-
-      // Draw stuff...
-
-
-      myBuffer.end();
-
-      </code></pre>
-    path: p5.Framebuffer/createCamera
-  remove:
-    description: >
-      <p>Deletes the framebuffer from GPU memory.</p>
-
-      <p>Calling <code>myBuffer.remove()</code> frees the GPU memory used by the
-      framebuffer.
-
-      The framebuffer also uses a bit of memory on the CPU which can be freed
-
-      like so:</p>
-
-      <pre><code class="language-js">// Delete the framebuffer from GPU memory.
-
-      myBuffer.remove();
-
-
-      // Delete the framebuffer from CPU memory.
-
-      myBuffer = undefined;
-
-      </code></pre>
-
-      <p>Note: All variables that reference the framebuffer must be assigned
-
-      the value <code>undefined</code> to delete the framebuffer from CPU
-      memory. If any
-
-      variable still refers to the framebuffer, then it won't be garbage
-
-      collected.</p>
-    path: p5.Framebuffer/remove
-  begin:
-    description: >
-      <p>Begins drawing shapes to the framebuffer.</p>
-
-      <p><code>myBuffer.begin()</code> and <a
-      href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>
-
-      allow shapes to be drawn to the framebuffer. <code>myBuffer.begin()</code>
-      begins
-
-      drawing to the framebuffer and
-
-      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> stops drawing
-      to the
-
-      framebuffer. Changes won't be visible until the framebuffer is displayed
-
-      as an image or texture.</p>
-    path: p5.Framebuffer/begin
-  end:
-    description: >
-      <p>Stops drawing shapes to the framebuffer.</p>
-
-      <p><a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
-      <code>myBuffer.end()</code>
-
-      allow shapes to be drawn to the framebuffer.
-
-      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> begins
-      drawing to
-
-      the framebuffer and <code>myBuffer.end()</code> stops drawing to the
-      framebuffer.
-
-      Changes won't be visible until the framebuffer is displayed as an image
-
-      or texture.</p>
-    path: p5.Framebuffer/end
-  draw:
-    description: >
-      <p>Draws to the framebuffer by calling a function that contains drawing
-
-      instructions.</p>
-
-      <p>The parameter, <code>callback</code>, is a function with the drawing
-      instructions
-
-      for the framebuffer. For example, calling
-      <code>myBuffer.draw(myFunction)</code>
-
-      will call a function named <code>myFunction()</code> to draw to the
-      framebuffer.
-
-      Doing so has the same effect as the following:</p>
-
-      <pre><code class="language-js">myBuffer.begin();
-
-      myFunction();
-
-      myBuffer.end();
-
-      </code></pre>
-    path: p5.Framebuffer/draw
-  loadPixels:
-    description: >
-      <p>Loads the current value of each pixel in the framebuffer into its
-
-      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
-
-      <p><code>myBuffer.loadPixels()</code> must be called before reading from
-      or writing to
-
-      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>.</p>
-    path: p5.Framebuffer/loadPixels
-  get:
-    description: >
-      <p>Gets a pixel or a region of pixels from the framebuffer.</p>
-
-      <p><code>myBuffer.get()</code> is easy to use but it's not as fast as
-
-      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>. Use
-
-      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a> to read
-      many pixel
-
-      values.</p>
-
-      <p>The version of <code>myBuffer.get()</code> with no parameters returns
-      the entire
-
-      framebuffer as a a <a href="/reference/p5/p5.Image">p5.Image</a>
-      object.</p>
-
-      <p>The version of <code>myBuffer.get()</code> with two parameters
-      interprets them as
-
-      coordinates. It returns an array with the <code>[R, G, B, A]</code> values
-      of the
-
-      pixel at the given point.</p>
-
-      <p>The version of <code>myBuffer.get()</code> with four parameters
-      interprets them as
-
-      coordinates and dimensions. It returns a subsection of the framebuffer as
-
-      a <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two
-      parameters are
-
-      the coordinates for the upper-left corner of the subsection. The last two
-
-      parameters are the width and height of the subsection.</p>
-    path: p5.Framebuffer/get
-  updatePixels:
-    description: >
-      <p>Updates the framebuffer with the RGBA values in the
-
-      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
-
-      <p><code>myBuffer.updatePixels()</code> only needs to be called after
-      changing values
-
-      in the <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>
-      array. Such
-
-      changes can be made directly after calling
-
-      <a
-      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>.</p>
-    path: p5.Framebuffer/updatePixels
-properties:
-  pixels:
-    description: >
-      <p>An array containing the color of each pixel in the framebuffer.</p>
-
-      <p><a
-      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>
-      must be
-
-      called before accessing the <code>myBuffer.pixels</code> array.
-
-      <a
-      href="/reference/p5.Framebuffer/updatePixels/">myBuffer.updatePixels()</a>
-
-      must be called after any changes are made.</p>
-
-      <p>Note: Updating pixels via this property is slower than drawing to the
-
-      framebuffer directly. Consider using a
-
-      <a href="/reference/p5/p5.Shader">p5.Shader</a> object instead of looping
-      over
-
-      <code>myBuffer.pixels</code>.</p>
-    path: p5.Framebuffer/pixels
-  color:
-    description: >
-      <p>An object that stores the framebuffer's color data.</p>
-
-      <p>Each framebuffer uses a
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
-      target="_blank">WebGLTexture</a>
-
-      object internally to store its color data. The <code>myBuffer.color</code>
-      property
-
-      makes it possible to pass this data directly to other functions. For
-
-      example, calling <code>texture(myBuffer.color)</code> or
-
-      <code>myShader.setUniform('colorTexture', myBuffer.color)</code>  may be
-      helpful for
-
-      advanced use cases.</p>
-
-      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
-
-      images and videos. It's easy to flip a framebuffer's y-coordinates as
-
-      needed when applying it as a texture. For example, calling
-
-      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
-      framebuffer.</p>
-    path: p5.Framebuffer/color
-  depth:
-    description: >
-      <p>An object that stores the framebuffer's depth data.</p>
-
-      <p>Each framebuffer uses a
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
-      target="_blank">WebGLTexture</a>
-
-      object internally to store its depth data. The <code>myBuffer.depth</code>
-      property
-
-      makes it possible to pass this data directly to other functions. For
-
-      example, calling <code>texture(myBuffer.depth)</code> or
-
-      <code>myShader.setUniform('depthTexture', myBuffer.depth)</code>  may be
-      helpful for
-
-      advanced use cases.</p>
-
-      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
-
-      images and videos. It's easy to flip a framebuffer's y-coordinates as
-
-      needed when applying it as a texture. For example, calling
-
-      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
-      framebuffer.</p>
-    path: p5.Framebuffer/depth
-chainable: false
----
-
-
-# p5.Framebuffer
diff --git a/src/content/reference/en/p5 copy/p5.Geometry.mdx b/src/content/reference/en/p5 copy/p5.Geometry.mdx
deleted file mode 100644
index 0faa7daf7a..0000000000
--- a/src/content/reference/en/p5 copy/p5.Geometry.mdx	
+++ /dev/null
@@ -1,793 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Geometry.js#L13
-title: p5.Geometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/p5.Geometry.js
-description: >
-  <p>A class to describe a 3D shape.</p>
-
-  <p>Each <code>p5.Geometry</code> object represents a 3D shape as a set of
-  connected
-
-  points called <em>vertices</em>. All 3D shapes are made by connecting vertices
-  to
-
-  form triangles that are stitched together. Each triangular patch on the
-
-  geometry's surface is called a <em>face</em>. The geometry stores information
-
-  about its vertices and faces for use with effects such as lighting and
-
-  texture mapping.</p>
-
-  <p>The first parameter, <code>detailX</code>, is optional. If a number is
-  passed, as in
-
-  <code>new p5.Geometry(24)</code>, it sets the number of triangle subdivisions
-  to use
-
-  along the geometry's x-axis. By default, <code>detailX</code> is 1.</p>
-
-  <p>The second parameter, <code>detailY</code>, is also optional. If a number
-  is passed,
-
-  as in <code>new p5.Geometry(24, 16)</code>, it sets the number of triangle
-
-  subdivisions to use along the geometry's y-axis. By default,
-  <code>detailX</code> is
-
-  1.</p>
-
-  <p>The third parameter, <code>callback</code>, is also optional. If a function
-  is passed,
-
-  as in <code>new p5.Geometry(24, 16, createShape)</code>, it will be called
-  once to add
-
-  vertices to the new 3D shape.</p>
-line: 13
-isConstructor: true
-params:
-  - name: detailX
-    description: |
-      <p>number of vertices along the x-axis.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of vertices along the y-axis.</p>
-    type: Integer
-    optional: true
-  - name: callback
-    description: |
-      <p>function to call once the geometry is created.</p>
-    type: Function
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Geometry object.
-      myGeometry = new p5.Geometry();
-
-      // Create p5.Vector objects to position the vertices.
-      let v0 = createVector(-40, 0, 0);
-      let v1 = createVector(0, -40, 0);
-      let v2 = createVector(40, 0, 0);
-
-      // Add the vertices to the p5.Geometry object's vertices array.
-      myGeometry.vertices.push(v0, v1, v2);
-
-      describe('A white triangle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Geometry object using a callback function.
-      myGeometry = new p5.Geometry(1, 1, createShape);
-
-      describe('A white triangle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-
-    function createShape() {
-      // Create p5.Vector objects to position the vertices.
-      let v0 = createVector(-40, 0, 0);
-      let v1 = createVector(0, -40, 0);
-      let v2 = createVector(40, 0, 0);
-
-      // "this" refers to the p5.Geometry object being created.
-
-      // Add the vertices to the p5.Geometry object's vertices array.
-      this.vertices.push(v0, v1, v2);
-
-      // Add an array to list which vertices belong to the face.
-      // Vertices are listed in clockwise "winding" order from
-      // left to top to right.
-      this.faces.push([0, 1, 2]);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Geometry object using a callback function.
-      myGeometry = new p5.Geometry(1, 1, createShape);
-
-      describe('A white triangle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-
-    function createShape() {
-      // Create p5.Vector objects to position the vertices.
-      let v0 = createVector(-40, 0, 0);
-      let v1 = createVector(0, -40, 0);
-      let v2 = createVector(40, 0, 0);
-
-      // "this" refers to the p5.Geometry object being created.
-
-      // Add the vertices to the p5.Geometry object's vertices array.
-      this.vertices.push(v0, v1, v2);
-
-      // Add an array to list which vertices belong to the face.
-      // Vertices are listed in clockwise "winding" order from
-      // left to top to right.
-      this.faces.push([0, 1, 2]);
-
-      // Compute the surface normals to help with lighting.
-      this.computeNormals();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.
-    // https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/
-    // CC-BY-SA 4.0
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      // Set detailX to 48 and detailY to 2.
-      // >>> try changing them.
-      myGeometry = new p5.Geometry(48, 2, createShape);
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      strokeWeight(0.2);
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-
-    function createShape() {
-      // "this" refers to the p5.Geometry object being created.
-
-      // Define the Möbius strip with a few parameters.
-      let spread = 0.1;
-      let radius = 30;
-      let stripWidth = 15;
-      let xInterval = 4 * PI / this.detailX;
-      let yOffset = -stripWidth / 2;
-      let yInterval = stripWidth / this.detailY;
-
-      for (let j = 0; j <= this.detailY; j += 1) {
-        // Calculate the "vertical" point along the strip.
-        let v = yOffset + yInterval * j;
-
-        for (let i = 0; i <= this.detailX; i += 1) {
-          // Calculate the angle of rotation around the strip.
-          let u = i * xInterval;
-
-          // Calculate the coordinates of the vertex.
-          let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;
-          let y = (radius + v * cos(u / 2)) * sin(u);
-          if (u < TWO_PI) {
-            y += sin(u) * spread;
-          } else {
-            y -= sin(u) * spread;
-          }
-          let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;
-
-          // Create a p5.Vector object to position the vertex.
-          let vert = createVector(x, y, z);
-
-          // Add the vertex to the p5.Geometry object's vertices array.
-          this.vertices.push(vert);
-        }
-      }
-
-      // Compute the faces array.
-      this.computeFaces();
-
-      // Compute the surface normals to help with lighting.
-      this.computeNormals();
-    }
-    </code>
-    </div>
-methods:
-  calculateBoundingBox:
-    description: >
-      <p>Calculates the position and size of the smallest box that contains the
-      geometry.</p>
-
-      <p>A bounding box is the smallest rectangular prism that contains the
-      entire
-
-      geometry. It's defined by the box's minimum and maximum coordinates along
-
-      each axis, as well as the size (length) and offset (center).</p>
-
-      <p>Calling <code>myGeometry.calculateBoundingBox()</code> returns an
-      object with four
-
-      properties that describe the bounding box:</p>
-
-      <pre><code class="language-js">// Get myGeometry's bounding box.
-
-      let bbox = myGeometry.calculateBoundingBox();
-
-
-      // Print the bounding box to the console.
-
-      console.log(bbox);
-
-
-      // {
-
-      //  // The minimum coordinate along each axis.
-
-      //  min: { x: -1, y: -2, z: -3 },
-
-      //
-
-      //  // The maximum coordinate along each axis.
-
-      //  max: { x: 1, y: 2, z: 3},
-
-      //
-
-      //  // The size (length) along each axis.
-
-      //  size: { x: 2, y: 4, z: 6},
-
-      //
-
-      //  // The offset (center) along each axis.
-
-      //  offset: { x: 0, y: 0, z: 0}
-
-      // }
-
-      </code></pre>
-    path: p5.Geometry/calculateBoundingBox
-  clearColors:
-    description: >
-      <p>Removes the geometry’s internal colors.</p>
-
-      <p><code>p5.Geometry</code> objects can be created with "internal colors"
-      assigned to
-
-      vertices or the entire shape. When a geometry has internal colors,
-
-      <a href="/reference/p5/fill/">fill()</a> has no effect. Calling
-
-      <code>myGeometry.clearColors()</code> allows the
-
-      <a href="/reference/p5/fill/">fill()</a> function to apply color to the
-      geometry.</p>
-    path: p5.Geometry/clearColors
-  saveObj:
-    description: >
-      <p>The <code>saveObj()</code> function exports <code>p5.Geometry</code>
-      objects as
-
-      3D models in the Wavefront .obj file format.
-
-      This way, you can use the 3D shapes you create in p5.js in other software
-
-      for rendering, animation, 3D printing, or more.</p>
-
-      <p>The exported .obj file will include the faces and vertices of the
-      <code>p5.Geometry</code>,
-
-      as well as its texture coordinates and normals, if it has them.</p>
-    path: p5.Geometry/saveObj
-  saveStl:
-    description: >
-      <p>The <code>saveStl()</code> function exports <code>p5.Geometry</code>
-      objects as
-
-      3D models in the STL stereolithography file format.
-
-      This way, you can use the 3D shapes you create in p5.js in other software
-
-      for rendering, animation, 3D printing, or more.</p>
-
-      <p>The exported .stl file will include the faces, vertices, and normals of
-      the <code>p5.Geometry</code>.</p>
-
-      <p>By default, this method saves a text-based .stl file. Alternatively,
-      you can save a more compact
-
-      but less human-readable binary .stl file by passing <code>{ binary: true
-      }</code> as a second parameter.</p>
-    path: p5.Geometry/saveStl
-  flipU:
-    description: >
-      <p>Flips the geometry’s texture u-coordinates.</p>
-
-      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
-      the geometry
-
-      needs a way to map the points on its surface to the pixels in a
-      rectangular
-
-      image that's used as a texture. The geometry's vertex at coordinates
-
-      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
-      <code>(u, v)</code>.</p>
-
-      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
-      stores the
-
-      <code>(u, v)</code> coordinates for each vertex in the order it was added
-      to the
-
-      geometry. Calling <code>myGeometry.flipU()</code> flips a geometry's
-      u-coordinates
-
-      so that the texture appears mirrored horizontally.</p>
-
-      <p>For example, a plane's four vertices are added clockwise starting from
-      the
-
-      top-left corner. Here's how calling <code>myGeometry.flipU()</code> would
-      change a
-
-      plane's texture coordinates:</p>
-
-      <pre><code class="language-js">// Print the original texture coordinates.
-
-      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
-
-      console.log(myGeometry.uvs);
-
-
-      // Flip the u-coordinates.
-
-      myGeometry.flipU();
-
-
-      // Print the flipped texture coordinates.
-
-      // Output: [1, 0, 0, 0, 1, 1, 0, 1]
-
-      console.log(myGeometry.uvs);
-
-
-      // Notice the swaps:
-
-      // Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]
-
-      // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
-
-      </code></pre>
-    path: p5.Geometry/flipU
-  flipV:
-    description: >
-      <p>Flips the geometry’s texture v-coordinates.</p>
-
-      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
-      the geometry
-
-      needs a way to map the points on its surface to the pixels in a
-      rectangular
-
-      image that's used as a texture. The geometry's vertex at coordinates
-
-      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
-      <code>(u, v)</code>.</p>
-
-      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
-      stores the
-
-      <code>(u, v)</code> coordinates for each vertex in the order it was added
-      to the
-
-      geometry. Calling <code>myGeometry.flipV()</code> flips a geometry's
-      v-coordinates
-
-      so that the texture appears mirrored vertically.</p>
-
-      <p>For example, a plane's four vertices are added clockwise starting from
-      the
-
-      top-left corner. Here's how calling <code>myGeometry.flipV()</code> would
-      change a
-
-      plane's texture coordinates:</p>
-
-      <pre><code class="language-js">// Print the original texture coordinates.
-
-      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
-
-      console.log(myGeometry.uvs);
-
-
-      // Flip the v-coordinates.
-
-      myGeometry.flipV();
-
-
-      // Print the flipped texture coordinates.
-
-      // Output: [0, 1, 1, 1, 0, 0, 1, 0]
-
-      console.log(myGeometry.uvs);
-
-
-      // Notice the swaps:
-
-      // Left vertices: [0, 0] <--> [1, 0]
-
-      // Right vertices: [1, 0] <--> [1, 1]
-
-      </code></pre>
-    path: p5.Geometry/flipV
-  computeFaces:
-    description: >
-      <p>Computes the geometry's faces using its vertices.</p>
-
-      <p>All 3D shapes are made by connecting sets of points called
-      <em>vertices</em>. A
-
-      geometry's surface is formed by connecting vertices to form triangles that
-
-      are stitched together. Each triangular patch on the geometry's surface is
-
-      called a <em>face</em>. <code>myGeometry.computeFaces()</code> performs
-      the math needed to
-
-      define each face based on the distances between vertices.</p>
-
-      <p>The geometry's vertices are stored as <a
-      href="/reference/p5/p5.Vector">p5.Vector</a>
-
-      objects in the <a
-      href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a>
-
-      array. The geometry's first vertex is the
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
-      <code>myGeometry.vertices[0]</code>,
-
-      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
-      is
-
-      <code>myGeometry.vertices[2]</code>, and so on.</p>
-
-      <p>Calling <code>myGeometry.computeFaces()</code> fills the
-
-      <a href="/reference/p5.Geometry/faces/">myGeometry.faces</a> array with
-      three-element
-
-      arrays that list the vertices that form each face. For example, a geometry
-
-      made from a rectangle has two faces because a rectangle is made by joining
-
-      two triangles. <a
-      href="/reference/p5.Geometry/faces/">myGeometry.faces</a> for a
-
-      rectangle would be the two-dimensional array
-
-      <code>[[0, 1, 2], [2, 1, 3]]</code>. The first face,
-      <code>myGeometry.faces[0]</code>, is the
-
-      array <code>[0, 1, 2]</code> because it's formed by connecting
-
-      <code>myGeometry.vertices[0]</code>,
-      <code>myGeometry.vertices[1]</code>,and
-
-      <code>myGeometry.vertices[2]</code>. The second face,
-      <code>myGeometry.faces[1]</code>, is the
-
-      array <code>[2, 1, 3]</code> because it's formed by connecting
-
-      <code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>,
-      and
-
-      <code>myGeometry.vertices[3]</code>.</p>
-
-      <p>Note: <code>myGeometry.computeFaces()</code> only works when geometries
-      have four or more vertices.</p>
-    path: p5.Geometry/computeFaces
-  computeNormals:
-    description: >
-      <p>Calculates the normal vector for each vertex on the geometry.</p>
-
-      <p>All 3D shapes are made by connecting sets of points called
-      <em>vertices</em>. A
-
-      geometry's surface is formed by connecting vertices to create triangles
-
-      that are stitched together. Each triangular patch on the geometry's
-
-      surface is called a <em>face</em>.
-      <code>myGeometry.computeNormals()</code> performs the
-
-      math needed to orient each face. Orientation is important for lighting
-
-      and other effects.</p>
-
-      <p>A face's orientation is defined by its <em>normal vector</em> which
-      points out
-
-      of the face and is normal (perpendicular) to the surface. Calling
-
-      <code>myGeometry.computeNormals()</code> first calculates each face's
-      normal vector.
-
-      Then it calculates the normal vector for each vertex by averaging the
-
-      normal vectors of the faces surrounding the vertex. The vertex normals
-
-      are stored as <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in
-      the
-
-      <a
-      href="/reference/p5.Geometry/vertexNormals/">myGeometry.vertexNormals</a>
-      array.</p>
-
-      <p>The first parameter, <code>shadingType</code>, is optional. Passing the
-      constant
-
-      <code>FLAT</code>, as in <code>myGeometry.computeNormals(FLAT)</code>,
-      provides neighboring
-
-      faces with their own copies of the vertices they share. Surfaces appear
-
-      tiled with flat shading. Passing the constant <code>SMOOTH</code>, as in
-
-      <code>myGeometry.computeNormals(SMOOTH)</code>, makes neighboring faces
-      reuse their
-
-      shared vertices. Surfaces appear smoother with smooth shading. By
-
-      default, <code>shadingType</code> is <code>FLAT</code>.</p>
-
-      <p>The second parameter, <code>options</code>, is also optional. If an
-      object with a
-
-      <code>roundToPrecision</code> property is passed, as in
-
-      <code>myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })</code>,
-      it sets the
-
-      number of decimal places to use for calculations. By default,
-
-      <code>roundToPrecision</code> uses 3 decimal places.</p>
-    path: p5.Geometry/computeNormals
-  normalize:
-    description: >
-      <p>Transforms the geometry's vertices to fit snugly within a 100×100×100
-      box
-
-      centered at the origin.</p>
-
-      <p>Calling <code>myGeometry.normalize()</code> translates the geometry's
-      vertices so that
-
-      they're centered at the origin <code>(0, 0, 0)</code>. Then it scales the
-      vertices so
-
-      that they fill a 100×100×100 box. As a result, small geometries will grow
-
-      and large geometries will shrink.</p>
-
-      <p>Note: <code>myGeometry.normalize()</code> only works when called in the
-
-      <a href="/reference/p5/setup/">setup()</a> function.</p>
-    path: p5.Geometry/normalize
-properties:
-  vertices:
-    description: >
-      <p>An array with the geometry's vertices.</p>
-
-      <p>The geometry's vertices are stored as
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
-      <code>myGeometry.vertices</code>
-
-      array. The geometry's first vertex is the
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
-      <code>myGeometry.vertices[0]</code>,
-
-      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
-      is
-
-      <code>myGeometry.vertices[2]</code>, and so on.</p>
-    path: p5.Geometry/vertices
-  vertexNormals:
-    description: >
-      <p>An array with the vectors that are normal to the geometry's
-      vertices.</p>
-
-      <p>A face's orientation is defined by its <em>normal vector</em> which
-      points out
-
-      of the face and is normal (perpendicular) to the surface. Calling
-
-      <code>myGeometry.computeNormals()</code> first calculates each face's
-      normal
-
-      vector. Then it calculates the normal vector for each vertex by
-
-      averaging the normal vectors of the faces surrounding the vertex. The
-
-      vertex normals are stored as <a
-      href="/reference/p5/p5.Vector">p5.Vector</a>
-
-      objects in the <code>myGeometry.vertexNormals</code> array.</p>
-    path: p5.Geometry/vertexNormals
-  faces:
-    description: >
-      <p>An array that lists which of the geometry's vertices form each of its
-
-      faces.</p>
-
-      <p>All 3D shapes are made by connecting sets of points called
-      <em>vertices</em>. A
-
-      geometry's surface is formed by connecting vertices to form triangles
-
-      that are stitched together. Each triangular patch on the geometry's
-
-      surface is called a <em>face</em>.</p>
-
-      <p>The geometry's vertices are stored as
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
-
-      <a href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a> array.
-      The
-
-      geometry's first vertex is the <a
-      href="/reference/p5/p5.Vector">p5.Vector</a>
-
-      object at <code>myGeometry.vertices[0]</code>, its second vertex is
-
-      <code>myGeometry.vertices[1]</code>, its third vertex is
-      <code>myGeometry.vertices[2]</code>,
-
-      and so on.</p>
-
-      <p>For example, a geometry made from a rectangle has two faces because a
-
-      rectangle is made by joining two triangles. <code>myGeometry.faces</code>
-      for a
-
-      rectangle would be the two-dimensional array <code>[[0, 1, 2], [2, 1,
-      3]]</code>.
-
-      The first face, <code>myGeometry.faces[0]</code>, is the array <code>[0,
-      1, 2]</code> because
-
-      it's formed by connecting <code>myGeometry.vertices[0]</code>,
-
-      <code>myGeometry.vertices[1]</code>,and
-      <code>myGeometry.vertices[2]</code>. The second face,
-
-      <code>myGeometry.faces[1]</code>, is the array <code>[2, 1, 3]</code>
-      because it's formed by
-
-      connecting <code>myGeometry.vertices[2]</code>,
-      <code>myGeometry.vertices[1]</code>,and
-
-      <code>myGeometry.vertices[3]</code>.</p>
-    path: p5.Geometry/faces
-  uvs:
-    description: >
-      <p>An array that lists the texture coordinates for each of the geometry's
-
-      vertices.</p>
-
-      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
-      the geometry
-
-      needs a way to map the points on its surface to the pixels in a
-
-      rectangular image that's used as a texture. The geometry's vertex at
-
-      coordinates <code>(x, y, z)</code> maps to the texture image's pixel at
-      coordinates
-
-      <code>(u, v)</code>.</p>
-
-      <p>The <code>myGeometry.uvs</code> array stores the <code>(u, v)</code>
-      coordinates for each
-
-      vertex in the order it was added to the geometry. For example, the
-
-      first vertex, <code>myGeometry.vertices[0]</code>, has its <code>(u,
-      v)</code> coordinates
-
-      stored at <code>myGeometry.uvs[0]</code> and
-      <code>myGeometry.uvs[1]</code>.</p>
-    path: p5.Geometry/uvs
-chainable: false
----
-
-
-# p5.Geometry
diff --git a/src/content/reference/en/p5 copy/p5.Graphics.mdx b/src/content/reference/en/p5 copy/p5.Graphics.mdx
deleted file mode 100644
index d0b7c3aff8..0000000000
--- a/src/content/reference/en/p5 copy/p5.Graphics.mdx	
+++ /dev/null
@@ -1,261 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Graphics.js#L10
-title: p5.Graphics
-module: Rendering
-submodule: Rendering
-file: src/core/p5.Graphics.js
-description: >
-  <p>A class to describe a drawing surface that's separate from the main
-  canvas.</p>
-
-  <p>Each <code>p5.Graphics</code> object provides a dedicated drawing surface
-  called a
-
-  <em>graphics buffer</em>. Graphics buffers are helpful when drawing should
-  happen
-
-  offscreen. For example, separate scenes can be drawn offscreen and
-
-  displayed only when needed.</p>
-
-  <p><code>p5.Graphics</code> objects have nearly all the drawing features of
-  the main
-
-  canvas. For example, calling the method <code>myGraphics.circle(50, 50,
-  20)</code>
-
-  draws to the graphics buffer. The resulting image can be displayed on the
-
-  main canvas by passing the <code>p5.Graphics</code> object to the
-
-  <a href="/reference/p5/image/">image()</a> function, as in
-  <code>image(myGraphics, 0, 0)</code>.</p>
-
-  <p>Note: <a href="/reference/p5/createGraphics/">createGraphics()</a> is the
-  recommended
-
-  way to create an instance of this class.</p>
-line: 10
-isConstructor: true
-params:
-  - name: width
-    description: |
-      <p>width of the graphics buffer in pixels.</p>
-    type: Number
-  - name: height
-    description: |
-      <p>height of the graphics buffer in pixels.</p>
-    type: Number
-  - name: renderer
-    description: |
-      <p>renderer to use, either P2D or WEBGL.</p>
-    type: Constant
-  - name: pInst
-    description: |
-      <p>sketch instance.</p>
-    type: P5
-    optional: true
-  - name: canvas
-    description: |
-      <p>existing <code>&lt;canvas&gt;</code> element to use.</p>
-    type: HTMLCanvasElement
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Graphics object.
-      pg = createGraphics(50, 50);
-
-      // Draw to the p5.Graphics object.
-      pg.background(100);
-      pg.circle(25, 25, 20);
-
-      describe('A dark gray square with a white circle at its center drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Display the p5.Graphics object.
-      image(pg, 25, 25);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the canvas to display the graphics buffer.
-
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Graphics object.
-      pg = createGraphics(50, 50);
-
-      describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the background color.
-      let bg = frameCount % 255;
-
-      // Draw to the p5.Graphics object.
-      pg.background(bg);
-
-      // Display the p5.Graphics object while
-      // the user presses the mouse.
-      if (mouseIsPressed === true) {
-        image(pg, 25, 25);
-      }
-    }
-    </code>
-    </div>
-methods:
-  reset:
-    description: >
-      <p>Resets the graphics buffer's transformations and lighting.</p>
-
-      <p>By default, the main canvas resets certain transformation and lighting
-
-      values each time <a href="/reference/p5/draw/">draw()</a> executes.
-      <code>p5.Graphics</code>
-
-      objects must reset these values manually by calling
-      <code>myGraphics.reset()</code>.</p>
-    path: p5.Graphics/reset
-  remove:
-    description: >
-      <p>Removes the graphics buffer from the web page.</p>
-
-      <p>Calling <code>myGraphics.remove()</code> removes the graphics buffer's
-
-      <code><canvas></code> element from the web page. The graphics buffer also
-      uses
-
-      a bit of memory on the CPU that can be freed like so:</p>
-
-      <pre><code class="language-js">// Remove the graphics buffer from the web
-      page.
-
-      myGraphics.remove();
-
-
-      // Delete the graphics buffer from CPU memory.
-
-      myGraphics = undefined;
-
-      </code></pre>
-
-      <p>Note: All variables that reference the graphics buffer must be assigned
-
-      the value <code>undefined</code> to delete the graphics buffer from CPU
-      memory. If any
-
-      variable still refers to the graphics buffer, then it won't be garbage
-
-      collected.</p>
-    path: p5.Graphics/remove
-  createFramebuffer:
-    description: >
-      <p>Creates a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
-      object with
-
-      the same WebGL context as the graphics buffer.</p>
-
-      <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
-      separate drawing
-
-      surfaces that can be used as textures in WebGL mode. They're similar to
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally
-      run much
-
-      faster when used as textures. Creating a
-
-      <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object in the
-      same context
-
-      as the graphics buffer makes this speedup possible.</p>
-
-      <p>The parameter, <code>options</code>, is optional. An object can be
-      passed to configure
-
-      the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
-      available
-
-      properties are:</p>
-
-      <ul>
-
-      <li><code>format</code>: data format of the texture, either
-      <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or
-      <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li>
-
-      <li><code>channels</code>: whether to store <code>RGB</code> or
-      <code>RGBA</code> color channels. Default is to match the graphics buffer
-      which is <code>RGBA</code>.</li>
-
-      <li><code>depth</code>: whether to include a depth buffer. Default is
-      <code>true</code>.</li>
-
-      <li><code>depthFormat</code>: data format of depth information, either
-      <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
-      <code>FLOAT</code>.</li>
-
-      <li><code>stencil</code>: whether to include a stencil buffer for masking.
-      <code>depth</code> must be <code>true</code> for this feature to work.
-      Defaults to the value of <code>depth</code> which is
-      <code>true</code>.</li>
-
-      <li><code>antialias</code>: whether to perform anti-aliasing. If set to
-      <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will
-      be used by default. The number of samples can also be set, as in <code>{
-      antialias: 4 }</code>. Default is to match <a
-      href="/reference/p5/setAttributes/">setAttributes()</a> which is
-      <code>false</code> (<code>true</code> in Safari).</li>
-
-      <li><code>width</code>: width of the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
-      to always match the graphics buffer width.</li>
-
-      <li><code>height</code>: height of the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
-      to always match the graphics buffer height.</li>
-
-      <li><code>density</code>: pixel density of the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
-      to always match the graphics buffer pixel density.</li>
-
-      <li><code>textureFiltering</code>: how to read values from the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
-      <code>LINEAR</code> (nearby pixels will be interpolated) or
-      <code>NEAREST</code> (no interpolation). Generally, use
-      <code>LINEAR</code> when using the texture as an image and
-      <code>NEAREST</code> if reading the texture as data. Default is
-      <code>LINEAR</code>.</li>
-
-      </ul>
-
-      <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
-      attributes are set, they won't
-
-      automatically match the graphics buffer and must be changed manually.</p>
-    path: p5.Graphics/createFramebuffer
-chainable: false
----
-
-
-# p5.Graphics
diff --git a/src/content/reference/en/p5 copy/p5.Image.mdx b/src/content/reference/en/p5 copy/p5.Image.mdx
deleted file mode 100644
index 63e2a668fe..0000000000
--- a/src/content/reference/en/p5 copy/p5.Image.mdx	
+++ /dev/null
@@ -1,519 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/p5.Image.js#L21
-title: p5.Image
-module: Image
-submodule: Image
-file: src/image/p5.Image.js
-description: >
-  <p>A class to describe an image.</p>
-
-  <p>Images are rectangular grids of pixels that can be displayed and
-  modified.</p>
-
-  <p>Existing images can be loaded by calling
-
-  <a href="/reference/p5/loadImage/">loadImage()</a>. Blank images can be
-  created by
-
-  calling <a href="/reference/p5/createImage/">createImage()</a>.
-  <code>p5.Image</code> objects
-
-  have methods for common tasks such as applying filters and modifying
-
-  pixel values.</p>
-line: 21
-isConstructor: true
-params:
-  - name: width
-    description: ''
-    type: Number
-  - name: height
-    description: ''
-    type: Number
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      describe('An image of a brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Apply the GRAY filter.
-      img.filter(GRAY);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      describe('A grayscale image of a brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the image's pixels.
-      img.loadPixels();
-
-      // Set the pixels to black.
-      for (let x = 0; x < img.width; x += 1) {
-        for (let y = 0; y < img.height; y += 1) {
-          img.set(x, y, 0);
-        }
-      }
-
-      // Update the image.
-      img.updatePixels();
-
-      // Display the image.
-      image(img, 17, 17);
-
-      describe('A black square drawn in the middle of a gray square.');
-    }
-    </code>
-    </div>
-methods:
-  pixelDensity:
-    description: |
-      <p>Gets or sets the pixel density for high pixel density displays.</p>
-      <p>By default, the density will be set to 1.</p>
-      <p>Call this method with no arguments to get the default density, or pass
-      in a number to set the density. If a non-positive number is provided,
-      it defaults to 1.</p>
-    path: p5.Image/pixelDensity
-  loadPixels:
-    description: >
-      <p>Loads the current value of each pixel in the image into the
-      <code>img.pixels</code>
-
-      array.</p>
-
-      <p><code>img.loadPixels()</code> must be called before reading or
-      modifying pixel
-
-      values.</p>
-    path: p5.Image/loadPixels
-  updatePixels:
-    description: >
-      <p>Updates the canvas with the RGBA values in the
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a> array.</p>
-
-      <p><code>img.updatePixels()</code> only needs to be called after changing
-      values in
-
-      the <a href="/reference/p5.Image/pixels/">img.pixels</a> array. Such
-      changes can be
-
-      made directly after calling
-
-      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a> or by
-      calling
-
-      <a href="/reference/p5.Image/set/">img.set()</a>.</p>
-
-      <p>The optional parameters <code>x</code>, <code>y</code>,
-      <code>width</code>, and <code>height</code> define a
-
-      subsection of the image to update. Doing so can improve performance in
-
-      some cases.</p>
-
-      <p>If the image was loaded from a GIF, then calling
-      <code>img.updatePixels()</code>
-
-      will update the pixels in current frame.</p>
-    path: p5.Image/updatePixels
-  get:
-    description: >
-      <p>Gets a pixel or a region of pixels from the image.</p>
-
-      <p><code>img.get()</code> is easy to use but it's not as fast as
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a> to read many pixel
-      values.</p>
-
-      <p>The version of <code>img.get()</code> with no parameters returns the
-      entire image.</p>
-
-      <p>The version of <code>img.get()</code> with two parameters, as in
-      <code>img.get(10, 20)</code>,
-
-      interprets them as coordinates. It returns an array with the
-
-      <code>[R, G, B, A]</code> values of the pixel at the given point.</p>
-
-      <p>The version of <code>img.get()</code> with four parameters, as in
-
-      <code>img,get(10, 20, 50, 90)</code>, interprets them as
-
-      coordinates and dimensions. The first two parameters are the coordinates
-
-      of the upper-left corner of the subsection. The last two parameters are
-
-      the width and height of the subsection. It returns a subsection of the
-
-      canvas in a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-      <p>Use <code>img.get()</code> instead of <a
-      href="/reference/p5/get/">get()</a> to work directly
-
-      with images.</p>
-    path: p5.Image/get
-  set:
-    description: >
-      <p>Sets the color of one or more pixels within an image.</p>
-
-      <p><code>img.set()</code> is easy to use but it's not as fast as
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a> to set many pixel
-      values.</p>
-
-      <p><code>img.set()</code> interprets the first two parameters as x- and
-      y-coordinates. It
-
-      interprets the last parameter as a grayscale value, a <code>[R, G, B,
-      A]</code> pixel
-
-      array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or another
-
-      <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-      <p><a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> must
-      be called
-
-      after using <code>img.set()</code> for changes to appear.</p>
-    path: p5.Image/set
-  resize:
-    description: >
-      <p>Resizes the image to a given width and height.</p>
-
-      <p>The image's original aspect ratio can be kept by passing 0 for either
-
-      <code>width</code> or <code>height</code>. For example, calling
-      <code>img.resize(50, 0)</code> on an image
-
-      that was 500 × 300 pixels will resize it to 50 × 30 pixels.</p>
-    path: p5.Image/resize
-  copy:
-    description: >
-      <p>Copies pixels from a source image to this image.</p>
-
-      <p>The first parameter, <code>srcImage</code>, is an optional
-
-      <a href="/reference/p5/p5.Image">p5.Image</a> object to copy. If a source
-      image isn't
-
-      passed, then <code>img.copy()</code> can copy a region of this image to
-      another
-
-      region.</p>
-
-      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-      <code>sw</code>, and <code>sh</code> determine the region
-
-      to copy from the source image. <code>(sx, sy)</code> is the top-left
-      corner of the
-
-      region. <code>sw</code> and <code>sh</code> are the region's width and
-      height.</p>
-
-      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-      <code>dw</code>, and <code>dh</code> determine the region
-
-      of this image to copy into. <code>(dx, dy)</code> is the top-left corner
-      of the
-
-      region. <code>dw</code> and <code>dh</code> are the region's width and
-      height.</p>
-
-      <p>Calling <code>img.copy()</code> will scale pixels from the source
-      region if it isn't
-
-      the same size as the destination region.</p>
-    path: p5.Image/copy
-  mask:
-    description: >
-      <p>Masks part of the image with another.</p>
-
-      <p><code>img.mask()</code> uses another <a
-      href="/reference/p5/p5.Image">p5.Image</a> object's
-
-      alpha channel as the alpha channel for this image. Masks are cumulative
-
-      and can't be removed once applied. If the mask has a different
-
-      pixel density from this image, the mask will be scaled.</p>
-    path: p5.Image/mask
-  filter:
-    description: >
-      <p>Applies an image filter to the image.</p>
-
-      <p>The preset options are:</p>
-
-      <p><code>INVERT</code>
-
-      Inverts the colors in the image. No parameter is used.</p>
-
-      <p><code>GRAY</code>
-
-      Converts the image to grayscale. No parameter is used.</p>
-
-      <p><code>THRESHOLD</code>
-
-      Converts the image to black and white. Pixels with a grayscale value
-
-      above a given threshold are converted to white. The rest are converted to
-
-      black. The threshold must be between 0.0 (black) and 1.0 (white). If no
-
-      value is specified, 0.5 is used.</p>
-
-      <p><code>OPAQUE</code>
-
-      Sets the alpha channel to be entirely opaque. No parameter is used.</p>
-
-      <p><code>POSTERIZE</code>
-
-      Limits the number of colors in the image. Each color channel is limited to
-
-      the number of colors specified. Values between 2 and 255 are valid, but
-
-      results are most noticeable with lower values. The default value is 4.</p>
-
-      <p><code>BLUR</code>
-
-      Blurs the image. The level of blurring is specified by a blur radius.
-      Larger
-
-      values increase the blur. The default value is 4. A gaussian blur is used
-
-      in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code>
-      mode.</p>
-
-      <p><code>ERODE</code>
-
-      Reduces the light areas. No parameter is used.</p>
-
-      <p><code>DILATE</code>
-
-      Increases the light areas. No parameter is used.</p>
-    path: p5.Image/filter
-  blend:
-    description: >
-      <p>Copies a region of pixels from another image into this one.</p>
-
-      <p>The first parameter, <code>srcImage</code>, is the
-
-      <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
-
-      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-      <code>sw</code>, and <code>sh</code> determine the region
-
-      to blend from the source image. <code>(sx, sy)</code> is the top-left
-      corner of the
-
-      region. <code>sw</code> and <code>sh</code> are the regions width and
-      height.</p>
-
-      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-      <code>dw</code>, and <code>dh</code> determine the region
-
-      of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner
-      of the
-
-      region. <code>dw</code> and <code>dh</code> are the regions width and
-      height.</p>
-
-      <p>The tenth parameter, <code>blendMode</code>, sets the effect used to
-      blend the images'
-
-      colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
-      <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
-
-      <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
-      <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
-
-      <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
-      <code>ADD</code>, or <code>NORMAL</code>.</p>
-    path: p5.Image/blend
-  save:
-    description: >
-      <p>Saves the image to a file.</p>
-
-      <p>By default, <code>img.save()</code> saves the image as a PNG image
-      called
-
-      <code>untitled.png</code>.</p>
-
-      <p>The first parameter, <code>filename</code>, is optional. It's a string
-      that sets the
-
-      file's name. If a file extension is included, as in
-
-      <code>img.save('drawing.png')</code>, then the image will be saved using
-      that
-
-      format.</p>
-
-      <p>The second parameter, <code>extension</code>, is also optional. It sets
-      the files format.
-
-      Either <code>'png'</code> or <code>'jpg'</code> can be used. For example,
-      <code>img.save('drawing', 'jpg')</code>
-
-      saves the canvas to a file called <code>drawing.jpg</code>.</p>
-
-      <p>Note: The browser will either save the file immediately or prompt the
-      user
-
-      with a dialogue window.</p>
-
-      <p>The image will only be downloaded as an animated GIF if it was loaded
-
-      from a GIF file. See <a href="/reference/p5/saveGif/">saveGif()</a> to
-      create new
-
-      GIFs.</p>
-    path: p5.Image/save
-  reset:
-    description: |
-      <p>Restarts an animated GIF at its first frame.</p>
-    path: p5.Image/reset
-  getCurrentFrame:
-    description: |
-      <p>Gets the index of the current frame in an animated GIF.</p>
-    path: p5.Image/getCurrentFrame
-  setFrame:
-    description: |
-      <p>Sets the current frame in an animated GIF.</p>
-    path: p5.Image/setFrame
-  numFrames:
-    description: |
-      <p>Returns the number of frames in an animated GIF.</p>
-    path: p5.Image/numFrames
-  play:
-    description: |
-      <p>Plays an animated GIF that was paused with
-      <a href="/reference/p5.Image/pause/">img.pause()</a>.</p>
-    path: p5.Image/play
-  pause:
-    description: |
-      <p>Pauses an animated GIF.</p>
-      <p>The GIF can be resumed by calling
-      <a href="/reference/p5.Image/play/">img.play()</a>.</p>
-    path: p5.Image/pause
-  delay:
-    description: >
-      <p>Changes the delay between frames in an animated GIF.</p>
-
-      <p>The first parameter, <code>delay</code>, is the length of the delay in
-      milliseconds.</p>
-
-      <p>The second parameter, <code>index</code>, is optional. If provided,
-      only the frame
-
-      at <code>index</code> will have its delay modified. All other frames will
-      keep
-
-      their default delay.</p>
-    path: p5.Image/delay
-properties:
-  width:
-    description: |
-      <p>The image's width in pixels.</p>
-    path: p5.Image/width
-  height:
-    description: |
-      <p>The image's height in pixels.</p>
-    path: p5.Image/height
-  pixels:
-    description: >
-      <p>An array containing the color of each pixel in the image.</p>
-
-      <p>Colors are stored as numbers representing red, green, blue, and alpha
-
-      (RGBA) values. <code>img.pixels</code> is a one-dimensional array for
-      performance
-
-      reasons.</p>
-
-      <p>Each pixel occupies four elements in the pixels array, one for each
-
-      RGBA value. For example, the pixel at coordinates (0, 0) stores its
-
-      RGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>,
-      <code>img.pixels[2]</code>,
-
-      and <code>img.pixels[3]</code>, respectively. The next pixel at
-      coordinates (1, 0)
-
-      stores its RGBA values at <code>img.pixels[4]</code>,
-      <code>img.pixels[5]</code>,
-
-      <code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The
-      <code>img.pixels</code> array
-
-      for a 100×100 <a href="/reference/p5/p5.Image">p5.Image</a> object has
-
-      100 × 100 × 4 = 40,000 elements.</p>
-
-      <p>Accessing the RGBA values for a pixel in the image requires a little
-
-      math as shown in the examples below. The
-
-      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a>
-
-      method must be called before accessing the <code>img.pixels</code> array.
-      The
-
-      <a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> method
-      must be
-
-      called after any changes are made.</p>
-    path: p5.Image/pixels
-chainable: false
----
-
-
-# p5.Image
diff --git a/src/content/reference/en/p5 copy/p5.MediaElement.mdx b/src/content/reference/en/p5 copy/p5.MediaElement.mdx
deleted file mode 100644
index ee05412502..0000000000
--- a/src/content/reference/en/p5 copy/p5.MediaElement.mdx	
+++ /dev/null
@@ -1,258 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L4099
-title: p5.MediaElement
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>A class to handle audio and video.</p>
-
-  <p><code>p5.MediaElement</code> extends <a
-  href="/reference/p5/p5.Element">p5.Element</a> with
-
-  methods to handle audio and video. <code>p5.MediaElement</code> objects are
-  created by
-
-  calling <a href="/reference/p5/createVideo/">createVideo</a>,
-
-  <a href="/reference/p5/createAudio/">createAudio</a>, and
-
-  <a href="/reference/p5/createCapture/">createCapture</a>.</p>
-line: 4099
-isConstructor: true
-params:
-  - name: elt
-    description: |
-      <p>DOM node that is wrapped</p>
-    type: String
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    let capture;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.MediaElement using createCapture().
-      capture = createCapture(VIDEO);
-      capture.hide();
-
-      describe('A webcam feed with inverted colors.');
-    }
-
-    function draw() {
-      // Display the video stream and invert the colors.
-      image(capture, 0, 0, width, width * capture.height / capture.width);
-      filter(INVERT);
-    }
-    </code>
-    </div>
-methods:
-  play:
-    description: |
-      <p>Plays audio or video from a media element.</p>
-    path: p5.MediaElement/play
-  stop:
-    description: >
-      <p>Stops a media element and sets its current time to 0.</p>
-
-      <p>Calling <code>media.play()</code> will restart playing audio/video from
-      the beginning.</p>
-    path: p5.MediaElement/stop
-  pause:
-    description: >
-      <p>Pauses a media element.</p>
-
-      <p>Calling <code>media.play()</code> will resume playing audio/video from
-      the moment it paused.</p>
-    path: p5.MediaElement/pause
-  loop:
-    description: |
-      <p>Plays the audio/video repeatedly in a loop.</p>
-    path: p5.MediaElement/loop
-  noLoop:
-    description: |
-      <p>Stops the audio/video from playing in a loop.</p>
-      <p>The media will stop when it finishes playing.</p>
-    path: p5.MediaElement/noLoop
-  autoplay:
-    description: >
-      <p>Sets the audio/video to play once it's loaded.</p>
-
-      <p>The parameter, <code>shouldAutoplay</code>, is optional. Calling
-
-      <code>media.autoplay()</code> without an argument causes the media to play
-
-      automatically. If <code>true</code> is passed, as in
-      <code>media.autoplay(true)</code>, the
-
-      media will automatically play. If <code>false</code> is passed, as in
-
-      <code>media.autoPlay(false)</code>, it won't play automatically.</p>
-    path: p5.MediaElement/autoplay
-  volume:
-    description: >
-      <p>Sets the audio/video volume.</p>
-
-      <p>Calling <code>media.volume()</code> without an argument returns the
-      current volume
-
-      as a number in the range 0 (off) to 1 (maximum).</p>
-
-      <p>The parameter, <code>val</code>, is optional. It's a number that sets
-      the volume
-
-      from 0 (off) to 1 (maximum). For example, calling
-      <code>media.volume(0.5)</code>
-
-      sets the volume to half of its maximum.</p>
-    path: p5.MediaElement/volume
-  speed:
-    description: >
-      <p>Sets the audio/video playback speed.</p>
-
-      <p>The parameter, <code>val</code>, is optional. It's a number that sets
-      the playback
-
-      speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
-
-      plays it at double speed, and so on. -1 plays the media at normal speed
-
-      in reverse.</p>
-
-      <p>Calling <code>media.speed()</code> returns the current speed as a
-      number.</p>
-
-      <p>Note: Not all browsers support backward playback. Even if they do,
-
-      playback might not be smooth.</p>
-    path: p5.MediaElement/speed
-  time:
-    description: >
-      <p>Sets the media element's playback time.</p>
-
-      <p>The parameter, <code>time</code>, is optional. It's a number that
-      specifies the
-
-      time, in seconds, to jump to when playback begins.</p>
-
-      <p>Calling <code>media.time()</code> without an argument returns the
-      number of seconds
-
-      the audio/video has played.</p>
-
-      <p>Note: Time resets to 0 when looping media restarts.</p>
-    path: p5.MediaElement/time
-  duration:
-    description: |
-      <p>Returns the audio/video's duration in seconds.</p>
-    path: p5.MediaElement/duration
-  onended:
-    description: >
-      <p>Calls a function when the audio/video reaches the end of its
-      playback.</p>
-
-      <p>The element is passed as an argument to the callback function.</p>
-
-      <p>Note: The function won't be called if the media is looping.</p>
-    path: p5.MediaElement/onended
-  connect:
-    description: >
-      <p>Sends the element's audio to an output.</p>
-
-      <p>The parameter, <code>audioNode</code>, can be an <code>AudioNode</code>
-      or an object from the
-
-      <code>p5.sound</code> library.</p>
-
-      <p>If no element is provided, as in <code>myElement.connect()</code>, the
-      element
-
-      connects to the main output. All connections are removed by the
-
-      <code>.disconnect()</code> method.</p>
-
-      <p>Note: This method is meant to be used with the p5.sound.js addon
-      library.</p>
-    path: p5.MediaElement/connect
-  disconnect:
-    description: >
-      <p>Disconnect all Web Audio routing, including to the main output.</p>
-
-      <p>This is useful if you want to re-route the output through audio
-      effects,
-
-      for example.</p>
-    path: p5.MediaElement/disconnect
-  showControls:
-    description: >
-      <p>Show the default
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
-      target="_blank">HTMLMediaElement</a>
-
-      controls.</p>
-
-      <p>Note: The controls vary between web browsers.</p>
-    path: p5.MediaElement/showControls
-  hideControls:
-    description: >
-      <p>Hide the default
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
-      target="_blank">HTMLMediaElement</a>
-
-      controls.</p>
-    path: p5.MediaElement/hideControls
-  addCue:
-    description: >
-      <p>Schedules a function to call when the audio/video reaches a specific
-      time
-
-      during its playback.</p>
-
-      <p>The first parameter, <code>time</code>, is the time, in seconds, when
-      the function
-
-      should run. This value is passed to <code>callback</code> as its first
-      argument.</p>
-
-      <p>The second parameter, <code>callback</code>, is the function to call at
-      the specified
-
-      cue time.</p>
-
-      <p>The third parameter, <code>value</code>, is optional and can be any
-      type of value.
-
-      <code>value</code> is passed to <code>callback</code>.</p>
-
-      <p>Calling <code>media.addCue()</code> returns an ID as a string. This is
-      useful for
-
-      removing the cue later.</p>
-    path: p5.MediaElement/addCue
-  removeCue:
-    description: |
-      <p>Removes a callback based on its ID.</p>
-    path: p5.MediaElement/removeCue
-  clearCues:
-    description: |
-      <p>Removes all functions scheduled with <code>media.addCue()</code>.</p>
-    path: p5.MediaElement/clearCues
-properties:
-  src:
-    description: |
-      <p>Path to the media element's source as a string.</p>
-    path: p5.MediaElement/src
-chainable: false
----
-
-
-# p5.MediaElement
diff --git a/src/content/reference/en/p5 copy/p5.NumberDict.mdx b/src/content/reference/en/p5 copy/p5.NumberDict.mdx
deleted file mode 100644
index d385eb1468..0000000000
--- a/src/content/reference/en/p5 copy/p5.NumberDict.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L415
-title: p5.NumberDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>A simple Dictionary class for Numbers.</p>
-line: 415
-isConstructor: true
-methods:
-  add:
-    description: |
-      <p>Add the given number to the value currently stored at the given key.
-      The sum then replaces the value previously stored in the Dictionary.</p>
-    path: p5.NumberDict/add
-  sub:
-    description: >
-      <p>Subtract the given number from the value currently stored at the given
-      key.
-
-      The difference then replaces the value previously stored in the
-      Dictionary.</p>
-    path: p5.NumberDict/sub
-  mult:
-    description: >
-      <p>Multiply the given number with the value currently stored at the given
-      key.
-
-      The product then replaces the value previously stored in the
-      Dictionary.</p>
-    path: p5.NumberDict/mult
-  div:
-    description: >
-      <p>Divide the given number with the value currently stored at the given
-      key.
-
-      The quotient then replaces the value previously stored in the
-      Dictionary.</p>
-    path: p5.NumberDict/div
-  minValue:
-    description: |
-      <p>Return the lowest number currently stored in the Dictionary.</p>
-    path: p5.NumberDict/minValue
-  maxValue:
-    description: |
-      <p>Return the highest number currently stored in the Dictionary.</p>
-    path: p5.NumberDict/maxValue
-  minKey:
-    description: |
-      <p>Return the lowest key currently used in the Dictionary.</p>
-    path: p5.NumberDict/minKey
-  maxKey:
-    description: |
-      <p>Return the highest key currently used in the Dictionary.</p>
-    path: p5.NumberDict/maxKey
-chainable: false
----
-
-
-# p5.NumberDict
diff --git a/src/content/reference/en/p5 copy/p5.PrintWriter.mdx b/src/content/reference/en/p5 copy/p5.PrintWriter.mdx
deleted file mode 100644
index 7662b4f910..0000000000
--- a/src/content/reference/en/p5 copy/p5.PrintWriter.mdx	
+++ /dev/null
@@ -1,35 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1565
-title: p5.PrintWriter
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>A class to describe a print stream.</p>
-
-  <p>Each <code>p5.PrintWriter</code> object provides a way to save a sequence
-  of text
-
-  data, called the <em>print stream</em>, to the user's computer. It's a
-  low-level
-
-  object that enables precise control of text output. Functions such as
-
-  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
-
-  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
-  file
-
-  saving.</p>
-
-  <p>Note: <a href="/reference/p5/createWriter/">createWriter()</a> is the
-  recommended way
-
-  to make an instance of this class.</p>
-line: 1565
----
-
-
-# p5.PrintWriter
diff --git a/src/content/reference/en/p5 copy/p5.Renderer.mdx b/src/content/reference/en/p5 copy/p5.Renderer.mdx
deleted file mode 100644
index 5fa9dd1cd1..0000000000
--- a/src/content/reference/en/p5 copy/p5.Renderer.mdx	
+++ /dev/null
@@ -1,34 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Renderer.js#L10
-title: p5.Renderer
-module: Rendering
-submodule: Rendering
-file: src/core/p5.Renderer.js
-description: |
-  <p>Main graphics and rendering context, as well as the base API
-  implementation for p5.js "core". To be used as the superclass for
-  Renderer2D and Renderer3D classes, respectively.</p>
-line: 10
-isConstructor: true
-params:
-  - name: elt
-    description: |
-      <p>DOM node that is wrapped</p>
-    type: HTMLElement
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance</p>
-    type: P5
-    optional: true
-  - name: isMainCanvas
-    description: |
-      <p>whether we're using it as main canvas</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# p5.Renderer
diff --git a/src/content/reference/en/p5 copy/p5.Shader.mdx b/src/content/reference/en/p5 copy/p5.Shader.mdx
deleted file mode 100644
index 1730091ac1..0000000000
--- a/src/content/reference/en/p5 copy/p5.Shader.mdx	
+++ /dev/null
@@ -1,433 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Shader.js#L11
-title: p5.Shader
-module: 3D
-submodule: Material
-file: src/webgl/p5.Shader.js
-description: >
-  <p>A class to describe a shader program.</p>
-
-  <p>Each <code>p5.Shader</code> object contains a shader program that runs on
-  the graphics
-
-  processing unit (GPU). Shaders can process many pixels or vertices at the
-
-  same time, making them fast for many graphics tasks. They’re written in a
-
-  language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.</p>
-
-  <p>A shader program consists of two files, a vertex shader and a fragment
-
-  shader. The vertex shader affects where 3D geometry is drawn on the screen
-
-  and the fragment shader affects color. Once the <code>p5.Shader</code> object
-  is
-
-  created, it can be used with the <a href="/reference/p5/shader/">shader()</a>
-
-  function, as in <code>shader(myShader)</code>.</p>
-
-  <p>A shader can optionally describe <em>hooks,</em> which are functions in
-  GLSL that
-
-  users may choose to provide to customize the behavior of the shader. For the
-
-  vertex or the fragment shader, users can pass in an object where each key is
-
-  the type and name of a hook function, and each value is a string with the
-
-  parameter list and default implementation of the hook. For example, to let
-  users
-
-  optionally run code at the start of the vertex shader, the options object
-  could
-
-  include:</p>
-
-  <pre><code class="language-js">{
-    vertex: {
-      'void beforeVertex': '() {}'
-    }
-  }
-
-  </code></pre>
-
-  <p>Then, in your vertex shader source, you can run a hook by calling a
-  function
-
-  with the same name prefixed by <code>HOOK_</code>:</p>
-
-  <pre><code class="language-glsl">void main() {
-    HOOK_beforeVertex();
-    // Add the rest of your shader code here!
-  }
-
-  </code></pre>
-
-  <p>Note: <a href="/reference/p5/createShader/">createShader()</a>,
-
-  <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, and
-
-  <a href="/reference/p5/loadShader/">loadShader()</a> are the recommended ways
-  to
-
-  create an instance of this class.</p>
-line: 11
-isConstructor: true
-params:
-  - name: renderer
-    description: |
-      <p>WebGL context for this shader.</p>
-    type: p5.RendererGL
-  - name: vertSrc
-    description: |
-      <p>source code for the vertex shader program.</p>
-    type: String
-  - name: fragSrc
-    description: |
-      <p>source code for the fragment shader program.</p>
-    type: String
-  - name: options
-    description: >
-      <p>An optional object describing how this shader can
-
-      be augmented with hooks. It can include:</p>
-
-      <ul>
-
-      <li><code>vertex</code>: An object describing the available vertex shader
-      hooks.</li>
-
-      <li><code>fragment</code>: An object describing the available frament
-      shader hooks.</li>
-
-      </ul>
-    type: Object
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-
-    void main() {
-      // Set each pixel's RGBA value to yellow.
-      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let myShader = createShader(vertSrc, fragSrc);
-
-      // Apply the p5.Shader object.
-      shader(myShader);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A yellow square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates between 0 and 2.
-      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-    </code>
-    </div>
-methods:
-  inspectHooks:
-    description: >
-      <p>Logs the hooks available in this shader, and their current
-      implementation.</p>
-
-      <p>Each shader may let you override bits of its behavior. Each bit is
-      called
-
-      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
-      affects the
-
-      position of vertices, or in the <em>fragment</em> shader, if it affects
-      the pixel
-
-      color. This method logs those values to the console, letting you know what
-
-      you are able to use in a call to
-
-      <a href="/reference/p5.Shader/modify/"><code>modify()</code></a>.</p>
-
-      <p>For example, this shader will produce the following output:</p>
-
-      <pre><code class="language-js">myShader = baseMaterialShader().modify({
-        declarations: 'uniform float time;',
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-
-      myShader.inspectHooks();
-
-      </code></pre>
-
-      <pre><code>==== Vertex shader hooks: ====
-
-      void beforeVertex() {}
-
-      vec3 getLocalPosition(vec3 position) { return position; }
-
-      [MODIFIED] vec3 getWorldPosition(vec3 pos) {
-            pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-            return pos;
-          }
-      vec3 getLocalNormal(vec3 normal) { return normal; }
-
-      vec3 getWorldNormal(vec3 normal) { return normal; }
-
-      vec2 getUV(vec2 uv) { return uv; }
-
-      vec4 getVertexColor(vec4 color) { return color; }
-
-      void afterVertex() {}
-
-
-      ==== Fragment shader hooks: ====
-
-      void beforeFragment() {}
-
-      Inputs getPixelInputs(Inputs inputs) { return inputs; }
-
-      vec4 combineColors(ColorComponents components) {
-                      vec4 color = vec4(0.);
-                      color.rgb += components.diffuse * components.baseColor;
-                      color.rgb += components.ambient * components.ambientColor;
-                      color.rgb += components.specular * components.specularColor;
-                      color.rgb += components.emissive;
-                      color.a = components.opacity;
-                      return color;
-                    }
-      vec4 getFinalColor(vec4 color) { return color; }
-
-      void afterFragment() {}
-
-      </code></pre>
-    path: p5.Shader/inspectHooks
-  modify:
-    description: >
-      <p>Returns a new shader, based on the original, but with custom snippets
-
-      of shader code replacing default behaviour.</p>
-
-      <p>Each shader may let you override bits of its behavior. Each bit is
-      called
-
-      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
-      affects the
-
-      position of vertices, or in the <em>fragment</em> shader, if it affects
-      the pixel
-
-      color. You can inspect the different hooks available by calling
-
-      <a
-      href="/reference/p5.Shader/inspectHooks/"><code>yourShader.inspectHooks()</code></a>.
-      You can
-
-      also read the reference for the default material, normal material, color,
-      line, and point shaders to
-
-      see what hooks they have available.</p>
-
-      <p><code>modify()</code> takes one parameter, <code>hooks</code>, an
-      object with the hooks you want
-
-      to override. Each key of the <code>hooks</code> object is the name
-
-      of a hook, and the value is a string with the GLSL code for your hook.</p>
-
-      <p>If you supply functions that aren't existing hooks, they will get added
-      at the start of
-
-      the shader as helper functions so that you can use them in your hooks.</p>
-
-      <p>To add new <a href="/reference/p5.Shader/setUniform/">uniforms</a> to
-      your shader, you can pass in a <code>uniforms</code> object containing
-
-      the type and name of the uniform as the key, and a default value or
-      function returning
-
-      a default value as its value. These will be automatically set when the
-      shader is set
-
-      with <code>shader(yourShader)</code>.</p>
-
-      <p>You can also add a <code>declarations</code> key, where the value is a
-      GLSL string declaring
-
-      custom uniform variables, globals, and functions shared
-
-      between hooks. To add declarations just in a vertex or fragment shader,
-      add
-
-      <code>vertexDeclarations</code> and <code>fragmentDeclarations</code>
-      keys.</p>
-    path: p5.Shader/modify
-  copyToContext:
-    description: >
-      <p>Copies the shader from one drawing context to another.</p>
-
-      <p>Each <code>p5.Shader</code> object must be compiled by calling
-
-      <a href="/reference/p5/shader/">shader()</a> before it can run.
-      Compilation happens
-
-      in a drawing context which is usually the main canvas or an instance of
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>. A shader can only be
-      used in the
-
-      context where it was compiled. The <code>copyToContext()</code> method
-      compiles the
-
-      shader again and copies it to another drawing context where it can be
-
-      reused.</p>
-
-      <p>The parameter, <code>context</code>, is the drawing context where the
-      shader will be
-
-      used. The shader can be copied to an instance of
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>, as in
-
-      <code>myShader.copyToContext(pg)</code>. The shader can also be copied
-      from a
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object to the main
-      canvas using
-
-      the <code>window</code> variable, as in
-      <code>myShader.copyToContext(window)</code>.</p>
-
-      <p>Note: A <a href="/reference/p5/p5.Shader">p5.Shader</a> object created
-      with
-
-      <a href="/reference/p5/createShader/">createShader()</a>,
-
-      <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, or
-
-      <a href="/reference/p5/loadShader/">loadShader()</a>
-
-      can be used directly with a <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
-
-      object created with
-
-      <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a>. Both
-      objects
-
-      have the same context as the main canvas.</p>
-    path: p5.Shader/copyToContext
-  setUniform:
-    description: >
-      <p>Sets the shader’s uniform (global) variables.</p>
-
-      <p>Shader programs run on the computer’s graphics processing unit (GPU).
-
-      They live in part of the computer’s memory that’s completely separate
-
-      from the sketch that runs them. Uniforms are global variables within a
-
-      shader program. They provide a way to pass values from a sketch running
-
-      on the CPU to a shader program running on the GPU.</p>
-
-      <p>The first parameter, <code>uniformName</code>, is a string with the
-      uniform’s name.
-
-      For the shader above, <code>uniformName</code> would be
-      <code>'r'</code>.</p>
-
-      <p>The second parameter, <code>data</code>, is the value that should be
-      used to set the
-
-      uniform. For example, calling <code>myShader.setUniform('r', 0.5)</code>
-      would set
-
-      the <code>r</code> uniform in the shader above to <code>0.5</code>. data
-      should match the
-
-      uniform’s type. Numbers, strings, booleans, arrays, and many types of
-
-      images can all be passed to a shader with <code>setUniform()</code>.</p>
-    path: p5.Shader/setUniform
-chainable: false
----
-
-
-# p5.Shader
diff --git a/src/content/reference/en/p5 copy/p5.StringDict.mdx b/src/content/reference/en/p5 copy/p5.StringDict.mdx
deleted file mode 100644
index 5ca466e5d1..0000000000
--- a/src/content/reference/en/p5 copy/p5.StringDict.mdx	
+++ /dev/null
@@ -1,15 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L397
-title: p5.StringDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>A simple Dictionary class for Strings.</p>
-line: 397
----
-
-
-# p5.StringDict
diff --git a/src/content/reference/en/p5 copy/p5.Table.mdx b/src/content/reference/en/p5 copy/p5.Table.mdx
deleted file mode 100644
index 41ad72b0d1..0000000000
--- a/src/content/reference/en/p5 copy/p5.Table.mdx	
+++ /dev/null
@@ -1,213 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.Table.js#L33
-title: p5.Table
-module: IO
-submodule: Table
-file: src/io/p5.Table.js
-description: >
-  <p><a href="/reference/p5/p5.Table">Table</a> objects store data with multiple
-  rows and columns, much
-
-  like in a traditional spreadsheet. Tables can be generated from
-
-  scratch, dynamically, or using data from an existing file.</p>
-line: 33
-isConstructor: true
-params:
-  - name: rows
-    description: |
-      <p>An array of p5.TableRow objects</p>
-    type: 'p5.TableRow[]'
-    optional: true
-methods:
-  addRow:
-    description: >
-      <p>Use <a href="/reference/p5/addRow/">addRow()</a> to add a new row of
-      data to a <a href="/reference/p5/p5.Table">p5.Table</a> object. By
-      default,
-
-      an empty row is created. Typically, you would store a reference to
-
-      the new row in a TableRow object (see newRow in the example above),
-
-      and then set individual values using <a
-      href="/reference/p5/set/">set()</a>.</p>
-
-      <p>If a <a href="/reference/p5/p5.TableRow">p5.TableRow</a> object is
-      included as a parameter, then that row is
-
-      duplicated and added to the table.</p>
-    path: p5.Table/addRow
-  removeRow:
-    description: |
-      <p>Removes a row from the table object.</p>
-    path: p5.Table/removeRow
-  getRow:
-    description: >
-      <p>Returns a reference to the specified <a
-      href="/reference/p5/p5.TableRow">p5.TableRow</a>. The reference
-
-      can then be used to get and set values of the selected row.</p>
-    path: p5.Table/getRow
-  getRows:
-    description: >
-      <p>Gets all rows from the table. Returns an array of <a
-      href="/reference/p5/p5.TableRow">p5.TableRow</a>s.</p>
-    path: p5.Table/getRows
-  findRow:
-    description: |
-      <p>Finds the first row in the Table that contains the value
-      provided, and returns a reference to that row. Even if
-      multiple rows are possible matches, only the first matching
-      row is returned. The column to search may be specified by
-      either its ID or title.</p>
-    path: p5.Table/findRow
-  findRows:
-    description: |
-      <p>Finds the rows in the Table that contain the value
-      provided, and returns references to those rows. Returns an
-      Array, so for must be used to iterate through all the rows,
-      as shown in the example above. The column to search may be
-      specified by either its ID or title.</p>
-    path: p5.Table/findRows
-  matchRow:
-    description: |
-      <p>Finds the first row in the Table that matches the regular
-      expression provided, and returns a reference to that row.
-      Even if multiple rows are possible matches, only the first
-      matching row is returned. The column to search may be
-      specified by either its ID or title.</p>
-    path: p5.Table/matchRow
-  matchRows:
-    description: |
-      <p>Finds the rows in the Table that match the regular expression provided,
-      and returns references to those rows. Returns an array, so for must be
-      used to iterate through all the rows, as shown in the example. The
-      column to search may be specified by either its ID or title.</p>
-    path: p5.Table/matchRows
-  getColumn:
-    description: |
-      <p>Retrieves all values in the specified column, and returns them
-      as an array. The column may be specified by either its ID or title.</p>
-    path: p5.Table/getColumn
-  clearRows:
-    description: |
-      <p>Removes all rows from a Table. While all rows are removed,
-      columns and column titles are maintained.</p>
-    path: p5.Table/clearRows
-  addColumn:
-    description: >
-      <p>Use <a href="/reference/p5/addColumn/">addColumn()</a> to add a new
-      column to a <a href="/reference/p5/p5.Table">Table</a> object.
-
-      Typically, you will want to specify a title, so the column
-
-      may be easily referenced later by name. (If no title is
-
-      specified, the new column's title will be null.)</p>
-    path: p5.Table/addColumn
-  getColumnCount:
-    description: |
-      <p>Returns the total number of columns in a Table.</p>
-    path: p5.Table/getColumnCount
-  getRowCount:
-    description: |
-      <p>Returns the total number of rows in a Table.</p>
-    path: p5.Table/getRowCount
-  removeTokens:
-    description: |
-      <p>Removes any of the specified characters (or "tokens").</p>
-      <p>If no column is specified, then the values in all columns and
-      rows are processed. A specific column may be referenced by
-      either its ID or title.</p>
-    path: p5.Table/removeTokens
-  trim:
-    description: |
-      <p>Trims leading and trailing whitespace, such as spaces and tabs,
-      from String table values. If no column is specified, then the
-      values in all columns and rows are trimmed. A specific column
-      may be referenced by either its ID or title.</p>
-    path: p5.Table/trim
-  removeColumn:
-    description: >
-      <p>Use <a href="/reference/p5/removeColumn/">removeColumn()</a> to remove
-      an existing column from a Table
-
-      object. The column to be removed may be identified by either
-
-      its title (a String) or its index value (an int).
-
-      removeColumn(0) would remove the first column, removeColumn(1)
-
-      would remove the second column, and so on.</p>
-    path: p5.Table/removeColumn
-  set:
-    description: |
-      <p>Stores a value in the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified
-      by either its ID or title.</p>
-    path: p5.Table/set
-  setNum:
-    description: |
-      <p>Stores a Float value in the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified
-      by either its ID or title.</p>
-    path: p5.Table/setNum
-  setString:
-    description: |
-      <p>Stores a String value in the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified
-      by either its ID or title.</p>
-    path: p5.Table/setString
-  get:
-    description: |
-      <p>Retrieves a value from the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified by
-      either its ID or title.</p>
-    path: p5.Table/get
-  getNum:
-    description: |
-      <p>Retrieves a Float value from the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified by
-      either its ID or title.</p>
-    path: p5.Table/getNum
-  getString:
-    description: |
-      <p>Retrieves a String value from the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified by
-      either its ID or title.</p>
-    path: p5.Table/getString
-  getObject:
-    description: |
-      <p>Retrieves all table data and returns as an object. If a column name is
-      passed in, each row object will be stored with that attribute as its
-      title.</p>
-    path: p5.Table/getObject
-  getArray:
-    description: >
-      <p>Retrieves all table data and returns it as a multidimensional
-      array.</p>
-    path: p5.Table/getArray
-properties:
-  columns:
-    description: >
-      <p>An array containing the names of the columns in the table, if the
-      "header" the table is
-
-      loaded with the "header" parameter.</p>
-    path: p5.Table/columns
-  rows:
-    description: >
-      <p>An array containing the <a
-      href="/reference/p5/p5.Table">p5.TableRow</a> objects that make up the
-
-      rows of the table. The same result as calling <a
-      href="/reference/p5/getRows/">getRows()</a></p>
-    path: p5.Table/rows
-chainable: false
----
-
-
-# p5.Table
diff --git a/src/content/reference/en/p5 copy/p5.TableRow.mdx b/src/content/reference/en/p5 copy/p5.TableRow.mdx
deleted file mode 100644
index 00081f9654..0000000000
--- a/src/content/reference/en/p5 copy/p5.TableRow.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.TableRow.js#L9
-title: p5.TableRow
-module: IO
-submodule: Table
-file: src/io/p5.TableRow.js
-description: |
-  <p>A TableRow object represents a single row of data values,
-  stored in columns, from a table.</p>
-  <p>A Table Row contains both an ordered array, and an unordered
-  JSON object.</p>
-line: 9
-isConstructor: true
-params:
-  - name: str
-    description: |
-      <p>optional: populate the row with a
-                                  string of values, separated by the
-                                  separator</p>
-    type: String
-    optional: true
-  - name: separator
-    description: |
-      <p>comma separated values (csv) by default</p>
-    type: String
-    optional: true
-methods:
-  set:
-    description: |
-      <p>Stores a value in the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/set
-  setNum:
-    description: |
-      <p>Stores a Float value in the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/setNum
-  setString:
-    description: |
-      <p>Stores a String value in the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/setString
-  get:
-    description: |
-      <p>Retrieves a value from the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/get
-  getNum:
-    description: |
-      <p>Retrieves a Float value from the TableRow's specified
-      column. The column may be specified by either its ID or
-      title.</p>
-    path: p5.TableRow/getNum
-  getString:
-    description: |
-      <p>Retrieves an String value from the TableRow's specified
-      column. The column may be specified by either its ID or
-      title.</p>
-    path: p5.TableRow/getString
-chainable: false
----
-
-
-# p5.TableRow
diff --git a/src/content/reference/en/p5 copy/p5.TypedDict.mdx b/src/content/reference/en/p5 copy/p5.TypedDict.mdx
deleted file mode 100644
index 2bcb7b5752..0000000000
--- a/src/content/reference/en/p5 copy/p5.TypedDict.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L82
-title: p5.TypedDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>Base class for all p5.Dictionary types. Specifically
-   typed Dictionary classes inherit from this class.</p>
-line: 82
-isConstructor: true
-methods:
-  size:
-    description: >
-      <p>Returns the number of key-value pairs currently stored in the
-      Dictionary.</p>
-    path: p5.TypedDict/size
-  hasKey:
-    description: |
-      <p>Returns true if the given key exists in the Dictionary,
-      otherwise returns false.</p>
-    path: p5.TypedDict/hasKey
-  get:
-    description: |
-      <p>Returns the value stored at the given key.</p>
-    path: p5.TypedDict/get
-  set:
-    description: >
-      <p>Updates the value associated with the given key in case it already
-      exists
-
-      in the Dictionary. Otherwise a new key-value pair is added.</p>
-    path: p5.TypedDict/set
-  create:
-    description: |
-      <p>Creates a new key-value pair in the Dictionary.</p>
-    path: p5.TypedDict/create
-  clear:
-    description: |
-      <p>Removes all previously stored key-value pairs from the Dictionary.</p>
-    path: p5.TypedDict/clear
-  remove:
-    description: >
-      <p>Removes the key-value pair stored at the given key from the
-      Dictionary.</p>
-    path: p5.TypedDict/remove
-  print:
-    description: >
-      <p>Logs the set of items currently stored in the Dictionary to the
-      console.</p>
-    path: p5.TypedDict/print
-  saveTable:
-    description: |
-      <p>Converts the Dictionary into a CSV file for local download.</p>
-    path: p5.TypedDict/saveTable
-  saveJSON:
-    description: |
-      <p>Converts the Dictionary into a JSON file for local download.</p>
-    path: p5.TypedDict/saveJSON
-chainable: false
----
-
-
-# p5.TypedDict
diff --git a/src/content/reference/en/p5 copy/p5.Vector.mdx b/src/content/reference/en/p5 copy/p5.Vector.mdx
deleted file mode 100644
index ff67d7562c..0000000000
--- a/src/content/reference/en/p5 copy/p5.Vector.mdx	
+++ /dev/null
@@ -1,673 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/p5.Vector.js#L11
-title: p5.Vector
-module: Math
-submodule: Vector
-file: src/math/p5.Vector.js
-description: >
-  <p>A class to describe a two or three-dimensional vector.</p>
-
-  <p>A vector can be thought of in different ways. In one view, a vector is like
-
-  an arrow pointing in space. Vectors have both magnitude (length) and
-
-  direction.</p>
-
-  <p><code>p5.Vector</code> objects are often used to program motion because
-  they simplify
-
-  the math. For example, a moving ball has a position and a velocity.
-
-  Position describes where the ball is in space. The ball's position vector
-
-  extends from the origin to the ball's center. Velocity describes the ball's
-
-  speed and the direction it's moving. If the ball is moving straight up, its
-
-  velocity vector points straight up. Adding the ball's velocity vector to
-
-  its position vector moves it, as in <code>pos.add(vel)</code>. Vector math
-  relies on
-
-  methods inside the <code>p5.Vector</code> class.</p>
-
-  <p>Note: <a href="/reference/p5/createVector/">createVector()</a> is the
-  recommended way
-
-  to make an instance of this class.</p>
-line: 11
-isConstructor: true
-params:
-  - name: x
-    description: |
-      <p>x component of the vector.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y component of the vector.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z component of the vector.</p>
-    type: Number
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create p5.Vector objects.
-      let p1 = createVector(25, 25);
-      let p2 = createVector(75, 75);
-
-      // Style the points.
-      strokeWeight(5);
-
-      // Draw the first point using a p5.Vector.
-      point(p1);
-
-      // Draw the second point using a p5.Vector's components.
-      point(p2.x, p2.y);
-
-      describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pos;
-    let vel;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create p5.Vector objects.
-      pos = createVector(50, 100);
-      vel = createVector(0, -1);
-
-      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Add velocity to position.
-      pos.add(vel);
-
-      // If the dot reaches the top of the canvas,
-      // restart from the bottom.
-      if (pos.y < 0) {
-        pos.y = 100;
-      }
-
-      // Draw the dot.
-      strokeWeight(5);
-      point(pos);
-    }
-    </code>
-    </div>
-methods:
-  toString:
-    description: >
-      <p>Returns a string representation of a vector.</p>
-
-      <p>Calling <code>toString()</code> is useful for printing vectors to the
-      console while
-
-      debugging.</p>
-    path: p5.Vector/toString
-  set:
-    description: >
-      <p>Sets the vector's <code>x</code>, <code>y</code>, and <code>z</code>
-      components.</p>
-
-      <p><code>set()</code> can use separate numbers, as in <code>v.set(1, 2,
-      3)</code>, a
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.set(v2)</code>, or an
-
-      array of numbers, as in <code>v.set([1, 2, 3])</code>.</p>
-
-      <p>If a value isn't provided for a component, it will be set to 0. For
-
-      example, <code>v.set(4, 5)</code> sets <code>v.x</code> to 4,
-      <code>v.y</code> to 5, and <code>v.z</code> to 0.
-
-      Calling <code>set()</code> with no arguments, as in <code>v.set()</code>,
-      sets all the vector's
-
-      components to 0.</p>
-    path: p5.Vector/set
-  copy:
-    description: >
-      <p>Returns a copy of the <a href="/reference/p5/p5.Vector">p5.Vector</a>
-      object.</p>
-    path: p5.Vector/copy
-  add:
-    description: >
-      <p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code>
-      components.</p>
-
-      <p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2,
-      3)</code>,
-
-      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.add(v2)</code>, or
-
-      an array of numbers, as in <code>v.add([1, 2, 3])</code>.</p>
-
-      <p>If a value isn't provided for a component, it won't change. For
-
-      example, <code>v.add(4, 5)</code> adds 4 to <code>v.x</code>, 5 to
-      <code>v.y</code>, and 0 to <code>v.z</code>.
-
-      Calling <code>add()</code> with no arguments, as in <code>v.add()</code>,
-      has no effect.</p>
-
-      <p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
-      v1)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/add
-  rem:
-    description: >
-      <p>Performs modulo (remainder) division with a vector's <code>x</code>,
-      <code>y</code>, and <code>z</code>
-
-      components.</p>
-
-      <p><code>rem()</code> can use separate numbers, as in <code>v.rem(1, 2,
-      3)</code>,
-
-      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.rem(v2)</code>, or
-
-      an array of numbers, as in <code>v.rem([1, 2, 3])</code>.</p>
-
-      <p>If only one value is provided, as in <code>v.rem(2)</code>, then all
-      the components
-
-      will be set to their values modulo 2. If two values are provided, as in
-
-      <code>v.rem(2, 3)</code>, then <code>v.z</code> won't change. Calling
-      <code>rem()</code> with no
-
-      arguments, as in <code>v.rem()</code>, has no effect.</p>
-
-      <p>The static version of <code>rem()</code>, as in <code>p5.Vector.rem(v2,
-      v1)</code>, returns a
-
-      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
-      change the
-
-      originals.</p>
-    path: p5.Vector/rem
-  sub:
-    description: >
-      <p>Subtracts from a vector's <code>x</code>, <code>y</code>, and
-      <code>z</code> components.</p>
-
-      <p><code>sub()</code> can use separate numbers, as in <code>v.sub(1, 2,
-      3)</code>, another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.sub(v2)</code>, or an array
-
-      of numbers, as in <code>v.sub([1, 2, 3])</code>.</p>
-
-      <p>If a value isn't provided for a component, it won't change. For
-
-      example, <code>v.sub(4, 5)</code> subtracts 4 from <code>v.x</code>, 5
-      from <code>v.y</code>, and 0 from <code>v.z</code>.
-
-      Calling <code>sub()</code> with no arguments, as in <code>v.sub()</code>,
-      has no effect.</p>
-
-      <p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2,
-      v1)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/sub
-  mult:
-    description: >
-      <p>Multiplies a vector's <code>x</code>, <code>y</code>, and
-      <code>z</code> components.</p>
-
-      <p><code>mult()</code> can use separate numbers, as in <code>v.mult(1, 2,
-      3)</code>, another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.mult(v2)</code>, or an array
-
-      of numbers, as in <code>v.mult([1, 2, 3])</code>.</p>
-
-      <p>If only one value is provided, as in <code>v.mult(2)</code>, then all
-      the components
-
-      will be multiplied by 2. If a value isn't provided for a component, it
-
-      won't change. For example, <code>v.mult(4, 5)</code> multiplies
-      <code>v.x</code> by 4, <code>v.y</code> by 5,
-
-      and <code>v.z</code> by 1. Calling <code>mult()</code> with no arguments,
-      as in <code>v.mult()</code>, has
-
-      no effect.</p>
-
-      <p>The static version of <code>mult()</code>, as in
-      <code>p5.Vector.mult(v, 2)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/mult
-  div:
-    description: >
-      <p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code>
-      components.</p>
-
-      <p><code>div()</code> can use separate numbers, as in <code>v.div(1, 2,
-      3)</code>, another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.div(v2)</code>, or an array
-
-      of numbers, as in <code>v.div([1, 2, 3])</code>.</p>
-
-      <p>If only one value is provided, as in <code>v.div(2)</code>, then all
-      the components
-
-      will be divided by 2. If a value isn't provided for a component, it
-
-      won't change. For example, <code>v.div(4, 5)</code> divides
-      <code>v.x</code> by, <code>v.y</code> by 5,
-
-      and <code>v.z</code> by 1. Calling <code>div()</code> with no arguments,
-      as in <code>v.div()</code>, has
-
-      no effect.</p>
-
-      <p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v,
-      2)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/div
-  mag:
-    description: >
-      <p>Calculates the magnitude (length) of the vector.</p>
-
-      <p>Use <a href="/reference/p5/mag/">mag()</a> to calculate the magnitude
-      of a 2D vector
-
-      using components as in <code>mag(x, y)</code>.</p>
-    path: p5.Vector/mag
-  magSq:
-    description: |
-      <p>Calculates the magnitude (length) of the vector squared.</p>
-    path: p5.Vector/magSq
-  dot:
-    description: >
-      <p>Calculates the dot product of two vectors.</p>
-
-      <p>The dot product is a number that describes the overlap between two
-      vectors.
-
-      Visually, the dot product can be thought of as the "shadow" one vector
-
-      casts on another. The dot product's magnitude is largest when two vectors
-
-      point in the same or opposite directions. Its magnitude is 0 when two
-
-      vectors form a right angle.</p>
-
-      <p>The version of <code>dot()</code> with one parameter interprets it as
-      another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-
-      <p>The version of <code>dot()</code> with multiple parameters interprets
-      them as the
-
-      <code>x</code>, <code>y</code>, and <code>z</code> components of another
-      vector.</p>
-
-      <p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1,
-      v2)</code>, is the same
-
-      as calling <code>v1.dot(v2)</code>.</p>
-    path: p5.Vector/dot
-  cross:
-    description: >
-      <p>Calculates the cross product of two vectors.</p>
-
-      <p>The cross product is a vector that points straight out of the plane
-      created
-
-      by two vectors. The cross product's magnitude is the area of the
-      parallelogram
-
-      formed by the original two vectors.</p>
-
-      <p>The static version of <code>cross()</code>, as in
-      <code>p5.Vector.cross(v1, v2)</code>, is the same
-
-      as calling <code>v1.cross(v2)</code>.</p>
-    path: p5.Vector/cross
-  dist:
-    description: >
-      <p>Calculates the distance between two points represented by vectors.</p>
-
-      <p>A point's coordinates can be represented by the components of a vector
-
-      that extends from the origin to the point.</p>
-
-      <p>The static version of <code>dist()</code>, as in
-      <code>p5.Vector.dist(v1, v2)</code>, is the same
-
-      as calling <code>v1.dist(v2)</code>.</p>
-
-      <p>Use <a href="/reference/p5/dist/">dist()</a> to calculate the distance
-      between points
-
-      using coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>
-    path: p5.Vector/dist
-  normalize:
-    description: >
-      <p>Scales the components of a <a
-      href="/reference/p5/p5.Vector">p5.Vector</a> object so
-
-      that its magnitude is 1.</p>
-
-      <p>The static version of <code>normalize()</code>,  as in
-      <code>p5.Vector.normalize(v)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/normalize
-  limit:
-    description: >
-      <p>Limits a vector's magnitude to a maximum value.</p>
-
-      <p>The static version of <code>limit()</code>, as in
-      <code>p5.Vector.limit(v, 5)</code>, returns a
-
-      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
-      change the
-
-      original.</p>
-    path: p5.Vector/limit
-  setMag:
-    description: >
-      <p>Sets a vector's magnitude to a given value.</p>
-
-      <p>The static version of <code>setMag()</code>, as in
-      <code>p5.Vector.setMag(v, 10)</code>, returns
-
-      a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
-      change the
-
-      original.</p>
-    path: p5.Vector/setMag
-  heading:
-    description: >
-      <p>Calculates the angle a 2D vector makes with the positive x-axis.</p>
-
-      <p>By convention, the positive x-axis has an angle of 0. Angles increase
-      in
-
-      the clockwise direction.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>heading()</code> returns angles
-
-      in the units of the current <a
-      href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-      <p>The static version of <code>heading()</code>, as in
-      <code>p5.Vector.heading(v)</code>, works the
-
-      same way.</p>
-    path: p5.Vector/heading
-  setHeading:
-    description: >
-      <p>Rotates a 2D vector to a specific angle without changing its
-      magnitude.</p>
-
-      <p>By convention, the positive x-axis has an angle of 0. Angles increase
-      in
-
-      the clockwise direction.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>setHeading()</code> uses
-
-      the units of the current <a
-      href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Vector/setHeading
-  rotate:
-    description: >
-      <p>Rotates a 2D vector by an angle without changing its magnitude.</p>
-
-      <p>By convention, the positive x-axis has an angle of 0. Angles increase
-      in
-
-      the clockwise direction.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>rotate()</code> uses
-
-      the units of the current <a
-      href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-      <p>The static version of <code>rotate()</code>, as in
-      <code>p5.Vector.rotate(v, PI)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/rotate
-  angleBetween:
-    description: >
-      <p>Calculates the angle between two vectors.</p>
-
-      <p>The angles returned are signed, which means that
-
-      <code>v1.angleBetween(v2) === -v2.angleBetween(v1)</code>.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>angleBetween()</code> returns
-
-      angles in the units of the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Vector/angleBetween
-  lerp:
-    description: >
-      <p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code>
-      components that are proportionally the
-
-      same distance between two vectors.</p>
-
-      <p>The <code>amt</code> parameter is the amount to interpolate between the
-      old vector and
-
-      the new vector. 0.0 keeps all components equal to the old vector's, 0.5 is
-
-      halfway between, and 1.0 sets all components equal to the new
-      vector's.</p>
-
-      <p>The static version of <code>lerp()</code>, as in
-      <code>p5.Vector.lerp(v0, v1, 0.5)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/lerp
-  slerp:
-    description: >
-      <p>Calculates a new heading and magnitude that are between two
-      vectors.</p>
-
-      <p>The <code>amt</code> parameter is the amount to interpolate between the
-      old vector and
-
-      the new vector. 0.0 keeps the heading and magnitude equal to the old
-
-      vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
-
-      magnitude equal to the new vector's.</p>
-
-      <p><code>slerp()</code> differs from <a
-      href="/reference/p5.Vector/lerp/">lerp()</a> because
-
-      it interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets
-      <code>v0</code>'s
-
-      magnitude to a value halfway between its original magnitude and
-      <code>v1</code>'s.
-
-      Calling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>
-
-      <p>The static version of <code>slerp()</code>, as in
-      <code>p5.Vector.slerp(v0, v1, 0.5)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/slerp
-  reflect:
-    description: >
-      <p>Reflects a vector about a line in 2D or a plane in 3D.</p>
-
-      <p>The orientation of the line or plane is described by a normal vector
-      that
-
-      points away from the shape.</p>
-
-      <p>The static version of <code>reflect()</code>, as in
-      <code>p5.Vector.reflect(v, n)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/reflect
-  array:
-    description: |
-      <p>Returns the vector's components as an array of numbers.</p>
-    path: p5.Vector/array
-  equals:
-    description: >
-      <p>Checks whether all the vector's components are equal to another
-      vector's.</p>
-
-      <p><code>equals()</code> returns <code>true</code> if the vector's
-      components are all the same as another
-
-      vector's and <code>false</code> if not.</p>
-
-      <p>The version of <code>equals()</code> with one parameter interprets it
-      as another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-
-      <p>The version of <code>equals()</code> with multiple parameters
-      interprets them as the
-
-      components of another vector. Any missing parameters are assigned the
-      value
-
-      0.</p>
-
-      <p>The static version of <code>equals()</code>, as in
-      <code>p5.Vector.equals(v0, v1)</code>,
-
-      interprets both parameters as <a
-      href="/reference/p5/p5.Vector">p5.Vector</a> objects.</p>
-    path: p5.Vector/equals
-  fromAngle:
-    description: |
-      <p>Creates a new 2D vector from an angle.</p>
-    path: p5.Vector/fromAngle
-  fromAngles:
-    description: |
-      <p>Creates a new 3D vector from a pair of ISO spherical angles.</p>
-    path: p5.Vector/fromAngles
-  random2D:
-    description: |
-      <p>Creates a new 2D unit vector with a random heading.</p>
-    path: p5.Vector/random2D
-  random3D:
-    description: |
-      <p>Creates a new 3D unit vector with a random heading.</p>
-    path: p5.Vector/random3D
-  clampToZero:
-    description: >
-      <p>Replaces the components of a <a
-      href="/reference/p5/p5.Vector">p5.Vector</a> that are very close to zero
-      with zero.</p>
-
-      <p>In computers, handling numbers with decimals can give slightly
-      imprecise answers due to the way those numbers are represented.
-
-      This can make it hard to check if a number is zero, as it may be close but
-      not exactly zero.
-
-      This method rounds very close numbers to zero to make those checks
-      easier</p>
-
-      <p><a
-      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON/">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON</a></p>
-    path: p5.Vector/clampToZero
-properties:
-  x:
-    description: |
-      <p>The x component of the vector</p>
-    path: p5.Vector/x
-  'y':
-    description: |
-      <p>The y component of the vector</p>
-    path: p5.Vector/y
-  z:
-    description: |
-      <p>The z component of the vector</p>
-    path: p5.Vector/z
-chainable: false
----
-
-
-# p5.Vector
diff --git a/src/content/reference/en/p5 copy/p5.XML.mdx b/src/content/reference/en/p5 copy/p5.XML.mdx
deleted file mode 100644
index 71904fded2..0000000000
--- a/src/content/reference/en/p5 copy/p5.XML.mdx	
+++ /dev/null
@@ -1,321 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.XML.js#L9
-title: p5.XML
-module: IO
-submodule: Input
-file: src/io/p5.XML.js
-description: >
-  <p>A class to describe an XML object.</p>
-
-  <p>Each <code>p5.XML</code> object provides an easy way to interact with XML
-  data.
-
-  Extensible Markup Language
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
-  target="_blank">XML</a>)
-
-  is a standard format for sending data between applications. Like HTML, the
-
-  XML format is based on tags and attributes, as in
-
-  <code><time units="s">1234</time></code>.</p>
-
-  <p>Note: Use <a href="/reference/p5/loadXML/">loadXML()</a> to load external
-  XML files.</p>
-line: 9
-isConstructor: true
-example:
-  - |-
-
-    <div>
-    <code>
-    let myXML;
-
-    // Load the XML and create a p5.XML object.
-    function preload() {
-      myXML = loadXML('/assets/animals.xml');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get an array with all mammal tags.
-      let mammals = myXML.getChildren('mammal');
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(14);
-
-      // Iterate over the mammals array.
-      for (let i = 0; i < mammals.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Get the mammal's common name.
-        let name = mammals[i].getContent();
-
-        // Display the mammal's name.
-        text(name, 20, y);
-      }
-
-      describe(
-        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-methods:
-  getParent:
-    description: >
-      <p>Returns the element's parent element as a new <a
-      href="/reference/p5/p5.XML">p5.XML</a>
-
-      object.</p>
-    path: p5.XML/getParent
-  getName:
-    description: >
-      <p>Returns the element's name as a <code>String</code>.</p>
-
-      <p>An XML element's name is given by its tag. For example, the element
-
-      <code><language>JavaScript</language></code> has the name
-      <code>language</code>.</p>
-    path: p5.XML/getName
-  setName:
-    description: >
-      <p>Sets the element's tag name.</p>
-
-      <p>An XML element's name is given by its tag. For example, the element
-
-      <code><language>JavaScript</language></code> has the name
-      <code>language</code>.</p>
-
-      <p>The parameter, <code>name</code>, is the element's new name as a
-      string. For example,
-
-      calling <code>myXML.setName('planet')</code> will make the element's new
-      tag name
-
-      <code><planet></planet></code>.</p>
-    path: p5.XML/setName
-  hasChildren:
-    description: >
-      <p>Returns <code>true</code> if the element has child elements and
-      <code>false</code> if not.</p>
-    path: p5.XML/hasChildren
-  listChildren:
-    description: |
-      <p>Returns an array with the names of the element's child elements as
-      <code>String</code>s.</p>
-    path: p5.XML/listChildren
-  getChildren:
-    description: >
-      <p>Returns an array with the element's child elements as new
-
-      <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
-
-      <p>The parameter, <code>name</code>, is optional. If a string is passed,
-      as in
-
-      <code>myXML.getChildren('cat')</code>, then the method will only return
-      child elements
-
-      with the tag <code><cat></code>.</p>
-    path: p5.XML/getChildren
-  getChild:
-    description: >
-      <p>Returns the first matching child element as a new
-
-      <a href="/reference/p5/p5.XML">p5.XML</a> object.</p>
-
-      <p>The parameter, <code>name</code>, is optional. If a string is passed,
-      as in
-
-      <code>myXML.getChild('cat')</code>, then the first child element with the
-      tag
-
-      <code><cat></code> will be returned. If a number is passed, as in
-
-      <code>myXML.getChild(1)</code>, then the child element at that index will
-      be returned.</p>
-    path: p5.XML/getChild
-  addChild:
-    description: >
-      <p>Adds a new child element and returns a reference to it.</p>
-
-      <p>The parameter, <code>child</code>, is the <a
-      href="/reference/p5/p5.XML">p5.XML</a> object to add
-
-      as a child element. For example, calling
-      <code>myXML.addChild(otherXML)</code> inserts
-
-      <code>otherXML</code> as a child element of <code>myXML</code>.</p>
-    path: p5.XML/addChild
-  removeChild:
-    description: >
-      <p>Removes the first matching child element.</p>
-
-      <p>The parameter, <code>name</code>, is the child element to remove. If a
-      string is
-
-      passed, as in <code>myXML.removeChild('cat')</code>, then the first child
-      element
-
-      with the tag <code><cat></code> will be removed. If a number is passed, as
-      in
-
-      <code>myXML.removeChild(1)</code>, then the child element at that index
-      will be
-
-      removed.</p>
-    path: p5.XML/removeChild
-  getAttributeCount:
-    description: |
-      <p>Returns the number of attributes the element has.</p>
-    path: p5.XML/getAttributeCount
-  listAttributes:
-    description: >
-      <p>Returns an <code>Array</code> with the names of the element's
-      attributes.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/listAttributes
-  hasAttribute:
-    description: >
-      <p>Returns <code>true</code> if the element has a given attribute and
-      <code>false</code> if not.</p>
-
-      <p>The parameter, <code>name</code>, is a string with the name of the
-      attribute being
-
-      checked.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/hasAttribute
-  getNum:
-    description: >
-      <p>Return an attribute's value as a <code>Number</code>.</p>
-
-      <p>The first parameter, <code>name</code>, is a string with the name of
-      the attribute
-
-      being checked. For example, calling <code>myXML.getNum('id')</code>
-      returns the
-
-      element's <code>id</code> attribute as a number.</p>
-
-      <p>The second parameter, <code>defaultValue</code>, is optional. If a
-      number is passed,
-
-      as in <code>myXML.getNum('id', -1)</code>, it will be returned if the
-      attribute
-
-      doesn't exist or can't be converted to a number.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/getNum
-  getString:
-    description: >
-      <p>Return an attribute's value as a string.</p>
-
-      <p>The first parameter, <code>name</code>, is a string with the name of
-      the attribute
-
-      being checked. For example, calling <code>myXML.getString('color')</code>
-      returns the
-
-      element's <code>id</code> attribute as a string.</p>
-
-      <p>The second parameter, <code>defaultValue</code>, is optional. If a
-      string is passed,
-
-      as in <code>myXML.getString('color', 'deeppink')</code>, it will be
-      returned if the
-
-      attribute doesn't exist.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/getString
-  setAttribute:
-    description: >
-      <p>Sets an attribute to a given value.</p>
-
-      <p>The first parameter, <code>name</code>, is a string with the name of
-      the attribute
-
-      being set.</p>
-
-      <p>The second parameter, <code>value</code>, is the attribute's new value.
-      For example,
-
-      calling <code>myXML.setAttribute('id', 123)</code> sets the
-      <code>id</code> attribute to the
-
-      value 123.</p>
-    path: p5.XML/setAttribute
-  getContent:
-    description: >
-      <p>Returns the element's content as a <code>String</code>.</p>
-
-      <p>The parameter, <code>defaultValue</code>, is optional. If a string is
-      passed, as in
-
-      <code>myXML.getContent('???')</code>, it will be returned if the element
-      has no
-
-      content.</p>
-    path: p5.XML/getContent
-  setContent:
-    description: >
-      <p>Sets the element's content.</p>
-
-      <p>An element's content is the text between its tags. For example, the
-      element
-
-      <code><language>JavaScript</language></code> has the content
-      <code>JavaScript</code>.</p>
-
-      <p>The parameter, <code>content</code>, is a string with the element's new
-      content.</p>
-    path: p5.XML/setContent
-  serialize:
-    description: >
-      <p>Returns the element as a <code>String</code>.</p>
-
-      <p><code>myXML.serialize()</code> is useful for sending the element over
-      the network or
-
-      saving it to a file.</p>
-    path: p5.XML/serialize
-chainable: false
----
-
-
-# p5.XML
diff --git a/src/content/reference/en/p5 copy/p5.mdx b/src/content/reference/en/p5 copy/p5.mdx
deleted file mode 100644
index c51b8f8bff..0000000000
--- a/src/content/reference/en/p5 copy/p5.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L12
-title: p5
-module: IO
-submodule: Output
-file: src/core/main.js
-description: >
-  <p>This is the p5 instance constructor.</p>
-
-  <p>A p5 instance holds all the properties and methods related to
-
-  a p5 sketch.  It expects an incoming sketch closure and it can also
-
-  take an optional node parameter for attaching the generated p5 canvas
-
-  to a node.  The sketch closure takes the newly created p5 instance as
-
-  its sole argument and may optionally set <a
-  href="/reference/p5/preload/">preload()</a>,
-
-  <a href="/reference/p5/setup/">setup()</a>, and/or
-
-  <a href="/reference/p5/draw/">draw()</a> properties on it for running a
-  sketch.</p>
-
-  <p>A p5 sketch can run in "global" or "instance" mode:
-
-  "global"   - all properties and methods are attached to the window
-
-  "instance" - all properties and methods are bound to this p5 object</p>
-line: 12
-isConstructor: true
-params:
-  - name: sketch
-    description: |
-      <p>a closure that can set optional <a href="#/p5/preload">preload()</a>,
-                                   <a href="#/p5/setup">setup()</a>, and/or <a href="#/p5/draw">draw()</a> properties on the
-                                   given p5 instance</p>
-    type: Function(p5)
-  - name: node
-    description: |
-      <p>element to attach canvas to</p>
-    type: HTMLElement
-    optional: true
-chainable: false
----
-
-
-# p5
diff --git a/src/content/reference/en/p5 copy/pAccelerationX.mdx b/src/content/reference/en/p5 copy/pAccelerationX.mdx
deleted file mode 100644
index ab1f3e49d1..0000000000
--- a/src/content/reference/en/p5 copy/pAccelerationX.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L90
-title: pAccelerationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable pAccelerationX always contains the acceleration of the
-  device along the x axis in the frame previous to the current frame. Value
-  is represented as meters per second squared.</p>
-line: 90
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# pAccelerationX
diff --git a/src/content/reference/en/p5 copy/pAccelerationY.mdx b/src/content/reference/en/p5 copy/pAccelerationY.mdx
deleted file mode 100644
index 188ae8f77c..0000000000
--- a/src/content/reference/en/p5 copy/pAccelerationY.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L100
-title: pAccelerationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable pAccelerationY always contains the acceleration of the
-  device along the y axis in the frame previous to the current frame. Value
-  is represented as meters per second squared.</p>
-line: 100
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# pAccelerationY
diff --git a/src/content/reference/en/p5 copy/pAccelerationZ.mdx b/src/content/reference/en/p5 copy/pAccelerationZ.mdx
deleted file mode 100644
index f291e6b707..0000000000
--- a/src/content/reference/en/p5 copy/pAccelerationZ.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L110
-title: pAccelerationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable pAccelerationZ always contains the acceleration of the
-  device along the z axis in the frame previous to the current frame. Value
-  is represented as meters per second squared.</p>
-line: 110
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# pAccelerationZ
diff --git a/src/content/reference/en/p5 copy/pRotationX.mdx b/src/content/reference/en/p5 copy/pRotationX.mdx
deleted file mode 100644
index 03d80f8ae5..0000000000
--- a/src/content/reference/en/p5 copy/pRotationX.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L234
-title: pRotationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable pRotationX always contains the rotation of the
-
-  device along the x axis in the frame previous to the current frame.
-
-  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
-  DEGREES,
-
-  the value will be -180 to 180. If it is set to RADIANS, the value will
-
-  be -PI to PI.</p>
-
-  <p>pRotationX can also be used with rotationX to determine the rotate
-
-  direction of the device along the X-axis.</p>
-line: 234
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // A simple if statement looking at whether
-    // rotationX - pRotationX < 0 is true or not will be
-    // sufficient for determining the rotate direction
-    // in most cases.
-
-    // Some extra logic is needed to account for cases where
-    // the angles wrap around.
-    let rotateDirection = 'clockwise';
-
-    // Simple range conversion to make things simpler.
-    // This is not absolutely necessary but the logic
-    // will be different in that case.
-
-    let rX = rotationX + 180;
-    let pRX = pRotationX + 180;
-
-    if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
-      rotateDirection = 'clockwise';
-    } else if (rX - pRX < 0 || rX - pRX > 270) {
-      rotateDirection = 'counter-clockwise';
-    }
-
-    print(rotateDirection);
-    describe('no image to display.');
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pRotationX
diff --git a/src/content/reference/en/p5 copy/pRotationY.mdx b/src/content/reference/en/p5 copy/pRotationY.mdx
deleted file mode 100644
index 3a15f47f43..0000000000
--- a/src/content/reference/en/p5 copy/pRotationY.mdx	
+++ /dev/null
@@ -1,62 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L278
-title: pRotationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable pRotationY always contains the rotation of the
-
-  device along the y axis in the frame previous to the current frame.
-
-  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
-  DEGREES,
-
-  the value will be -90 to 90. If it is set to RADIANS, the value will
-
-  be -PI/2 to PI/2.</p>
-
-  <p>pRotationY can also be used with rotationY to determine the rotate
-
-  direction of the device along the Y-axis.</p>
-line: 278
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // A simple if statement looking at whether
-    // rotationY - pRotationY < 0 is true or not will be
-    // sufficient for determining the rotate direction
-    // in most cases.
-
-    // Some extra logic is needed to account for cases where
-    // the angles wrap around.
-    let rotateDirection = 'clockwise';
-
-    // Simple range conversion to make things simpler.
-    // This is not absolutely necessary but the logic
-    // will be different in that case.
-
-    let rY = rotationY + 180;
-    let pRY = pRotationY + 180;
-
-    if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
-      rotateDirection = 'clockwise';
-    } else if (rY - pRY < 0 || rY - pRY > 270) {
-      rotateDirection = 'counter-clockwise';
-    }
-    print(rotateDirection);
-    describe('no image to display.');
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pRotationY
diff --git a/src/content/reference/en/p5 copy/pRotationZ.mdx b/src/content/reference/en/p5 copy/pRotationZ.mdx
deleted file mode 100644
index 4ae6d5e63f..0000000000
--- a/src/content/reference/en/p5 copy/pRotationZ.mdx	
+++ /dev/null
@@ -1,58 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L321
-title: pRotationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable pRotationZ always contains the rotation of the
-
-  device along the z axis in the frame previous to the current frame.
-
-  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
-  DEGREES,
-
-  the value will be 0 to 360. If it is set to RADIANS, the value will
-
-  be 0 to 2*PI.</p>
-
-  <p>pRotationZ can also be used with rotationZ to determine the rotate
-
-  direction of the device along the Z-axis.</p>
-line: 321
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // A simple if statement looking at whether
-    // rotationZ - pRotationZ < 0 is true or not will be
-    // sufficient for determining the rotate direction
-    // in most cases.
-
-    // Some extra logic is needed to account for cases where
-    // the angles wrap around.
-    let rotateDirection = 'clockwise';
-
-    if (
-      (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
-      rotationZ - pRotationZ < -270
-    ) {
-      rotateDirection = 'clockwise';
-    } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
-      rotateDirection = 'counter-clockwise';
-    }
-    print(rotateDirection);
-    describe('no image to display.');
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pRotationZ
diff --git a/src/content/reference/en/p5 copy/paletteLerp.mdx b/src/content/reference/en/p5 copy/paletteLerp.mdx
deleted file mode 100644
index 54e8c9f885..0000000000
--- a/src/content/reference/en/p5 copy/paletteLerp.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1079
-title: paletteLerp
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Blends multiple colors to find a color between them.</p>
-
-  <p>The <code>amt</code> parameter specifies the amount to interpolate between
-  the color
-
-  stops which are colors at each <code>amt</code> value "location" with
-  <code>amt</code> values
-
-  that are between 2 color stops interpolating between them based on its
-  relative
-
-  distance to both.</p>
-
-  <p>The way that colors are interpolated depends on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 1079
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(400, 400);
-    }
-
-    function draw() {
-      // The background goes from white to red to green to blue fill
-      background(paletteLerp([
-        ['white', 0],
-        ['red', 0.05],
-        ['green', 0.25],
-        ['blue', 1]
-      ], millis() / 10000 % 1));
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: colors_stops
-    description: |
-      <p>color stops to interpolate from</p>
-    type: '[p5.Color, Number][]'
-  - name: amt
-    description: |
-      <p>number to use to interpolate relative to color stops</p>
-    type: Number
-return:
-  description: interpolated color.
-  type: p5.Color
-chainable: false
----
-
-
-# paletteLerp
diff --git a/src/content/reference/en/p5 copy/panorama.mdx b/src/content/reference/en/p5 copy/panorama.mdx
deleted file mode 100644
index 97ee1fd9ca..0000000000
--- a/src/content/reference/en/p5 copy/panorama.mdx	
+++ /dev/null
@@ -1,76 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1021
-title: panorama
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates an immersive 3D background.</p>
-
-  <p><code>panorama()</code> transforms images containing 360˚ content, such as
-  maps or
-
-  HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
-
-  space requires changing the camera's perspective with functions such as
-
-  <a href="/reference/p5/orbitControl/">orbitControl()</a> or
-
-  <a href="/reference/p5/camera/">camera()</a>.</p>
-line: 1021
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="notest">
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(100 ,100 ,WEBGL);
-
-      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
-    }
-
-    function draw() {
-      // Add the panorama.
-      panorama(img);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Use the image as a light source.
-      imageLight(img);
-
-      // Style the sphere.
-      noStroke();
-      specularMaterial(50);
-      shininess(200);
-      metalness(100);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: img
-    description: |
-      <p>360˚ image to use as the background.</p>
-    type: p5.Image
-chainable: false
----
-
-
-# panorama
diff --git a/src/content/reference/en/p5 copy/perspective.mdx b/src/content/reference/en/p5 copy/perspective.mdx
deleted file mode 100644
index 21cca35746..0000000000
--- a/src/content/reference/en/p5 copy/perspective.mdx	
+++ /dev/null
@@ -1,194 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L148
-title: perspective
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets a perspective projection for the current camera in a 3D sketch.</p>
-
-  <p>In a perspective projection, shapes that are further from the camera appear
-
-  smaller than shapes that are near the camera. This technique, called
-
-  foreshortening, creates realistic 3D scenes. It’s applied by default in
-
-  WebGL mode.</p>
-
-  <p><code>perspective()</code> changes the camera’s perspective by changing its
-  viewing
-
-  frustum. The frustum is the volume of space that’s visible to the camera.
-
-  Its shape is a pyramid with its top cut off. The camera is placed where
-
-  the top of the pyramid should be and views everything between the frustum’s
-
-  top (near) plane and its bottom (far) plane.</p>
-
-  <p>The first parameter, <code>fovy</code>, is the camera’s vertical field of
-  view. It’s
-
-  an angle that describes how tall or narrow a view the camera has. For
-
-  example, calling <code>perspective(0.5)</code> sets the camera’s vertical
-  field of
-
-  view to 0.5 radians. By default, <code>fovy</code> is calculated based on the
-  sketch’s
-
-  height and the camera’s default z-coordinate, which is 800. The formula for
-
-  the default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>
-
-  <p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio.
-  It’s a number
-
-  that describes the ratio of the top plane’s width to its height. For
-
-  example, calling <code>perspective(0.5, 1.5)</code> sets the camera’s field of
-  view to
-
-  0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner
-
-  on a square canvas. By default, aspect is set to <code>width /
-  height</code>.</p>
-
-  <p>The third parameter, <code>near</code>, is the distance from the camera to
-  the near
-
-  plane. For example, calling <code>perspective(0.5, 1.5, 100)</code> sets the
-  camera’s
-
-  field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
-
-  plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
-
-  from the camera won’t be visible. By default, near is set to <code>0.1 *
-  800</code>,
-
-  which is 1/10th the default distance between the camera and the origin.</p>
-
-  <p>The fourth parameter, <code>far</code>, is the distance from the camera to
-  the far
-
-  plane. For example, calling <code>perspective(0.5, 1.5, 100, 10000)</code>
-  sets the
-
-  camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
-
-  near plane 100 pixels from the camera, and places the far plane 10,000
-
-  pixels from the camera. Any shapes drawn more than 10,000 pixels from the
-
-  camera won’t be visible. By default, far is set to <code>10 * 800</code>,
-  which is 10
-
-  times the default distance between the camera and the origin.</p>
-
-  <p>Note: <code>perspective()</code> can only be used in WebGL mode.</p>
-line: 148
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to squeeze the box.
-
-    let isSqueezed = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Place the camera at the top-right.
-      camera(400, -400, 800);
-
-      if (isSqueezed === true) {
-        // Set fovy to 0.2.
-        // Set aspect to 1.5.
-        perspective(0.2, 1.5);
-      }
-
-      // Draw the box.
-      box();
-    }
-
-    // Change the camera's perspective when the user double-clicks.
-    function doubleClicked() {
-      isSqueezed = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Place the camera at the top-right.
-      camera(400, -400, 800);
-
-      // Set fovy to 0.2.
-      // Set aspect to 1.5.
-      // Set near to 600.
-      // Set far to 1200.
-      perspective(0.2, 1.5, 600, 1200);
-
-      // Move the origin away from the camera.
-      let x = -frameCount;
-      let y = frameCount;
-      let z = -2 * frameCount;
-      translate(x, y, z);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fovy
-    description: |
-      <p>camera frustum vertical field of view. Defaults to
-                                <code>2 * atan(height / 2 / 800)</code>.</p>
-    type: Number
-    optional: true
-  - name: aspect
-    description: |
-      <p>camera frustum aspect ratio. Defaults to
-                                <code>width / height</code>.</p>
-    type: Number
-    optional: true
-  - name: near
-    description: |
-      <p>distance from the camera to the near clipping plane.
-                                Defaults to <code>0.1 * 800</code>.</p>
-    type: Number
-    optional: true
-  - name: far
-    description: |
-      <p>distance from the camera to the far clipping plane.
-                                Defaults to <code>10 * 800</code>.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# perspective
diff --git a/src/content/reference/en/p5 copy/pixelDensity.mdx b/src/content/reference/en/p5 copy/pixelDensity.mdx
deleted file mode 100644
index 808ebab227..0000000000
--- a/src/content/reference/en/p5 copy/pixelDensity.mdx	
+++ /dev/null
@@ -1,90 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1005
-title: pixelDensity
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Sets the pixel density or returns the current density.</p>
-
-  <p>Computer displays are grids of little lights called <em>pixels</em>. A
-
-  display's <em>pixel density</em> describes how many pixels it packs into an
-
-  area. Displays with smaller pixels have a higher pixel density and create
-
-  sharper images.</p>
-
-  <p><code>pixelDensity()</code> sets the pixel scaling for high pixel density
-  displays.
-
-  By default, the pixel density is set to match the display's density.
-
-  Calling <code>pixelDensity(1)</code> turn this off.</p>
-
-  <p>Calling <code>pixelDensity()</code> without an argument returns the current
-  pixel
-
-  density.</p>
-line: 1005
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Set the pixel density to 1.
-      pixelDensity(1);
-
-      // Create a canvas and draw
-      // a circle.
-      createCanvas(100, 100);
-      background(200);
-      circle(50, 50, 70);
-
-      describe('A fuzzy white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Set the pixel density to 3.
-      pixelDensity(3);
-
-      // Create a canvas, paint the
-      // background, and draw a
-      // circle.
-      createCanvas(100, 100);
-      background(200);
-      circle(50, 50, 70);
-
-      describe('A sharp white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1005
-    params:
-      - name: val
-        description: |
-          <p>desired pixel density.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1059
-    params: []
-    return:
-      description: current pixel density of the sketch.
-      type: Number
-chainable: true
----
-
-
-# pixelDensity
diff --git a/src/content/reference/en/p5 copy/pixels.mdx b/src/content/reference/en/p5 copy/pixels.mdx
deleted file mode 100644
index 7185d708bf..0000000000
--- a/src/content/reference/en/p5 copy/pixels.mdx	
+++ /dev/null
@@ -1,173 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L12
-title: pixels
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>An array containing the color of each pixel on the canvas.</p>
-
-  <p>Colors are stored as numbers representing red, green, blue, and alpha
-
-  (RGBA) values. <code>pixels</code> is a one-dimensional array for performance
-  reasons.</p>
-
-  <p>Each pixel occupies four elements in the <code>pixels</code> array, one for
-  each RGBA
-
-  value. For example, the pixel at coordinates (0, 0) stores its RGBA values
-
-  at <code>pixels[0]</code>, <code>pixels[1]</code>, <code>pixels[2]</code>, and
-  <code>pixels[3]</code>, respectively.
-
-  The next pixel at coordinates (1, 0) stores its RGBA values at
-  <code>pixels[4]</code>,
-
-  <code>pixels[5]</code>, <code>pixels[6]</code>, and <code>pixels[7]</code>.
-  And so on. The <code>pixels</code> array
-
-  for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.</p>
-
-  <p>Some displays use several smaller pixels to set the color at a single
-
-  point. The <a href="/reference/p5/pixelDensity/">pixelDensity()</a> function
-  returns
-
-  the pixel density of the canvas. High density displays often have a
-
-  <a href="/reference/p5/pixelDensity/">pixelDensity()</a> of 2. On such a
-  display, the
-
-  <code>pixels</code> array for a 100×100 canvas has 200 × 200 × 4 =
-
-  160,000 elements.</p>
-
-  <p>Accessing the RGBA values for a point on the canvas requires a little math
-
-  as shown below. The <a href="/reference/p5/loadPixels/">loadPixels()</a>
-  function
-
-  must be called before accessing the <code>pixels</code> array. The
-
-  <a href="/reference/p5/updatePixels/">updatePixels()</a> function must be
-  called
-
-  after any changes are made.</p>
-line: 12
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Set the dot's coordinates.
-      let x = 50;
-      let y = 50;
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Set the pixel(s) at the center of the canvas black.
-      for (let i = 0; i < d; i += 1) {
-        for (let j = 0; j < d; j += 1) {
-          let index = 4 * ((y * d + j) * width * d + (x * d + i));
-          // Red.
-          pixels[index] = 0;
-          // Green.
-          pixels[index + 1] = 0;
-          // Blue.
-          pixels[index + 2] = 0;
-          // Alpha.
-          pixels[index + 3] = 255;
-        }
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A black dot in the middle of a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Make the top half of the canvas red.
-      for (let i = 0; i < halfImage; i += 4) {
-        // Red.
-        pixels[i] = 255;
-        // Green.
-        pixels[i + 1] = 0;
-        // Blue.
-        pixels[i + 2] = 0;
-        // Alpha.
-        pixels[i + 3] = 255;
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A red rectangle drawn above a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let pink = color(255, 102, 204);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Make the top half of the canvas red.
-      for (let i = 0; i < halfImage; i += 4) {
-        pixels[i] = red(pink);
-        pixels[i + 1] = green(pink);
-        pixels[i + 2] = blue(pink);
-        pixels[i + 3] = alpha(pink);
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A pink rectangle drawn above a gray rectangle.');
-    }
-    </code>
-    </div>
-class: p5
-type: 'Number[]'
----
-
-
-# pixels
diff --git a/src/content/reference/en/p5 copy/plane.mdx b/src/content/reference/en/p5 copy/plane.mdx
deleted file mode 100644
index eefeb29b7a..0000000000
--- a/src/content/reference/en/p5 copy/plane.mdx	
+++ /dev/null
@@ -1,152 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L866
-title: plane
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a plane.</p>
-
-  <p>A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
-
-  similar to a rectangle and offers advanced drawing features in WebGL mode.</p>
-
-  <p>The first parameter, <code>width</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>plane(20)</code>, it sets the plane’s width and height. By default,
-  <code>width</code> is
-
-  50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>plane(20, 30)</code>, it sets the plane’s height. By default,
-  <code>height</code> is
-
-  set to the plane’s <code>width</code>.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>plane(20, 30, 5)</code> it sets the number of triangle
-  subdivisions to use
-
-  along the x-axis. All 3D shapes are made by connecting triangles to form
-
-  their surfaces. By default, <code>detailX</code> is 1.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>plane(20, 30, 5, 7)</code> it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailY</code> is 1.</p>
-
-  <p>Note: <code>plane()</code> can only be used in WebGL mode.</p>
-line: 866
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white plane on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the plane.
-      plane();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white plane on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the plane.
-      // Set its width and height to 30.
-      plane(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white plane on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the plane.
-      // Set its width to 30 and height to 50.
-      plane(30, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width of the plane.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: |
-      <p>height of the plane.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# plane
diff --git a/src/content/reference/en/p5 copy/pmouseX.mdx b/src/content/reference/en/p5 copy/pmouseX.mdx
deleted file mode 100644
index 5f5e8ff7f7..0000000000
--- a/src/content/reference/en/p5 copy/pmouseX.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L333
-title: pmouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's previous
-  horizontal
-
-  position.</p>
-
-  <p><code>pmouseX</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. Its value is
-
-  <a href="/reference/p5/mouseX/">mouseX</a> from the previous frame. For
-  example, if
-
-  the mouse was 50 pixels from the left edge of the canvas during the last
-
-  frame, then <code>pmouseX</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>pmouseX</code> will hold
-  the
-
-  x-coordinate of the last touch point.</p>
-
-  <p>Note: <code>pmouseX</code> is reset to the current <a
-  href="/reference/p5/mouseX/">mouseX</a>
-
-  value at the start of each touch event.</p>
-line: 333
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      line(pmouseX, pmouseY, mouseX, mouseY);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let pmx = pmouseX - 50;
-      let pmy = pmouseY - 50;
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Draw the line.
-      line(pmx, pmy, mx, my);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pmouseX
diff --git a/src/content/reference/en/p5 copy/pmouseY.mdx b/src/content/reference/en/p5 copy/pmouseY.mdx
deleted file mode 100644
index 558747e43f..0000000000
--- a/src/content/reference/en/p5 copy/pmouseY.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L398
-title: pmouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's previous
-  vertical
-
-  position.</p>
-
-  <p><code>pmouseY</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. Its value is
-
-  <a href="/reference/p5/mouseY/">mouseY</a> from the previous frame. For
-  example, if
-
-  the mouse was 50 pixels from the top edge of the canvas during the last
-
-  frame, then <code>pmouseY</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>pmouseY</code> will hold
-  the
-
-  y-coordinate of the last touch point.</p>
-
-  <p>Note: <code>pmouseY</code> is reset to the current <a
-  href="/reference/p5/mouseY/">mouseY</a>
-
-  value at the start of each touch event.</p>
-line: 398
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      line(pmouseX, pmouseY, mouseX, mouseY);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let pmx = pmouseX - 50;
-      let pmy = pmouseY - 50;
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Draw the line.
-      line(pmx, pmy, mx, my);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pmouseY
diff --git a/src/content/reference/en/p5 copy/point.mdx b/src/content/reference/en/p5 copy/point.mdx
deleted file mode 100644
index 7912c06cbb..0000000000
--- a/src/content/reference/en/p5 copy/point.mdx	
+++ /dev/null
@@ -1,229 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L721
-title: point
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a single point in space.</p>
-
-  <p>A point's default width is one pixel. To color a point, use the
-
-  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
-  use the
-
-  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A point
-
-  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
-  won't
-
-  affect the point's color.</p>
-
-  <p>The version of <code>point()</code> with two parameters allows the point's
-  location to
-
-  be set with its x- and y-coordinates, as in <code>point(10, 20)</code>.</p>
-
-  <p>The version of <code>point()</code> with three parameters allows the point
-  to be drawn
-
-  in 3D space with x-, y-, and z-coordinates, as in <code>point(10, 20,
-  30)</code>.
-
-  Doing so requires adding the <code>WEBGL</code> argument to
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
-
-  <p>The version of <code>point()</code> with one parameter allows the point's
-  location to
-
-  be set with a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-line: 721
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-
-      // Making point to 5 pixels
-      strokeWeight(5);
-
-
-      // Top-left.
-      point(30, 20);
-
-      // Top-right.
-      point(85, 20);
-
-      // Bottom-right.
-      point(85, 75);
-
-      // Bottom-left.
-      point(30, 75);
-
-      describe(
-        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-
-      // Making point to 5 pixels.
-      strokeWeight(5);
-
-
-      // Top-left.
-      point(30, 20);
-
-      // Top-right.
-      point(70, 20);
-
-      // Style the next points.
-      stroke('purple');
-      strokeWeight(10);
-
-      // Bottom-right.
-      point(70, 80);
-
-      // Bottom-left.
-      point(30, 80);
-
-      describe(
-        'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-
-      // Making point to 5 pixels.
-      strokeWeight(5);
-
-
-      // Top-left.
-      let a = createVector(30, 20);
-      point(a);
-
-      // Top-right.
-      let b = createVector(70, 20);
-      point(b);
-
-      // Bottom-right.
-      let c = createVector(70, 80);
-      point(c);
-
-      // Bottom-left.
-      let d = createVector(30, 80);
-      point(d);
-
-      describe(
-        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Two purple points drawn on a gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the points.
-      stroke('purple');
-      strokeWeight(10);
-
-      // Top-left.
-      point(-20, -30);
-
-      // Bottom-right.
-      point(20, 30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Two purple points drawn on a gray canvas. The scene spins slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Style the points.
-      stroke('purple');
-      strokeWeight(10);
-
-      // Top-left.
-      point(-20, -30, 0);
-
-      // Bottom-right.
-      point(20, 30, -50);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 721
-    params:
-      - name: x
-        description: |
-          <p>the x-coordinate.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>the y-coordinate.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>the z-coordinate (for WebGL mode).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 900
-    params:
-      - name: coordinateVector
-        description: |
-          <p>the coordinate vector.</p>
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# point
diff --git a/src/content/reference/en/p5 copy/pointLight.mdx b/src/content/reference/en/p5 copy/pointLight.mdx
deleted file mode 100644
index c6f10715b9..0000000000
--- a/src/content/reference/en/p5 copy/pointLight.mdx	
+++ /dev/null
@@ -1,329 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L683
-title: pointLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines from a point in all directions.</p>
-
-  <p>Point lights are like light bulbs that shine in all directions. They can be
-
-  placed at different positions to achieve different lighting effects. A
-
-  maximum of 5 point lights can be active at once.</p>
-
-  <p>There are four ways to call <code>pointLight()</code> with parameters to
-  set the
-
-  light’s color and position.</p>
-
-  <p>The first way to call <code>pointLight()</code> has six parameters. The
-  first three
-
-  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
-  light’s color using the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The last three parameters,
-  <code>x</code>,
-
-  <code>y</code>, and <code>z</code>, set the light’s position. For example,
-
-  <code>pointLight(255, 0, 0, 50, 0, 0)</code> creates a red <code>(255, 0,
-  0)</code> light that
-
-  shines from the coordinates <code>(50, 0, 0)</code>.</p>
-
-  <p>The second way to call <code>pointLight()</code> has four parameters. The
-  first three
-
-  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
-  light’s color using the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter,
-  position sets
-
-  the light’s position using a <a href="/reference/p5/p5.Vector">p5.Vector</a>
-  object.
-
-  For example, <code>pointLight(255, 0, 0, lightPos)</code> creates a red
-  <code>(255, 0, 0)</code>
-
-  light that shines from the position set by the <code>lightPos</code>
-  vector.</p>
-
-  <p>The third way to call <code>pointLight()</code> has four parameters. The
-  first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
-  the light’s position. For
-
-  example, <code>directionalLight(myColor, 50, 0, 0)</code> creates a light that
-  shines
-
-  from the coordinates <code>(50, 0, 0)</code> with the color value of
-  <code>myColor</code>.</p>
-
-  <p>The fourth way to call <code>pointLight()</code> has two parameters. The
-  first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  second parameter, <code>position</code>, sets the light’s position using a
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
-
-  <code>directionalLight(myColor, lightPos)</code> creates a light that shines
-  from the
-
-  position set by the <code>lightPos</code> vector with the color value of
-  <code>myColor</code>.</p>
-line: 683
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to turn on the point light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the light.
-      if (isLit === true) {
-        // Add a red point light from above.
-        // Use RGB values and XYZ coordinates.
-        pointLight(255, 0, 0, 0, -150, 0);
-      }
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the point light when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red point light from above.
-      // Use a p5.Color object and XYZ directions.
-      let c = color(255, 0, 0);
-      pointLight(c, 0, -150, 0);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red point light from above.
-      // Use a p5.Color object and a p5.Vector object.
-      let c = color(255, 0, 0);
-      let lightPos = createVector(0, -150, 0);
-      pointLight(c, lightPos);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red point light that points to the center of the scene.
-      // Use a p5.Color object and a p5.Vector object.
-      let c = color(255, 0, 0);
-      let lightPos = createVector(0, 0, 65);
-      pointLight(c, lightPos);
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw a sphere up and to the left.
-      push();
-      translate(-25, -25, 25);
-      sphere(10);
-      pop();
-
-      // Draw a box up and to the right.
-      push();
-      translate(25, -25, 25);
-      sphere(10);
-      pop();
-
-      // Draw a sphere down and to the left.
-      push();
-      translate(-25, 25, 25);
-      sphere(10);
-      pop();
-
-      // Draw a box down and to the right.
-      push();
-      translate(25, 25, 25);
-      sphere(10);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 683
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: x
-        description: |
-          <p>x-coordinate of the light.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the light.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the light.</p>
-        type: Number
-    chainable: 1
-  - line: 890
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: position
-        description: |
-          <p>position of the light as a
-                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
-        type: p5.Vector
-    chainable: 1
-  - line: 900
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                                                   an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-    chainable: 1
-  - line: 910
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: position
-        description: ''
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# pointLight
diff --git a/src/content/reference/en/p5 copy/pop.mdx b/src/content/reference/en/p5 copy/pop.mdx
deleted file mode 100644
index 72b5c1db21..0000000000
--- a/src/content/reference/en/p5 copy/pop.mdx	
+++ /dev/null
@@ -1,20 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L553
-title: pop
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: "<p>Ends a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
-line: 553
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
-class: p5
-chainable: false
----
-
-
-# pop
diff --git a/src/content/reference/en/p5 copy/pow.mdx b/src/content/reference/en/p5 copy/pow.mdx
deleted file mode 100644
index 18201ec3c2..0000000000
--- a/src/content/reference/en/p5 copy/pow.mdx	
+++ /dev/null
@@ -1,67 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L815
-title: pow
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates exponential expressions such as <var>2<sup>3</sup></var>.</p>
-  <p>For example, <code>pow(2, 3)</code> evaluates the expression
-  2 × 2 × 2. <code>pow(2, -3)</code> evaluates 1 ÷
-  (2 × 2 × 2).</p>
-line: 815
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the base of the exponent.
-      let base = 3;
-
-      // Top-left.
-      let d = pow(base, 1);
-      circle(10, 10, d);
-
-      // Left-center.
-      d = pow(base, 2);
-      circle(20, 20, d);
-
-      // Right-center.
-      d = pow(base, 3);
-      circle(40, 40, d);
-
-      // Bottom-right.
-      d = pow(base, 4);
-      circle(80, 80, d);
-
-      describe('A series of circles that grow exponentially from top left to bottom right.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>base of the exponential expression.</p>
-    type: Number
-  - name: e
-    description: |
-      <p>power by which to raise the base.</p>
-    type: Number
-return:
-  description: n^e.
-  type: Number
-chainable: false
----
-
-
-# pow
diff --git a/src/content/reference/en/p5 copy/preload.mdx b/src/content/reference/en/p5 copy/preload.mdx
deleted file mode 100644
index 66d5db4378..0000000000
--- a/src/content/reference/en/p5 copy/preload.mdx	
+++ /dev/null
@@ -1,70 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L41
-title: preload
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>A function that's called once to load assets before the sketch runs.</p>
-
-  <p>Declaring the function <code>preload()</code> sets a code block to run once
-
-  automatically before <a href="/reference/p5/setup/">setup()</a> or
-
-  <a href="/reference/p5/draw/">draw()</a>. It's used to load assets including
-
-  multimedia files, fonts, data, and 3D models:</p>
-
-  <pre><code class="language-js">function preload() {
-    // Code to run before the rest of the sketch.
-  }
-
-  </code></pre>
-
-  <p>Functions such as <a href="/reference/p5/loadImage/">loadImage()</a>,
-
-  <a href="/reference/p5/loadFont/">loadFont()</a>,
-
-  <a href="/reference/p5/loadJSON/">loadJSON()</a>, and
-
-  <a href="/reference/p5/loadModel/">loadModel()</a> are guaranteed to either
-
-  finish loading or raise an error if they're called within
-  <code>preload()</code>.
-
-  Doing so ensures that assets are available when the sketch begins
-
-  running.</p>
-line: 41
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe('A red brick wall.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# preload
diff --git a/src/content/reference/en/p5 copy/print.mdx b/src/content/reference/en/p5 copy/print.mdx
deleted file mode 100644
index 50137586ae..0000000000
--- a/src/content/reference/en/p5 copy/print.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L21
-title: print
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Displays text in the web browser's console.</p>
-
-  <p><code>print()</code> is helpful for printing values while debugging. Each
-  call to
-
-  <code>print()</code> creates a new line of text.</p>
-
-  <p>Note: Call <code>print('\n')</code> to print a blank line. Calling
-  <code>print()</code> without
-
-  an argument opens the browser's dialog for printing documents.</p>
-line: 21
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Prints "hello, world" to the console.
-      print('hello, world');
-    }
-    </code>
-    </div>
-
-    <div class="norender">
-    <code>
-    function setup() {
-      let name = 'ada';
-      // Prints "hello, ada" to the console.
-      print(`hello, ${name}`);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: contents
-    description: |
-      <p>content to print to the console.</p>
-    type: Any
-chainable: false
----
-
-
-# print
diff --git a/src/content/reference/en/p5 copy/push.mdx b/src/content/reference/en/p5 copy/push.mdx
deleted file mode 100644
index ee1a386cee..0000000000
--- a/src/content/reference/en/p5 copy/push.mdx	
+++ /dev/null
@@ -1,20 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L269
-title: push
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: "<p>Begins a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
-line: 269
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
-class: p5
-chainable: false
----
-
-
-# push
diff --git a/src/content/reference/en/p5 copy/pwinMouseX.mdx b/src/content/reference/en/p5 copy/pwinMouseX.mdx
deleted file mode 100644
index cb869aea71..0000000000
--- a/src/content/reference/en/p5 copy/pwinMouseX.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L545
-title: pwinMouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's previous horizontal
-  position
-
-  within the browser.</p>
-
-  <p><code>pwinMouseX</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. Its value is
-
-  <a href="/reference/p5/winMouseX/">winMouseX</a> from the previous frame. For
-
-  example, if the mouse was 50 pixels from
-
-  the left edge of the browser during the last frame, then
-  <code>pwinMouseX</code> will
-
-  be 50.</p>
-
-  <p>On a touchscreen device, <code>pwinMouseX</code> will hold the x-coordinate
-  of the most
-
-  recent touch point. <code>pwinMouseX</code> is reset to the current
-
-  <a href="/reference/p5/winMouseX/">winMouseX</a> value at the start of each
-  touch
-
-  event.</p>
-
-  <p>Note: Use <a href="/reference/p5/pmouseX/">pmouseX</a> to track the mouse’s
-  previous
-
-  x-coordinate within the canvas.</p>
-line: 545
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's diameter.
-      let d = winMouseX - pwinMouseX;
-
-      // Draw the circle.
-      circle(50, 50, d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create the canvas and set its position.
-      let cnv = createCanvas(100, 100);
-      cnv.position(20, 20);
-
-      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display pwinMouseX.
-      text(pwinMouseX, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pwinMouseX
diff --git a/src/content/reference/en/p5 copy/pwinMouseY.mdx b/src/content/reference/en/p5 copy/pwinMouseY.mdx
deleted file mode 100644
index 2f36580a23..0000000000
--- a/src/content/reference/en/p5 copy/pwinMouseY.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L616
-title: pwinMouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's previous vertical
-  position
-
-  within the browser.</p>
-
-  <p><code>pwinMouseY</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. Its value is
-
-  <a href="/reference/p5/winMouseY/">winMouseY</a> from the previous frame. For
-
-  example, if the mouse was 50 pixels from
-
-  the top edge of the browser during the last frame, then
-  <code>pwinMouseY</code> will
-
-  be 50.</p>
-
-  <p>On a touchscreen device, <code>pwinMouseY</code> will hold the y-coordinate
-  of the most
-
-  recent touch point. <code>pwinMouseY</code> is reset to the current
-
-  <a href="/reference/p5/winMouseY/">winMouseY</a> value at the start of each
-  touch
-
-  event.</p>
-
-  <p>Note: Use <a href="/reference/p5/pmouseY/">pmouseY</a> to track the mouse’s
-  previous
-
-  y-coordinate within the canvas.</p>
-line: 616
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's diameter.
-      let d = winMouseY - pwinMouseY;
-
-      // Draw the circle.
-      circle(50, 50, d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create the canvas and set its position.
-      let cnv = createCanvas(100, 100);
-      cnv.position(20, 20);
-
-      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display pwinMouseY.
-      text(pwinMouseY, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pwinMouseY
diff --git a/src/content/reference/en/p5 copy/quad.mdx b/src/content/reference/en/p5 copy/quad.mdx
deleted file mode 100644
index fbc09fa0a3..0000000000
--- a/src/content/reference/en/p5 copy/quad.mdx	
+++ /dev/null
@@ -1,233 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L928
-title: quad
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a quadrilateral (four-sided shape).</p>
-
-  <p>Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
-
-  first pair of parameters <code>(x1, y1)</code> sets the quad's first point.
-  The next
-
-  three pairs of parameters set the coordinates for its next three points
-
-  <code>(x2, y2)</code>, <code>(x3, y3)</code>, and <code>(x4, y4)</code>.
-  Points should be added in either
-
-  clockwise or counter-clockwise order.</p>
-
-  <p>The version of <code>quad()</code> with twelve parameters allows the quad
-  to be drawn
-
-  in 3D space. Doing so requires adding the <code>WEBGL</code> argument to
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
-
-  <p>The thirteenth and fourteenth parameters are optional. In WebGL mode, they
-
-  set the number of segments used to draw the quadrilateral in the x- and
-
-  y-directions. They're both 2 by default.</p>
-line: 928
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(20, 20, 80, 20, 80, 80, 20, 80);
-
-      describe('A white square with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(20, 30, 80, 30, 80, 70, 20, 70);
-
-      describe('A white rectangle with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(50, 62, 86, 50, 50, 38, 14, 50);
-
-      describe('A white rhombus with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(20, 50, 80, 30, 80, 70, 20, 70);
-
-      describe('A white trapezoid with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      quad(-30, -30, 30, -30, 30, 30, -30, 30);
-
-      describe('A white square with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A wavy white surface spins around on gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the quad.
-      quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 928
-    params:
-      - name: x1
-        description: |
-          <p>the x-coordinate of the first point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>the y-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>the x-coordinate of the second point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>the y-coordinate of the second point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>the x-coordinate of the third point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>the y-coordinate of the third point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>the x-coordinate of the fourth point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>the y-coordinate of the fourth point.</p>
-        type: Number
-      - name: detailX
-        description: |
-          <p>number of segments in the x-direction.</p>
-        type: Integer
-        optional: true
-      - name: detailY
-        description: |
-          <p>number of segments in the y-direction.</p>
-        type: Integer
-        optional: true
-    chainable: 1
-  - line: 1048
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>the z-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>the z-coordinate of the second point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>the z-coordinate of the third point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>the z-coordinate of the fourth point.</p>
-        type: Number
-      - name: detailX
-        description: ''
-        type: Integer
-        optional: true
-      - name: detailY
-        description: ''
-        type: Integer
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# quad
diff --git a/src/content/reference/en/p5 copy/quadraticVertex.mdx b/src/content/reference/en/p5 copy/quadraticVertex.mdx
deleted file mode 100644
index e319e38769..0000000000
--- a/src/content/reference/en/p5 copy/quadraticVertex.mdx	
+++ /dev/null
@@ -1,303 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1600
-title: quadraticVertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a quadratic Bézier curve segment to a custom shape.</p>
-
-  <p><code>quadraticVertex()</code> adds a curved segment to custom shapes. The
-  Bézier
-
-  curve segments it creates are similar to those made by the
-
-  <a href="/reference/p5/bezierVertex/">bezierVertex()</a> function.
-
-  <code>quadraticVertex()</code> must be called between the
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
-  uses
-
-  the previous vertex as the first anchor point, so there must be at least
-
-  one call to <a href="/reference/p5/vertex/">vertex()</a> before
-  <code>quadraticVertex()</code> can
-
-  be used.</p>
-
-  <p>The first two parameters, <code>cx</code> and <code>cy</code>, set the
-  curve’s control point.
-
-  The control point "pulls" the curve towards its.</p>
-
-  <p>The last two parameters, <code>x3</code>, and <code>y3</code>, set the last
-  anchor point. The
-
-  last anchor point is where the curve ends.</p>
-
-  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
-  and
-
-  z-coordinates.</p>
-
-  <p>Note: <code>quadraticVertex()</code> won’t work when an argument is passed
-  to
-
-  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
-line: 1600
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the curve.
-      noFill();
-
-      // Draw the curve.
-      beginShape();
-      vertex(20, 20);
-      quadraticVertex(80, 20, 50, 50);
-      endShape();
-
-      describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the curve.
-      noFill();
-      beginShape();
-      vertex(20, 20);
-      quadraticVertex(80, 20, 50, 50);
-      endShape();
-
-      // Draw red lines from the anchor points to the control point.
-      stroke(255, 0, 0);
-      line(20, 20, 80, 20);
-      line(50, 50, 80, 20);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(20, 20);
-      point(50, 50);
-
-      // Draw the control point in red.
-      stroke(255, 0, 0);
-      point(80, 20);
-
-      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the top-right corner
-    // and drag to change the curve's shape.
-
-    let x2 = 80;
-    let y2 = 20;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-
-      // Draw the curve.
-      beginShape();
-      vertex(20, 20);
-      quadraticVertex(x2, y2, 50, 50);
-      endShape();
-
-      // Draw red lines from the anchor points to the control point.
-      stroke(255, 0, 0);
-      line(20, 20, x2, y2);
-      line(50, 50, x2, y2);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(20, 20);
-      point(50, 50);
-
-      // Draw the control point in red.
-      stroke(255, 0, 0);
-      point(x2, y2);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x2, y2) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x2 = mouseX;
-        y2 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the curved segments.
-      vertex(20, 20);
-      quadraticVertex(80, 20, 50, 50);
-      quadraticVertex(20, 80, 80, 80);
-
-      // Add the straight segments.
-      vertex(80, 10);
-      vertex(20, 10);
-      vertex(20, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A white puzzle piece drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the first puzzle piece.
-      noStroke();
-      fill(255);
-
-      // Draw the first puzzle piece.
-      beginShape();
-      vertex(-30, -30, 0);
-      quadraticVertex(30, -30, 0, 0, 0, 0);
-      quadraticVertex(-30, 30, 0, 30, 30, 0);
-      vertex(30, -40, 0);
-      vertex(-30, -40, 0);
-      vertex(-30, -30, 0);
-      endShape();
-
-      // Style the second puzzle piece.
-      stroke(255);
-      noFill();
-
-      // Draw the second puzzle piece.
-      beginShape();
-      vertex(-30, -30, -20);
-      quadraticVertex(30, -30, -20, 0, 0, -20);
-      quadraticVertex(-30, 30, -20, 30, 30, -20);
-      vertex(30, -40, -20);
-      vertex(-30, -40, -20);
-      vertex(-30, -30, -20);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1600
-    params:
-      - name: cx
-        description: |
-          <p>x-coordinate of the control point.</p>
-        type: Number
-      - name: cy
-        description: |
-          <p>y-coordinate of the control point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the anchor point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the anchor point.</p>
-        type: Number
-    chainable: 1
-  - line: 1832
-    params:
-      - name: cx
-        description: ''
-        type: Number
-      - name: cy
-        description: ''
-        type: Number
-      - name: cz
-        description: |
-          <p>z-coordinate of the control point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the anchor point.</p>
-        type: Number
-chainable: true
----
-
-
-# quadraticVertex
diff --git a/src/content/reference/en/p5 copy/radians.mdx b/src/content/reference/en/p5 copy/radians.mdx
deleted file mode 100644
index da0adc1ff7..0000000000
--- a/src/content/reference/en/p5 copy/radians.mdx	
+++ /dev/null
@@ -1,53 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L521
-title: radians
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: |
-  <p>Converts an angle measured in degrees to its value in radians.</p>
-  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
-  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
-  <p>The same angle can be expressed in with either unit. For example, 90° is a
-  quarter of a full rotation. The same angle is 2 × π ÷ 4
-  (about 1.57) radians.</p>
-line: 521
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the angle conversion.
-      let deg = 45;
-      let rad = radians(deg);
-
-      // Display the angle conversion.
-      text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
-
-      describe('The text "45˚ = 0.785 rad".');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: degrees
-    description: |
-      <p>degree value to convert to radians.</p>
-    type: Number
-return:
-  description: converted angle.
-  type: Number
-chainable: false
----
-
-
-# radians
diff --git a/src/content/reference/en/p5 copy/random.mdx b/src/content/reference/en/p5 copy/random.mdx
deleted file mode 100644
index aef8e546e8..0000000000
--- a/src/content/reference/en/p5 copy/random.mdx	
+++ /dev/null
@@ -1,48 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L86
-title: random
-module: Math
-submodule: Random
-file: src/math/random.js
-description: "<p>Returns a random number or a random element from an array.</p>\n<p><code>random()</code> follows uniform distribution, which means that all outcomes are\nequally likely. When <code>random()</code> is used to generate numbers, all\nnumbers in the output range are equally likely to be returned. When\n<code>random()</code> is used to select elements from an array, all elements are\nequally likely to be chosen.</p>\n<p>By default, <code>random()</code> produces different results each time a sketch runs.\nThe <a href=\"/reference/p5/randomSeed/\">randomSeed()</a> function can be used to\ngenerate the same sequence of numbers or choices each time a sketch runs.</p>\n<p>The version of <code>random()</code> with no parameters returns a random number from 0\nup to but not including 1.</p>\n<p>The version of <code>random()</code> with one parameter works one of two ways. If the\nargument passed is a number, <code>random()</code> returns a random number from 0 up\nto but not including the number. For example, calling <code>random(5)</code> returns\nvalues between 0 and 5. If the argument passed is an array, <code>random()</code>\nreturns a random element from that array. For example, calling\n<code>random(['\U0001F981', '\U0001F42F', '\U0001F43B'])</code> returns either a lion, tiger, or bear emoji.</p>\n<p>The version of <code>random()</code> with two parameters returns a random number from\na given range. The arguments passed set the range's lower and upper bounds.\nFor example, calling <code>random(-5, 10.2)</code> returns values from -5 up to but\nnot including 10.2.</p>\n"
-line: 86
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(0, 100);\n  let y = random(0, 100);\n\n  // Draw a point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Create an array of emoji strings.\n  let animals = ['\U0001F981', '\U0001F42F', '\U0001F43B'];\n\n  // Choose a random element from the array.\n  let choice = random(animals);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(20);\n\n  // Display the emoji.\n  text(choice, 50, 50);\n\n  describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 45 and 55.\n  let x = random(45, 55);\n  let y = random(45, 55);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n  // Update x and y randomly.\n  x += random(-1, 1);\n  y += random(-1, 1);\n\n  // Draw the point.\n  point(x, y);\n}\n</code>\n</div>"
-class: p5
-return:
-  description: random number.
-  type: Number
-overloads:
-  - line: 86
-    params:
-      - name: min
-        description: |
-          <p>lower bound (inclusive).</p>
-        type: Number
-        optional: true
-      - name: max
-        description: |
-          <p>upper bound (exclusive).</p>
-        type: Number
-        optional: true
-    return:
-      description: random number.
-      type: Number
-  - line: 259
-    params:
-      - name: choices
-        description: |
-          <p>array to choose from.</p>
-        type: Array
-    return:
-      description: random element from the array.
-      type: '*'
-chainable: false
----
-
-
-# random
diff --git a/src/content/reference/en/p5 copy/randomGaussian.mdx b/src/content/reference/en/p5 copy/randomGaussian.mdx
deleted file mode 100644
index 24893f378b..0000000000
--- a/src/content/reference/en/p5 copy/randomGaussian.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L292
-title: randomGaussian
-module: Math
-submodule: Random
-file: src/math/random.js
-description: >
-  <p>Returns a random number fitting a Gaussian, or normal, distribution.</p>
-
-  <p>Normal distributions look like bell curves when plotted. Values from a
-
-  normal distribution cluster around a central value called the mean. The
-
-  cluster's standard deviation describes its spread.</p>
-
-  <p>By default, <code>randomGaussian()</code> produces different results each
-  time a
-
-  sketch runs. The <a href="/reference/p5/randomSeed/">randomSeed()</a> function
-  can be
-
-  used to generate the same sequence of numbers each time a sketch runs.</p>
-
-  <p>There's no minimum or maximum value that <code>randomGaussian()</code>
-  might return.
-
-  Values far from the mean are very unlikely and values near the mean are
-
-  very likely.</p>
-
-  <p>The version of <code>randomGaussian()</code> with no parameters returns
-  values with a
-
-  mean of 0 and standard deviation of 1.</p>
-
-  <p>The version of <code>randomGaussian()</code> with one parameter interprets
-  the
-
-  argument passed as the mean. The standard deviation is 1.</p>
-
-  <p>The version of <code>randomGaussian()</code> with two parameters interprets
-  the first
-
-  argument passed as the mean and the second as the standard deviation.</p>
-line: 292
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
-    }
-
-    function draw() {
-      // Style the circles.
-      noStroke();
-      fill(0, 10);
-
-      // Uniform distribution between 0 and 100.
-      let x = random(100);
-      let y = 25;
-      circle(x, y, 5);
-
-      // Gaussian distribution with a mean of 50 and sd of 1.
-      x = randomGaussian(50);
-      y = 50;
-      circle(x, y, 5);
-
-      // Gaussian distribution with a mean of 50 and sd of 10.
-      x = randomGaussian(50, 10);
-      y = 75;
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mean
-    description: |
-      <p>mean.</p>
-    type: Number
-    optional: true
-  - name: sd
-    description: |
-      <p>standard deviation.</p>
-    type: Number
-    optional: true
-return:
-  description: random number.
-  type: Number
-chainable: false
----
-
-
-# randomGaussian
diff --git a/src/content/reference/en/p5 copy/randomSeed.mdx b/src/content/reference/en/p5 copy/randomSeed.mdx
deleted file mode 100644
index dbd1a6ae3d..0000000000
--- a/src/content/reference/en/p5 copy/randomSeed.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L37
-title: randomSeed
-module: Math
-submodule: Random
-file: src/math/random.js
-description: >
-  <p>Sets the seed value for the <a href="/reference/p5/random/">random()</a>
-  and
-
-  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> functions.</p>
-
-  <p>By default, <a href="/reference/p5/random/">random()</a> and
-
-  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> produce different
-
-  results each time a sketch is run. Calling <code>randomSeed()</code> with a
-  constant
-
-  argument, such as <code>randomSeed(99)</code>, makes these functions produce
-  the same
-
-  results each time a sketch is run.</p>
-line: 37
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get random coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the white circle.
-      circle(x, y, 10);
-
-      // Set a random seed for consistency.
-      randomSeed(99);
-
-      // Get random coordinates.
-      x = random(0, 100);
-      y = random(0, 100);
-
-      // Draw the black circle.
-      fill(0);
-      circle(x, y, 10);
-
-      describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: seed
-    description: |
-      <p>seed value.</p>
-    type: Number
-chainable: false
----
-
-
-# randomSeed
diff --git a/src/content/reference/en/p5 copy/rect.mdx b/src/content/reference/en/p5 copy/rect.mdx
deleted file mode 100644
index 6876ab536d..0000000000
--- a/src/content/reference/en/p5 copy/rect.mdx	
+++ /dev/null
@@ -1,209 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1091
-title: rect
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a rectangle.</p>
-
-  <p>A rectangle is a four-sided shape defined by the <code>x</code>,
-  <code>y</code>, <code>w</code>, and <code>h</code>
-
-  parameters. <code>x</code> and <code>y</code> set the location of its top-left
-  corner. <code>w</code> sets
-
-  its width and <code>h</code> sets its height. Every angle in the rectangle
-  measures
-
-  90˚. See <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to
-  define
-
-  rectangles.</p>
-
-  <p>The version of <code>rect()</code> with five parameters creates a rounded
-  rectangle. The
-
-  fifth parameter sets the radius for all four corners.</p>
-
-  <p>The version of <code>rect()</code> with eight parameters also creates a
-  rounded
-
-  rectangle. Each of the last four parameters set the radius of a corner. The
-
-  radii start with the top-left corner and move clockwise around the
-
-  rectangle. If any of these parameters are omitted, they are set to the
-
-  value of the last radius that was set.</p>
-line: 1091
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rect(30, 20, 55, 55);
-
-      describe('A white square with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rect(30, 20, 55, 40);
-
-      describe('A white rectangle with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give all corners a radius of 20.
-      rect(30, 20, 55, 50, 20);
-
-      describe('A white rectangle with a black outline and round edges on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give each corner a unique radius.
-      rect(30, 20, 55, 50, 20, 15, 10, 5);
-
-      describe('A white rectangle with a black outline and round edges of different radii.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      rect(-20, -30, 55, 55);
-
-      describe('A white square with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square spins around on gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the rectangle.
-      rect(-20, -30, 55, 55);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1091
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the rectangle.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the rectangle.</p>
-        type: Number
-      - name: w
-        description: |
-          <p>width of the rectangle.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>height of the rectangle.</p>
-        type: Number
-        optional: true
-      - name: tl
-        description: |
-          <p>optional radius of top-left corner.</p>
-        type: Number
-        optional: true
-      - name: tr
-        description: |
-          <p>optional radius of top-right corner.</p>
-        type: Number
-        optional: true
-      - name: br
-        description: |
-          <p>optional radius of bottom-right corner.</p>
-        type: Number
-        optional: true
-      - name: bl
-        description: |
-          <p>optional radius of bottom-left corner.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1214
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: w
-        description: ''
-        type: Number
-      - name: h
-        description: ''
-        type: Number
-      - name: detailX
-        description: |
-          <p>number of segments in the x-direction (for WebGL mode).</p>
-        type: Integer
-        optional: true
-      - name: detailY
-        description: |
-          <p>number of segments in the y-direction (for WebGL mode).</p>
-        type: Integer
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# rect
diff --git a/src/content/reference/en/p5 copy/rectMode.mdx b/src/content/reference/en/p5 copy/rectMode.mdx
deleted file mode 100644
index 5d444cb16e..0000000000
--- a/src/content/reference/en/p5 copy/rectMode.mdx	
+++ /dev/null
@@ -1,142 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L184
-title: rectMode
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Changes where rectangles and squares are drawn.</p>
-
-  <p>By default, the first two parameters of
-
-  <a href="/reference/p5/rect/">rect()</a> and <a
-  href="/reference/p5/square/">square()</a>,
-
-  are the x- and y-coordinates of the shape's upper left corner. The next
-  parameters set
-
-  the shape's width and height. This is the same as calling
-
-  <code>rectMode(CORNER)</code>.</p>
-
-  <p><code>rectMode(CORNERS)</code> also uses the first two parameters as the
-  location of
-
-  one of the corners. The next parameters are the location of the opposite
-
-  corner. This mode only works for <a href="/reference/p5/rect/">rect()</a>.</p>
-
-  <p><code>rectMode(CENTER)</code> uses the first two parameters as the x- and
-
-  y-coordinates of the shape's center. The next parameters are its width and
-
-  height.</p>
-
-  <p><code>rectMode(RADIUS)</code> also uses the first two parameters as the x-
-  and
-
-  y-coordinates of the shape's center. The next parameters are
-
-  half of the shape's width and height.</p>
-
-  <p>The argument passed to <code>rectMode()</code> must be written in ALL CAPS
-  because the
-
-  constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and
-  <code>CORNERS</code> are defined this way.
-
-  JavaScript is a case-sensitive language.</p>
-line: 184
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(CORNER);
-      fill(255);
-      rect(25, 25, 50, 50);
-
-      rectMode(CORNERS);
-      fill(100);
-      rect(25, 25, 50, 50);
-
-      describe('A small gray square drawn at the top-left corner of a white square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(RADIUS);
-      fill(255);
-      rect(50, 50, 30, 30);
-
-      rectMode(CENTER);
-      fill(100);
-      rect(50, 50, 30, 30);
-
-      describe('A small gray square drawn at the center of a white square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(CORNER);
-      fill(255);
-      square(25, 25, 50);
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(RADIUS);
-      fill(255);
-      square(50, 50, 30);
-
-      rectMode(CENTER);
-      fill(100);
-      square(50, 50, 30);
-
-      describe('A small gray square drawn at the center of a white square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either CORNER, CORNERS, CENTER, or RADIUS</p>
-    type: Constant
-chainable: true
----
-
-
-# rectMode
diff --git a/src/content/reference/en/p5 copy/red.mdx b/src/content/reference/en/p5 copy/red.mdx
deleted file mode 100644
index 819478b246..0000000000
--- a/src/content/reference/en/p5 copy/red.mdx	
+++ /dev/null
@@ -1,158 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1279
-title: red
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the red value of a color.</p>
-
-  <p><code>red()</code> extracts the red value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>red()</code> returns a color's red value in the range 0
-
-  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  RGB, it
-
-  returns the red value in the given range.</p>
-line: 1279
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let c = color(175, 100, 220);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 175.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [175, 100, 220];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 175.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgb(175, 100, 220)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 175.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Create a p5.Color object.
-      let c = color(69, 39, 86);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 69.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the red value.
-  type: Number
-chainable: false
----
-
-
-# red
diff --git a/src/content/reference/en/p5 copy/redraw.mdx b/src/content/reference/en/p5 copy/redraw.mdx
deleted file mode 100644
index 6519f322f0..0000000000
--- a/src/content/reference/en/p5 copy/redraw.mdx	
+++ /dev/null
@@ -1,117 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L838
-title: redraw
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Runs the code in <a href="/reference/p5/draw/">draw()</a> once.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
-
-  <a href="/reference/p5/draw/">draw()</a> from repeating. Calling
-  <code>redraw()</code> will
-
-  execute the code in the <a href="/reference/p5/draw/">draw()</a> function a
-  set
-
-  number of times.</p>
-
-  <p>The parameter, <code>n</code>, is optional. If a number is passed, as in
-  <code>redraw(5)</code>,
-
-  then the draw loop will run the given number of times. By default,
-  <code>n</code> is
-
-  1.</p>
-line: 838
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click the canvas to move the circle.
-
-    let x = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe(
-        'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle.
-      circle(x, 50, 20);
-
-      // Increment x.
-      x += 5;
-    }
-
-    // Run the draw loop when the user double-clicks.
-    function doubleClicked() {
-      redraw();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click the canvas to move the circle.
-
-    let x = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe(
-        'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle.
-      circle(x, 50, 20);
-
-      // Increment x.
-      x += 5;
-    }
-
-    // Run the draw loop three times when the user double-clicks.
-    function doubleClicked() {
-      redraw(3);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: >
-      <p>number of times to run <a href="#/p5/draw">draw()</a>. Defaults to
-      1.</p>
-    type: Integer
-    optional: true
-chainable: false
----
-
-
-# redraw
diff --git a/src/content/reference/en/p5 copy/remove.mdx b/src/content/reference/en/p5 copy/remove.mdx
deleted file mode 100644
index 552822f5a3..0000000000
--- a/src/content/reference/en/p5 copy/remove.mdx	
+++ /dev/null
@@ -1,57 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L559
-title: remove
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>Removes the sketch from the web page.</p>
-
-  <p>Calling <code>remove()</code> stops the draw loop and removes any HTML
-  elements
-
-  created by the sketch, including the canvas. A new sketch can be
-
-  created by using the <a href="/reference/p5/p5/">p5()</a> constructor, as in
-
-  <code>new p5()</code>.</p>
-line: 559
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to remove the canvas.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      // Paint the background repeatedly.
-      background(200);
-
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-
-    // Remove the sketch when the user double-clicks.
-    function doubleClicked() {
-      remove();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# remove
diff --git a/src/content/reference/en/p5 copy/removeElements.mdx b/src/content/reference/en/p5 copy/removeElements.mdx
deleted file mode 100644
index 51e712026b..0000000000
--- a/src/content/reference/en/p5 copy/removeElements.mdx	
+++ /dev/null
@@ -1,85 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L256
-title: removeElements
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Removes all elements created by p5.js, including any event handlers.</p>
-
-  <p>There are two exceptions:
-
-  canvas elements created by <a
-  href="/reference/p5/createCanvas/">createCanvas()</a>
-
-  and <a href="/reference/p5/p5.Renderer">p5.Render</a> objects created by
-
-  <a href="/reference/p5/createGraphics/">createGraphics()</a>.</p>
-line: 256
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a paragraph element and place
-      // it in the middle of the canvas.
-      let p = createP('p5*js');
-      p.position(25, 25);
-
-      describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
-    }
-
-    // Remove all elements when the mouse is pressed.
-    function mousePressed() {
-      removeElements();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a paragraph element and place
-      // it at the top of the canvas.
-      let p = createP('p5*js');
-      p.position(25, 25);
-
-      // Create a slider element and place it
-      // beneath the canvas.
-      slider = createSlider(0, 255, 200);
-      slider.position(0, 100);
-
-      describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
-    }
-
-    function draw() {
-      // Use the slider value to change the background color.
-      let g = slider.value();
-      background(g);
-    }
-
-    // Remove all elements when the mouse is double-clicked.
-    function doubleClicked() {
-      removeElements();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# removeElements
diff --git a/src/content/reference/en/p5 copy/removeItem.mdx b/src/content/reference/en/p5 copy/removeItem.mdx
deleted file mode 100644
index ba091b00b4..0000000000
--- a/src/content/reference/en/p5 copy/removeItem.mdx	
+++ /dev/null
@@ -1,97 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L380
-title: removeItem
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Removes an item from the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs.</p>
-
-  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
-  values in
-
-  <code>localStorage</code> and <code>removeItem()</code> makes it easy to
-  delete them.</p>
-
-  <p>The parameter, <code>key</code>, is the name of the value to remove as a
-  string. For
-
-  example, calling <code>removeItem('size')</code> removes the item with the key
-  <code>size</code>.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 380
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to remove an item from localStorage.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe(
-        'The text "Feist: 1234" written in black on a gray background. The text "Feist: null" appears when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-
-    // Remove the word from localStorage when the user double-clicks.
-    function doubleClicked() {
-      removeItem('score');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: key
-    description: |
-      <p>name of the value to remove.</p>
-    type: String
-chainable: false
----
-
-
-# removeItem
diff --git a/src/content/reference/en/p5 copy/requestPointerLock.mdx b/src/content/reference/en/p5 copy/requestPointerLock.mdx
deleted file mode 100644
index 621ce063ce..0000000000
--- a/src/content/reference/en/p5 copy/requestPointerLock.mdx	
+++ /dev/null
@@ -1,85 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1880
-title: requestPointerLock
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>Locks the mouse pointer to its current position and makes it invisible.</p>
-
-  <p><code>requestPointerLock()</code> allows the mouse to move forever without
-  leaving the
-
-  screen. Calling <code>requestPointerLock()</code> locks the values of
-
-  <a href="/reference/p5/mouseX/">mouseX</a>, <a
-  href="/reference/p5/mouseY/">mouseY</a>,
-
-  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
-  href="/reference/p5/pmouseY/">pmouseY</a>.
-
-  <a href="/reference/p5/movedX/">movedX</a> and <a
-  href="/reference/p5/movedY/">movedY</a>
-
-  continue updating and can be used to get the distance the mouse moved since
-
-  the last frame was drawn. Calling
-
-  <a href="/reference/p5/exitPointerLock/">exitPointerLock()</a> resumes
-  updating the
-
-  mouse system variables.</p>
-
-  <p>Note: Most browsers require an input, such as a click, before calling
-
-  <code>requestPointerLock()</code>. It’s recommended to call
-  <code>requestPointerLock()</code> in
-
-  an event function such as <a
-  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
-line: 1880
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let score = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the text "Score: X" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Update the score.
-      score -= movedY;
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the score.
-      text(`Score: ${score}`, 50, 50);
-    }
-
-    // Lock the pointer when the user double-clicks.
-    function doubleClicked() {
-      requestPointerLock();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# requestPointerLock
diff --git a/src/content/reference/en/p5 copy/resetMatrix.mdx b/src/content/reference/en/p5 copy/resetMatrix.mdx
deleted file mode 100644
index af797b49db..0000000000
--- a/src/content/reference/en/p5 copy/resetMatrix.mdx	
+++ /dev/null
@@ -1,52 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L246
-title: resetMatrix
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: |
-  <p>Clears all transformations applied to the coordinate system.</p>
-line: 246
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a blue circle at the coordinates (25, 25).
-      fill('blue');
-      circle(25, 25, 20);
-
-      // Clear all transformations.
-      // The origin is now at the top-left corner.
-      resetMatrix();
-
-      // Draw a red circle at the coordinates (25, 25).
-      fill('red');
-      circle(25, 25, 20);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# resetMatrix
diff --git a/src/content/reference/en/p5 copy/resetShader.mdx b/src/content/reference/en/p5 copy/resetShader.mdx
deleted file mode 100644
index 850ca0773c..0000000000
--- a/src/content/reference/en/p5 copy/resetShader.mdx	
+++ /dev/null
@@ -1,95 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1628
-title: resetShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: |
-  <p>Restores the default shaders.</p>
-  <p><code>resetShader()</code> deactivates any shaders previously applied by
-  <a href="/reference/p5/shader/">shader()</a>.</p>
-  <p>Note: Shaders can only be used in WebGL mode.</p>
-line: 1628
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    uniform mat4 uProjectionMatrix;
-    uniform mat4 uModelViewMatrix;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 position = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * position;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision mediump float;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vec2 uv = vTexCoord;
-      vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
-      gl_FragColor = vec4(color, 1.0);
-    }
-    `;
-
-    let myShader;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      myShader = createShader(vertSrc, fragSrc);
-
-      describe(
-        'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a box using the p5.Shader.
-      // shader() sets the active shader to myShader.
-      shader(myShader);
-      push();
-      translate(-25, 0, 0);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      box(width / 4);
-      pop();
-
-      // Draw a box using the default fill shader.
-      // resetShader() restores the default fill shader.
-      resetShader();
-      fill(255, 0, 0);
-      push();
-      translate(25, 0, 0);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      box(width / 4);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# resetShader
diff --git a/src/content/reference/en/p5 copy/resizeCanvas.mdx b/src/content/reference/en/p5 copy/resizeCanvas.mdx
deleted file mode 100644
index fde0561563..0000000000
--- a/src/content/reference/en/p5 copy/resizeCanvas.mdx	
+++ /dev/null
@@ -1,133 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L221
-title: resizeCanvas
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Resizes the canvas to a given width and height.</p>
-
-  <p><code>resizeCanvas()</code> immediately clears the canvas and calls
-
-  <a href="/reference/p5/redraw/">redraw()</a>. It's common to call
-  <code>resizeCanvas()</code>
-
-  within the body of <a href="/reference/p5/windowResized/">windowResized()</a>
-  like
-
-  so:</p>
-
-  <pre><code class="language-js">function windowResized() {
-    resizeCanvas(windowWidth, windowHeight);
-  }
-
-  </code></pre>
-
-  <p>The first two parameters, <code>width</code> and <code>height</code>, set
-  the dimensions of the
-
-  canvas. They also the values of the <a href="/reference/p5/width/">width</a>
-  and
-
-  <a href="/reference/p5/height/">height</a> system variables. For example,
-  calling
-
-  <code>resizeCanvas(300, 500)</code> resizes the canvas to 300×500 pixels, then
-  sets
-
-  <a href="/reference/p5/width/">width</a> to 300 and
-
-  <a href="/reference/p5/height/">height</a> 500.</p>
-
-  <p>The third parameter, <code>noRedraw</code>, is optional. If
-  <code>true</code> is passed, as in
-
-  <code>resizeCanvas(300, 500, true)</code>, then the canvas will be canvas to
-  300×500
-
-  pixels but the <a href="/reference/p5/redraw/">redraw()</a> function won't be
-  called
-
-  immediately. By default, <a href="/reference/p5/redraw/">redraw()</a> is
-  called
-
-  immediately when <code>resizeCanvas()</code> finishes executing.</p>
-line: 221
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to resize the canvas.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(180);
-
-      // Draw a circle at the center of the canvas.
-      circle(width / 2, height / 2, 20);
-    }
-
-    // Resize the canvas when the user double-clicks.
-    function doubleClicked() {
-      resizeCanvas(50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Resize the web browser to change the canvas size.
-
-    function setup() {
-      createCanvas(windowWidth, windowHeight);
-
-      describe('A white circle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(180);
-
-      // Draw a circle at the center of the canvas.
-      circle(width / 2, height / 2, 20);
-    }
-
-    // Always resize the canvas to fill the browser window.
-    function windowResized() {
-      resizeCanvas(windowWidth, windowHeight);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width of the canvas.</p>
-    type: Number
-  - name: height
-    description: |
-      <p>height of the canvas.</p>
-    type: Number
-  - name: noRedraw
-    description: |
-      <p>whether to delay calling
-                                   <a href="#/p5/redraw">redraw()</a>. Defaults
-                                   to <code>false</code>.</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# resizeCanvas
diff --git a/src/content/reference/en/p5 copy/reverse.mdx b/src/content/reference/en/p5 copy/reverse.mdx
deleted file mode 100644
index bf7a6571ac..0000000000
--- a/src/content/reference/en/p5 copy/reverse.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L141
-title: reverse
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Reverses the order of an array, maps to Array.reverse()</p>
-line: 141
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">array.reverse()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    function setup() {
-      let myArray = ['A', 'B', 'C'];
-      print(myArray); // ['A','B','C']
-
-      reverse(myArray);
-      print(myArray); // ['C','B','A']
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to reverse</p>
-    type: Array
-return:
-  description: the reversed list
-  type: Array
-chainable: false
----
-
-
-# reverse
diff --git a/src/content/reference/en/p5 copy/rotate.mdx b/src/content/reference/en/p5 copy/rotate.mdx
deleted file mode 100644
index bbb4f8e5f8..0000000000
--- a/src/content/reference/en/p5 copy/rotate.mdx	
+++ /dev/null
@@ -1,226 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L289
-title: rotate
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system.</p>
-
-  <p>By default, the positive x-axis points to the right and the positive y-axis
-
-  points downward. The <code>rotate()</code> function changes this orientation
-  by
-
-  rotating the coordinate system about the origin. Everything drawn after
-
-  <code>rotate()</code> is called will appear to be rotated.</p>
-
-  <p>The first parameter, <code>angle</code>, is the amount to rotate. For
-  example, calling
-
-  <code>rotate(1)</code> rotates the coordinate system clockwise 1 radian which
-  is
-
-  nearly 57˚. <code>rotate()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>The second parameter, <code>axis</code>, is optional. It's used to orient
-  3D rotations
-
-  in WebGL mode. If a <a href="/reference/p5/p5.Vector">p5.Vector</a> is passed,
-  as in
-
-  <code>rotate(QUARTER_PI, myVector)</code>, then the coordinate system will
-  rotate
-
-  <code>QUARTER_PI</code> radians about <code>myVector</code>. If an array of
-  vector components is
-
-  passed, as in <code>rotate(QUARTER_PI, [1, 0, 0])</code>, then the coordinate
-  system
-
-  will rotate <code>QUARTER_PI</code> radians about a vector with the components
-
-  <code>[1, 0, 0]</code>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotate(1)</code>
-
-  twice has the same effect as calling <code>rotate(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotate(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 289
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn.
-      rotate(QUARTER_PI);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotate(QUARTER_PI / 2);
-
-      // Rotate the coordinate system another 1/16 turn.
-      rotate(QUARTER_PI / 2);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe(
-        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn.
-      rotate(45);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotate(angle);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A cube on a gray background. The cube's front face points to the top-right.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn about
-      // the axis [1, 1, 0].
-      let axis = createVector(1, 1, 0);
-      rotate(QUARTER_PI, axis);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A cube on a gray background. The cube's front face points to the top-right.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn about
-      // the axis [1, 1, 0].
-      let axis = [1, 1, 0];
-      rotate(QUARTER_PI, axis);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-  - name: axis
-    description: |
-      <p>axis to rotate about in 3D.</p>
-    type: 'p5.Vector|Number[]'
-    optional: true
-chainable: true
----
-
-
-# rotate
diff --git a/src/content/reference/en/p5 copy/rotateX.mdx b/src/content/reference/en/p5 copy/rotateX.mdx
deleted file mode 100644
index c519976bce..0000000000
--- a/src/content/reference/en/p5 copy/rotateX.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L470
-title: rotateX
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system about the x-axis in WebGL mode.</p>
-
-  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
-  calling
-
-  <code>rotateX(1)</code> rotates the coordinate system about the x-axis by 1
-  radian.
-
-  <code>rotateX()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotateX(1)</code>
-
-  twice has the same effect as calling <code>rotateX(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotateX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 470
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateX(QUARTER_PI);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateX(QUARTER_PI / 2);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateX(QUARTER_PI / 2);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateX(45);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotateX(angle);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# rotateX
diff --git a/src/content/reference/en/p5 copy/rotateY.mdx b/src/content/reference/en/p5 copy/rotateY.mdx
deleted file mode 100644
index c7976c5a44..0000000000
--- a/src/content/reference/en/p5 copy/rotateY.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L606
-title: rotateY
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system about the y-axis in WebGL mode.</p>
-
-  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
-  calling
-
-  <code>rotateY(1)</code> rotates the coordinate system about the y-axis by 1
-  radian.
-
-  <code>rotateY()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotateY(1)</code>
-
-  twice has the same effect as calling <code>rotateY(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotateY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 606
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateY(QUARTER_PI);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateY(QUARTER_PI / 2);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateY(QUARTER_PI / 2);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateY(45);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotateY(angle);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# rotateY
diff --git a/src/content/reference/en/p5 copy/rotateZ.mdx b/src/content/reference/en/p5 copy/rotateZ.mdx
deleted file mode 100644
index 317bd7fe88..0000000000
--- a/src/content/reference/en/p5 copy/rotateZ.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L742
-title: rotateZ
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system about the z-axis in WebGL mode.</p>
-
-  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
-  calling
-
-  <code>rotateZ(1)</code> rotates the coordinate system about the z-axis by 1
-  radian.
-
-  <code>rotateZ()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotateZ(1)</code>
-
-  twice has the same effect as calling <code>rotateZ(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotateZ(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 742
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateZ(QUARTER_PI);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateZ(QUARTER_PI / 2);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateZ(QUARTER_PI / 2);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateZ(45);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotateZ(angle);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# rotateZ
diff --git a/src/content/reference/en/p5 copy/rotationX.mdx b/src/content/reference/en/p5 copy/rotationX.mdx
deleted file mode 100644
index 98dfd287dc..0000000000
--- a/src/content/reference/en/p5 copy/rotationX.mdx	
+++ /dev/null
@@ -1,45 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L131
-title: rotationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable rotationX always contains the rotation of the
-  device along the x axis. If the sketch <a href="/reference/p5/angleMode/">
-  angleMode()</a> is set to DEGREES, the value will be -180 to 180. If
-  it is set to RADIANS, the value will be -PI to PI.</p>
-  <p>Note: The order the rotations are called is important, ie. if used
-  together, it must be called in the order Z-X-Y or there might be
-  unexpected behaviour.</p>
-line: 131
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(200);
-      //rotateZ(radians(rotationZ));
-      rotateX(radians(rotationX));
-      //rotateY(radians(rotationY));
-      box(200, 200, 200);
-      describe(`red horizontal line right, green vertical line bottom.
-        black background.`);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# rotationX
diff --git a/src/content/reference/en/p5 copy/rotationY.mdx b/src/content/reference/en/p5 copy/rotationY.mdx
deleted file mode 100644
index f06a033bb7..0000000000
--- a/src/content/reference/en/p5 copy/rotationY.mdx	
+++ /dev/null
@@ -1,45 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L164
-title: rotationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable rotationY always contains the rotation of the
-  device along the y axis. If the sketch <a href="/reference/p5/angleMode/">
-  angleMode()</a> is set to DEGREES, the value will be -90 to 90. If
-  it is set to RADIANS, the value will be -PI/2 to PI/2.</p>
-  <p>Note: The order the rotations are called is important, ie. if used
-  together, it must be called in the order Z-X-Y or there might be
-  unexpected behaviour.</p>
-line: 164
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(200);
-      //rotateZ(radians(rotationZ));
-      //rotateX(radians(rotationX));
-      rotateY(radians(rotationY));
-      box(200, 200, 200);
-      describe(`red horizontal line right, green vertical line bottom.
-        black background.`);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# rotationY
diff --git a/src/content/reference/en/p5 copy/rotationZ.mdx b/src/content/reference/en/p5 copy/rotationZ.mdx
deleted file mode 100644
index 47d6d965aa..0000000000
--- a/src/content/reference/en/p5 copy/rotationZ.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L197
-title: rotationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable rotationZ always contains the rotation of the
-  device along the z axis. If the sketch <a href="/reference/p5/angleMode/">
-  angleMode()</a> is set to DEGREES, the value will be 0 to 360. If
-  it is set to RADIANS, the value will be 0 to 2*PI.</p>
-  <p>Unlike rotationX and rotationY, this variable is available for devices
-  with a built-in compass only.</p>
-  <p>Note: The order the rotations are called is important, ie. if used
-  together, it must be called in the order Z-X-Y or there might be
-  unexpected behaviour.</p>
-line: 197
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(200);
-      rotateZ(radians(rotationZ));
-      //rotateX(radians(rotationX));
-      //rotateY(radians(rotationY));
-      box(200, 200, 200);
-      describe(`red horizontal line right, green vertical line bottom.
-        black background.`);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# rotationZ
diff --git a/src/content/reference/en/p5 copy/round.mdx b/src/content/reference/en/p5 copy/round.mdx
deleted file mode 100644
index 3f6efea6eb..0000000000
--- a/src/content/reference/en/p5 copy/round.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L861
-title: round
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the integer closest to a number.</p>
-
-  <p>For example, <code>round(133.8)</code> returns the value 134.</p>
-
-  <p>The second parameter, <code>decimals</code>, is optional. It sets the
-  number of
-
-  decimal places to use when rounding. For example, <code>round(12.34, 1)</code>
-  returns
-
-  12.3. <code>decimals</code> is 0 by default.</p>
-line: 861
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Round a number.
-      let x = round(4.2);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the rounded number.
-      text(x, 50, 50);
-
-      describe('The number 4 written in middle of the canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Round a number to 2 decimal places.
-      let x = round(12.782383, 2);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the rounded number.
-      text(x, 50, 50);
-
-      describe('The number 12.78 written in middle of canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to round.</p>
-    type: Number
-  - name: decimals
-    description: |
-      <p>number of decimal places to round to, default is 0.</p>
-    type: Number
-    optional: true
-return:
-  description: rounded number.
-  type: Integer
-chainable: false
----
-
-
-# round
diff --git a/src/content/reference/en/p5 copy/sampleRate.mdx b/src/content/reference/en/p5 copy/sampleRate.mdx
deleted file mode 100644
index 3608ee22be..0000000000
--- a/src/content/reference/en/p5 copy/sampleRate.mdx	
+++ /dev/null
@@ -1,26 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L811
-title: sampleRate
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns a number representing the sample rate, in samples per second,
-  of all sound objects in this audio context. It is determined by the
-  sampling rate of your operating system's sound card, and it is not
-  currently possile to change.
-  It is often 44100, or twice the range of human hearing.</p>
-line: 811
-isConstructor: false
-itemtype: method
-class: p5
-return:
-  description: samplerate samples per second
-  type: Number
-chainable: false
----
-
-
-# sampleRate
diff --git a/src/content/reference/en/p5 copy/saturation.mdx b/src/content/reference/en/p5 copy/saturation.mdx
deleted file mode 100644
index 7552fe927d..0000000000
--- a/src/content/reference/en/p5 copy/saturation.mdx	
+++ /dev/null
@@ -1,201 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1415
-title: saturation
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the saturation value of a color.</p>
-
-  <p><code>saturation()</code> extracts the saturation value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>Saturation is scaled differently in HSB and HSL. By default,
-  <code>saturation()</code>
-
-  returns a color's HSL saturation in the range 0 to 100. If the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
-  returns the
-
-  saturation value in the given mode.</p>
-line: 1415
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a p5.Color object.
-      let c = color(0, 50, 100);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 50.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a color array.
-      let c = [0, 50, 100];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 100.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 100.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a p5.Color object.
-      let c = color(0, 100, 75);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 100.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color with values in the range 0-255.
-      colorMode(HSL, 255);
-
-      // Create a p5.Color object.
-      let c = color(0, 255, 191.5);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 255.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the saturation value
-  type: Number
-chainable: false
----
-
-
-# saturation
diff --git a/src/content/reference/en/p5 copy/save.mdx b/src/content/reference/en/p5 copy/save.mdx
deleted file mode 100644
index fb8b67cd74..0000000000
--- a/src/content/reference/en/p5 copy/save.mdx	
+++ /dev/null
@@ -1,140 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1835
-title: save
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Saves a given element(image, text, json, csv, wav, or html) to the client's
-
-  computer. The first parameter can be a pointer to element we want to save.
-
-  The element can be one of <a href="/reference/p5/p5.Element">p5.Element</a>,an
-  Array of
-
-  Strings, an Array of JSON, a JSON object, a <a
-  href="/reference/p5/p5.Table">p5.Table
-
-  </a>, a <a href="/reference/p5/p5.Image">p5.Image</a>, or a p5.SoundFile
-  (requires
-
-  p5.sound). The second parameter is a filename (including extension).The
-
-  third parameter is for options specific to this type of object. This method
-
-  will save a file that fits the given parameters.
-
-  If it is called without specifying an element, by default it will save the
-
-  whole canvas as an image file. You can optionally specify a filename as
-
-  the first parameter in such a case.
-
-  <strong>Note that it is not recommended to
-
-  call this method within draw, as it will open a new save dialog on every
-
-  render.</strong></p>
-line: 1835
-isConstructor: false
-itemtype: method
-example:
-  - |2-
-
-     <div class="norender"><code>
-     // Saves the canvas as an image
-     cnv = createCanvas(300, 300);
-     save(cnv, 'myCanvas.jpg');
-
-     // Saves the canvas as an image by default
-     save('myCanvas.jpg');
-     describe('An example for saving a canvas as an image.');
-     </code></div>
-
-     <div class="norender"><code>
-     // Saves p5.Image as an image
-     img = createImage(10, 10);
-     save(img, 'myImage.png');
-     describe('An example for saving a p5.Image element as an image.');
-     </code></div>
-
-     <div class="norender"><code>
-     // Saves p5.Renderer object as an image
-     obj = createGraphics(100, 100);
-     save(obj, 'myObject.png');
-     describe('An example for saving a p5.Renderer element.');
-     </code></div>
-
-     <div class="norender"><code>
-     let myTable = new p5.Table();
-     // Saves table as html file
-     save(myTable, 'myTable.html');
-
-     // Comma Separated Values
-     save(myTable, 'myTable.csv');
-
-     // Tab Separated Values
-     save(myTable, 'myTable.tsv');
-
-     describe(`An example showing how to save a table in formats of
-     HTML, CSV and TSV.`);
-     </code></div>
-
-     <div class="norender"><code>
-     let myJSON = { a: 1, b: true };
-
-     // Saves pretty JSON
-     save(myJSON, 'my.json');
-
-     // Optimizes JSON filesize
-     save(myJSON, 'my.json', true);
-
-     describe('An example for saving JSON to a txt file with some extra arguments.');
-     </code></div>
-
-     <div class="norender"><code>
-     // Saves array of strings to text file with line breaks after each item
-     let arrayOfStrings = ['a', 'b'];
-     save(arrayOfStrings, 'my.txt');
-     describe(`An example for saving an array of strings to text file
-     with line breaks.`);
-     </code></div>
-class: p5
-params:
-  - name: objectOrFilename
-    description: |
-      <p>If filename is provided, will
-                                                 save canvas as an image with
-                                                 either png or jpg extension
-                                                 depending on the filename.
-                                                 If object is provided, will
-                                                 save depending on the object
-                                                 and filename (see examples
-                                                 above).</p>
-    type: Object|String
-    optional: true
-  - name: filename
-    description: |
-      <p>If an object is provided as the first
-                                   parameter, then the second parameter
-                                   indicates the filename,
-                                   and should include an appropriate
-                                   file extension (see examples above).</p>
-    type: String
-    optional: true
-  - name: options
-    description: |
-      <p>Additional options depend on
-                                filetype. For example, when saving JSON,
-                                <code>true</code> indicates that the
-                                output will be optimized for filesize,
-                                rather than readability.</p>
-    type: Boolean|String
-    optional: true
-chainable: false
----
-
-
-# save
diff --git a/src/content/reference/en/p5 copy/saveCanvas.mdx b/src/content/reference/en/p5 copy/saveCanvas.mdx
deleted file mode 100644
index 159bf101ce..0000000000
--- a/src/content/reference/en/p5 copy/saveCanvas.mdx	
+++ /dev/null
@@ -1,166 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L153
-title: saveCanvas
-module: Image
-submodule: Image
-file: src/image/image.js
-description: >
-  <p>Saves the current canvas as an image.</p>
-
-  <p>By default, <code>saveCanvas()</code> saves the canvas as a PNG image
-  called
-
-  <code>untitled.png</code>.</p>
-
-  <p>The first parameter, <code>filename</code>, is optional. It's a string that
-  sets the
-
-  file's name. If a file extension is included, as in
-
-  <code>saveCanvas('drawing.png')</code>, then the image will be saved using
-  that
-
-  format.</p>
-
-  <p>The second parameter, <code>extension</code>, is also optional. It sets the
-  files format.
-
-  Either <code>'png'</code>, <code>'webp'</code>, or <code>'jpg'</code> can be
-  used. For example, <code>saveCanvas('drawing', 'jpg')</code>
-
-  saves the canvas to a file called <code>drawing.jpg</code>.</p>
-
-  <p>Note: The browser will either save the file immediately or prompt the user
-
-  with a dialogue window.</p>
-line: 153
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-      background(255);
-
-      // Save the canvas to 'untitled.png'.
-      saveCanvas();
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas('myCanvas.jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas('myCanvas', 'jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'untitled.png'.
-      saveCanvas(cnv);
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas(cnv, 'myCanvas.jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas(cnv, 'myCanvas', 'jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 153
-    params:
-      - name: selectedCanvas
-        description: |
-          <p>reference to a
-                                                                   specific HTML5 canvas element.</p>
-        type: p5.Framebuffer|p5.Element|HTMLCanvasElement
-      - name: filename
-        description: |
-          <p>file name. Defaults to 'untitled'.</p>
-        type: String
-        optional: true
-      - name: extension
-        description: >
-          <p>file extension, either 'png', 'webp', or 'jpg'. Defaults to
-          'png'.</p>
-        type: String
-        optional: true
-  - line: 267
-    params:
-      - name: filename
-        description: ''
-        type: String
-        optional: true
-      - name: extension
-        description: ''
-        type: String
-        optional: true
-chainable: false
----
-
-
-# saveCanvas
diff --git a/src/content/reference/en/p5 copy/saveFrames.mdx b/src/content/reference/en/p5 copy/saveFrames.mdx
deleted file mode 100644
index 72b8d7d987..0000000000
--- a/src/content/reference/en/p5 copy/saveFrames.mdx	
+++ /dev/null
@@ -1,175 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L561
-title: saveFrames
-module: Image
-submodule: Image
-file: src/image/image.js
-description: >
-  <p>Captures a sequence of frames from the canvas that can be saved as
-  images.</p>
-
-  <p><code>saveFrames()</code> creates an array of frame objects. Each frame is
-  stored as
-
-  an object with its file type, file name, and image data as a string. For
-
-  example, the first saved frame might have the following properties:</p>
-
-  <p><code>{ ext: 'png', filename: 'frame0', imageData:
-  'data:image/octet-stream;base64, abc123' }</code>.</p>
-
-  <p>The first parameter, <code>filename</code>, sets the prefix for the file
-  names. For
-
-  example, setting the prefix to <code>'frame'</code> would generate the image
-  files
-
-  <code>frame0.png</code>, <code>frame1.png</code>, and so on.</p>
-
-  <p>The second parameter, <code>extension</code>, sets the file type to either
-  <code>'png'</code> or
-
-  <code>'jpg'</code>.</p>
-
-  <p>The third parameter, <code>duration</code>, sets the duration to record in
-  seconds.
-
-  The maximum duration is 15 seconds.</p>
-
-  <p>The fourth parameter, <code>framerate</code>, sets the number of frames to
-  record per
-
-  second. The maximum frame rate value is 22. Limits are placed on
-  <code>duration</code>
-
-  and <code>framerate</code> to avoid using too much memory. Recording large
-  canvases
-
-  can easily crash sketches or even web browsers.</p>
-
-  <p>The fifth parameter, <code>callback</code>, is optional. If a function is
-  passed,
-
-  image files won't be saved by default. The callback function can be used
-
-  to process an array containing the data for each captured frame. The array
-
-  of image data contains a sequence of objects with three properties for each
-
-  frame: <code>imageData</code>, <code>filename</code>, and
-  <code>extension</code>.</p>
-
-  <p>Note: Frames are downloaded as individual image files by default.</p>
-line: 561
-isConstructor: false
-itemtype: method
-example:
-  - >-
-
-    <div>
-
-    <code>
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A square repeatedly changes color from blue to pink.');
-    }
-
-
-    function draw() {
-      let r = frameCount % 255;
-      let g = 50;
-      let b = 100;
-      background(r, g, b);
-    }
-
-
-    // Save the frames when the user presses the 's' key.
-
-    function keyPressed() {
-      if (key === 's') {
-        saveFrames('frame', 'png', 1, 5);
-      }
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A square repeatedly changes color from blue to pink.');
-    }
-
-
-    function draw() {
-      let r = frameCount % 255;
-      let g = 50;
-      let b = 100;
-      background(r, g, b);
-    }
-
-
-    // Print 5 frames when the user presses the mouse.
-
-    function mousePressed() {
-      saveFrames('frame', 'png', 1, 5, printFrames);
-    }
-
-
-    // Prints an array of objects containing raw image data, filenames, and
-    extensions.
-
-    function printFrames(frames) {
-      for (let frame of frames) {
-        print(frame);
-      }
-    }
-
-    </code>
-
-    </div>
-class: p5
-params:
-  - name: filename
-    description: |
-      <p>prefix of file name.</p>
-    type: String
-  - name: extension
-    description: |
-      <p>file extension, either 'jpg' or 'png'.</p>
-    type: String
-  - name: duration
-    description: >
-      <p>duration in seconds to record. This parameter will be constrained to be
-      less or equal to 15.</p>
-    type: Number
-  - name: framerate
-    description: >
-      <p>number of frames to save per second. This parameter will be constrained
-      to be less or equal to 22.</p>
-    type: Number
-  - name: callback
-    description: |
-      <p>callback function that will be executed
-                                       to handle the image data. This function
-                                       should accept an array as argument. The
-                                       array will contain the specified number of
-                                       frames of objects. Each object has three
-                                       properties: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>
-    type: Function(Array)
-    optional: true
-chainable: false
----
-
-
-# saveFrames
diff --git a/src/content/reference/en/p5 copy/saveGif.mdx b/src/content/reference/en/p5 copy/saveGif.mdx
deleted file mode 100644
index 9b520993ac..0000000000
--- a/src/content/reference/en/p5 copy/saveGif.mdx	
+++ /dev/null
@@ -1,119 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L204
-title: saveGif
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Generates a gif from a sketch and saves it to a file.</p>
-
-  <p><code>saveGif()</code> may be called in <a
-  href="/reference/p5/setup/">setup()</a> or at any
-
-  point while a sketch is running.</p>
-
-  <p>The first parameter, <code>fileName</code>, sets the gif's file name.</p>
-
-  <p>The second parameter, <code>duration</code>, sets the gif's duration in
-  seconds.</p>
-
-  <p>The third parameter, <code>options</code>, is optional. If an object is
-  passed,
-
-  <code>saveGif()</code> will use its properties to customize the gif.
-  <code>saveGif()</code>
-
-  recognizes the properties <code>delay</code>, <code>units</code>,
-  <code>silent</code>,
-
-  <code>notificationDuration</code>, and <code>notificationID</code>.</p>
-line: 204
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the circle.
-      let c = frameCount % 255;
-      fill(c);
-
-      // Display the circle.
-      circle(50, 50, 25);
-    }
-
-    // Save a 5-second gif when the user presses the 's' key.
-    function keyPressed() {
-      if (key === 's') {
-        saveGif('mySketch', 5);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the circle.
-      let c = frameCount % 255;
-      fill(c);
-
-      // Display the circle.
-      circle(50, 50, 25);
-    }
-
-    // Save a 5-second gif when the user presses the 's' key.
-    // Wait 1 second after the key press before recording.
-    function keyPressed() {
-      if (key === 's') {
-        saveGif('mySketch', 5, { delay: 1 });
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: filename
-    description: |
-      <p>file name of gif.</p>
-    type: String
-  - name: duration
-    description: |
-      <p>duration in seconds to capture from the sketch.</p>
-    type: Number
-  - name: options
-    description: |
-      <p>an object that can contain five more properties:
-                       <code>delay</code>, a Number specifying how much time to wait before recording;
-                       <code>units</code>, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
-                       <code>silent</code>, a Boolean that defines presence of progress notifications. By default it’s <code>false</code>;
-                       <code>notificationDuration</code>, a Number that defines how long in seconds the final notification
-                       will live. By default it's <code>0</code>, meaning the notification will never be removed;
-                       <code>notificationID</code>, a String that specifies the id of the notification's DOM element. By default it’s <code>'progressBar’</code>.</p>
-    type: Object
-    optional: true
-chainable: false
----
-
-
-# saveGif
diff --git a/src/content/reference/en/p5 copy/saveJSON.mdx b/src/content/reference/en/p5 copy/saveJSON.mdx
deleted file mode 100644
index d5e664d0b2..0000000000
--- a/src/content/reference/en/p5 copy/saveJSON.mdx	
+++ /dev/null
@@ -1,170 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1979
-title: saveJSON
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Saves an <code>Object</code> or <code>Array</code> to a JSON file.</p>
-
-  <p>JavaScript Object Notation
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
-  target="_blank">JSON</a>)
-
-  is a standard format for sending data between applications. The format is
-
-  based on JavaScript objects which have keys and values. JSON files store
-
-  data in an object with strings as keys. Values can be strings, numbers,
-
-  Booleans, arrays, <code>null</code>, or other objects.</p>
-
-  <p>The first parameter, <code>json</code>, is the data to save. The data can
-  be an array,
-
-  as in <code>[1, 2, 3]</code>, or an object, as in
-
-  <code>{ x: 50, y: 50, color: 'deeppink' }</code>.</p>
-
-  <p>The second parameter, <code>filename</code>, is a string that sets the
-  file's name.
-
-  For example, calling <code>saveJSON([1, 2, 3], 'data.json')</code> saves the
-  array
-
-  <code>[1, 2, 3]</code> to a file called <code>data.json</code> on the user's
-  computer.</p>
-
-  <p>The third parameter, <code>optimize</code>, is optional. If
-  <code>true</code> is passed, as in
-
-  <code>saveJSON([1, 2, 3], 'data.json', true)</code>, then all unneeded
-  whitespace will
-
-  be removed to reduce the file size.</p>
-
-  <p>Note: The browser will either save the file immediately or prompt the user
-
-  with a dialogue window.</p>
-line: 1979
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        let data = [1, 2, 3];
-
-        // Save the JSON file.
-        saveJSON(data, 'numbers.json');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an object.
-        let data = { x: mouseX, y: mouseY };
-
-        // Save the JSON file.
-        saveJSON(data, 'state.json');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an object.
-        let data = { x: mouseX, y: mouseY };
-
-        // Save the JSON file and reduce its size.
-        saveJSON(data, 'state.json', true);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: json
-    description: |
-      <p>data to save.</p>
-    type: Array|Object
-  - name: filename
-    description: |
-      <p>name of the file to be saved.</p>
-    type: String
-  - name: optimize
-    description: |
-      <p>whether to trim unneeded whitespace. Defaults
-                                   to <code>true</code>.</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# saveJSON
diff --git a/src/content/reference/en/p5 copy/saveSound.mdx b/src/content/reference/en/p5 copy/saveSound.mdx
deleted file mode 100644
index 3e8e7d0667..0000000000
--- a/src/content/reference/en/p5 copy/saveSound.mdx	
+++ /dev/null
@@ -1,35 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L1145
-title: saveSound
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >
-  <p>Save a p5.SoundFile as a .wav file. The browser will prompt the user
-
-  to download the file to their device.
-
-  For uploading audio to a server, use
-
-  <a
-  href="/docs/reference/#/p5.SoundFile/saveBlob/"><code>p5.SoundFile.saveBlob</code></a>.</p>
-line: 1145
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: soundFile
-    description: |
-      <p>p5.SoundFile that you wish to save</p>
-    type: p5.SoundFile
-  - name: fileName
-    description: |
-      <p>name of the resulting .wav file.</p>
-    type: String
-chainable: false
----
-
-
-# saveSound
diff --git a/src/content/reference/en/p5 copy/saveStrings.mdx b/src/content/reference/en/p5 copy/saveStrings.mdx
deleted file mode 100644
index 36c6c448a2..0000000000
--- a/src/content/reference/en/p5 copy/saveStrings.mdx	
+++ /dev/null
@@ -1,185 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2118
-title: saveStrings
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Saves an <code>Array</code> of <code>String</code>s to a file, one per
-  line.</p>
-
-  <p>The first parameter, <code>list</code>, is an array with the strings to
-  save.</p>
-
-  <p>The second parameter, <code>filename</code>, is a string that sets the
-  file's name.
-
-  For example, calling <code>saveStrings(['0', '01', '011'], 'data.txt')</code>
-  saves
-
-  the array <code>['0', '01', '011']</code> to a file called
-  <code>data.txt</code> on the user's
-
-  computer.</p>
-
-  <p>The third parameter, <code>extension</code>, is optional. If a string is
-  passed, as in
-
-  <code>saveStrings(['0', '01', '0</code>1'], 'data', 'txt')`, the second
-  parameter will
-
-  be interpreted as the file name and the third parameter as the extension.</p>
-
-  <p>The fourth parameter, <code>isCRLF</code>, is also optional, If
-  <code>true</code> is passed, as
-
-  in <code>saveStrings(['0', '01', '011'], 'data', 'txt', true)</code>, then two
-
-  characters, <code>\r\n</code> , will be added to the end of each string to
-  create new
-
-  lines in the saved file. <code>\r</code> is a carriage return (CR) and
-  <code>\n</code> is a line
-
-  feed (LF). By default, only <code>\n</code> (line feed) is added to each
-  string in
-
-  order to create new lines.</p>
-
-  <p>Note: The browser will either save the file immediately or prompt the user
-
-  with a dialogue window.</p>
-line: 2118
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        let data = ['0', '01', '011'];
-
-        // Save the text file.
-        saveStrings(data, 'data.txt');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        // ASCII art courtesy Wikipedia:
-        // https://en.wikipedia.org/wiki/ASCII_art
-        let data = [' (\\_/) ', "(='.'=)", '(")_(")'];
-
-        // Save the text file.
-        saveStrings(data, 'cat', 'txt');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        //   +--+
-        //  /  /|
-        // +--+ +
-        // |  |/
-        // +--+
-        let data = ['  +--+', ' /  /|', '+--+ +', '|  |/', '+--+'];
-
-        // Save the text file.
-        // Use CRLF for line endings.
-        saveStrings(data, 'box', 'txt', true);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>data to save.</p>
-    type: 'String[]'
-  - name: filename
-    description: |
-      <p>name of file to be saved.</p>
-    type: String
-  - name: extension
-    description: |
-      <p>format to use for the file.</p>
-    type: String
-    optional: true
-  - name: isCRLF
-    description: |
-      <p>whether to add <code>\r\n</code> to the end of each
-                                  string. Defaults to <code>false</code>.</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# saveStrings
diff --git a/src/content/reference/en/p5 copy/saveTable.mdx b/src/content/reference/en/p5 copy/saveTable.mdx
deleted file mode 100644
index dd6e64ea4d..0000000000
--- a/src/content/reference/en/p5 copy/saveTable.mdx	
+++ /dev/null
@@ -1,70 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2275
-title: saveTable
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Writes the contents of a <a href="/reference/p5/p5.Table">Table</a> object
-  to a file. Defaults to a
-
-  text file with comma-separated-values ('csv') but can also
-
-  use tab separation ('tsv'), or generate an HTML table ('html').
-
-  The file saving process and location of the saved file will
-
-  vary between web browsers.</p>
-line: 2275
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-     let table;
-
-     function setup() {
-     table = new p5.Table();
-
-     table.addColumn('id');
-     table.addColumn('species');
-     table.addColumn('name');
-
-     let newRow = table.addRow();
-     newRow.setNum('id', table.getRowCount() - 1);
-     newRow.setString('species', 'Panthera leo');
-     newRow.setString('name', 'Lion');
-
-     // To save, un-comment next line then click 'run'
-     // saveTable(table, 'new.csv');
-
-     describe('no image displayed');
-     }
-
-     // Saves the following to a file called 'new.csv':
-     // id,species,name
-     // 0,Panthera leo,Lion
-     </code></div>
-class: p5
-params:
-  - name: Table
-    description: |
-      <p>the <a href="#/p5.Table">Table</a> object to save to a file</p>
-    type: p5.Table
-  - name: filename
-    description: |
-      <p>the filename to which the Table should be saved</p>
-    type: String
-  - name: options
-    description: |
-      <p>can be one of "tsv", "csv", or "html"</p>
-    type: String
-    optional: true
-chainable: false
----
-
-
-# saveTable
diff --git a/src/content/reference/en/p5 copy/scale.mdx b/src/content/reference/en/p5 copy/scale.mdx
deleted file mode 100644
index a459477d80..0000000000
--- a/src/content/reference/en/p5 copy/scale.mdx	
+++ /dev/null
@@ -1,231 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L878
-title: scale
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Scales the coordinate system.</p>
-
-  <p>By default, shapes are drawn at their original scale. A rectangle that's 50
-
-  pixels wide appears to take up half the width of a 100 pixel-wide canvas.
-
-  The <code>scale()</code> function can shrink or stretch the coordinate system
-  so that
-
-  shapes appear at different sizes. There are two ways to call
-  <code>scale()</code> with
-
-  parameters that set the scale factor(s).</p>
-
-  <p>The first way to call <code>scale()</code> uses numbers to set the amount
-  of scaling.
-
-  The first parameter, <code>s</code>, sets the amount to scale each axis. For
-  example,
-
-  calling <code>scale(2)</code> stretches the x-, y-, and z-axes by a factor of
-  2. The
-
-  next two parameters, <code>y</code> and <code>z</code>, are optional. They set
-  the amount to
-
-  scale the y- and z-axes. For example, calling <code>scale(2, 0.5, 1)</code>
-  stretches
-
-  the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
-
-  leaves the z-axis unchanged.</p>
-
-  <p>The second way to call <code>scale()</code> uses a <a
-  href="/reference/p5/p5.Vector">p5.Vector</a>
-
-  object to set the scale factors. For example, calling
-  <code>scale(myVector)</code>
-
-  uses the x-, y-, and z-components of <code>myVector</code> to set the amount
-  of
-
-  scaling along the x-, y-, and z-axes. Doing so is the same as calling
-
-  <code>scale(myVector.x, myVector.y, myVector.z)</code>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>scale(1)</code>
-
-  twice has the same effect as calling <code>scale(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>scale(2)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to grow continuously.</p>
-line: 878
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Scale the coordinate system by a factor of 0.5.
-      scale(0.5);
-
-      // Draw a square at (30, 20).
-      // It appears at (15, 10) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle and a square drawn in white on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Scale the coordinate system by factors of
-      // 0.5 along the x-axis and
-      // 1.3 along the y-axis.
-      scale(0.5, 1.3);
-
-      // Draw a square at (30, 20).
-      // It appears as a rectangle at (15, 26) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle and a square drawn in white on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Create a p5.Vector object.
-      let v = createVector(0.5, 1.3);
-
-      // Scale the coordinate system by factors of
-      // 0.5 along the x-axis and
-      // 1.3 along the y-axis.
-      scale(v);
-
-      // Draw a square at (30, 20).
-      // It appears as a rectangle at (15, 26) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw the red sphere.
-      fill('red');
-      box();
-
-      // Scale the coordinate system by factors of
-      // 0.5 along the x-axis and
-      // 1.3 along the y-axis and
-      // 2 along the z-axis.
-      scale(0.5, 1.3, 2);
-
-      // Draw the blue sphere.
-      fill('blue');
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 878
-    params:
-      - name: s
-        description: |
-          <p>amount to scale along the positive x-axis.</p>
-        type: 'Number|p5.Vector|Number[]'
-      - name: 'y'
-        description: >
-          <p>amount to scale along the positive y-axis. Defaults to
-          <code>s</code>.</p>
-        type: Number
-        optional: true
-      - name: z
-        description: >
-          <p>amount to scale along the positive z-axis. Defaults to
-          <code>y</code>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1039
-    params:
-      - name: scales
-        description: |
-          <p>vector whose components should be used to scale.</p>
-        type: 'p5.Vector|Number[]'
-    chainable: 1
-chainable: true
----
-
-
-# scale
diff --git a/src/content/reference/en/p5 copy/second.mdx b/src/content/reference/en/p5 copy/second.mdx
deleted file mode 100644
index e29042801c..0000000000
--- a/src/content/reference/en/p5 copy/second.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L277
-title: second
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current second as a number from 0–59.</p>
-line: 277
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current second.
-      let s = second();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the second.
-      text(`Current second: ${s}`, 10, 50, 80);
-
-      describe(`The text 'Current second: ${s}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current second between 0 and 59.
-  type: Integer
-chainable: false
----
-
-
-# second
diff --git a/src/content/reference/en/p5 copy/select.mdx b/src/content/reference/en/p5 copy/select.mdx
deleted file mode 100644
index 0ace11ab0d..0000000000
--- a/src/content/reference/en/p5 copy/select.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L21
-title: select
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Searches the page for the first element that matches the given
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
-  target="_blank">CSS selector string</a>.</p>
-
-  <p>The selector string can be an ID, class, tag name, or a combination.
-
-  <code>select()</code> returns a <a
-  href="/reference/p5/p5.Element">p5.Element</a> object if it
-
-  finds a match and <code>null</code> if not.</p>
-
-  <p>The second parameter, <code>container</code>, is optional. It specifies a
-  container to
-
-  search within. <code>container</code> can be CSS selector string, a
-
-  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
-  target="_blank">HTMLElement</a> object.</p>
-line: 21
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-
-      // Select the canvas by its tag.
-      let cnv = select('canvas');
-      cnv.style('border', '5px deeppink dashed');
-
-      describe('A gray square with a dashed pink border.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      // Add a class attribute to the canvas.
-      cnv.class('pinkborder');
-
-      background(200);
-
-      // Select the canvas by its class.
-      cnv = select('.pinkborder');
-
-      // Style its border.
-      cnv.style('border', '5px deeppink dashed');
-
-      describe('A gray square with a dashed pink border.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      // Set the canvas' ID.
-      cnv.id('mycanvas');
-
-      background(200);
-
-      // Select the canvas by its ID.
-      cnv = select('#mycanvas');
-
-      // Style its border.
-      cnv.style('border', '5px deeppink dashed');
-
-      describe('A gray square with a dashed pink border.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: selectors
-    description: |
-      <p>CSS selector string of element to search for.</p>
-    type: String
-  - name: container
-    description: |
-      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
-                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
-    type: String|p5.Element|HTMLElement
-    optional: true
-return:
-  description: <a href="#/p5.Element">p5.Element</a> containing the element.
-  type: p5.Element|null
-chainable: false
----
-
-
-# select
diff --git a/src/content/reference/en/p5 copy/selectAll.mdx b/src/content/reference/en/p5 copy/selectAll.mdx
deleted file mode 100644
index ccd1f3329f..0000000000
--- a/src/content/reference/en/p5 copy/selectAll.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L109
-title: selectAll
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Searches the page for all elements that matches the given
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
-  target="_blank">CSS selector string</a>.</p>
-
-  <p>The selector string can be an ID, class, tag name, or a combination.
-
-  <code>selectAll()</code> returns an array of <a
-  href="/reference/p5/p5.Element">p5.Element</a>
-
-  objects if it finds any matches and an empty array if none are found.</p>
-
-  <p>The second parameter, <code>container</code>, is optional. It specifies a
-  container to
-
-  search within. <code>container</code> can be CSS selector string, a
-
-  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
-  target="_blank">HTMLElement</a> object.</p>
-line: 109
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create three buttons.
-      createButton('1');
-      createButton('2');
-      createButton('3');
-
-      // Select the buttons by their tag.
-      let buttons = selectAll('button');
-
-      // Position the buttons.
-      for (let i = 0; i < 3; i += 1) {
-        buttons[i].position(0, i * 30);
-      }
-
-      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create three buttons and position them.
-      let b1 = createButton('1');
-      b1.position(0, 0);
-      let b2 = createButton('2');
-      b2.position(0, 30);
-      let b3 = createButton('3');
-      b3.position(0, 60);
-
-      // Add a class attribute to each button.
-      b1.class('btn');
-      b2.class('btn btn-pink');
-      b3.class('btn');
-
-      // Select the buttons by their class.
-      let buttons = selectAll('.btn');
-      let pinkButtons = selectAll('.btn-pink');
-
-      // Style the selected buttons.
-      buttons.forEach(setFont);
-      pinkButtons.forEach(setColor);
-
-      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
-    }
-
-    // Set a button's font to Comic Sans MS.
-    function setFont(btn) {
-      btn.style('font-family', 'Comic Sans MS');
-    }
-
-    // Set a button's background and font color.
-    function setColor(btn) {
-      btn.style('background', 'deeppink');
-      btn.style('color', 'white');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: selectors
-    description: |
-      <p>CSS selector string of element to search for.</p>
-    type: String
-  - name: container
-    description: |
-      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
-                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
-    type: String|p5.Element|HTMLElement
-    optional: true
-return:
-  description: >-
-    array of <a href="#/p5.Element">p5.Element</a>s containing any elements
-    found.
-  type: 'p5.Element[]'
-chainable: false
----
-
-
-# selectAll
diff --git a/src/content/reference/en/p5 copy/set.mdx b/src/content/reference/en/p5 copy/set.mdx
deleted file mode 100644
index caa9e75a66..0000000000
--- a/src/content/reference/en/p5 copy/set.mdx	
+++ /dev/null
@@ -1,157 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L997
-title: set
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Sets the color of a pixel or draws an image to the canvas.</p>
-
-  <p><code>set()</code> is easy to use but it's not as fast as
-
-  <a href="/reference/p5/pixels/">pixels</a>. Use <a
-  href="/reference/p5/pixels/">pixels</a>
-
-  to set many pixel values.</p>
-
-  <p><code>set()</code> interprets the first two parameters as x- and
-  y-coordinates. It
-
-  interprets the last parameter as a grayscale value, a <code>[R, G, B,
-  A]</code> pixel
-
-  array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object. If an image is passed,
-  the first
-
-  two parameters set the coordinates for the image's upper-left corner,
-
-  regardless of the current <a
-  href="/reference/p5/imageMode/">imageMode()</a>.</p>
-
-  <p><a href="/reference/p5/updatePixels/">updatePixels()</a> must be called
-  after using
-
-  <code>set()</code> for changes to appear.</p>
-line: 997
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set four pixels to black.
-      set(30, 20, 0);
-      set(85, 20, 0);
-      set(85, 75, 0);
-      set(30, 75, 0);
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Four black dots arranged in a square drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let black = color(0);
-
-      // Set four pixels to black.
-      set(30, 20, black);
-      set(85, 20, black);
-      set(85, 75, black);
-      set(30, 75, black);
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Four black dots arranged in a square drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Draw a horizontal color gradient.
-      for (let x = 0; x < 100; x += 1) {
-        for (let y = 0; y < 100; y += 1) {
-          // Calculate the grayscale value.
-          let c = map(x, 0, 100, 0, 255);
-
-          // Set the pixel using the grayscale value.
-          set(x, y, c);
-        }
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A horizontal color gradient from black to white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the image to set all pixels.
-      set(0, 0, img);
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('An image of a mountain landscape.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the pixel.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the pixel.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>grayscale value | pixel array |
-                                     <a href="#/p5.Color">p5.Color</a> object | <a href="#/p5.Image">p5.Image</a> to copy.</p>
-    type: 'Number|Number[]|Object'
-chainable: false
----
-
-
-# set
diff --git a/src/content/reference/en/p5 copy/setAttributes.mdx b/src/content/reference/en/p5 copy/setAttributes.mdx
deleted file mode 100644
index 368bc49c6c..0000000000
--- a/src/content/reference/en/p5 copy/setAttributes.mdx	
+++ /dev/null
@@ -1,163 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.RendererGL.js#L118
-title: setAttributes
-module: Rendering
-submodule: Rendering
-file: src/webgl/p5.RendererGL.js
-description: |
-  <p>Set attributes for the WebGL Drawing context.
-  This is a way of adjusting how the WebGL
-  renderer works to fine-tune the display and performance.</p>
-  <p>Note that this will reinitialize the drawing context
-  if called after the WebGL canvas is made.</p>
-  <p>If an object is passed as the parameter, all attributes
-  not declared in the object will be set to defaults.</p>
-  <p>The available attributes are:
-  <br>
-  alpha - indicates if the canvas contains an alpha buffer
-  default is true</br></p>
-  <p>depth - indicates whether the drawing buffer has a depth buffer
-  of at least 16 bits - default is true</p>
-  <p>stencil - indicates whether the drawing buffer has a stencil buffer
-  of at least 8 bits</p>
-  <p>antialias - indicates whether or not to perform anti-aliasing
-  default is false (true in Safari)</p>
-  <p>premultipliedAlpha - indicates that the page compositor will assume
-  the drawing buffer contains colors with pre-multiplied alpha
-  default is true</p>
-  <p>preserveDrawingBuffer - if true the buffers will not be cleared and
-  and will preserve their values until cleared or overwritten by author
-  (note that p5 clears automatically on draw loop)
-  default is true</p>
-  <p>perPixelLighting - if true, per-pixel lighting will be used in the
-  lighting shader otherwise per-vertex lighting is used.
-  default is true.</p>
-  <p>version - either 1 or 2, to specify which WebGL version to ask for. By
-  default, WebGL 2 will be requested. If WebGL2 is not available, it will
-  fall back to WebGL 1. You can check what version is used with by looking at
-  the global <code>webglVersion</code> property.</p>
-line: 118
-isConstructor: false
-itemtype: method
-alt: a rotating cube with smoother edges
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(255);
-      push();
-      rotateZ(frameCount * 0.02);
-      rotateX(frameCount * 0.02);
-      rotateY(frameCount * 0.02);
-      fill(0, 0, 0);
-      box(50);
-      pop();
-    }
-    </code>
-    </div>
-    <br>
-    Now with the antialias attribute set to true.
-    <br>
-    <div>
-    <code>
-    function setup() {
-      setAttributes('antialias', true);
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(255);
-      push();
-      rotateZ(frameCount * 0.02);
-      rotateX(frameCount * 0.02);
-      rotateY(frameCount * 0.02);
-      fill(0, 0, 0);
-      box(50);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // press the mouse button to disable perPixelLighting
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-      noStroke();
-      fill(255);
-    }
-
-    let lights = [
-      { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
-      { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
-      { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
-      { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
-      { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
-      { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
-    ];
-
-    function draw() {
-      let t = millis() / 1000 + 1000;
-      background(0);
-      directionalLight(color('#222'), 1, 1, 1);
-
-      for (let i = 0; i < lights.length; i++) {
-        let light = lights[i];
-        pointLight(
-          color(light.c),
-          p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
-        );
-      }
-
-      specularMaterial(255);
-      sphere(width * 0.1);
-
-      rotateX(t * 0.77);
-      rotateY(t * 0.83);
-      rotateZ(t * 0.91);
-      torus(width * 0.3, width * 0.07, 24, 10);
-    }
-
-    function mousePressed() {
-      setAttributes('perPixelLighting', false);
-      noStroke();
-      fill(255);
-    }
-    function mouseReleased() {
-      setAttributes('perPixelLighting', true);
-      noStroke();
-      fill(255);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 118
-    params:
-      - name: key
-        description: |
-          <p>Name of attribute</p>
-        type: String
-      - name: value
-        description: |
-          <p>New value of named attribute</p>
-        type: Boolean
-  - line: 262
-    params:
-      - name: obj
-        description: |
-          <p>object with key-value pairs</p>
-        type: Object
-chainable: false
----
-
-
-# setAttributes
diff --git a/src/content/reference/en/p5 copy/setBPM.mdx b/src/content/reference/en/p5 copy/setBPM.mdx
deleted file mode 100644
index d2e94a6c5d..0000000000
--- a/src/content/reference/en/p5 copy/setBPM.mdx	
+++ /dev/null
@@ -1,29 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L9084
-title: setBPM
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Set the global tempo, in beats per minute, for all
-  p5.Parts. This method will impact all active p5.Parts.</p>
-line: 9084
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: BPM
-    description: |
-      <p>Beats Per Minute</p>
-    type: Number
-  - name: rampTime
-    description: |
-      <p>Seconds from now</p>
-    type: Number
-chainable: false
----
-
-
-# setBPM
diff --git a/src/content/reference/en/p5 copy/setCamera.mdx b/src/content/reference/en/p5 copy/setCamera.mdx
deleted file mode 100644
index bd4727d474..0000000000
--- a/src/content/reference/en/p5 copy/setCamera.mdx	
+++ /dev/null
@@ -1,81 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L3897
-title: setCamera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets the current (active) camera of a 3D sketch.</p>
-
-  <p><code>setCamera()</code> allows for switching between multiple cameras
-  created with
-
-  <a href="/reference/p5/createCamera/">createCamera()</a>.</p>
-
-  <p>Note: <code>setCamera()</code> can only be used in WebGL mode.</p>
-line: 3897
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to toggle between cameras.
-
-    let cam1;
-    let cam2;
-    let usingCam1 = true;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the first camera.
-      // Keep its default settings.
-      cam1 = createCamera();
-
-      // Create the second camera.
-      // Place it at the top-left.
-      // Point it at the origin.
-      cam2 = createCamera();
-      cam2.setPosition(400, -400, 800);
-      cam2.lookAt(0, 0, 0);
-
-      // Set the current camera to cam1.
-      setCamera(cam1);
-
-      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the box.
-      box();
-    }
-
-    // Toggle the current camera when the user double-clicks.
-    function doubleClicked() {
-      if (usingCam1 === true) {
-        setCamera(cam2);
-        usingCam1 = false;
-      } else {
-        setCamera(cam1);
-        usingCam1 = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: cam
-    description: |
-      <p>camera that should be made active.</p>
-    type: p5.Camera
-chainable: false
----
-
-
-# setCamera
diff --git a/src/content/reference/en/p5 copy/setMoveThreshold.mdx b/src/content/reference/en/p5 copy/setMoveThreshold.mdx
deleted file mode 100644
index 3b90fb5f4d..0000000000
--- a/src/content/reference/en/p5 copy/setMoveThreshold.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L417
-title: setMoveThreshold
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>
-  function is used to set the movement threshold for
-
-  the <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function. The
-  default threshold is set to 0.5.</p>
-line: 417
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // You will need to move the device incrementally further
-    // the closer the square's color gets to white in order to change the value.
-
-    let value = 0;
-    let threshold = 0.5;
-    function setup() {
-      setMoveThreshold(threshold);
-    }
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device moves`);
-    }
-    function deviceMoved() {
-      value = value + 5;
-      threshold = threshold + 0.1;
-      if (value > 255) {
-        value = 0;
-        threshold = 30;
-      }
-      setMoveThreshold(threshold);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>The threshold value</p>
-    type: Number
-chainable: false
----
-
-
-# setMoveThreshold
diff --git a/src/content/reference/en/p5 copy/setShakeThreshold.mdx b/src/content/reference/en/p5 copy/setShakeThreshold.mdx
deleted file mode 100644
index 30af9eadb0..0000000000
--- a/src/content/reference/en/p5 copy/setShakeThreshold.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L459
-title: setShakeThreshold
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>
-  function is used to set the movement threshold for
-
-  the <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function. The
-  default threshold is set to 30.</p>
-line: 459
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // You will need to shake the device more firmly
-    // the closer the box's fill gets to white in order to change the value.
-
-    let value = 0;
-    let threshold = 30;
-    function setup() {
-      setShakeThreshold(threshold);
-    }
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device is being shaked`);
-    }
-    function deviceMoved() {
-      value = value + 5;
-      threshold = threshold + 5;
-      if (value > 255) {
-        value = 0;
-        threshold = 30;
-      }
-      setShakeThreshold(threshold);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>The threshold value</p>
-    type: Number
-chainable: false
----
-
-
-# setShakeThreshold
diff --git a/src/content/reference/en/p5 copy/setup.mdx b/src/content/reference/en/p5 copy/setup.mdx
deleted file mode 100644
index 6a71ea6a0f..0000000000
--- a/src/content/reference/en/p5 copy/setup.mdx	
+++ /dev/null
@@ -1,111 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L87
-title: setup
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>A function that's called once when the sketch begins running.</p>
-
-  <p>Declaring the function <code>setup()</code> sets a code block to run once
-
-  automatically when the sketch starts running. It's used to perform
-
-  setup tasks such as creating the canvas and initializing variables:</p>
-
-  <pre><code class="language-js">function setup() {
-    // Code to run once at the start of the sketch.
-  }
-
-  </code></pre>
-
-  <p>Code placed in <code>setup()</code> will run once before code placed in
-
-  <a href="/reference/p5/draw/">draw()</a> begins looping. If the
-
-  <a href="/reference/p5/preload/">preload()</a> is declared, then
-  <code>setup()</code> will
-
-  run immediately after <a href="/reference/p5/preload/">preload()</a> finishes
-
-  loading assets.</p>
-
-  <p>Note: <code>setup()</code> doesn’t have to be declared, but it’s common
-  practice to do so.</p>
-line: 87
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A white circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Paint the background once.
-      background(200);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
-      );
-    }
-
-    function draw() {
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe(
-        'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'
-      );
-    }
-
-    function draw() {
-      // Style the circle.
-      noStroke();
-
-      // Draw the circle.
-      circle(mouseX, mouseY, 10);
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# setup
diff --git a/src/content/reference/en/p5 copy/shader.mdx b/src/content/reference/en/p5 copy/shader.mdx
deleted file mode 100644
index c8213d9261..0000000000
--- a/src/content/reference/en/p5 copy/shader.mdx	
+++ /dev/null
@@ -1,244 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L682
-title: shader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the <a href="/reference/p5/p5.Shader">p5.Shader</a> object to apply
-  while drawing.</p>
-
-  <p>Shaders are programs that run on the graphics processing unit (GPU). They
-
-  can process many pixels or vertices at the same time, making them fast for
-
-  many graphics tasks. They’re written in a language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.
-
-  <a href="/reference/p5/p5.Shader">p5.Shader</a> objects can be created using
-  the
-
-  <a href="/reference/p5/createShader/">createShader()</a> and
-
-  <a href="/reference/p5/loadShader/">loadShader()</a> functions.</p>
-
-  <p>The parameter, <code>s</code>, is the <a
-  href="/reference/p5/p5.Shader">p5.Shader</a> object to
-
-  apply. For example, calling <code>shader(myShader)</code> applies
-  <code>myShader</code> to
-
-  process each pixel on the canvas. The shader will be used for:</p>
-
-  <ul>
-
-  <li>Fills when a texture is enabled if it includes a uniform
-  <code>sampler2D</code>.</li>
-
-  <li>Fills when lights are enabled if it includes the attribute
-  <code>aNormal</code>, or if it has any of the following uniforms:
-  <code>uUseLighting</code>, <code>uAmbientLightCount</code>,
-  <code>uDirectionalLightCount</code>, <code>uPointLightCount</code>,
-  <code>uAmbientColor</code>, <code>uDirectionalDiffuseColors</code>,
-  <code>uDirectionalSpecularColors</code>, <code>uPointLightLocation</code>,
-  <code>uPointLightDiffuseColors</code>, <code>uPointLightSpecularColors</code>,
-  <code>uLightingDirection</code>, or <code>uSpecular</code>.</li>
-
-  <li>Fills whenever there are no lights or textures.</li>
-
-  <li>Strokes if it includes the uniform <code>uStrokeWeight</code>.</li>
-
-  </ul>
-
-  <p>The source code from a <a href="/reference/p5/p5.Shader">p5.Shader</a>
-  object's
-
-  fragment and vertex shaders will be compiled the first time it's passed to
-
-  <code>shader()</code>. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compileShader/"
-  target="_blank">MDN</a>
-
-  for more information about compiling shaders.</p>
-
-  <p>Calling <a href="/reference/p5/resetShader/">resetShader()</a> restores a
-  sketch’s
-
-  default shaders.</p>
-
-  <p>Note: Shaders can only be used in WebGL mode.</p>
-line: 682
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-
-    void main() {
-      // Set each pixel's RGBA value to yellow.
-      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let shaderProgram = createShader(vertSrc, fragSrc);
-
-      // Apply the p5.Shader object.
-      shader(shaderProgram);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A yellow square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates between 0 and 2.
-      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let redGreen;
-    let orangeBlue;
-    let showRedGreen = false;
-
-    // Load the shader and create two separate p5.Shader objects.
-    function preload() {
-      redGreen = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
-      orangeBlue = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Initialize the redGreen shader.
-      shader(redGreen);
-
-      // Set the redGreen shader's center and background color.
-      redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
-      redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
-
-      // Initialize the orangeBlue shader.
-      shader(orangeBlue);
-
-      // Set the orangeBlue shader's center and background color.
-      orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
-      orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
-
-      describe(
-        'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'
-      );
-    }
-
-    function draw() {
-      // Update the offset values for each shader.
-      // Move orangeBlue vertically.
-      // Move redGreen horizontally.
-      orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);
-      redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);
-
-      if (showRedGreen === true) {
-        shader(redGreen);
-      } else {
-        shader(orangeBlue);
-      }
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a quad as a drawing surface.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-
-    // Toggle between shaders when the user double-clicks.
-    function doubleClicked() {
-      showRedGreen = !showRedGreen;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: s
-    description: |
-      <p><a href="#/p5.Shader">p5.Shader</a> object
-                           to apply.</p>
-    type: p5.Shader
-chainable: true
----
-
-
-# shader
diff --git a/src/content/reference/en/p5 copy/shearX.mdx b/src/content/reference/en/p5 copy/shearX.mdx
deleted file mode 100644
index 244fea83e2..0000000000
--- a/src/content/reference/en/p5 copy/shearX.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1069
-title: shearX
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Shears the x-axis so that shapes appear skewed.</p>
-
-  <p>By default, the x- and y-axes are perpendicular. The <code>shearX()</code>
-  function
-
-  transforms the coordinate system so that x-coordinates are translated while
-
-  y-coordinates are fixed.</p>
-
-  <p>The first parameter, <code>angle</code>, is the amount to shear. For
-  example, calling
-
-  <code>shearX(1)</code> transforms all x-coordinates using the formula
-
-  <code>x = x + y * tan(angle)</code>. <code>shearX()</code> interprets angle
-  values using the
-
-  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-
-  <code>shearX(1)</code> twice has the same effect as calling
-  <code>shearX(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and
-
-  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
-
-  transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>shearX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't
-
-  cause shapes to shear continuously.</p>
-line: 1069
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the x-axis.
-      shearX(QUARTER_PI);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the x-axis.
-      shearX(45);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle to shear by in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# shearX
diff --git a/src/content/reference/en/p5 copy/shearY.mdx b/src/content/reference/en/p5 copy/shearY.mdx
deleted file mode 100644
index 007a8b4bfa..0000000000
--- a/src/content/reference/en/p5 copy/shearY.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1146
-title: shearY
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Shears the y-axis so that shapes appear skewed.</p>
-
-  <p>By default, the x- and y-axes are perpendicular. The <code>shearY()</code>
-  function
-
-  transforms the coordinate system so that y-coordinates are translated while
-
-  x-coordinates are fixed.</p>
-
-  <p>The first parameter, <code>angle</code>, is the amount to shear. For
-  example, calling
-
-  <code>shearY(1)</code> transforms all y-coordinates using the formula
-
-  <code>y = y + x * tan(angle)</code>. <code>shearY()</code> interprets angle
-  values using the
-
-  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-
-  <code>shearY(1)</code> twice has the same effect as calling
-  <code>shearY(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and
-
-  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
-
-  transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>shearY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't
-
-  cause shapes to shear continuously.</p>
-line: 1146
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the y-axis.
-      shearY(QUARTER_PI);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the y-axis.
-      shearY(45);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle to shear by in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# shearY
diff --git a/src/content/reference/en/p5 copy/shininess.mdx b/src/content/reference/en/p5 copy/shininess.mdx
deleted file mode 100644
index a093e246c8..0000000000
--- a/src/content/reference/en/p5 copy/shininess.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2998
-title: shininess
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the amount of gloss ("shininess") of a
-
-  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
-
-  <p>Shiny materials focus reflected light more than dull materials.
-
-  <code>shininess()</code> affects the way materials reflect light sources
-  including
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>,
-
-  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
-
-  <p>The parameter, <code>shine</code>, is a number that sets the amount of
-  shininess.
-
-  <code>shine</code> must be greater than 1, which is its default value.</p>
-line: 2998
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn on a red ambient light.
-      ambientLight(255, 0, 0);
-
-      // Get the mouse's coordinates.
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Turn on a white point light that follows the mouse.
-      pointLight(255, 255, 255, mx, my, 50);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a specular material with a grayscale value.
-      specularMaterial(255);
-
-      // Draw the left sphere with low shininess.
-      translate(-25, 0, 0);
-      shininess(10);
-      sphere(20);
-
-      // Draw the right sphere with high shininess.
-      translate(50, 0, 0);
-      shininess(100);
-      sphere(20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: shine
-    description: |
-      <p>amount of shine.</p>
-    type: Number
-chainable: true
----
-
-
-# shininess
diff --git a/src/content/reference/en/p5 copy/shorten.mdx b/src/content/reference/en/p5 copy/shorten.mdx
deleted file mode 100644
index a1018f7fb8..0000000000
--- a/src/content/reference/en/p5 copy/shorten.mdx	
+++ /dev/null
@@ -1,44 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L161
-title: shorten
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Decreases an array by one element and returns the shortened array,
-  maps to Array.pop().</p>
-line: 161
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">array.pop()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let myArray = ['A', 'B', 'C'];
-      print(myArray); // ['A', 'B', 'C']
-      let newArray = shorten(myArray);
-      print(myArray); // ['A','B','C']
-      print(newArray); // ['A','B']
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to shorten</p>
-    type: Array
-return:
-  description: shortened Array
-  type: Array
-chainable: false
----
-
-
-# shorten
diff --git a/src/content/reference/en/p5 copy/shuffle.mdx b/src/content/reference/en/p5 copy/shuffle.mdx
deleted file mode 100644
index a4ead252ef..0000000000
--- a/src/content/reference/en/p5 copy/shuffle.mdx	
+++ /dev/null
@@ -1,132 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L185
-title: shuffle
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: >
-  <p>Shuffles the elements of an array.</p>
-
-  <p>The first parameter, <code>array</code>, is the array to be shuffled. For
-  example,
-
-  calling <code>shuffle(myArray)</code> will shuffle the elements of
-  <code>myArray</code>. By
-
-  default, the original array won’t be modified. Instead, a copy will be
-
-  created, shuffled, and returned.</p>
-
-  <p>The second parameter, <code>modify</code>, is optional. If
-  <code>true</code> is passed, as in
-
-  <code>shuffle(myArray, true)</code>, then the array will be shuffled in place
-  without
-
-  making a copy.</p>
-line: 185
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of colors.
-      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
-
-      // Create a shuffled copy of the array.
-      let shuffledColors = shuffle(colors);
-
-      // Draw  a row of circles using the original array.
-      for (let i = 0; i < colors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 12.5;
-
-        // Style the circle.
-        let c = colors[i];
-        fill(c);
-
-        // Draw the circle.
-        circle(x, 33, 10);
-      }
-
-      // Draw  a row of circles using the original array.
-      for (let i = 0; i < shuffledColors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 12.5;
-
-        // Style the circle.
-        let c = shuffledColors[i];
-        fill(c);
-
-        // Draw the circle.
-        circle(x, 67, 10);
-      }
-
-      describe(
-        'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of colors.
-      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
-
-      // Shuffle the array.
-      shuffle(colors, true);
-
-      // Draw  a row of circles using the original array.
-      for (let i = 0; i < colors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 12.5;
-
-        // Style the circle.
-        let c = colors[i];
-        fill(c);
-
-        // Draw the circle.
-        circle(x, 50, 10);
-      }
-
-      describe(
-        'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: array
-    description: |
-      <p>array to shuffle.</p>
-    type: Array
-  - name: bool
-    description: >
-      <p>if <code>true</code>, shuffle the original array in place. Defaults to
-      <code>false</code>.</p>
-    type: Boolean
-    optional: true
-return:
-  description: shuffled array.
-  type: Array
-chainable: false
----
-
-
-# shuffle
diff --git a/src/content/reference/en/p5 copy/sin.mdx b/src/content/reference/en/p5 copy/sin.mdx
deleted file mode 100644
index 7f0cba972d..0000000000
--- a/src/content/reference/en/p5 copy/sin.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L363
-title: sin
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the sine of an angle.</p>
-
-  <p><code>sin()</code> is useful for many geometric tasks in creative coding.
-  The values
-
-  returned oscillate between -1 and 1 as the input angle increases.
-  <code>sin()</code>
-
-  calculates the sine of an angle, using radians by default, or according to
-
-  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-  DEGREES).</p>
-line: 363
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white ball on a string oscillates up and down.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 50;
-      let y = 30 * sin(frameCount * 0.05) + 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form a wave pattern.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 30 * sin(x * 0.1) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form an infinity symbol.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.1) + 50;
-      let y = 10 * sin(frameCount * 0.2) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>the angle, in radians by default, or according to
-
-      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-      DEGREES).</p>
-    type: Number
-return:
-  description: sine of the angle.
-  type: Number
-chainable: false
----
-
-
-# sin
diff --git a/src/content/reference/en/p5 copy/smooth.mdx b/src/content/reference/en/p5 copy/smooth.mdx
deleted file mode 100644
index 2c42bda62c..0000000000
--- a/src/content/reference/en/p5 copy/smooth.mdx	
+++ /dev/null
@@ -1,94 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L303
-title: smooth
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Draws certain features with smooth (antialiased) edges.</p>
-
-  <p><code>smooth()</code> is active by default. In 2D mode,
-
-  <a href="/reference/p5/noSmooth/">noSmooth()</a> is helpful for scaling up
-  images
-
-  without blurring. The functions don't affect shapes or fonts.</p>
-
-  <p>In WebGL mode, <a href="/reference/p5/noSmooth/">noSmooth()</a> causes all
-  shapes to
-
-  be drawn with jagged (aliased) edges. The functions don't affect images or
-
-  fonts.</p>
-line: 303
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let heart;
-
-    // Load a pixelated heart image from an image data string.
-    function preload() {
-      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Antialiased hearts.
-      image(heart, 10, 10);
-      image(heart, 20, 10, 16, 16);
-      image(heart, 40, 10, 32, 32);
-
-      // Aliased hearts.
-      noSmooth();
-      image(heart, 10, 60);
-      image(heart, 20, 60, 16, 16);
-      image(heart, 40, 60, 32, 32);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A white circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Disable smoothing.
-      noSmooth();
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A pixelated white circle on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# smooth
diff --git a/src/content/reference/en/p5 copy/sort.mdx b/src/content/reference/en/p5 copy/sort.mdx
deleted file mode 100644
index c2249d926a..0000000000
--- a/src/content/reference/en/p5 copy/sort.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L300
-title: sort
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Sorts an array of numbers from smallest to largest, or puts an array of
-  words in alphabetical order. The original array is not modified; a
-  re-ordered array is returned. The count parameter states the number of
-  elements to sort. For example, if there are 12 elements in an array and
-  count is set to 5, only the first 5 elements in the array will be sorted.</p>
-line: 300
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">array.sort()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let words = ['banana', 'apple', 'pear', 'lime'];
-      print(words); // ['banana', 'apple', 'pear', 'lime']
-      let count = 4; // length of array
-
-      words = sort(words, count);
-      print(words); // ['apple', 'banana', 'lime', 'pear']
-    }
-    </code></div>
-    <div class = 'norender'><code>
-    function setup() {
-      let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
-      print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
-      let count = 5; // Less than the length of the array
-
-      numbers = sort(numbers, count);
-      print(numbers); // [1,2,5,6,14,9,8,12]
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to sort</p>
-    type: Array
-  - name: count
-    description: |
-      <p>number of elements to sort, starting from 0</p>
-    type: Integer
-    optional: true
-return:
-  description: the sorted list
-  type: Array
-chainable: false
----
-
-
-# sort
diff --git a/src/content/reference/en/p5 copy/soundFormats.mdx b/src/content/reference/en/p5 copy/soundFormats.mdx
deleted file mode 100644
index 6bc28fe726..0000000000
--- a/src/content/reference/en/p5 copy/soundFormats.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L925
-title: soundFormats
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>List the SoundFile formats that you will include. LoadSound
-  will search your directory for these extensions, and will pick
-  a format that is compatable with the client's web browser.
-  <a href="http://media.io/">Here</a> is a free online file
-  converter.</p>
-line: 925
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    function preload() {
-      // set the global sound formats
-      soundFormats('mp3', 'ogg');
-
-      // load either beatbox.mp3, or .ogg, depending on browser
-      mySound = loadSound('/assets/beatbox.mp3');
-    }
-
-    function setup() {
-         let cnv = createCanvas(100, 100);
-         background(220);
-         text('sound loaded! tap to play', 10, 20, width - 20);
-         cnv.mousePressed(function() {
-           mySound.play();
-         });
-       }
-    </code></div>
-class: p5
-params:
-  - name: formats
-    description: |
-      <p>i.e. 'mp3', 'wav', 'ogg'</p>
-    type: String
-    optional: true
-    multiple: true
-chainable: false
----
-
-
-# soundFormats
diff --git a/src/content/reference/en/p5 copy/soundOut.mdx b/src/content/reference/en/p5 copy/soundOut.mdx
deleted file mode 100644
index 2f418a829c..0000000000
--- a/src/content/reference/en/p5 copy/soundOut.mdx	
+++ /dev/null
@@ -1,26 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L782
-title: soundOut
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >
-  <p><code>p5.soundOut</code> is the p5.sound final output bus. It sends output
-  to
-
-  the destination of this window's web audio context. It contains
-
-  Web Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),
-
-  and Gain Nodes for <code>.input</code> and <code>.output</code>.</p>
-line: 782
-isConstructor: false
-itemtype: property
-class: p5
-type: Object
----
-
-
-# soundOut
diff --git a/src/content/reference/en/p5 copy/specularColor.mdx b/src/content/reference/en/p5 copy/specularColor.mdx
deleted file mode 100644
index b23e834ca7..0000000000
--- a/src/content/reference/en/p5 copy/specularColor.mdx	
+++ /dev/null
@@ -1,308 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L205
-title: specularColor
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Sets the specular color for lights.</p>
-
-  <p><code>specularColor()</code> affects lights that bounce off a surface in a
-  preferred
-
-  direction. These lights include
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>, and
-
-  <a href="/reference/p5/spotLight/">spotLight()</a>. The function helps to
-  create
-
-  highlights on <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects that
-  are
-
-  styled with <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.
-  If a
-
-  geometry does not use
-
-  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>, then
-
-  <code>specularColor()</code> will have no effect.</p>
-
-  <p>Note: <code>specularColor()</code> doesn’t affect lights that bounce in all
-
-  directions, including <a href="/reference/p5/ambientLight/">ambientLight()</a>
-  and
-
-  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
-
-  <p>There are three ways to call <code>specularColor()</code> with optional
-  parameters to
-
-  set the specular highlight color.</p>
-
-  <p>The first way to call <code>specularColor()</code> has two optional
-  parameters, <code>gray</code>
-
-  and <code>alpha</code>. Grayscale and alpha values between 0 and 255, as in
-
-  <code>specularColor(50)</code> or <code>specularColor(50, 80)</code>, can be
-  passed to set the
-
-  specular highlight color.</p>
-
-  <p>The second way to call <code>specularColor()</code> has one optional
-  parameter,
-
-  <code>color</code>. A <a href="/reference/p5/p5.Color">p5.Color</a> object, an
-  array of color
-
-  values, or a CSS color string can be passed to set the specular highlight
-
-  color.</p>
-
-  <p>The third way to call <code>specularColor()</code> has four optional
-  parameters, <code>v1</code>,
-
-  <code>v2</code>, <code>v3</code>, and <code>alpha</code>. RGBA, HSBA, or HSLA
-  values, as in
-
-  <code>specularColor(255, 0, 0, 80)</code>, can be passed to set the specular
-  highlight
-
-  color. Color values will be interpreted using the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 205
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // No specular color.
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to add a point light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the sphere.
-      noStroke();
-      specularColor(100);
-      specularMaterial(255, 255, 255);
-
-      // Control the light.
-      if (isLit === true) {
-        // Add a white point light from the top-right.
-        pointLight(255, 255, 255, 30, -20, 40);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the point light when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a specular highlight.
-      // Use a p5.Color object.
-      let c = color('dodgerblue');
-      specularColor(c);
-
-      // Add a white point light from the top-right.
-      pointLight(255, 255, 255, 30, -20, 40);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a white specular material.
-      specularMaterial(255, 255, 255);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a specular highlight.
-      // Use a CSS color string.
-      specularColor('#1E90FF');
-
-      // Add a white point light from the top-right.
-      pointLight(255, 255, 255, 30, -20, 40);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a white specular material.
-      specularMaterial(255, 255, 255);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a specular highlight.
-      // Use RGB values.
-      specularColor(30, 144, 255);
-
-      // Add a white point light from the top-right.
-      pointLight(255, 255, 255, 30, -20, 40);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a white specular material.
-      specularMaterial(255, 255, 255);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 205
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-    chainable: 1
-  - line: 423
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 and 255.</p>
-        type: Number
-    chainable: 1
-  - line: 429
-    params:
-      - name: value
-        description: |
-          <p>color as a CSS string.</p>
-        type: String
-    chainable: 1
-  - line: 435
-    params:
-      - name: values
-        description: |
-          <p>color as an array of RGBA, HSBA, or HSLA
-                                          values.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 442
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# specularColor
diff --git a/src/content/reference/en/p5 copy/specularMaterial.mdx b/src/content/reference/en/p5 copy/specularMaterial.mdx
deleted file mode 100644
index 57e8977cf5..0000000000
--- a/src/content/reference/en/p5 copy/specularMaterial.mdx	
+++ /dev/null
@@ -1,311 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2743
-title: specularMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the specular color of shapes’ surface material.</p>
-
-  <p>The <code>specularMaterial()</code> color sets the components of light
-  color that
-
-  glossy coats on shapes will reflect. For example, calling
-
-  <code>specularMaterial(255, 255, 0)</code> would cause a shape to reflect red
-  and
-
-  green light, but not blue light.</p>
-
-  <p>Unlike <a href="/reference/p5/ambientMaterial/">ambientMaterial()</a>,
-
-  <code>specularMaterial()</code> will reflect the full color of light sources
-  including
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>,
-
-  and <a href="/reference/p5/spotLight/">spotLight()</a>. This is what gives it
-  shapes
-
-  their "shiny" appearance. The material’s shininess can be controlled by the
-
-  <a href="/reference/p5/shininess/">shininess()</a> function.</p>
-
-  <p><code>specularMaterial()</code> can be called three ways with different
-  parameters to
-
-  set the material’s color.</p>
-
-  <p>The first way to call <code>specularMaterial()</code> has one parameter,
-  <code>gray</code>.
-
-  Grayscale values between 0 and 255, as in <code>specularMaterial(50)</code>,
-  can be
-
-  passed to set the material’s color. Higher grayscale values make shapes
-
-  appear brighter.</p>
-
-  <p>The second way to call <code>specularMaterial()</code> has one parameter,
-  <code>color</code>. A
-
-  <a href="/reference/p5/p5.Color">p5.Color> object, an array of color values,
-  or a CSS
-
-  color string, as in <code>specularMaterial('magenta')</code>, can be passed to
-  set the
-
-  material’s color.</a></p>
-
-  <p>The third way to call <code>specularMaterial()</code> has four parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
-  HSBA, or HSLA values can be
-
-  passed to set the material’s colors, as in <code>specularMaterial(255, 0,
-  0)</code> or
-
-  <code>specularMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
-  using
-
-  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 2743
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy coat if the user has double-clicked.
-      if (isGlossy === true) {
-        specularMaterial(255);
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy green coat if the user has double-clicked.
-      if (isGlossy === true) {
-        specularMaterial(0, 255, 0);
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy green coat if the user has double-clicked.
-      if (isGlossy === true) {
-        // Create a p5.Color object.
-        let c = color('green');
-        specularMaterial(c);
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy green coat if the user has double-clicked.
-      if (isGlossy === true) {
-        specularMaterial('#00FF00');
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2743
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 (black) and 255 (white).</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha value in the current current
-                                   <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2966
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in
-                                          the current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value
-                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value
-                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2978
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                     an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-    chainable: 1
-chainable: true
----
-
-
-# specularMaterial
diff --git a/src/content/reference/en/p5 copy/sphere.mdx b/src/content/reference/en/p5 copy/sphere.mdx
deleted file mode 100644
index c2ceca44ad..0000000000
--- a/src/content/reference/en/p5 copy/sphere.mdx	
+++ /dev/null
@@ -1,165 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1227
-title: sphere
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a sphere.</p>
-
-  <p>A sphere is a 3D shape with triangular faces that connect to form a round
-
-  surface. Spheres with few faces look like crystals. Spheres with many faces
-
-  have smooth surfaces and look like balls.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>sphere(20)</code>, it sets the radius of the sphere. By default,
-  <code>radius</code> is 50.</p>
-
-  <p>The second parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>sphere(20, 5)</code>, it sets the number of triangle subdivisions
-  to use
-
-  along the x-axis. All 3D shapes are made by connecting triangles to form
-
-  their surfaces. By default, <code>detailX</code> is 24.</p>
-
-  <p>The third parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>sphere(20, 5, 2)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailY</code> is 16.</p>
-
-  <p>Note: <code>sphere()</code> can only be used in WebGL mode.</p>
-line: 1227
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      sphere();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      // Set its radius to 30.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      // Set its radius to 30.
-      // Set its detailX to 6.
-      sphere(30, 6);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      // Set its radius to 30.
-      // Set its detailX to 24.
-      // Set its detailY to 4.
-      sphere(30, 24, 4);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the sphere. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# sphere
diff --git a/src/content/reference/en/p5 copy/splice.mdx b/src/content/reference/en/p5 copy/splice.mdx
deleted file mode 100644
index 866bc4ddef..0000000000
--- a/src/content/reference/en/p5 copy/splice.mdx	
+++ /dev/null
@@ -1,58 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L346
-title: splice
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Inserts a value or an array of values into an existing array. The first
-  parameter specifies the initial array to be modified, and the second
-  parameter defines the data to be inserted. The third parameter is an index
-  value which specifies the array position from which to insert data.
-  (Remember that array index numbering starts at zero, so the first position
-  is 0, the second position is 1, and so on.)</p>
-line: 346
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">array.splice()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let myArray = [0, 1, 2, 3, 4];
-      let insArray = ['A', 'B', 'C'];
-      print(myArray); // [0, 1, 2, 3, 4]
-      print(insArray); // ['A','B','C']
-
-      splice(myArray, insArray, 3);
-      print(myArray); // [0,1,2,'A','B','C',3,4]
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to splice into</p>
-    type: Array
-  - name: value
-    description: |
-      <p>value to be spliced in</p>
-    type: Any
-  - name: position
-    description: |
-      <p>in the array from which to insert data</p>
-    type: Integer
-return:
-  description: the list
-  type: Array
-chainable: false
----
-
-
-# splice
diff --git a/src/content/reference/en/p5 copy/split.mdx b/src/content/reference/en/p5 copy/split.mdx
deleted file mode 100644
index 60b7944313..0000000000
--- a/src/content/reference/en/p5 copy/split.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L690
-title: split
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Splits a <code>String</code> into pieces and returns an array containing
-  the pieces.</p>
-
-  <p>The first parameter, <code>value</code>, is the string to split.</p>
-
-  <p>The second parameter, <code>delim</code>, is the character(s) that should
-  be used to
-
-  split the string. For example, calling
-
-  <code>split('rock...paper...scissors', '...')</code> would return the array
-
-  <code>['rock', 'paper', 'scissors']</code> because there are three periods
-  <code>...</code>
-
-  between each word.</p>
-line: 690
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock...paper...scissors';
-
-      // Split the string at each ...
-      let words = split(string, '...');
-
-      // Print the array to the console:
-      // ["rock", "paper", "scissors"]
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", and "scissors" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>the String to be split</p>
-    type: String
-  - name: delim
-    description: |
-      <p>the String used to separate the data</p>
-    type: String
-return:
-  description: Array of Strings
-  type: 'String[]'
-chainable: false
----
-
-
-# split
diff --git a/src/content/reference/en/p5 copy/splitTokens.mdx b/src/content/reference/en/p5 copy/splitTokens.mdx
deleted file mode 100644
index 95d6ef4f8e..0000000000
--- a/src/content/reference/en/p5 copy/splitTokens.mdx	
+++ /dev/null
@@ -1,180 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L751
-title: splitTokens
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Splits a <code>String</code> into pieces and returns an array containing
-  the pieces.</p>
-
-  <p><code>splitTokens()</code> is an enhanced version of
-
-  <a href="/reference/p5/split/">split()</a>. It can split a string when any
-  characters
-
-  from a list are detected.</p>
-
-  <p>The first parameter, <code>value</code>, is the string to split.</p>
-
-  <p>The second parameter, <code>delim</code>, is optional. It sets the
-  character(s) that
-
-  should be used to split the string. <code>delim</code> can be a single string,
-  as in
-
-  <code>splitTokens('rock...paper...scissors...shoot', '...')</code>, or an
-  array of
-
-  strings, as in
-
-  <code>splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])</code>. By
-  default,
-
-  if no <code>delim</code> characters are specified, then any whitespace
-  character is
-
-  used to split. Whitespace characters include tab (<code>\t</code>), line feed
-  (<code>\n</code>),
-
-  carriage return (<code>\r</code>), form feed (<code>\f</code>), and space.</p>
-line: 751
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock paper scissors shoot';
-
-      // Split the string at each space.
-      let words = splitTokens(string);
-
-      // Print the array to the console.
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 20;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock...paper...scissors...shoot';
-
-      // Split the string at each ...
-      let words = splitTokens(string, '...');
-
-      // Print the array to the console.
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 20;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock;paper,scissors...shoot';
-
-      // Split the string at each semicolon, comma, or ...
-      let words = splitTokens(string, [';', ',', '...']);
-
-      // Print the array to the console.
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 20;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>string to split.</p>
-    type: String
-  - name: delim
-    description: |
-      <p>character(s) to use for splitting the string.</p>
-    type: String
-    optional: true
-return:
-  description: separated strings.
-  type: 'String[]'
-chainable: false
----
-
-
-# splitTokens
diff --git a/src/content/reference/en/p5 copy/spotLight.mdx b/src/content/reference/en/p5 copy/spotLight.mdx
deleted file mode 100644
index 3d221dc8f4..0000000000
--- a/src/content/reference/en/p5 copy/spotLight.mdx	
+++ /dev/null
@@ -1,398 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1272
-title: spotLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines from a point in one direction.</p>
-
-  <p>Spot lights are like flashlights that shine in one direction creating a
-
-  cone of light. The shape of the cone can be controlled using the angle and
-
-  concentration parameters. A maximum of 5 spot lights can be active at
-  once.</p>
-
-  <p>There are eight ways to call <code>spotLight()</code> with parameters to
-  set the
-
-  light’s color, position, direction. For example,
-
-  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)</code> creates a red <code>(255,
-  0, 0)</code> light
-
-  at the origin <code>(0, 0, 0)</code> that points to the right <code>(1, 0,
-  0)</code>.</p>
-
-  <p>The <code>angle</code> parameter is optional. It sets the radius of the
-  light cone.
-
-  For example, <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)</code>
-  creates a
-
-  red <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
-  points to the right
-
-  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians. By
-  default, <code>angle</code> is
-
-  <code>PI / 3</code> radians.</p>
-
-  <p>The <code>concentration</code> parameter is also optional. It focuses the
-  light
-
-  towards the center of the light cone. For example,
-
-  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)</code> creates a red
-
-  <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
-  points to the right
-
-  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians at
-  concentration of 50. By
-
-  default, <code>concentration</code> is 100.</p>
-line: 1272
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to adjust the spotlight.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Control the spotlight.
-      if (isLit === true) {
-        // Add a red spot light that shines into the screen.
-        // Set its angle to PI / 32 radians.
-        spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the spotlight when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to adjust the spotlight.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Control the spotlight.
-      if (isLit === true) {
-        // Add a red spot light that shines into the screen.
-        // Set its angle to PI / 3 radians (default).
-        // Set its concentration to 1000.
-        let c = color(255, 0, 0);
-        let position = createVector(0, 0, 100);
-        let direction = createVector(0, 0, -1);
-        spotLight(c, position, direction, PI / 3, 1000);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the spotlight when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1272
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: x
-        description: |
-          <p>x-coordinate of the light.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the light.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the light.</p>
-        type: Number
-      - name: rx
-        description: |
-          <p>x-component of light direction between -1 and 1.</p>
-        type: Number
-      - name: ry
-        description: |
-          <p>y-component of light direction between -1 and 1.</p>
-        type: Number
-      - name: rz
-        description: |
-          <p>z-component of light direction between -1 and 1.</p>
-        type: Number
-      - name: angle
-        description: |
-          <p>angle of the light cone. Defaults to <code>PI / 3</code>.</p>
-        type: Number
-        optional: true
-      - name: concentration
-        description: |
-          <p>concentration of the light. Defaults to 100.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1399
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                                                       an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-      - name: position
-        description: >
-          <p>position of the light as a <a href="#/p5.Vector">p5.Vector</a>
-          object.</p>
-        type: p5.Vector
-      - name: direction
-        description: >
-          <p>direction of light as a <a href="#/p5.Vector">p5.Vector</a>
-          object.</p>
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1408
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: position
-        description: ''
-        type: p5.Vector
-      - name: direction
-        description: ''
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1418
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-      - name: direction
-        description: ''
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1428
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: position
-        description: ''
-        type: p5.Vector
-      - name: rx
-        description: ''
-        type: Number
-      - name: ry
-        description: ''
-        type: Number
-      - name: rz
-        description: ''
-        type: Number
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1438
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-      - name: direction
-        description: ''
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1450
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: position
-        description: ''
-        type: p5.Vector
-      - name: rx
-        description: ''
-        type: Number
-      - name: ry
-        description: ''
-        type: Number
-      - name: rz
-        description: ''
-        type: Number
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1462
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-      - name: rx
-        description: ''
-        type: Number
-      - name: ry
-        description: ''
-        type: Number
-      - name: rz
-        description: ''
-        type: Number
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-chainable: true
----
-
-
-# spotLight
diff --git a/src/content/reference/en/p5 copy/sq.mdx b/src/content/reference/en/p5 copy/sq.mdx
deleted file mode 100644
index da0f2c4024..0000000000
--- a/src/content/reference/en/p5 copy/sq.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L928
-title: sq
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the square of a number.</p>
-
-  <p>Squaring a number means multiplying the number by itself. For example,
-
-  <code>sq(3)</code> evaluates 3 × 3 which is 9. <code>sq(-3)</code> evaluates
-  -3 × -3
-
-  which is also 9. Multiplying two negative numbers produces a positive
-
-  number. The value returned by <code>sq()</code> is always positive.</p>
-line: 928
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = sq(3);
-      circle(33, 33, d);
-
-      // Bottom-right.
-      d = sq(6);
-      circle(67, 67, d);
-
-      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that get higher quickly from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 0.01 * sq(x);
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to square.</p>
-    type: Number
-return:
-  description: squared number.
-  type: Number
-chainable: false
----
-
-
-# sq
diff --git a/src/content/reference/en/p5 copy/sqrt.mdx b/src/content/reference/en/p5 copy/sqrt.mdx
deleted file mode 100644
index 5e239f6fe4..0000000000
--- a/src/content/reference/en/p5 copy/sqrt.mdx	
+++ /dev/null
@@ -1,84 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L988
-title: sqrt
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the square root of a number.</p>
-
-  <p>A number's square root can be multiplied by itself to produce the original
-
-  number. For example, <code>sqrt(9)</code> returns 3 because 3 × 3 = 9.
-  <code>sqrt()</code>
-
-  always returns a positive value. <code>sqrt()</code> doesn't work with
-  negative arguments
-
-  such as <code>sqrt(-9)</code>.</p>
-line: 988
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = sqrt(16);
-      circle(33, 33, d);
-
-      // Bottom-right.
-      d = sqrt(1600);
-      circle(67, 67, d);
-
-      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that get higher slowly from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 5 * sqrt(x);
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>non-negative number to square root.</p>
-    type: Number
-return:
-  description: square root of number.
-  type: Number
-chainable: false
----
-
-
-# sqrt
diff --git a/src/content/reference/en/p5 copy/square.mdx b/src/content/reference/en/p5 copy/square.mdx
deleted file mode 100644
index 1e94a0087d..0000000000
--- a/src/content/reference/en/p5 copy/square.mdx	
+++ /dev/null
@@ -1,163 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1229
-title: square
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a square.</p>
-
-  <p>A square is a four-sided shape defined by the <code>x</code>,
-  <code>y</code>, and <code>s</code>
-
-  parameters. <code>x</code> and <code>y</code> set the location of its top-left
-  corner. <code>s</code> sets
-
-  its width and height. Every angle in the square measures 90˚ and all its
-
-  sides are the same length. See <a
-  href="/reference/p5/rectMode/">rectMode()</a> for
-
-  other ways to define squares.</p>
-
-  <p>The version of <code>square()</code> with four parameters creates a rounded
-  square.
-
-  The fourth parameter sets the radius for all four corners.</p>
-
-  <p>The version of <code>square()</code> with seven parameters also creates a
-  rounded
-
-  square. Each of the last four parameters set the radius of a corner. The
-
-  radii start with the top-left corner and move clockwise around the
-
-  square. If any of these parameters are omitted, they are set to the
-
-  value of the last radius that was set.</p>
-line: 1229
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      square(30, 20, 55);
-
-      describe('A white square with a black outline in on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give all corners a radius of 20.
-      square(30, 20, 55, 20);
-
-      describe(
-        'A white square with a black outline and round edges on a gray canvas.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give each corner a unique radius.
-      square(30, 20, 55, 20, 15, 10, 5);
-
-      describe('A white square with a black outline and round edges of different radii.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      square(-20, -30, 55);
-
-      describe('A white square with a black outline in on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square spins around on gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the square.
-      square(-20, -30, 55);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the square.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the square.</p>
-    type: Number
-  - name: s
-    description: |
-      <p>side size of the square.</p>
-    type: Number
-  - name: tl
-    description: |
-      <p>optional radius of top-left corner.</p>
-    type: Number
-    optional: true
-  - name: tr
-    description: |
-      <p>optional radius of top-right corner.</p>
-    type: Number
-    optional: true
-  - name: br
-    description: |
-      <p>optional radius of bottom-right corner.</p>
-    type: Number
-    optional: true
-  - name: bl
-    description: |
-      <p>optional radius of bottom-left corner.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# square
diff --git a/src/content/reference/en/p5 copy/storeItem.mdx b/src/content/reference/en/p5 copy/storeItem.mdx
deleted file mode 100644
index 8552634c5a..0000000000
--- a/src/content/reference/en/p5 copy/storeItem.mdx	
+++ /dev/null
@@ -1,149 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L10
-title: storeItem
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Stores a value in the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs.</p>
-
-  <p><code>storeItem()</code> makes it easy to store values in
-  <code>localStorage</code> and
-
-  <a href="/reference/p5/getItem/">getItem()</a> makes it easy to retrieve
-  them.</p>
-
-  <p>The first parameter, <code>key</code>, is the name of the value to be
-  stored as a
-
-  string.</p>
-
-  <p>The second parameter, <code>value</code>, is the value to be stored. Values
-  can have
-
-  any type.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe('The text "Feist: 1234" written in black on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an object.
-      let p = { x: 50, y: 50 };
-
-      // Store the object.
-      storeItem('position', p);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let p = getItem('position');
-
-      // Draw the circle.
-      circle(p.x, p.y, 30);
-    }
-    </code>
-    </div>
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let c = color('deeppink');
-
-      // Store the object.
-      storeItem('color', c);
-
-      describe('A pink circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let c = getItem('color');
-
-      // Style the circle.
-      fill(c);
-
-      // Draw the circle.
-      circle(50, 50, 30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: key
-    description: |
-      <p>name of the value.</p>
-    type: String
-  - name: value
-    description: |
-      <p>value to be stored.</p>
-    type: String|Number|Boolean|Object|Array
-chainable: false
----
-
-
-# storeItem
diff --git a/src/content/reference/en/p5 copy/str.mdx b/src/content/reference/en/p5 copy/str.mdx
deleted file mode 100644
index c487979761..0000000000
--- a/src/content/reference/en/p5 copy/str.mdx	
+++ /dev/null
@@ -1,135 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L232
-title: str
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Boolean</code> or <code>Number</code> to
-  <code>String</code>.</p>
-
-  <p><code>str()</code> converts values to strings. See the
-
-  <a href="/reference/p5/String/">String</a> reference page for guidance on
-  using
-
-  template literals instead.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a Boolean, as in
-
-  <code>str(false)</code> or <code>str(true)</code>, then the value will be
-  returned as a string,
-
-  as in <code>'false'</code> or <code>'true'</code>. If <code>n</code> is a
-  number, as in <code>str(123)</code>, then its
-
-  value will be returned as a string, as in <code>'123'</code>. If an array is
-  passed,
-
-  as in <code>str([12.34, 56.78])</code>, then an array of strings will be
-  returned.</p>
-line: 232
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a Boolean variable.
-      let original = false;
-
-      // Convert the Boolean to a string.
-      let converted = str(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "false : false" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 123;
-
-      // Convert the number to a string.
-      let converted = str(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "123 = 123" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = [12, 34, 56];
-
-      // Convert the numbers to strings.
-      let strings = str(original);
-
-      // Create an empty string variable.
-      let final = '';
-
-      // Concatenate all the strings.
-      for (let s of strings) {
-        final += s;
-      }
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the concatenated string.
-      text(final, 50, 50);
-
-      describe('The text "123456" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>value to convert.</p>
-    type: String|Boolean|Number
-return:
-  description: converted string.
-  type: String
-chainable: false
----
-
-
-# str
diff --git a/src/content/reference/en/p5 copy/stroke.mdx b/src/content/reference/en/p5 copy/stroke.mdx
deleted file mode 100644
index bf086f9b66..0000000000
--- a/src/content/reference/en/p5 copy/stroke.mdx	
+++ /dev/null
@@ -1,311 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1373
-title: stroke
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Sets the color used to draw points, lines, and the outlines of shapes.</p>
-
-  <p>Calling <code>stroke(255, 165, 0)</code> or <code>stroke('orange')</code>
-  means all shapes drawn
-
-  after calling <code>stroke()</code> will be outlined with the color orange.
-  The way
-
-  these parameters are interpreted may be changed with the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
-
-  <p>The version of <code>stroke()</code> with one parameter interprets the
-  value one of
-
-  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
-  grayscale
-
-  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
-  color
-
-  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
-  provided to
-
-  set the stroke color.</p>
-
-  <p>The version of <code>stroke()</code> with two parameters interprets the
-  first one as a
-
-  grayscale value. The second parameter sets the alpha (transparency) value.</p>
-
-  <p>The version of <code>stroke()</code> with three parameters interprets them
-  as RGB, HSB,
-
-  or HSL colors, depending on the current <code>colorMode()</code>.</p>
-
-  <p>The version of <code>stroke()</code> with four parameters interprets them
-  as RGBA, HSBA,
-
-  or HSLA colors, depending on the current <code>colorMode()</code>. The last
-  parameter
-
-  sets the alpha (transparency) value.</p>
-line: 1373
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A grayscale value.
-      strokeWeight(4);
-      stroke(51);
-      square(20, 20, 60);
-
-      describe('A white square with a dark charcoal gray outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // R, G & B values.
-      stroke(255, 204, 0);
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a yellow outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // H, S & B values.
-      strokeWeight(4);
-      stroke(255, 204, 100);
-      square(20, 20, 60);
-
-      describe('A white square with a royal blue outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A CSS named color.
-      stroke('red');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a red outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Three-digit hex RGB notation.
-      stroke('#fae');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a pink outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Six-digit hex RGB notation.
-      stroke('#222222');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGB notation.
-      stroke('rgb(0, 255, 0)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A whiite square with a bright green outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGBA notation.
-      stroke('rgba(0, 255, 0, 0.25)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a soft green outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGB notation.
-      stroke('rgb(100%, 0%, 10%)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a red outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGBA notation.
-      stroke('rgba(100%, 0%, 100%, 0.5)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a dark fuchsia outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A p5.Color object.
-      stroke(color(0, 0, 255));
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a blue outline.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1373
-    params:
-      - name: v1
-        description: >
-          <p>red value if color mode is RGB or hue value if color mode is
-          HSB.</p>
-        type: Number
-      - name: v2
-        description: >
-          <p>green value if color mode is RGB or saturation value if color mode
-          is HSB.</p>
-        type: Number
-      - name: v3
-        description: >
-          <p>blue value if color mode is RGB or brightness value if color mode
-          is HSB.</p>
-        type: Number
-      - name: alpha
-        description: >
-          <p>alpha value, controls transparency (0 - transparent, 255 -
-          opaque).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1596
-    params:
-      - name: value
-        description: |
-          <p>a color string.</p>
-        type: String
-    chainable: 1
-  - line: 1602
-    params:
-      - name: gray
-        description: |
-          <p>a grayscale value.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1609
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue,
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 1616
-    params:
-      - name: color
-        description: |
-          <p>the stroke color.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# stroke
diff --git a/src/content/reference/en/p5 copy/strokeCap.mdx b/src/content/reference/en/p5 copy/strokeCap.mdx
deleted file mode 100644
index 80965419ab..0000000000
--- a/src/content/reference/en/p5 copy/strokeCap.mdx	
+++ /dev/null
@@ -1,67 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L388
-title: strokeCap
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Sets the style for rendering the ends of lines.</p>
-
-  <p>The caps for line endings are either rounded (<code>ROUND</code>), squared
-
-  (<code>SQUARE</code>), or extended (<code>PROJECT</code>). The default cap is
-  <code>ROUND</code>.</p>
-
-  <p>The argument passed to <code>strokeCap()</code> must be written in ALL CAPS
-  because
-
-  the constants <code>ROUND</code>, <code>SQUARE</code>, and
-  <code>PROJECT</code> are defined this way.
-
-  JavaScript is a case-sensitive language.</p>
-line: 388
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      strokeWeight(12);
-
-      // Top.
-      strokeCap(ROUND);
-      line(20, 30, 80, 30);
-
-      // Middle.
-      strokeCap(SQUARE);
-      line(20, 50, 80, 50);
-
-      // Bottom.
-      strokeCap(PROJECT);
-      line(20, 70, 80, 70);
-
-      describe(
-        'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: cap
-    description: |
-      <p>either ROUND, SQUARE, or PROJECT</p>
-    type: Constant
-chainable: true
----
-
-
-# strokeCap
diff --git a/src/content/reference/en/p5 copy/strokeJoin.mdx b/src/content/reference/en/p5 copy/strokeJoin.mdx
deleted file mode 100644
index 46a8a9206f..0000000000
--- a/src/content/reference/en/p5 copy/strokeJoin.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L442
-title: strokeJoin
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Sets the style of the joints that connect line segments.</p>
-
-  <p>Joints are either mitered (<code>MITER</code>), beveled
-  (<code>BEVEL</code>), or rounded
-
-  (<code>ROUND</code>). The default joint is <code>MITER</code> in 2D mode and
-  <code>ROUND</code> in WebGL
-
-  mode.</p>
-
-  <p>The argument passed to <code>strokeJoin()</code> must be written in ALL
-  CAPS because
-
-  the constants <code>MITER</code>, <code>BEVEL</code>, and <code>ROUND</code>
-  are defined this way.
-
-  JavaScript is a case-sensitive language.</p>
-line: 442
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      noFill();
-      strokeWeight(10);
-      strokeJoin(MITER);
-
-      // Draw the line.
-      beginShape();
-      vertex(35, 20);
-      vertex(65, 50);
-      vertex(35, 80);
-      endShape();
-
-      describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      noFill();
-      strokeWeight(10);
-      strokeJoin(BEVEL);
-
-      // Draw the line.
-      beginShape();
-      vertex(35, 20);
-      vertex(65, 50);
-      vertex(35, 80);
-      endShape();
-
-      describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      noFill();
-      strokeWeight(10);
-      strokeJoin(ROUND);
-
-      // Draw the line.
-      beginShape();
-      vertex(35, 20);
-      vertex(65, 50);
-      vertex(35, 80);
-      endShape();
-
-      describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: join
-    description: |
-      <p>either MITER, BEVEL, or ROUND</p>
-    type: Constant
-chainable: true
----
-
-
-# strokeJoin
diff --git a/src/content/reference/en/p5 copy/strokeWeight.mdx b/src/content/reference/en/p5 copy/strokeWeight.mdx
deleted file mode 100644
index 82ebfc13d5..0000000000
--- a/src/content/reference/en/p5 copy/strokeWeight.mdx	
+++ /dev/null
@@ -1,77 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L541
-title: strokeWeight
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Sets the width of the stroke used for points, lines, and the outlines of
-
-  shapes.</p>
-
-  <p>Note: <code>strokeWeight()</code> is affected by transformations,
-  especially calls to
-
-  <a href="/reference/p5/scale/">scale()</a>.</p>
-line: 541
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      line(20, 20, 80, 20);
-
-      // Middle.
-      strokeWeight(4);
-      line(20, 40, 80, 40);
-
-      // Bottom.
-      strokeWeight(10);
-      line(20, 70, 80, 70);
-
-      describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      line(20, 20, 80, 20);
-
-      // Scale by a factor of 5.
-      scale(5);
-
-      // Bottom. Coordinates are adjusted for scaling.
-      line(4, 8, 16, 8);
-
-      describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: weight
-    description: |
-      <p>the weight of the stroke (in pixels).</p>
-    type: Number
-chainable: true
----
-
-
-# strokeWeight
diff --git a/src/content/reference/en/p5 copy/subset.mdx b/src/content/reference/en/p5 copy/subset.mdx
deleted file mode 100644
index 1cf7cb7f4e..0000000000
--- a/src/content/reference/en/p5 copy/subset.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L381
-title: subset
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Extracts an array of elements from an existing array. The list parameter
-  defines the array from which the elements will be copied, and the start
-  and count parameters specify which elements to extract. If no count is
-  given, elements will be extracted from the start to the end of the array.
-  When specifying the start, remember that the first array element is 0.
-  This function does not change the source array.</p>
-line: 381
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">array.slice()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let myArray = [1, 2, 3, 4, 5];
-      print(myArray); // [1, 2, 3, 4, 5]
-
-      let sub1 = subset(myArray, 0, 3);
-      let sub2 = subset(myArray, 2, 2);
-      print(sub1); // [1,2,3]
-      print(sub2); // [3,4]
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to extract from</p>
-    type: Array
-  - name: start
-    description: |
-      <p>position to begin</p>
-    type: Integer
-  - name: count
-    description: |
-      <p>number of values to extract</p>
-    type: Integer
-    optional: true
-return:
-  description: Array of extracted elements
-  type: Array
-chainable: false
----
-
-
-# subset
diff --git a/src/content/reference/en/p5 copy/tan.mdx b/src/content/reference/en/p5 copy/tan.mdx
deleted file mode 100644
index 376d093f33..0000000000
--- a/src/content/reference/en/p5 copy/tan.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L445
-title: tan
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the tangent of an angle.</p>
-
-  <p><code>tan()</code> 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. <code>tan()</code> calculates the tan of an angle,
-  using radians
-
-  by default, or according to
-
-  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-  DEGREES).</p>
-line: 445
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 5 * tan(x * 0.1) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>the angle, in radians by default, or according to
-
-      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-      DEGREES).</p>
-    type: Number
-return:
-  description: tangent of the angle.
-  type: Number
-chainable: false
----
-
-
-# tan
diff --git a/src/content/reference/en/p5 copy/text.mdx b/src/content/reference/en/p5 copy/text.mdx
deleted file mode 100644
index eea293bfd8..0000000000
--- a/src/content/reference/en/p5 copy/text.mdx	
+++ /dev/null
@@ -1,96 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L182
-title: text
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/loading_displaying.js
-description: >
-  <p>Draws text to the canvas.</p>
-
-  <p>The first parameter, <code>str</code>, is the text to be drawn. The second
-  and third
-
-  parameters, <code>x</code> and <code>y</code>, set the coordinates of the
-  text's bottom-left
-
-  corner. See <a href="/reference/p5/textAlign/">textAlign()</a> for other ways
-  to
-
-  align text.</p>
-
-  <p>The fourth and fifth parameters, <code>maxWidth</code> and
-  <code>maxHeight</code>, are optional.
-
-  They set the dimensions of the invisible rectangle containing the text. By
-
-  default, they set its  maximum width and height. See
-
-  <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to define the
-
-  rectangular text box. Text will wrap to fit within the text box. Text
-
-  outside of the box won't be drawn.</p>
-
-  <p>Text can be styled a few ways. Call the <a
-  href="/reference/p5/fill/">fill()</a>
-
-  function to set the text's fill color. Call
-
-  <a href="/reference/p5/stroke/">stroke()</a> and
-
-  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> to set the text's
-  outline.
-
-  Call <a href="/reference/p5/textSize/">textSize()</a> and
-
-  <a href="/reference/p5/textFont/">textFont()</a> to set the text's size and
-  font,
-
-  respectively.</p>
-
-  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
-
-  <a href="/reference/p5/loadFont/">loadFont()</a>. Calling
-
-  <a href="/reference/p5/stroke/">stroke()</a> has no effect in
-  <code>WEBGL</code> mode.</p>
-line: 182
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  background(200);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in black in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('skyblue');\n  textSize(100);\n  text('\U0001F308', 0, 100);\n\n  describe('A rainbow in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  textSize(32);\n  fill(255);\n  stroke(0);\n  strokeWeight(4);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in white with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('black');\n  textSize(22);\n  fill('yellow');\n  text('rainbows', 6, 20);\n  fill('cornflowerblue');\n  text('rainbows', 6, 45);\n  fill('tomato');\n  text('rainbows', 6, 70);\n  fill('limegreen');\n  text('rainbows', 6, 95);\n\n  describe('The text \"rainbows\" written on several lines, each in a different color.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 10, 10, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  rectMode(CENTER);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 50, 50, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet font;\n\nfunction preload() {\n  font = loadFont('/assets/inconsolata.otf');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(font);\n  textSize(32);\n  textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n  background(0);\n  rotateY(frameCount / 30);\n  text('p5*js', 0, 0);\n\n  describe('The text \"p5*js\" written in white and spinning in 3D.');\n}\n</code>\n</div>"
-class: p5
-params:
-  - name: str
-    description: |
-      <p>text to be displayed.</p>
-    type: String|Object|Array|Number|Boolean
-  - name: x
-    description: |
-      <p>x-coordinate of the text box.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the text box.</p>
-    type: Number
-  - name: maxWidth
-    description: |
-      <p>maximum width of the text box. See
-                                 <a href="#/p5/rectMode">rectMode()</a> for
-                                 other options.</p>
-    type: Number
-    optional: true
-  - name: maxHeight
-    description: |
-      <p>maximum height of the text box. See
-                                 <a href="#/p5/rectMode">rectMode()</a> for
-                                 other options.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# text
diff --git a/src/content/reference/en/p5 copy/textAlign.mdx b/src/content/reference/en/p5 copy/textAlign.mdx
deleted file mode 100644
index 3899f22842..0000000000
--- a/src/content/reference/en/p5 copy/textAlign.mdx	
+++ /dev/null
@@ -1,135 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L11
-title: textAlign
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the way text is aligned when <a href="/reference/p5/text/">text()</a>
-  is called.</p>
-
-  <p>By default, calling <code>text('hi', 10, 20)</code> places the bottom-left
-  corner of
-
-  the text's bounding box at (10, 20).</p>
-
-  <p>The first parameter, <code>horizAlign</code>, changes the way
-
-  <a href="/reference/p5/text/">text()</a> interprets x-coordinates. By default,
-  the
-
-  x-coordinate sets the left edge of the bounding box. <code>textAlign()</code>
-  accepts
-
-  the following values for <code>horizAlign</code>: <code>LEFT</code>,
-  <code>CENTER</code>, or <code>RIGHT</code>.</p>
-
-  <p>The second parameter, <code>vertAlign</code>, is optional. It changes the
-  way
-
-  <a href="/reference/p5/text/">text()</a> interprets y-coordinates. By default,
-  the
-
-  y-coordinate sets the bottom edge of the bounding box.
-  <code>textAlign()</code>
-
-  accepts the following values for <code>vertAlign</code>: <code>TOP</code>,
-  <code>BOTTOM</code>, <code>CENTER</code>,
-
-  or <code>BASELINE</code>.</p>
-line: 11
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a vertical line.
-      strokeWeight(0.5);
-      line(50, 0, 50, 100);
-
-      // Top line.
-      textSize(16);
-      textAlign(RIGHT);
-      text('ABCD', 50, 30);
-
-      // Middle line.
-      textAlign(CENTER);
-      text('EFGH', 50, 50);
-
-      // Bottom line.
-      textAlign(LEFT);
-      text('IJKL', 50, 70);
-
-      describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      strokeWeight(0.5);
-
-      // First line.
-      line(0, 12, width, 12);
-      textAlign(CENTER, TOP);
-      text('TOP', 50, 12);
-
-      // Second line.
-      line(0, 37, width, 37);
-      textAlign(CENTER, CENTER);
-      text('CENTER', 50, 37);
-
-      // Third line.
-      line(0, 62, width, 62);
-      textAlign(CENTER, BASELINE);
-      text('BASELINE', 50, 62);
-
-      // Fourth line.
-      line(0, 97, width, 97);
-      textAlign(CENTER, BOTTOM);
-      text('BOTTOM', 50, 97);
-
-      describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 11
-    params:
-      - name: horizAlign
-        description: |
-          <p>horizontal alignment, either LEFT,
-                                     CENTER, or RIGHT.</p>
-        type: Constant
-      - name: vertAlign
-        description: |
-          <p>vertical alignment, either TOP,
-                                     BOTTOM, CENTER, or BASELINE.</p>
-        type: Constant
-        optional: true
-    chainable: 1
-  - line: 98
-    params: []
-    return:
-      description: ''
-      type: Object
-chainable: true
----
-
-
-# textAlign
diff --git a/src/content/reference/en/p5 copy/textAscent.mdx b/src/content/reference/en/p5 copy/textAscent.mdx
deleted file mode 100644
index b81a657de6..0000000000
--- a/src/content/reference/en/p5 copy/textAscent.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L337
-title: textAscent
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: |
-  <p>Calculates the ascent of the current font at its current size.</p>
-  <p>The ascent represents the distance, in pixels, of the tallest character
-  above the baseline.</p>
-line: 337
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let font;
-
-    function preload()  {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup()  {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textFont(font);
-
-      // Different for each font.
-      let fontScale = 0.8;
-
-      let baseY = 75;
-      strokeWeight(0.5);
-
-      // Draw small text.
-      textSize(24);
-      text('dp', 0, baseY);
-
-      // Draw baseline and ascent.
-      let a = textAscent() * fontScale;
-      line(0, baseY, 23, baseY);
-      line(23, baseY - a, 23, baseY);
-
-      // Draw large text.
-      textSize(48);
-      text('dp', 45, baseY);
-
-      // Draw baseline and ascent.
-      a = textAscent() * fontScale;
-      line(45, baseY, 91, baseY);
-      line(91, baseY - a, 91, baseY);
-
-      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the "d".');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: ascent measured in units of pixels.
-  type: Number
-chainable: false
----
-
-
-# textAscent
diff --git a/src/content/reference/en/p5 copy/textDescent.mdx b/src/content/reference/en/p5 copy/textDescent.mdx
deleted file mode 100644
index 15837acff3..0000000000
--- a/src/content/reference/en/p5 copy/textDescent.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L396
-title: textDescent
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: |
-  <p>Calculates the descent of the current font at its current size.</p>
-  <p>The descent represents the distance, in pixels, of the character with the
-  longest descender below the baseline.</p>
-line: 396
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let font;
-
-    function preload()  {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup()  {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the font.
-      textFont(font);
-
-      // Different for each font.
-      let fontScale = 0.9;
-
-      let baseY = 75;
-      strokeWeight(0.5);
-
-      // Draw small text.
-      textSize(24);
-      text('dp', 0, baseY);
-
-      // Draw baseline and descent.
-      let d = textDescent() * fontScale;
-      line(0, baseY, 23, baseY);
-      line(23, baseY, 23, baseY + d);
-
-      // Draw large text.
-      textSize(48);
-      text('dp', 45, baseY);
-
-      // Draw baseline and descent.
-      d = textDescent() * fontScale;
-      line(45, baseY, 91, baseY);
-      line(91, baseY, 91, baseY + d);
-
-      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the "p".');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: descent measured in units of pixels.
-  type: Number
-chainable: false
----
-
-
-# textDescent
diff --git a/src/content/reference/en/p5 copy/textFont.mdx b/src/content/reference/en/p5 copy/textFont.mdx
deleted file mode 100644
index e5e9fa8da1..0000000000
--- a/src/content/reference/en/p5 copy/textFont.mdx	
+++ /dev/null
@@ -1,127 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L335
-title: textFont
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/loading_displaying.js
-description: >
-  <p>Sets the font used by the <a href="/reference/p5/text/">text()</a>
-  function.</p>
-
-  <p>The first parameter, <code>font</code>, sets the font.
-  <code>textFont()</code> recognizes either
-
-  a <a href="/reference/p5/p5.Font">p5.Font</a> object or a string with the name
-  of a
-
-  system font. For example, <code>'Courier New'</code>.</p>
-
-  <p>The second parameter, <code>size</code>, is optional. It sets the font size
-  in pixels.
-
-  This has the same effect as calling <a
-  href="/reference/p5/textSize/">textSize()</a>.</p>
-
-  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
-
-  <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
-line: 335
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-      textFont('Courier New');
-      textSize(24);
-      text('hi', 35, 55);
-
-      describe('The text "hi" written in a black, monospace font on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background('black');
-      fill('palegreen');
-      textFont('Courier New', 10);
-      text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
-      text('>', 5, 70);
-
-      describe('A text prompt from a game is written in a green, monospace font on a black background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-      textFont('Verdana');
-      let currentFont = textFont();
-      text(currentFont, 25, 50);
-
-      describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let fontRegular;
-    let fontItalic;
-    let fontBold;
-
-    function preload() {
-      fontRegular = loadFont('/assets/Regular.otf');
-      fontItalic = loadFont('/assets/Italic.ttf');
-      fontBold = loadFont('/assets/Bold.ttf');
-    }
-
-    function setup() {
-      background(200);
-      textFont(fontRegular);
-      text('I am Normal', 10, 30);
-      textFont(fontItalic);
-      text('I am Italic', 10, 50);
-      textFont(fontBold);
-      text('I am Bold', 10, 70);
-
-      describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current font or p5 Object.
-  type: Object
-overloads:
-  - line: 335
-    params: []
-    return:
-      description: current font or p5 Object.
-      type: Object
-  - line: 418
-    params:
-      - name: font
-        description: |
-          <p>font as a <a href="#/p5.Font">p5.Font</a> object or a string.</p>
-        type: Object|String
-      - name: size
-        description: |
-          <p>font size in pixels.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: false
----
-
-
-# textFont
diff --git a/src/content/reference/en/p5 copy/textLeading.mdx b/src/content/reference/en/p5 copy/textLeading.mdx
deleted file mode 100644
index 3b5a22d9a2..0000000000
--- a/src/content/reference/en/p5 copy/textLeading.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L107
-title: textLeading
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the spacing between lines of text when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>Note: Spacing is measured in pixels.</p>
-
-  <p>Calling <code>textLeading()</code> without an argument returns the current
-  spacing.</p>
-line: 107
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // "\n" starts a new line of text.
-      let lines = 'one\ntwo';
-
-      // Left.
-      text(lines, 10, 25);
-
-      // Right.
-      textLeading(30);
-      text(lines, 70, 25);
-
-      describe('The words "one" and "two" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 107
-    params:
-      - name: leading
-        description: |
-          <p>spacing between lines of text in units of pixels.</p>
-        type: Number
-    chainable: 1
-  - line: 142
-    params: []
-    return:
-      description: ''
-      type: Number
-chainable: true
----
-
-
-# textLeading
diff --git a/src/content/reference/en/p5 copy/textOutput.mdx b/src/content/reference/en/p5 copy/textOutput.mdx
deleted file mode 100644
index 62ea4cb4b5..0000000000
--- a/src/content/reference/en/p5 copy/textOutput.mdx	
+++ /dev/null
@@ -1,186 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L10
-title: textOutput
-module: Environment
-submodule: Environment
-file: src/accessibility/outputs.js
-description: >
-  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
-
-  <p><code>textOutput()</code> adds a general description, list of shapes, and
-
-  table of shapes to the web page. The general description includes the
-
-  canvas size, canvas color, and number of shapes. For example,
-
-  <code>Your output is a, 100 by 100 pixels, gray canvas containing the
-  following 2 shapes:</code>.</p>
-
-  <p>A list of shapes follows the general description. The list describes the
-
-  color, location, and area of each shape. For example,
-
-  <code>a red circle at middle covering 3% of the canvas</code>. Each shape can
-  be
-
-  selected to get more details.</p>
-
-  <p><code>textOutput()</code> uses its table of shapes as a list. The table
-  describes the
-
-  shape, color, location, coordinates and area. For example,
-
-  <code>red circle location = middle area = 3%</code>. This is different from
-
-  <a href="/reference/p5/gridOutput/">gridOutput()</a>, which uses its table as
-  a grid.</p>
-
-  <p>The <code>display</code> parameter is optional. It determines how the
-  description is
-
-  displayed. If <code>LABEL</code> is passed, as in
-  <code>textOutput(LABEL)</code>, the description
-
-  will be visible in a div element next to the canvas. Using <code>LABEL</code>
-  creates
-
-  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
-
-  development. If <code>FALLBACK</code> is passed, as in
-  <code>textOutput(FALLBACK)</code>, the
-
-  description will only be visible to screen readers. This is the default
-
-  mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-
-  <p><code>textOutput()</code> generates descriptions in English only. Text
-  drawn with
-
-  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
-  mode
-
-  and 3D shapes are not supported.</p>
-
-  <p>Use <a href="/reference/p5/describe/">describe()</a> and
-
-  <a href="/reference/p5/describeElement/">describeElement()</a> for more
-  control
-
-  over canvas descriptions.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Add the text description.
-      textOutput();
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Add the text description and
-      // display it for debugging.
-      textOutput(LABEL);
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the text description.
-      textOutput();
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the text description and
-      // display it for debugging.
-      textOutput(LABEL);
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: display
-    description: |
-      <p>either FALLBACK or LABEL.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# textOutput
diff --git a/src/content/reference/en/p5 copy/textSize.mdx b/src/content/reference/en/p5 copy/textSize.mdx
deleted file mode 100644
index df77510315..0000000000
--- a/src/content/reference/en/p5 copy/textSize.mdx	
+++ /dev/null
@@ -1,65 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L151
-title: textSize
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the font size when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>Note: Font size is measured in pixels.</p>
-
-  <p>Calling <code>textSize()</code> without an argument returns the current
-  size.</p>
-line: 151
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      textSize(12);
-      text('Font Size 12', 10, 30);
-
-      // Middle.
-      textSize(14);
-      text('Font Size 14', 10, 60);
-
-      // Bottom.
-      textSize(16);
-      text('Font Size 16', 10, 90);
-
-      describe('The text "Font Size 12" drawn small, "Font Size 14" drawn medium, and "Font Size 16" drawn large.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 151
-    params:
-      - name: size
-        description: |
-          <p>size of the letters in units of pixels.</p>
-        type: Number
-    chainable: 1
-  - line: 188
-    params: []
-    return:
-      description: ''
-      type: Number
-chainable: true
----
-
-
-# textSize
diff --git a/src/content/reference/en/p5 copy/textStyle.mdx b/src/content/reference/en/p5 copy/textStyle.mdx
deleted file mode 100644
index 572ca0454c..0000000000
--- a/src/content/reference/en/p5 copy/textStyle.mdx	
+++ /dev/null
@@ -1,79 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L197
-title: textStyle
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the style for system fonts when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>The parameter, <code>style</code>, can be either <code>NORMAL</code>,
-  <code>ITALIC</code>, <code>BOLD</code>, or
-
-  <code>BOLDITALIC</code>.</p>
-
-  <p><code>textStyle()</code> may be overridden by CSS styling. This function
-  doesn't
-
-  affect fonts loaded with <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
-line: 197
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(12);
-      textAlign(CENTER);
-
-      // First row.
-      textStyle(NORMAL);
-      text('Normal', 50, 15);
-
-      // Second row.
-      textStyle(ITALIC);
-      text('Italic', 50, 40);
-
-      // Third row.
-      textStyle(BOLD);
-      text('Bold', 50, 65);
-
-      // Fourth row.
-      textStyle(BOLDITALIC);
-      text('Bold Italic', 50, 90);
-
-      describe('The words "Normal" displayed normally, "Italic" in italic, "Bold" in bold, and "Bold Italic" in bold italics.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 197
-    params:
-      - name: style
-        description: |
-          <p>styling for text, either NORMAL,
-                                     ITALIC, BOLD or BOLDITALIC.</p>
-        type: Constant
-    chainable: 1
-  - line: 244
-    params: []
-    return:
-      description: ''
-      type: String
-chainable: true
----
-
-
-# textStyle
diff --git a/src/content/reference/en/p5 copy/textWidth.mdx b/src/content/reference/en/p5 copy/textWidth.mdx
deleted file mode 100644
index 00721b0fee..0000000000
--- a/src/content/reference/en/p5 copy/textWidth.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L253
-title: textWidth
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: |
-  <p>Calculates the maximum width of a string of text drawn when
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-line: 253
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(28);
-      strokeWeight(0.5);
-
-      // Calculate the text width.
-      let s = 'yoyo';
-      let w = textWidth(s);
-
-      // Display the text.
-      text(s, 22, 55);
-
-      // Underline the text.
-      line(22, 55, 22 + w, 55);
-
-      describe('The word "yoyo" underlined.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(28);
-      strokeWeight(0.5);
-
-      // Calculate the text width.
-      // "\n" starts a new line.
-      let s = 'yo\nyo';
-      let w = textWidth(s);
-
-      // Display the text.
-      text(s, 22, 55);
-
-      // Underline the text.
-      line(22, 55, 22 + w, 55);
-
-      describe('The word "yo" written twice, one copy beneath the other. The words are divided by a horizontal line.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: str
-    description: |
-      <p>string of text to measure.</p>
-    type: String
-return:
-  description: width measured in units of pixels.
-  type: Number
-chainable: false
----
-
-
-# textWidth
diff --git a/src/content/reference/en/p5 copy/textWrap.mdx b/src/content/reference/en/p5 copy/textWrap.mdx
deleted file mode 100644
index 0ba2b556a7..0000000000
--- a/src/content/reference/en/p5 copy/textWrap.mdx	
+++ /dev/null
@@ -1,111 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L462
-title: textWrap
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the style for wrapping text when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>The parameter, <code>style</code>, can be one of the following values:</p>
-
-  <p><code>WORD</code> starts new lines of text at spaces. If a string of text
-  doesn't
-
-  have spaces, it may overflow the text box and the canvas. This is the
-
-  default style.</p>
-
-  <p><code>CHAR</code> starts new lines as needed to stay within the text
-  box.</p>
-
-  <p><code>textWrap()</code> only works when the maximum width is set for a text
-  box. For
-
-  example, calling <code>text('Have a wonderful day', 0, 10, 100)</code> sets
-  the
-
-  maximum width to 100 pixels.</p>
-
-  <p>Calling <code>textWrap()</code> without an argument returns the current
-  style.</p>
-line: 462
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(20);
-      textWrap(WORD);
-
-      // Display the text.
-      text('Have a wonderful day', 0, 10, 100);
-
-      describe('The text "Have a wonderful day" written across three lines.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(20);
-      textWrap(CHAR);
-
-      // Display the text.
-      text('Have a wonderful day', 0, 10, 100);
-
-      describe('The text "Have a wonderful day" written across two lines.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(20);
-      textWrap(CHAR);
-
-      // Display the text.
-      text('祝你有美好的一天', 0, 10, 100);
-
-      describe('The text "祝你有美好的一天" written across two lines.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: style
-    description: |
-      <p>text wrapping style, either WORD or CHAR.</p>
-    type: Constant
-return:
-  description: style
-  type: String
-chainable: false
----
-
-
-# textWrap
diff --git a/src/content/reference/en/p5 copy/texture.mdx b/src/content/reference/en/p5 copy/texture.mdx
deleted file mode 100644
index 7258f53ace..0000000000
--- a/src/content/reference/en/p5 copy/texture.mdx	
+++ /dev/null
@@ -1,207 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1716
-title: texture
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the texture that will be used on shapes.</p>
-
-  <p>A texture is like a skin that wraps around a shape. <code>texture()</code>
-  works with
-
-  built-in shapes, such as <a href="/reference/p5/square/">square()</a> and
-
-  <a href="/reference/p5/sphere/">sphere()</a>, and custom shapes created with
-
-  functions such as <a href="/reference/p5/buildGeometry/">buildGeometry()</a>.
-  To
-
-  texture a geometry created with <a
-  href="/reference/p5/beginShape/">beginShape()</a>,
-
-  uv coordinates must be passed to each
-
-  <a href="/reference/p5/vertex/">vertex()</a> call.</p>
-
-  <p>The parameter, <code>tex</code>, is the texture to apply.
-  <code>texture()</code> can use a range
-
-  of sources including images, videos, and offscreen renderers such as
-
-  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> and
-
-  <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects.</p>
-
-  <p>To texture a geometry created with <a
-  href="/reference/p5/beginShape/">beginShape()</a>,
-
-  you will need to specify uv coordinates in <a
-  href="/reference/p5/vertex/">vertex()</a>.</p>
-
-  <p>Note: <code>texture()</code> can only be used in WebGL mode.</p>
-line: 1716
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A spinning cube with an image of a ceiling on each face.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the x-, y-, and z-axes.
-      rotateZ(frameCount * 0.01);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Draw the box.
-      box(50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Graphics object.
-      pg = createGraphics(100, 100);
-
-      // Draw a circle to the p5.Graphics object.
-      pg.background(200);
-      pg.circle(50, 50, 30);
-
-      describe('A spinning cube with circle at the center of each face.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the x-, y-, and z-axes.
-      rotateZ(frameCount * 0.01);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Apply the p5.Graphics object as a texture.
-      texture(pg);
-
-      // Draw the box.
-      box(50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let vid;
-
-    // Load a video and create a p5.MediaElement object.
-    function preload() {
-      vid = createVideo('/assets/fingers.mov');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Hide the video.
-      vid.hide();
-
-      // Set the video to loop.
-      vid.loop();
-
-      describe('A rectangle with video as texture');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Apply the video as a texture.
-      texture(vid);
-
-      // Draw the rectangle.
-      rect(-40, -40, 80, 80);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let vid;
-
-    // Load a video and create a p5.MediaElement object.
-    function preload() {
-      vid = createVideo('/assets/fingers.mov');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Hide the video.
-      vid.hide();
-
-      // Set the video to loop.
-      vid.loop();
-
-      describe('A rectangle with video as texture');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Apply the video as a texture.
-      texture(vid);
-
-      // Draw a custom shape using uv coordinates.
-      beginShape();
-      vertex(-40, -40, 0, 0);
-      vertex(40, -40, 1, 0);
-      vertex(40, 40, 1, 1);
-      vertex(-40, 40, 0, 1);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: tex
-    description: |
-      <p>media to use as the texture.</p>
-    type: >-
-      p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
-chainable: true
----
-
-
-# texture
diff --git a/src/content/reference/en/p5 copy/textureMode.mdx b/src/content/reference/en/p5 copy/textureMode.mdx
deleted file mode 100644
index 397d1856b9..0000000000
--- a/src/content/reference/en/p5 copy/textureMode.mdx	
+++ /dev/null
@@ -1,254 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1903
-title: textureMode
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Changes the coordinate system used for textures when they’re applied to
-
-  custom shapes.</p>
-
-  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
-  shape needs a
-
-  way to map the points on its surface to the pixels in an image. Built-in
-
-  shapes such as <a href="/reference/p5/rect/">rect()</a> and
-
-  <a href="/reference/p5/box/">box()</a> already have these texture mappings
-  based on
-
-  their vertices. Custom shapes created with
-
-  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
-  passed as
-
-  uv coordinates.</p>
-
-  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
-  arguments,
-
-  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
-  <code>(x, y, z)</code>
-
-  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
-  the
-
-  corners of a rectangular image are mapped to the corners of a rectangle by
-  default:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  rect(0, 0, 30, 50);
-
-  </code></pre>
-
-  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
-
-  the same result could be achieved as follows:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-
-  // Top-left.
-
-  // u: 0, v: 0
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 300, v: 0
-
-  vertex(30, 0, 0, 300, 0);
-
-
-  // Bottom-right.
-
-  // u: 300, v: 500
-
-  vertex(30, 50, 0, 300, 500);
-
-
-  // Bottom-left.
-
-  // u: 0, v: 500
-
-  vertex(0, 50, 0, 0, 500);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p><code>textureMode()</code> changes the coordinate system for uv
-  coordinates.</p>
-
-  <p>The parameter, <code>mode</code>, accepts two possible constants. If
-  <code>NORMAL</code> is
-
-  passed, as in <code>textureMode(NORMAL)</code>, then the texture’s uv
-  coordinates can
-
-  be provided in the range 0 to 1 instead of the image’s dimensions. This can
-
-  be helpful for using the same code for multiple images of different sizes.
-
-  For example, the code snippet above could be rewritten as follows:</p>
-
-  <pre><code class="language-js">// Set the texture mode to use normalized
-  coordinates.
-
-  textureMode(NORMAL);
-
-
-  // Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-
-  // Top-left.
-
-  // u: 0, v: 0
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 1, v: 0
-
-  vertex(30, 0, 0, 1, 0);
-
-
-  // Bottom-right.
-
-  // u: 1, v: 1
-
-  vertex(30, 50, 0, 1, 1);
-
-
-  // Bottom-left.
-
-  // u: 0, v: 1
-
-  vertex(0, 50, 0, 0, 1);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p>By default, <code>mode</code> is <code>IMAGE</code>, which scales uv
-  coordinates to the
-
-  dimensions of the image. Calling <code>textureMode(IMAGE)</code> applies the
-  default.</p>
-
-  <p>Note: <code>textureMode()</code> can only be used in WebGL mode.</p>
-line: 1903
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('An image of a ceiling against a black background.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Draw the custom shape.
-      // Use the image's width and height as uv coordinates.
-      beginShape();
-      vertex(-30, -30, 0, 0);
-      vertex(30, -30, img.width, 0);
-      vertex(30, 30, img.width, img.height);
-      vertex(-30, 30, 0, img.height);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('An image of a ceiling against a black background.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Draw the custom shape.
-      // Use normalized uv coordinates.
-      beginShape();
-      vertex(-30, -30, 0, 0);
-      vertex(30, -30, 1, 0);
-      vertex(30, 30, 1, 1);
-      vertex(-30, 30, 0, 1);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either IMAGE or NORMAL.</p>
-    type: Constant
-chainable: false
----
-
-
-# textureMode
diff --git a/src/content/reference/en/p5 copy/textureWrap.mdx b/src/content/reference/en/p5 copy/textureWrap.mdx
deleted file mode 100644
index 6734a5325b..0000000000
--- a/src/content/reference/en/p5 copy/textureWrap.mdx	
+++ /dev/null
@@ -1,370 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2082
-title: textureWrap
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Changes the way textures behave when a shape’s uv coordinates go beyond the
-
-  texture.</p>
-
-  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
-  shape needs a
-
-  way to map the points on its surface to the pixels in an image. Built-in
-
-  shapes such as <a href="/reference/p5/rect/">rect()</a> and
-
-  <a href="/reference/p5/box/">box()</a> already have these texture mappings
-  based on
-
-  their vertices. Custom shapes created with
-
-  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
-  passed as
-
-  uv coordinates.</p>
-
-  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
-  arguments,
-
-  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
-  <code>(x, y, z)</code>
-
-  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
-  the
-
-  corners of a rectangular image are mapped to the corners of a rectangle by
-  default:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  rect(0, 0, 30, 50);
-
-  </code></pre>
-
-  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
-
-  the same result could be achieved as follows:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-
-  // Top-left.
-
-  // u: 0, v: 0
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 300, v: 0
-
-  vertex(30, 0, 0, 300, 0);
-
-
-  // Bottom-right.
-
-  // u: 300, v: 500
-
-  vertex(30, 50, 0, 300, 500);
-
-
-  // Bottom-left.
-
-  // u: 0, v: 500
-
-  vertex(0, 50, 0, 0, 500);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p><code>textureWrap()</code> controls how textures behave when their uv's go
-  beyond the
-
-  texture. Doing so can produce interesting visual effects such as tiling.
-
-  For example, the custom shape above could have u-coordinates are greater
-
-  than the image’s width:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 600
-
-  vertex(30, 0, 0, 600, 0);
-
-
-  // Bottom-right.
-
-  // u: 600
-
-  vertex(30, 50, 0, 600, 500);
-
-
-  vertex(0, 50, 0, 0, 500);
-
-  endShape();
-
-  </code></pre>
-
-  <p>The u-coordinates of 600 are greater than the texture image’s width of 300.
-
-  This creates interesting possibilities.</p>
-
-  <p>The first parameter, <code>wrapX</code>, accepts three possible constants.
-  If <code>CLAMP</code>
-
-  is passed, as in <code>textureWrap(CLAMP)</code>, the pixels at the edge of
-  the
-
-  texture will extend to the shape’s edges. If <code>REPEAT</code> is passed, as
-  in
-
-  <code>textureWrap(REPEAT)</code>, the texture will tile repeatedly until
-  reaching the
-
-  shape’s edges. If <code>MIRROR</code> is passed, as in
-  <code>textureWrap(MIRROR)</code>, the
-
-  texture will tile repeatedly until reaching the shape’s edges, flipping
-
-  its orientation between tiles. By default, textures <code>CLAMP</code>.</p>
-
-  <p>The second parameter, <code>wrapY</code>, is optional. It accepts the same
-  three
-
-  constants, <code>CLAMP</code>, <code>REPEAT</code>, and <code>MIRROR</code>.
-  If one of these constants is
-
-  passed, as in <code>textureWRAP(MIRROR, REPEAT)</code>, then the texture will
-  <code>MIRROR</code>
-
-  horizontally and <code>REPEAT</code> vertically. By default,
-  <code>wrapY</code> will be set to
-
-  the same value as <code>wrapX</code>.</p>
-
-  <p>Note: <code>textureWrap()</code> can only be used in WebGL mode.</p>
-line: 2082
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      // Note: CLAMP is the default mode.
-      textureWrap(CLAMP);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Four identical images of a landscape arranged in a grid.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      textureWrap(REPEAT);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      textureWrap(MIRROR);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      textureWrap(REPEAT, MIRROR);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: wrapX
-    description: |
-      <p>either CLAMP, REPEAT, or MIRROR</p>
-    type: Constant
-  - name: wrapY
-    description: |
-      <p>either CLAMP, REPEAT, or MIRROR</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# textureWrap
diff --git a/src/content/reference/en/p5 copy/tint.mdx b/src/content/reference/en/p5 copy/tint.mdx
deleted file mode 100644
index e99dee4431..0000000000
--- a/src/content/reference/en/p5 copy/tint.mdx	
+++ /dev/null
@@ -1,201 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1192
-title: tint
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Tints images using a color.</p>
-
-  <p>The version of <code>tint()</code> with one parameter interprets it one of
-  four ways.
-
-  If the parameter is a number, it's interpreted as a grayscale value. If the
-
-  parameter is a string, it's interpreted as a CSS color string. An array of
-
-  <code>[R, G, B, A]</code> values or a <a
-  href="/reference/p5/p5.Color">p5.Color</a> object can
-
-  also be used to set the tint color.</p>
-
-  <p>The version of <code>tint()</code> with two parameters uses the first one
-  as a
-
-  grayscale value and the second as an alpha value. For example, calling
-
-  <code>tint(255, 128)</code> will make an image 50% transparent.</p>
-
-  <p>The version of <code>tint()</code> with three parameters interprets them as
-  RGB or
-
-  HSB values, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The optional fourth
-  parameter
-
-  sets the alpha value. For example, <code>tint(255, 0, 0, 100)</code> will give
-  images
-
-  a red tint and make them transparent.</p>
-line: 1192
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left image.
-      image(img, 0, 0);
-
-      // Right image.
-      // Tint with a CSS color string.
-      tint('red');
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left image.
-      image(img, 0, 0);
-
-      // Right image.
-      // Tint with RGB values.
-      tint(255, 0, 0);
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left.
-      image(img, 0, 0);
-
-      // Right.
-      // Tint with RGBA values.
-      tint(255, 0, 0, 100);
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left.
-      image(img, 0, 0);
-
-      // Right.
-      // Tint with grayscale and alpha values.
-      tint(255, 180);
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1192
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue or brightness.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-  - line: 1318
-    params:
-      - name: value
-        description: |
-          <p>CSS color string.</p>
-        type: String
-  - line: 1323
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-  - line: 1329
-    params:
-      - name: values
-        description: |
-          <p>array containing the red, green, blue &
-                                          alpha components of the color.</p>
-        type: 'Number[]'
-  - line: 1335
-    params:
-      - name: color
-        description: |
-          <p>the tint color</p>
-        type: p5.Color
-chainable: false
----
-
-
-# tint
diff --git a/src/content/reference/en/p5 copy/torus.mdx b/src/content/reference/en/p5 copy/torus.mdx
deleted file mode 100644
index f0e2740d59..0000000000
--- a/src/content/reference/en/p5 copy/torus.mdx	
+++ /dev/null
@@ -1,200 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L2183
-title: torus
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a torus.</p>
-
-  <p>A torus is a 3D shape with triangular faces that connect to form a ring.
-
-  Toruses with few faces look flattened. Toruses with many faces have smooth
-
-  surfaces.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>torus(30)</code>, it sets the radius of the ring. By default,
-  <code>radius</code> is 50.</p>
-
-  <p>The second parameter, <code>tubeRadius</code>, is also optional. If a
-  <code>Number</code> is
-
-  passed, as in <code>torus(30, 15)</code>, it sets the radius of the tube. By
-  default,
-
-  <code>tubeRadius</code> is 10.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>torus(30, 15, 5)</code>, it sets the number of edges used to draw
-  the hole
-
-  of the torus. Using more edges makes the hole look more like a circle. By
-
-  default, <code>detailX</code> is 24.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>torus(30, 15, 5, 7)</code>, it sets the number of triangle
-  subdivisions to
-
-  use while filling in the torus’ height. By default, <code>detailY</code> is
-  16.</p>
-
-  <p>Note: <code>torus()</code> can only be used in WebGL mode.</p>
-line: 2183
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      torus();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30.
-      torus(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30 and tubeRadius to 15.
-      torus(30, 15);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30 and tubeRadius to 15.
-      // Set its detailX to 5.
-      torus(30, 15, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30 and tubeRadius to 15.
-      // Set its detailX to 5.
-      // Set its detailY to 3.
-      torus(30, 15, 5, 3);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the torus. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: tubeRadius
-    description: |
-      <p>radius of the tube. Defaults to 10.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of edges that form the hole. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# torus
diff --git a/src/content/reference/en/p5 copy/touchEnded.mdx b/src/content/reference/en/p5 copy/touchEnded.mdx
deleted file mode 100644
index aebb308dc1..0000000000
--- a/src/content/reference/en/p5 copy/touchEnded.mdx	
+++ /dev/null
@@ -1,196 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L468
-title: touchEnded
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>A function that's called once each time a screen touch ends.</p>
-
-  <p>Declaring the function <code>touchEnded()</code> sets a code block to run
-
-  automatically when the user stops touching a touchscreen device:</p>
-
-  <pre><code class="language-js">function touchEnded() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
-  the most
-
-  recent touch points when <code>touchEnded()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function touchEnded() {
-    // Paint over the background.
-    background(200);
-
-    // Mark each remaining touch point when the user stops
-    // a touch.
-    for (let touch of touches) {
-      circle(touch.x, touch.y, 40);
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, event, is optional. <code>touchEnded()</code> will be passed
-  a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
-  target="_blank">TouchEvent</a>
-
-  object with properties that describe the touch event:</p>
-
-  <pre><code class="language-js">function touchEnded(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a> will
-
-  run when the user’s touch ends if <code>touchEnded()</code> isn’t declared. If
-
-  <code>touchEnded()</code> is declared, then <code>touchEnded()</code> will run
-  when a user’s
-
-  touch ends and <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
-  won’t.</p>
-
-  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
-
-  <code>touchEnded()</code>, and <a
-  href="/reference/p5/touchMoved/">touchMoved()</a> are all
-
-  related. <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon
-  as the
-
-  user touches a touchscreen device. <code>touchEnded()</code> runs as soon as
-  the user
-
-  ends a touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs
-  repeatedly as
-
-  the user moves any touch points.</p>
-line: 468
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle colors when a touch ends.
-    function touchEnded() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let bgColor = 50;
-    let fillColor = 255;
-    let borderWidth = 0.5;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
-      );
-    }
-
-    function draw() {
-      background(bgColor);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      fill(0);
-      noStroke();
-
-      // Display the number of touch points.
-      text(touches.length, 50, 20);
-
-      // Style the touch points.
-      fill(fillColor);
-      stroke(0);
-      strokeWeight(borderWidth);
-
-      // Display the touch points as circles.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-
-    // Set the background color to a random grayscale value.
-    function touchStarted() {
-      bgColor = random(80, 255);
-    }
-
-    // Set the fill color to a random grayscale value.
-    function touchEnded() {
-      fillColor = random(0, 255);
-    }
-
-    // Set the stroke weight.
-    function touchMoved() {
-      // Increment the border width.
-      borderWidth += 0.1;
-
-      // Reset the border width once it's too thick.
-      if (borderWidth > 20) {
-        borderWidth = 0.5;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>TouchEvent</code> argument.</p>
-    type: TouchEvent
-    optional: true
-chainable: false
----
-
-
-# touchEnded
diff --git a/src/content/reference/en/p5 copy/touchMoved.mdx b/src/content/reference/en/p5 copy/touchMoved.mdx
deleted file mode 100644
index 80c23b81f8..0000000000
--- a/src/content/reference/en/p5 copy/touchMoved.mdx	
+++ /dev/null
@@ -1,198 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L295
-title: touchMoved
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>A function that's called when the user touches the screen and moves.</p>
-
-  <p>Declaring the function <code>touchMoved()</code> sets a code block to run
-
-  automatically when the user touches a touchscreen device and moves:</p>
-
-  <pre><code class="language-js">function touchMoved() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
-  the most
-
-  recent touch points when <code>touchMoved()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function touchMoved() {
-    // Paint over the background.
-    background(200);
-
-    // Mark each touch point while the user moves.
-    for (let touch of touches) {
-      circle(touch.x, touch.y, 40);
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, event, is optional. <code>touchMoved()</code> will be passed
-  a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
-  target="_blank">TouchEvent</a>
-
-  object with properties that describe the touch event:</p>
-
-  <pre><code class="language-js">function touchMoved(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <a
-  href="/reference/p5/mouseDragged/">mouseDragged()</a> will
-
-  run when the user’s touch points move if <code>touchMoved()</code> isn’t
-  declared. If
-
-  <code>touchMoved()</code> is declared, then <code>touchMoved()</code> will run
-  when a user’s
-
-  touch points move and <a href="/reference/p5/mouseDragged/">mouseDragged()</a>
-  won’t.</p>
-
-  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a>, and
-
-  <code>touchMoved()</code> are all related.
-
-  <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon as the
-  user
-
-  touches a touchscreen device. <a
-  href="/reference/p5/touchEnded/">touchEnded()</a>
-
-  runs as soon as the user ends a touch. <code>touchMoved()</code> runs
-  repeatedly as
-
-  the user moves any touch points.</p>
-line: 295
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function touchMoved() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let bgColor = 50;
-    let fillColor = 255;
-    let borderWidth = 0.5;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
-      );
-    }
-
-    function draw() {
-      background(bgColor);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      fill(0);
-      noStroke();
-
-      // Display the number of touch points.
-      text(touches.length, 50, 20);
-
-      // Style the touch points.
-      fill(fillColor);
-      stroke(0);
-      strokeWeight(borderWidth);
-
-      // Display the touch points as circles.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-
-    // Set the background color to a random grayscale value.
-    function touchStarted() {
-      bgColor = random(80, 255);
-    }
-
-    // Set the fill color to a random grayscale value.
-    function touchEnded() {
-      fillColor = random(0, 255);
-    }
-
-    // Set the stroke weight.
-    function touchMoved() {
-      // Increment the border width.
-      borderWidth += 0.1;
-
-      // Reset the border width once it's too thick.
-      if (borderWidth > 20) {
-        borderWidth = 0.5;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional TouchEvent argument.</p>
-    type: TouchEvent
-    optional: true
-chainable: false
----
-
-
-# touchMoved
diff --git a/src/content/reference/en/p5 copy/touchStarted.mdx b/src/content/reference/en/p5 copy/touchStarted.mdx
deleted file mode 100644
index fc33b1f1c5..0000000000
--- a/src/content/reference/en/p5 copy/touchStarted.mdx	
+++ /dev/null
@@ -1,197 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L125
-title: touchStarted
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>A function that's called once each time the user touches the screen.</p>
-
-  <p>Declaring a function called <code>touchStarted()</code> sets a code block
-  to run
-
-  automatically each time the user begins touching a touchscreen device:</p>
-
-  <pre><code class="language-js">function touchStarted() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
-  the most
-
-  recent touch points when <code>touchStarted()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function touchStarted() {
-    // Paint over the background.
-    background(200);
-
-    // Mark each touch point once with a circle.
-    for (let touch of touches) {
-      circle(touch.x, touch.y, 40);
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, event, is optional. <code>touchStarted()</code> will be
-  passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
-  target="_blank">TouchEvent</a>
-
-  object with properties that describe the touch event:</p>
-
-  <pre><code class="language-js">function touchStarted(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <a
-  href="/reference/p5/mousePressed/">mousePressed()</a> will
-
-  run when a user’s touch starts if <code>touchStarted()</code> isn’t declared.
-  If
-
-  <code>touchStarted()</code> is declared, then <code>touchStarted()</code> will
-  run when a user’s
-
-  touch starts and <a href="/reference/p5/mousePressed/">mousePressed()</a>
-  won’t.</p>
-
-  <p>Note: <code>touchStarted()</code>, <a
-  href="/reference/p5/touchEnded/">touchEnded()</a>, and
-
-  <a href="/reference/p5/touchMoved/">touchMoved()</a> are all related.
-
-  <code>touchStarted()</code> runs as soon as the user touches a touchscreen
-  device.
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> runs as soon as the user
-  ends a
-
-  touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs repeatedly as
-  the
-
-  user moves any touch points.</p>
-line: 125
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle colors with each touch.
-    function touchStarted() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let bgColor = 50;
-    let fillColor = 255;
-    let borderWidth = 0.5;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
-      );
-    }
-
-    function draw() {
-      background(bgColor);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      fill(0);
-      noStroke();
-
-      // Display the number of touch points.
-      text(touches.length, 50, 20);
-
-      // Style the touch points.
-      fill(fillColor);
-      stroke(0);
-      strokeWeight(borderWidth);
-
-      // Display the touch points as circles.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-
-    // Set the background color to a random grayscale value.
-    function touchStarted() {
-      bgColor = random(80, 255);
-    }
-
-    // Set the fill color to a random grayscale value.
-    function touchEnded() {
-      fillColor = random(0, 255);
-    }
-
-    // Set the stroke weight.
-    function touchMoved() {
-      // Increment the border width.
-      borderWidth += 0.1;
-
-      // Reset the border width once it's too thick.
-      if (borderWidth > 20) {
-        borderWidth = 0.5;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>TouchEvent</code> argument.</p>
-    type: TouchEvent
-    optional: true
-chainable: false
----
-
-
-# touchStarted
diff --git a/src/content/reference/en/p5 copy/touches.mdx b/src/content/reference/en/p5 copy/touches.mdx
deleted file mode 100644
index 7ad03e1610..0000000000
--- a/src/content/reference/en/p5 copy/touches.mdx	
+++ /dev/null
@@ -1,102 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L10
-title: touches
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>An <code>Array</code> of all the current touch points on a touchscreen
-  device.</p>
-
-  <p>The <code>touches</code> array is empty by default. When the user touches
-  their
-
-  screen, a new touch point is tracked and added to the array. Touch points
-
-  are <code>Objects</code> with the following properties:</p>
-
-  <pre><code class="language-js">// Iterate over the touches array.
-
-  for (let touch of touches) {
-    // x-coordinate relative to the top-left
-    // corner of the canvas.
-    console.log(touch.x);
-
-    // y-coordinate relative to the top-left
-    // corner of the canvas.
-    console.log(touch.y);
-
-    // x-coordinate relative to the top-left
-    // corner of the browser.
-    console.log(touch.winX);
-
-    // y-coordinate relative to the top-left
-    // corner of the browser.
-    console.log(touch.winY);
-
-    // ID number
-    console.log(touch.id);
-  }
-
-  </code></pre>
-line: 10
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. White circles appear where the user touches the square.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a circle at each touch point.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. Labels appear where the user touches the square, displaying the coordinates.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a label above each touch point.
-      for (let touch of touches) {
-        text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: 'Object[]'
----
-
-
-# touches
diff --git a/src/content/reference/en/p5 copy/translate.mdx b/src/content/reference/en/p5 copy/translate.mdx
deleted file mode 100644
index dd725eb199..0000000000
--- a/src/content/reference/en/p5 copy/translate.mdx	
+++ /dev/null
@@ -1,241 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1223
-title: translate
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Translates the coordinate system.</p>
-
-  <p>By default, the origin <code>(0, 0)</code> is at the sketch's top-left
-  corner in 2D
-
-  mode and center in WebGL mode. The <code>translate()</code> function shifts
-  the origin
-
-  to a different position. Everything drawn after <code>translate()</code> is
-  called
-
-  will appear to be shifted. There are two ways to call <code>translate()</code>
-  with
-
-  parameters that set the origin's position.</p>
-
-  <p>The first way to call <code>translate()</code> uses numbers to set the
-  amount of
-
-  translation. The first two parameters, <code>x</code> and <code>y</code>, set
-  the amount to
-
-  translate along the positive x- and y-axes. For example, calling
-
-  <code>translate(20, 30)</code> translates the origin 20 pixels along the
-  x-axis and 30
-
-  pixels along the y-axis. The third parameter, <code>z</code>, is optional. It
-  sets the
-
-  amount to translate along the positive z-axis. For example, calling
-
-  <code>translate(20, 30, 40)</code> translates the origin 20 pixels along the
-  x-axis,
-
-  30 pixels along the y-axis, and 40 pixels along the z-axis.</p>
-
-  <p>The second way to call <code>translate()</code> uses a
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object to set the amount of
-
-  translation. For example, calling <code>translate(myVector)</code> uses the
-  x-, y-,
-
-  and z-components of <code>myVector</code> to set the amount to translate along
-  the x-,
-
-  y-, and z-axes. Doing so is the same as calling
-
-  <code>translate(myVector.x, myVector.y, myVector.z)</code>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-
-  <code>translate(10, 0)</code> twice has the same effect as calling
-
-  <code>translate(20, 0)</code> once. The <a
-  href="/reference/p5/push/">push()</a> and
-
-  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
-
-  transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>translate(10, 0)</code> inside the <a
-  href="/reference/p5/draw/">draw()</a> function won't
-
-  cause shapes to move continuously.</p>
-line: 1223
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw the red circle.
-      fill('red');
-      circle(0, 0, 40);
-
-      // Translate the origin to the right.
-      translate(25, 0);
-
-      // Draw the blue circle.
-      fill('blue');
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle moves slowly from left to right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the x-coordinate.
-      let x = frameCount * 0.2;
-
-      // Translate the origin.
-      translate(x, 50);
-
-      // Draw a circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a p5.Vector object.
-      let v = createVector(50, 50);
-
-      // Translate the origin by the vector.
-      translate(v);
-
-      // Draw a circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn on the lights.
-      lights();
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw the red sphere.
-      fill('red');
-      sphere(10);
-
-      // Translate the origin to the right.
-      translate(30, 0, 0);
-
-      // Draw the blue sphere.
-      fill('blue');
-      sphere(10);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1223
-    params:
-      - name: x
-        description: |
-          <p>amount to translate along the positive x-axis.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>amount to translate along the positive y-axis.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>amount to translate along the positive z-axis.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1394
-    params:
-      - name: vector
-        description: |
-          <p>vector by which to translate.</p>
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# translate
diff --git a/src/content/reference/en/p5 copy/triangle.mdx b/src/content/reference/en/p5 copy/triangle.mdx
deleted file mode 100644
index 08f1afb223..0000000000
--- a/src/content/reference/en/p5 copy/triangle.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1385
-title: triangle
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a triangle.</p>
-
-  <p>A triangle is a three-sided shape defined by three points. The
-
-  first two parameters specify the triangle's first point <code>(x1, y1)</code>.
-  The
-
-  middle two parameters specify its second point <code>(x2, y2)</code>. And the
-  last two
-
-  parameters specify its third point <code>(x3, y3)</code>.</p>
-line: 1385
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      triangle(30, 75, 58, 20, 86, 75);
-
-      describe('A white triangle with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      triangle(-20, 25, 8, -30, 36, 25);
-
-      describe('A white triangle with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white triangle spins around on a gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the triangle.
-      triangle(-20, 25, 8, -30, 36, 25);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x1
-    description: |
-      <p>x-coordinate of the first point.</p>
-    type: Number
-  - name: y1
-    description: |
-      <p>y-coordinate of the first point.</p>
-    type: Number
-  - name: x2
-    description: |
-      <p>x-coordinate of the second point.</p>
-    type: Number
-  - name: y2
-    description: |
-      <p>y-coordinate of the second point.</p>
-    type: Number
-  - name: x3
-    description: |
-      <p>x-coordinate of the third point.</p>
-    type: Number
-  - name: y3
-    description: |
-      <p>y-coordinate of the third point.</p>
-    type: Number
-chainable: true
----
-
-
-# triangle
diff --git a/src/content/reference/en/p5 copy/trim.mdx b/src/content/reference/en/p5 copy/trim.mdx
deleted file mode 100644
index a782306725..0000000000
--- a/src/content/reference/en/p5 copy/trim.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L916
-title: trim
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Removes whitespace from the start and end of a <code>String</code> without
-  changing the middle.</p>
-
-  <p><code>trim()</code> trims
-
-  <a href="https://developer.mozilla.org/en-US/docs/Glossary/whitespace/"
-  target="_blank">whitespace characters</a>
-
-  such as spaces, carriage returns, tabs, Unicode "nbsp" character.</p>
-
-  <p>The parameter, <code>str</code>, is the string to trim. If a single string
-  is passed,
-
-  as in <code>trim('   pad   ')</code>, a single string is returned. If an array
-  of
-
-  strings is passed, as in <code>trim(['    pad   ', '\n space \n'])</code>, an
-  array of
-
-  strings is returned.</p>
-line: 916
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = '   p5*js   ';
-
-      // Trim the whitespace.
-      let trimmed = trim(string);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the text.
-      text(`Hello, ${trimmed}!`, 50, 50);
-
-      describe('The text "Hello, p5*js!" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let strings = ['   wide  ', '\n  open  ', '\n spaces  '];
-
-      // Trim the whitespace.
-      let trimmed = trim(strings);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(10);
-
-      // Display the text.
-      text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);
-
-      describe('The text "wide open spaces" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: trimmed string.
-  type: String
-overloads:
-  - line: 916
-    params:
-      - name: str
-        description: |
-          <p>string to trim.</p>
-        type: String
-    return:
-      description: trimmed string.
-      type: String
-  - line: 984
-    params:
-      - name: strs
-        description: |
-          <p>strings to trim.</p>
-        type: 'String[]'
-    return:
-      description: trimmed strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# trim
diff --git a/src/content/reference/en/p5 copy/turnAxis.mdx b/src/content/reference/en/p5 copy/turnAxis.mdx
deleted file mode 100644
index e8dc93e115..0000000000
--- a/src/content/reference/en/p5 copy/turnAxis.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L378
-title: turnAxis
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>When a device is rotated, the axis that triggers the <a
-  href="/reference/p5/deviceTurned/">deviceTurned()</a>
-
-  method is stored in the turnAxis variable. The turnAxis variable is only
-  defined within
-
-  the scope of deviceTurned().</p>
-line: 378
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Run this example on a mobile device
-    // Rotate the device by 90 degrees in the
-    // X-axis to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device turns`);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when x-axis turns`);
-    }
-    function deviceTurned() {
-      if (turnAxis === 'X') {
-        if (value === 0) {
-          value = 255;
-        } else if (value === 255) {
-          value = 0;
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# turnAxis
diff --git a/src/content/reference/en/p5 copy/types/Array.mdx b/src/content/reference/en/p5 copy/types/Array.mdx
deleted file mode 100644
index 17fe1c2ed3..0000000000
--- a/src/content/reference/en/p5 copy/types/Array.mdx	
+++ /dev/null
@@ -1,269 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1140
-title: Array
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A list that keeps several pieces of data in order.</p>
-
-  <p>Arrays are helpful for storing related data. They can contain data of any
-
-  type. For example, an array could contain a list of someone's favorite
-
-  colors as strings. Arrays are created as follows:</p>
-
-  <pre><code class="language-js">let myArray = ['deeppink', 'darkorchid',
-  'magenta'];
-
-  </code></pre>
-
-  <p>Each piece of data in an array is called an element. Each element has an
-
-  address, or index, within its array. The variable <code>myArray</code> refers
-  to an
-
-  array with three <a href="/reference/p5/String/">String</a> elements,
-  <code>'deeppink'</code>,
-
-  <code>'darkorchid'</code>, and <code>'magenta'</code>. Arrays are
-  zero-indexed, which means
-
-  that <code>'deeppink'</code> is at index 0, <code>'darkorchid'</code> is at
-  index 1, and
-
-  '<code>magenta'</code> is at index 2. Array elements can be accessed using
-  their
-
-  indices as follows:</p>
-
-  <pre><code class="language-js">let zeroth = myArray[0]; // 'deeppink'
-
-  let first = myArray[1]; // 'darkorchid'
-
-  let second = myArray[2]; // 'magenta'
-
-  </code></pre>
-
-  <p>Elements can be added to the end of an array by calling the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push/"
-  target="_blank">push()</a>
-
-  method as follows:</p>
-
-  <pre><code class="language-js">myArray.push('lavender');
-
-
-  let third = myArray[3]; // 'lavender'
-
-  </code></pre>
-
-  <p>See <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays/"
-  target="_blank">MDN</a>
-
-  for more information about arrays.</p>
-line: 1140
-isConstructor: false
-itemtype: property
-example:
-  - >-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an array
-
-    // with three numeric elements.
-
-    let xCoordinates = [25, 50, 75];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Three white circles drawn in a horizontal line on a gray background.'
-      );
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access the element at index 0, which is 25.
-      circle(xCoordinates[0], 50, 20);
-
-      // Access the element at index 1, which is 50.
-      circle(xCoordinates[1], 50, 20);
-
-      // Access the element at index 2, which is 75.
-      circle(xCoordinates[2], 50, 20);
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an array with three
-    numeric elements.
-
-    let xCoordinates = [20, 40, 60];
-
-
-    // Add another element to the end of the array.
-
-    xCoordinates.push(80);
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access the element at index 0, which is 20.
-      circle(xCoordinates[0], 50, 20);
-
-      // Access the element at index 1, which is 40.
-      circle(xCoordinates[1], 50, 20);
-
-      // Access the element at index 2, which is 60.
-      circle(xCoordinates[2], 50, 20);
-
-      // Access the element at index 3, which is 80.
-      circle(xCoordinates[3], 50, 20);
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an empty array.
-
-    let xCoordinates = [];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Add elements to the array using a loop.
-      for (let x = 20; x < 100; x += 20) {
-        xCoordinates.push(x);
-      }
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access the element at index i and use it to draw a circle.
-      for (let i = 0; i < xCoordinates.length; i += 1) {
-        circle(xCoordinates[i], 50, 20);
-      }
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an empty array.
-
-    let xCoordinates = [];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Add elements to the array using a loop.
-      for (let x = 20; x < 100; x += 20) {
-        xCoordinates.push(x);
-      }
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access each element of the array and use it to draw a circle.
-      for (let x of xCoordinates) {
-        circle(x, 50, 20);
-      }
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an empty array.
-
-    let xCoordinates = [];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Add elements to the array using a loop.
-      for (let x = 20; x < 100; x += 20) {
-        xCoordinates.push(x);
-      }
-
-      describe(
-        'Four white circles in a horizontal line on a gray background. The circles move randomly.'
-      );
-    }
-
-
-    function draw() {
-      background(200);
-
-      for (let i = 0; i < xCoordinates.length; i += 1) {
-        // Update the element at index i.
-        xCoordinates[i] += random(-1, 1);
-
-        // Use the element at index i to draw a circle.
-        circle(xCoordinates[i], 50, 20);
-      }
-    }
-
-    </code>
-
-    </div>
-class: p5
----
-
-
-# Array
diff --git a/src/content/reference/en/p5 copy/types/Boolean.mdx b/src/content/reference/en/p5 copy/types/Boolean.mdx
deleted file mode 100644
index 01d02c8de2..0000000000
--- a/src/content/reference/en/p5 copy/types/Boolean.mdx	
+++ /dev/null
@@ -1,273 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L502
-title: Boolean
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A value that's either <code>true</code> or <code>false</code>.</p>
-
-  <p><code>Boolean</code> values help to make decisions in code. They appear any
-  time a
-
-  logical condition is checked. For example, the condition
-
-  "Is a mouse button being pressed?" must be either <code>true</code> or
-
-  <code>false</code>:</p>
-
-  <pre><code class="language-js">// If the user presses the mouse, draw a circle
-  at
-
-  // the mouse's location.
-
-  if (mouseIsPressed === true) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>The <code>if</code> statement checks whether
-
-  <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> is
-  <code>true</code> and draws a
-
-  circle if it is. <code>Boolean</code> expressions such as <code>mouseIsPressed
-  === true</code>
-
-  evaluate to one of the two possible <code>Boolean</code> values:
-  <code>true</code> or <code>false</code>.</p>
-
-  <p>The <code>===</code> operator (EQUAL) checks whether two values are equal.
-  If they
-
-  are, the expression evaluates to <code>true</code>. Otherwise, it evaluates to
-
-  <code>false</code>.</p>
-
-  <p>Note: There's also a <code>==</code> operator with two <code>=</code>
-  instead of three. Don't use
-
-  it.</p>
-
-  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
-  variable is
-
-  always <code>true</code> or <code>false</code>, so the code snippet above
-  could also be written
-
-  as follows:</p>
-
-  <pre><code class="language-js">if (mouseIsPressed) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>The <code>!==</code> operator (NOT EQUAL) checks whether two values are not
-  equal, as
-
-  in the following example:</p>
-
-  <pre><code class="language-js">if (2 + 2 !== 4) {
-    text('War is peace.', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>Starting from the left, the arithmetic expression <code>2 + 2</code>
-  produces the
-
-  value <code>4</code>. The <code>Boolean</code> expression <code>4 !== 4</code>
-  evaluates to <code>false</code> because
-
-  <code>4</code> is equal to itself. As a result, the <code>if</code>
-  statement's body is skipped.</p>
-
-  <p>Note: There's also a <code>!=</code> operator with one <code>=</code>
-  instead of two. Don't use
-
-  it.</p>
-
-  <p>The <code>Boolean</code> operator <code>&&</code> (AND) checks whether two
-  expressions are both
-
-  <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
-    text('You pressed the "p" key!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
-  message will
-
-  display.</p>
-
-  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
-  least one of two
-
-  expressions is <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
-  true) {
-    text('You did something!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user presses a key, or presses a mouse button, or both, then a
-
-  message will display.</p>
-
-  <p>The following truth table summarizes a few common scenarios with
-  <code>&&</code> and
-
-  <code>||</code>:</p>
-
-  <pre><code class="language-js">true && true  // true
-
-  true && false // false
-
-  false && false // false
-
-  true || true  // true
-
-  true || false // true
-
-  false || false // false
-
-  </code></pre>
-
-  <p>The relational operators <code>></code>, <code><< code="">,
-  <code>>=</code>, and <code><=< code=""> also produce <code>Boolean</code>
-
-  values:</=<></code></<></code></p>
-
-  <pre><code class="language-js">2 > 1 // true
-
-  2 < 1 // false
-
-  2 >= 2 // true
-
-  2 <= 2="" true="" <="" code=""/></code></pre>
-
-  <p>See <a href="/reference/p5/if/">if</a> for more information about
-  <code>if</code> statements and
-
-  <a href="/reference/p5/Number/">Number</a> for more information about
-  <code>Number</code>s.</p>
-line: 502
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the user presses the mouse, draw a circle at that location.
-      if (mouseIsPressed) {
-        circle(mouseX, mouseY, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the user presses the mouse, draw a circle at that location.
-      if (mouseIsPressed === true) {
-        circle(mouseX, mouseY, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square that turns pink when the user presses the mouse or a key.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the user presses the mouse, change the background color.
-      if (mouseIsPressed === true || keyIsPressed === true) {
-        background('deeppink');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the canvas to begin detecting key presses.
-
-    // Create a Boolean variable.
-    let isPlaying = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'The message "Begin?\nY or N" written in green on a black background. The message "Good luck!" appears when they press the "y" key.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-      fill(0, 255, 0);
-
-      // Display a different message when the user begins playing.
-      if (isPlaying === false) {
-        text('Begin?', 50, 40);
-        text('Y or N', 50, 60);
-      } else {
-        text('Good luck!', 50, 50);
-      }
-    }
-
-    // Start playing when the user presses the 'y' key.
-    function keyPressed() {
-      if (key === 'y') {
-        isPlaying = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# Boolean
diff --git a/src/content/reference/en/p5 copy/types/Number.mdx b/src/content/reference/en/p5 copy/types/Number.mdx
deleted file mode 100644
index 3dfa850720..0000000000
--- a/src/content/reference/en/p5 copy/types/Number.mdx	
+++ /dev/null
@@ -1,201 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L853
-title: Number
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A number that can be positive, negative, or zero.</p>
-
-  <p>The <code>Number</code> data type is useful for describing values such as
-  position,
-
-  size, and color. A number can be an integer such as 20 or a decimal number
-
-  such as 12.34. For example, a circle's position and size can be described
-
-  by three numbers:</p>
-
-  <pre><code class="language-js">circle(50, 50, 20);
-
-  </code></pre>
-
-  <pre><code class="language-js">circle(50, 50, 12.34);
-
-  </code></pre>
-
-  <p>Numbers support basic arithmetic and follow the standard order of
-
-  operations: Parentheses, Exponents, Multiplication, Division, Addition,
-
-  and Subtraction (PEMDAS). For example, it's common to use arithmetic
-
-  operators with p5.js' system variables that are numbers:</p>
-
-  <pre><code class="language-js">// Draw a circle at the center.
-
-  circle(width / 2, height / 2, 20);
-
-  </code></pre>
-
-  <pre><code class="language-js">// Draw a circle that moves from left to right.
-
-  circle(frameCount * 0.01, 50, 20);
-
-  </code></pre>
-
-  <p>Here's a quick overview of the arithmetic operators:</p>
-
-  <pre><code class="language-js">1 + 2 // Add
-
-  1 - 2 // Subtract
-
-  1 * 2 // Multiply
-
-  1 / 2 // Divide
-
-  1 % 2 // Remainder
-
-  1 ** 2 // Exponentiate
-
-  </code></pre>
-
-  <p>It's common to update a number variable using arithmetic. For example, an
-
-  object's location can be updated like so:</p>
-
-  <pre><code class="language-js">x = x + 1;
-
-  </code></pre>
-
-  <p>The statement above adds 1 to a variable <code>x</code> using the
-  <code>+</code> operator. The
-
-  addition assignment operator <code>+=</code> expresses the same idea:</p>
-
-  <pre><code class="language-js">x += 1;
-
-  </code></pre>
-
-  <p>Here's a quick overview of the assignment operators:</p>
-
-  <pre><code class="language-js">x += 2 // Addition assignment
-
-  x -= 2 // Subtraction assignment
-
-  x *= 2 // Multiplication assignment
-
-  x /= 2 // Division assignment
-
-  x %= 2 // Remainder assignment
-
-  </code></pre>
-
-  <p>Numbers can be compared using the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators"
-  target="_blank">relational operators</a>
-
-  <code>></code>, <code><< code="">, <code>>=</code>, <code><=< code="">,
-  <code>===</code>, and <code>!==</code>.  For example, a sketch's
-
-  <a href="/reference/p5/frameCount/">frameCount</a> can be used as a
-  timer:</=<></code></<></code></p>
-
-  <pre><code class="language-js">if (frameCount > 1000) {
-    text('Game over!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>An expression such as <code>frameCount > 1000</code> evaluates to a
-  <code>Boolean</code> value
-
-  that's either <code>true</code> or <code>false</code>. The relational
-  operators all produce
-
-  <code>Boolean</code> values:</p>
-
-  <pre><code class="language-js">2 > 1 // true
-
-  2 < 1 // false
-
-  2 >= 2 // true
-
-  2 <= 2="" true="" !="=" false="" <="" code=""/></code></pre>
-
-  <p>See <a href="/reference/p5/Boolean/">Boolean</a> for more information about
-  comparisons and conditions.</p>
-
-  <p>Note: There are also <code>==</code> and <code>!=</code> operators with one
-  fewer <code>=</code>. Don't use them.</p>
-
-  <p>Expressions with numbers can also produce special values when something
-
-  goes wrong:</p>
-
-  <pre><code class="language-js">sqrt(-1) // NaN
-
-  1 / 0 // Infinity
-
-  </code></pre>
-
-  <p>The value <code>NaN</code> stands for
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN/"
-  target="_blank">Not-A-Number</a>.
-
-  <code>NaN</code> appears when calculations or conversions don't work.
-  <code>Infinity</code> is a
-
-  value that's larger than any number. It appears during certain
-
-  calculations.</p>
-line: 853
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a circle at the center.
-      circle(50, 50, 70);
-
-      // Draw a smaller circle at the center.
-      circle(width / 2, height / 2, 30);
-
-      describe('Two concentric, white circles drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle travels from left to right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      circle(frameCount * 0.05, 50, 20);
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# Number
diff --git a/src/content/reference/en/p5 copy/types/Object.mdx b/src/content/reference/en/p5 copy/types/Object.mdx
deleted file mode 100644
index c5c9adf8bb..0000000000
--- a/src/content/reference/en/p5 copy/types/Object.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L999
-title: Object
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: "<p>A container for data that's stored as key-value pairs.</p>\n<p>Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.</p>\n<p>For example, an object could contain the location, size, and appearance of\na dog:</p>\n<pre><code class=\"language-js\">// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '\U0001F436' };\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);\n\n// Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n</code></pre>\n<p>The variable <code>dog</code> is assigned an object with four properties. Objects\nare declared with curly braces <code>{}</code>. Values can be accessed using the dot\noperator, as in <code>dog.size</code>. In the example above, the key <code>size</code>\ncorresponds to the value <code>20</code>. Objects can also be empty to start:</p>\n<pre><code class=\"language-js\">// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n// Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '\U0001F431';\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);\n\n// Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n</code></pre>\n<p>An object's data can be updated while a sketch runs. For example, the <code>cat</code>\ncould run away from the <code>dog</code> by updating its location:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat.x += 5;\n</code></pre>\n<p>If needed, an object's values can be accessed using square brackets <code>[]</code>\nand strings instead of dot notation:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat[\"x\"] += 5;\n</code></pre>\n<p>This syntax can be helpful when the key's name has spaces, as in\n<code>cat['height (m)']</code>.</p>\n"
-line: 999
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Declare the variable data and assign it an object with three properties.
-    let data = { x: 50, y: 50, d: 20 };
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the object's values using the . operator.
-      circle(data.x, data.y, data.d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable data and assign it an object with three properties.
-    let data = { x: 50, y: 50, d: 20 };
-
-    // Add another property for color.
-    data.color = 'deeppink';
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A pink circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the object's values using the . operator.
-      fill(data.color);
-      circle(data.x, data.y, data.d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable data and assign it an object with three properties.
-    let data = { x: 50, y: 50, d: 20 };
-
-    // Add another property for color.
-    data.color = 'deeppink';
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the object's values using the . operator.
-      fill(data.color);
-      circle(data.x, data.y, data.d);
-
-      // Update the object's x and y properties.
-      data.x += random(-1, 1);
-      data.y += random(-1, 1);
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# Object
diff --git a/src/content/reference/en/p5 copy/types/String.mdx b/src/content/reference/en/p5 copy/types/String.mdx
deleted file mode 100644
index e62a9a8b9c..0000000000
--- a/src/content/reference/en/p5 copy/types/String.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L710
-title: String
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A sequence of text characters.</p>
-
-  <p>The <code>String</code> data type is helpful for working with text. For
-  example, a
-
-  string could contain a welcome message:</p>
-
-  <pre><code class="language-js">// Use a string literal.
-
-  text('Hello!', 10, 10);
-
-  </code></pre>
-
-  <pre><code class="language-js">// Create a string variable.
-
-  let message = 'Hello!';
-
-
-  // Use the string variable.
-
-  text(message, 10, 10);
-
-  </code></pre>
-
-  <p>The most common way to create strings is to use some form of quotations as
-
-  follows:</p>
-
-  <pre><code class="language-js">text("hi", 50, 50);
-
-  </code></pre>
-
-  <pre><code class="language-js">text('hi', 50, 50);
-
-  </code></pre>
-
-  <pre><code class="language-js">text(`hi`, 50, 50);
-
-  </code></pre>
-
-  <p><code>"hi"</code>, <code>'hi'</code>, and <code>hi</code> are all string
-  literals. A "literal" means a
-
-  value was actually written, as in <code>text('hi', 50, 50)</code>. By
-  contrast,
-
-  <code>text(message, 50, 50)</code> uses the variable <code>message</code>, so
-  it isn't a string
-
-  literal.</p>
-
-  <p>Single quotes <code>''</code> and double quotes <code>""</code> mean the
-  same thing. It's nice to
-
-  have the option for cases when a string contains one type of quote:</p>
-
-  <pre><code class="language-js">text("What's up?", 50, 50);
-
-  </code></pre>
-
-  <pre><code class="language-js">text('Air quotes make you look "cool."', 50,
-  50);
-
-  </code></pre>
-
-  <p>Backticks <code>``</code> create template literals. Template literals have
-  many uses.
-
-  For example, they can contain both single and double quotes as needed:</p>
-
-  <pre><code class="language-js">text(`"Don't you forget about me"`,  10, 10);
-
-  </code></pre>
-
-  <p>Template literals are helpful when strings are created from variables like
-
-  so:</p>
-
-  <pre><code class="language-js">let size = random(10, 20);
-
-  circle(50, 50, size);
-
-
-  text(`The circle's diameter is ${size} pixels.`,  10, 10);
-
-  </code></pre>
-
-  <p>The <code>size</code> variable's value will replace <code>${size}</code>
-  when the string is
-
-  created. <code>${}</code> is a placeholder for any value. That means an
-  expression can
-
-  be used, as in <code>${round(PI, 3)}</code>. All of the following are valid
-  template
-
-  literals:</p>
-
-  <pre><code class="language-js">text(`π is about ${round(PI, 2)} pixels.`,  10,
-  10);
-
-  text(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 
-  10, 30);
-
-  </code></pre>
-
-  <p>Template literals can include several variables:</p>
-
-  <pre><code class="language-js">let x = random(0, 100);
-
-  let y = random(0, 100);
-
-  let size = random(10, 20);
-
-  circle(x, y, size);
-
-
-  text(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`,  10, 10);
-
-  </code></pre>
-
-  <p>Template literals are also helpful for creating multi-line text like
-  so:</p>
-
-  <pre><code class="language-js">let poem = `My sketch doesn't run;
-
-  it waits for me patiently
-
-  while bugs point the way.`;
-
-
-  text(poem, 10, 10);
-
-  </code></pre>
-line: 710
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Display a welcome message.\n  text('Hello!', 50, 50);\n\n  describe('The text \"Hello!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Create a string variable.\n  let world = '\U0001F30D';\n\n  // Display a welcome message using a template string.\n  text(`Hello, ${world}!`, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>"
-class: p5
----
-
-
-# String
diff --git a/src/content/reference/en/p5 copy/unchar.mdx b/src/content/reference/en/p5 copy/unchar.mdx
deleted file mode 100644
index 8ef044b393..0000000000
--- a/src/content/reference/en/p5 copy/unchar.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L731
-title: unchar
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a single-character <code>String</code> to a
-  <code>Number</code>.</p>
-
-  <p><code>unchar()</code> converts single-character strings to their
-  corresponding
-
-  integer (whole number).</p>
-
-  <p>The parameter, <code>n</code>, is the character to convert. For example,
-
-  <code>unchar('A')</code>, returns the number 65. If an array is passed, as in
-
-  <code>unchar(['A', 'B', 'C'])</code>, an array of integers is returned.</p>
-line: 731
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = 'A';
-
-      // Convert the string to a number.
-      let converted = unchar(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "A : 65" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of characters.
-      let original = ['A', 'B', 'C'];
-
-      // Convert the string to a number.
-      let converted = unchar(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Iterate over elements of the converted array.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${original[i]} : ${converted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "A : 65", "B : 66", and "C :67" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 731
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String
-    return:
-      description: converted number.
-      type: Number
-  - line: 805
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: 'String[]'
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# unchar
diff --git a/src/content/reference/en/p5 copy/unhex.mdx b/src/content/reference/en/p5 copy/unhex.mdx
deleted file mode 100644
index 5c507abc4c..0000000000
--- a/src/content/reference/en/p5 copy/unhex.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L956
-title: unhex
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>String</code> with a hexadecimal value to a 
-  <code>Number</code>.</p>
-
-  <p><code>unhex()</code> converts a string with its hexadecimal number value to
-  a number.
-
-  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
-
-  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
-
-  number <code>11</code> (eleven) in base-10 is written as the letter
-  <code>B</code> in hex.</p>
-
-  <p>The first parameter, <code>n</code>, is the hex string to convert. For
-  example,
-
-  <code>unhex('FF')</code>, returns the number 255. If an array is passed, as in
-
-  <code>unhex(['00', '80', 'FF'])</code>, an array of numbers is returned.</p>
-line: 956
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a a hex string variable
-      let original = 'FF';
-
-      // Convert the hex string to a number.
-      let converted = unhex(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "FF = 255" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = ['00', '80', 'FF'];
-
-      // Convert the numbers to hex strings.
-      // Only use two hex digits.
-      let converted = unhex(original, 2);
-
-      // Style the text.
-      textAlign(RIGHT, CENTER);
-      textSize(16);
-
-      // Iterate over the converted values.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${ original[i]} = ${converted[i]}`, 80, y);
-      }
-
-      describe(
-        'The text "00 = 0", "80 = 128", and "FF = 255" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 956
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String
-    return:
-      description: converted number.
-      type: Number
-  - line: 1033
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: 'String[]'
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# unhex
diff --git a/src/content/reference/en/p5 copy/updatePixels.mdx b/src/content/reference/en/p5 copy/updatePixels.mdx
deleted file mode 100644
index 5de892374b..0000000000
--- a/src/content/reference/en/p5 copy/updatePixels.mdx	
+++ /dev/null
@@ -1,94 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L1118
-title: updatePixels
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Updates the canvas with the RGBA values in the
-
-  <a href="/reference/p5/pixels/">pixels</a> array.</p>
-
-  <p><code>updatePixels()</code> only needs to be called after changing values
-  in the
-
-  <a href="/reference/p5/pixels/">pixels</a> array. Such changes can be made
-  directly
-
-  after calling <a href="/reference/p5/loadPixels/">loadPixels()</a> or by
-  calling
-
-  <a href="/reference/p5/set/">set()</a>.</p>
-line: 1118
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0, 100, 100);
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Copy the top half of the canvas to the bottom.
-      for (let i = 0; i < halfImage; i += 1) {
-        pixels[i + halfImage] = pixels[i];
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Two identical images of mountain landscapes, one on top of the other.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the upper-left corner of region
-                              to update.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the upper-left corner of region
-                              to update.</p>
-    type: Number
-    optional: true
-  - name: w
-    description: |
-      <p>width of region to update.</p>
-    type: Number
-    optional: true
-  - name: h
-    description: |
-      <p>height of region to update.</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# updatePixels
diff --git a/src/content/reference/en/p5 copy/userStartAudio.mdx b/src/content/reference/en/p5 copy/userStartAudio.mdx
deleted file mode 100644
index 076d8537c5..0000000000
--- a/src/content/reference/en/p5 copy/userStartAudio.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L198
-title: userStartAudio
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >-
-  <p>It is not only a good practice to give users control over starting
-
-  audio. This policy is enforced by many web browsers, including iOS and
-
-  <a href="https://goo.gl/7K7WLu/" title="Google Chrome's autoplay
-
-  policy">Google Chrome</a>, which create the Web Audio API's
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/"
-  title="Audio Context @ MDN">Audio Context</a>
-
-  in a suspended state.</p>
-
-
-  <p>In these browser-specific policies, sound will not play until a user
-
-  interaction event (i.e. <code>mousePressed()</code>) explicitly resumes
-
-  the AudioContext, or starts an audio node. This can be accomplished by
-
-  calling <code>start()</code> on a <code>p5.Oscillator</code>,
-
-  <code> play()</code> on a <code>p5.SoundFile</code>, or simply
-
-  <code>userStartAudio()</code>.</p>
-
-
-  <p><code>userStartAudio()</code> starts the AudioContext on a user
-
-  gesture. The default behavior will enable audio on any
-
-  mouseUp or touchEnd event. It can also be placed in a specific
-
-  interaction function, such as <code>mousePressed()</code> as in the
-
-  example below. This method utilizes
-
-  <a href="https://github.com/tambien/StartAudioContext/">StartAudioContext
-
-  </a>, a library by Yotam Mann (MIT Licence, 2016).</p>
-line: 198
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    function setup() {
-      // mimics the autoplay policy
-      getAudioContext().suspend();
-
-      let mySynth = new p5.MonoSynth();
-
-      // This won't play until the context has resumed
-      mySynth.play('A6');
-    }
-    function draw() {
-      background(220);
-      textAlign(CENTER, CENTER);
-      text(getAudioContext().state, width/2, height/2);
-    }
-    function mousePressed() {
-      userStartAudio();
-    }
-    </code></div>
-class: p5
-params:
-  - name: elements
-    description: |
-      <p>This argument can be an Element,
-                                    Selector String, NodeList, p5.Element,
-                                    jQuery Element, or an Array of any of those.</p>
-    type: Element|Array
-    optional: true
-  - name: callback
-    description: |
-      <p>Callback to invoke when the AudioContext
-                                    has started</p>
-    type: Function
-    optional: true
-return:
-  description: |-
-    Returns a Promise that resolves when
-                                         the AudioContext state is 'running'
-  type: Promise
-chainable: false
----
-
-
-# userStartAudio
diff --git a/src/content/reference/en/p5 copy/vertex.mdx b/src/content/reference/en/p5 copy/vertex.mdx
deleted file mode 100644
index 92d5bb9138..0000000000
--- a/src/content/reference/en/p5 copy/vertex.mdx	
+++ /dev/null
@@ -1,242 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1881
-title: vertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a vertex to a custom shape.</p>
-
-  <p><code>vertex()</code> sets the coordinates of vertices drawn between the
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
-
-  <p>The first two parameters, <code>x</code> and <code>y</code>, set the x- and
-  y-coordinates of the
-
-  vertex.</p>
-
-  <p>The third parameter, <code>z</code>, is optional. It sets the z-coordinate
-  of the
-
-  vertex in WebGL mode. By default, <code>z</code> is 0.</p>
-
-  <p>The fourth and fifth parameters, <code>u</code> and <code>v</code>, are
-  also optional. They set
-
-  the u- and v-coordinates for the vertex’s texture when used with
-
-  <a href="/reference/p5/endShape/">endShape()</a>. By default, <code>u</code>
-  and <code>v</code> are both 0.</p>
-line: 1881
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      strokeWeight(3);
-
-      // Start drawing the shape.
-      // Only draw the vertices.
-      beginShape(POINTS);
-
-      // Add the vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Four black dots that form a square are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(-20, -30, 0);
-      vertex(35, -30, 0);
-      vertex(35, 25, 0);
-      vertex(-20, 25, 0);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square spins around slowly on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(-20, -30, 0);
-      vertex(35, -30, 0);
-      vertex(35, 25, 0);
-      vertex(-20, 25, 0);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image to apply as a texture.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A photograph of a ceiling rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Style the shape.
-      noStroke();
-
-      // Apply the texture.
-      texture(img);
-      textureMode(NORMAL);
-
-      // Start drawing the shape
-      beginShape();
-
-      // Add vertices.
-      vertex(-20, -30, 0, 0, 0);
-      vertex(35, -30, 0, 1, 0);
-      vertex(35, 25, 0, 1, 1);
-      vertex(-20, 25, 0, 0, 1);
-
-      // Stop drawing the shape.
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1881
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the vertex.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the vertex.</p>
-        type: Number
-    chainable: 1
-  - line: 2052
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the vertex. Defaults to 0.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2059
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-        optional: true
-      - name: u
-        description: |
-          <p>u-coordinate of the vertex's texture. Defaults to 0.</p>
-        type: Number
-        optional: true
-      - name: v
-        description: |
-          <p>v-coordinate of the vertex's texture. Defaults to 0.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# vertex
diff --git a/src/content/reference/en/p5 copy/webglVersion.mdx b/src/content/reference/en/p5 copy/webglVersion.mdx
deleted file mode 100644
index 1909f94a86..0000000000
--- a/src/content/reference/en/p5 copy/webglVersion.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L508
-title: webglVersion
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>String</code> variable with the WebGL version in use.</p>
-
-  <p><code>webglVersion</code>'s value equals one of the following string
-  constants:</p>
-
-  <ul>
-
-  <li><code>WEBGL2</code> whose value is <code>'webgl2'</code>,</li>
-
-  <li><code>WEBGL</code> whose value is <code>'webgl'</code>, or</li>
-
-  <li><code>P2D</code> whose value is <code>'p2d'</code>. This is the default
-  for 2D sketches.</li>
-
-  </ul>
-
-  <p>See <a href="/reference/p5/setAttributes/">setAttributes()</a> for ways to
-  set the
-
-  WebGL version.</p>
-line: 508
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Display the current WebGL version.
-      text(webglVersion, 42, 54);
-
-      describe('The text "p2d" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      // Load a font to use.
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      // Create a canvas using WEBGL mode.
-      createCanvas(100, 50, WEBGL);
-      background(200);
-
-      // Display the current WebGL version.
-      fill(0);
-      textFont(font);
-      text(webglVersion, -15, 5);
-
-      describe('The text "webgl2" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      // Load a font to use.
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      // Create a canvas using WEBGL mode.
-      createCanvas(100, 50, WEBGL);
-
-      // Set WebGL to version 1.
-      setAttributes({ version: 1 });
-
-      background(200);
-
-      // Display the current WebGL version.
-      fill(0);
-      textFont(font);
-      text(webglVersion, -14, 5);
-
-      describe('The text "webgl" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# webglVersion
diff --git a/src/content/reference/en/p5 copy/while.mdx b/src/content/reference/en/p5 copy/while.mdx
deleted file mode 100644
index 5fdcb2985a..0000000000
--- a/src/content/reference/en/p5 copy/while.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1872
-title: while
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A way to repeat a block of code.</p>
-
-  <p><code>while</code> loops are helpful for repeating statements while a
-  condition is
-
-  <code>true</code>. They're like <code>if</code> statements that repeat. For
-  example, a <code>while</code>
-
-  loop makes it easy to express the idea "draw several lines" like so:</p>
-
-  <pre><code class="language-js">// Declare a variable to keep track of
-  iteration.
-
-  let x = 10;
-
-
-  // Repeat as long as x < 100
-
-  while (x < 100) {
-    line(x, 25, x, 75);
-
-    // Increment by 20.
-    x += 20;
-  }
-
-  </code></pre>
-
-  <p>The loop's header begins with the keyword <code>while</code>. Loops
-  generally count up
-
-  or count down as they repeat, or iterate. The statement in parentheses
-
-  <code>x < 100</code> is a condition the loop checks each time it iterates. If
-  the
-
-  condition is <code>true</code>, the loop runs the code between the curly
-  braces <code>{}</code>,
-
-  The code between the curly braces is called the loop's body. If the
-
-  condition is <code>false</code>, the body is skipped and the loop is
-  stopped.</p>
-
-  <p>It's common to create infinite loops accidentally. For example, the
-
-  following loop never stops iterating because it doesn't count up:</p>
-
-  <pre><code class="language-js">// Declare a variable to keep track of
-  iteration.
-
-  let x = 10;
-
-
-  // Repeat as long as x < 100
-
-  while (x < 100) {
-    line(x, 25, x, 75);
-  }
-
-
-  // This should be in the loop's body!
-
-  x += 20;
-
-  </code></pre>
-
-  <p>The statement <code>x += 20</code> appears after the loop's body. That
-  means the
-
-  variable <code>x</code> is stuck at <code>10</code>,  which is always less
-  than <code>100</code>.</p>
-
-  <p><code>while</code> loops are useful when the number of iterations isn't
-  known in
-
-  advance. For example, concentric circles could be drawn at random
-
-  increments:</p>
-
-  <pre><code class="language-js">let d = 100;
-
-  let minSize = 5;
-
-
-  while (d > minSize) {
-    circle(50, 50, d);
-    d -= random(10);
-  }
-
-  </code></pre>
-line: 1872
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Five black vertical lines on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Declare a variable to keep track of iteration.
-      let x = 10;
-
-      // Repeat as long as x < 100
-      while (x < 100) {
-        line(x, 25, x, 75);
-
-        // Increment by 20.
-        x += 20;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe(
-        "A gray square with several concentric circles at the center. The circles' sizes decrease at random increments."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      let d = 100;
-      let minSize = 5;
-
-      while (d > minSize) {
-        circle(50, 50, d);
-        d -= random(5, 15);
-      }
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# while
diff --git a/src/content/reference/en/p5 copy/width.mdx b/src/content/reference/en/p5 copy/width.mdx
deleted file mode 100644
index 0eb6ad07bb..0000000000
--- a/src/content/reference/en/p5 copy/width.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L812
-title: width
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the width of the canvas in
-  pixels.</p>
-
-  <p><code>width</code>'s default value is 100. Calling
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
-
-  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
-
-  <code>width</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
-  sets its value to
-
-  0.</p>
-line: 812
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Display the canvas' width.
-      text(width, 42, 54);
-
-      describe('The number 100 written in black on a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(50, 100);
-
-      background(200);
-
-      // Display the canvas' width.
-      text(width, 21, 54);
-
-      describe('The number 50 written in black on a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Display the canvas' width.
-      text(width, 42, 54);
-
-      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
-    }
-
-    // If the mouse is pressed, reisze
-    // the canvas and display its new
-    // width.
-    function mousePressed() {
-      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
-        resizeCanvas(50, 100);
-        background(200);
-        text(width, 21, 54);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# width
diff --git a/src/content/reference/en/p5 copy/winMouseX.mdx b/src/content/reference/en/p5 copy/winMouseX.mdx
deleted file mode 100644
index ae7dbc3fac..0000000000
--- a/src/content/reference/en/p5 copy/winMouseX.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L463
-title: winMouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's horizontal position
-  within the
-
-  browser.</p>
-
-  <p><code>winMouseX</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. For example, if the mouse is 50 pixels from
-
-  the left edge of the browser, then <code>winMouseX</code> will be 50.</p>
-
-  <p>On a touchscreen device, <code>winMouseX</code> will hold the x-coordinate
-  of the most
-
-  recent touch point.</p>
-
-  <p>Note: Use <a href="/reference/p5/mouseX/">mouseX</a> to track the mouse’s
-
-  x-coordinate within the canvas.</p>
-line: 463
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates within the browser window.
-      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# winMouseX
diff --git a/src/content/reference/en/p5 copy/winMouseY.mdx b/src/content/reference/en/p5 copy/winMouseY.mdx
deleted file mode 100644
index 32c59cba4c..0000000000
--- a/src/content/reference/en/p5 copy/winMouseY.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L504
-title: winMouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's vertical position
-  within the
-
-  browser.</p>
-
-  <p><code>winMouseY</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. For example, if the mouse is 50 pixels from
-
-  the top edge of the browser, then <code>winMouseY</code> will be 50.</p>
-
-  <p>On a touchscreen device, <code>winMouseY</code> will hold the y-coordinate
-  of the most
-
-  recent touch point.</p>
-
-  <p>Note: Use <a href="/reference/p5/mouseY/">mouseY</a> to track the mouse’s
-
-  y-coordinate within the canvas.</p>
-line: 504
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates within the browser window.
-      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# winMouseY
diff --git a/src/content/reference/en/p5 copy/windowHeight.mdx b/src/content/reference/en/p5 copy/windowHeight.mdx
deleted file mode 100644
index 829ac3d76b..0000000000
--- a/src/content/reference/en/p5 copy/windowHeight.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L680
-title: windowHeight
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the height of the browser's
-  viewport.</p>
-
-  <p>The <a
-  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
-  target="_blank">layout viewport</a>
-
-  is the area within the browser that's available for drawing.</p>
-line: 680
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the browser's dimensions.
-      createCanvas(windowWidth, windowHeight);
-
-      background(200);
-
-      describe('A gray canvas that takes up the entire browser window.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# windowHeight
diff --git a/src/content/reference/en/p5 copy/windowResized.mdx b/src/content/reference/en/p5 copy/windowResized.mdx
deleted file mode 100644
index aed52e6b4b..0000000000
--- a/src/content/reference/en/p5 copy/windowResized.mdx	
+++ /dev/null
@@ -1,64 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L708
-title: windowResized
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A function that's called when the browser window is resized.</p>
-
-  <p>Code placed in the body of <code>windowResized()</code> will run when the
-
-  browser window's size changes. It's a good place to call
-
-  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> or make other
-
-  adjustments to accommodate the new window size.</p>
-
-  <p>The <code>event</code> parameter is optional. If added to the function
-  declaration, it
-
-  can be used for debugging or other purposes.</p>
-line: 708
-isConstructor: false
-itemtype: method
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      createCanvas(windowWidth, windowHeight);
-
-      describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a circle at the center.
-      circle(width / 2, height / 2, 50);
-    }
-
-    // Resize the canvas when the
-    // browser's size changes.
-    function windowResized() {
-      resizeCanvas(windowWidth, windowHeight);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional resize Event.</p>
-    type: Event
-    optional: true
-chainable: false
----
-
-
-# windowResized
diff --git a/src/content/reference/en/p5 copy/windowWidth.mdx b/src/content/reference/en/p5 copy/windowWidth.mdx
deleted file mode 100644
index 26ec5fc2a9..0000000000
--- a/src/content/reference/en/p5 copy/windowWidth.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L652
-title: windowWidth
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the width of the browser's
-  viewport.</p>
-
-  <p>The <a
-  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
-  target="_blank">layout viewport</a>
-
-  is the area within the browser that's available for drawing.</p>
-line: 652
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the browser's dimensions.
-      createCanvas(windowWidth, windowHeight);
-
-      background(200);
-
-      describe('A gray canvas that takes up the entire browser window.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# windowWidth
diff --git a/src/content/reference/en/p5 copy/year.mdx b/src/content/reference/en/p5 copy/year.mdx
deleted file mode 100644
index 04efa83189..0000000000
--- a/src/content/reference/en/p5 copy/year.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L311
-title: year
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current year as a number such as 1999.</p>
-line: 311
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current year.
-      let y = year();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the year.
-      text(`Current year: ${y}`, 10, 50, 80);
-
-      describe(`The text 'Current year: ${y}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current year.
-  type: Integer
-chainable: false
----
-
-
-# year

From d5b71dd62828a677c77f56dd08625d5653a79b47 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:42:54 +0545
Subject: [PATCH 15/16] add test files

---
 .github/actions/translation-tracker/README.md |  35 +-
 src/content/reference/en/p5 copy/abs.mdx      |  61 ++
 .../reference/en/p5 copy/accelerationX.mdx    |  37 +
 .../reference/en/p5 copy/accelerationY.mdx    |  37 +
 .../reference/en/p5 copy/accelerationZ.mdx    |  37 +
 src/content/reference/en/p5 copy/acos.mdx     |  86 ++
 src/content/reference/en/p5 copy/alpha.mdx    | 120 +++
 .../reference/en/p5 copy/ambientLight.mdx     | 241 ++++++
 .../reference/en/p5 copy/ambientMaterial.mdx  | 269 ++++++
 .../reference/en/p5 copy/angleMode.mdx        | 219 +++++
 src/content/reference/en/p5 copy/append.mdx   |  48 ++
 .../reference/en/p5 copy/applyMatrix.mdx      | 347 ++++++++
 src/content/reference/en/p5 copy/arc.mdx      | 274 ++++++
 .../reference/en/p5 copy/arrayCopy.mdx        |  95 +++
 src/content/reference/en/p5 copy/asin.mdx     |  86 ++
 src/content/reference/en/p5 copy/atan.mdx     |  86 ++
 src/content/reference/en/p5 copy/atan2.mdx    | 106 +++
 .../reference/en/p5 copy/background.mdx       | 336 ++++++++
 .../reference/en/p5 copy/baseColorShader.mdx  | 178 ++++
 .../en/p5 copy/baseMaterialShader.mdx         | 418 +++++++++
 .../reference/en/p5 copy/baseNormalShader.mdx | 211 +++++
 .../reference/en/p5 copy/baseStrokeShader.mdx | 356 ++++++++
 .../reference/en/p5 copy/beginClip.mdx        | 208 +++++
 .../reference/en/p5 copy/beginContour.mdx     | 134 +++
 .../reference/en/p5 copy/beginGeometry.mdx    | 281 +++++++
 .../reference/en/p5 copy/beginShape.mdx       | 449 ++++++++++
 src/content/reference/en/p5 copy/bezier.mdx   | 273 ++++++
 .../reference/en/p5 copy/bezierDetail.mdx     | 121 +++
 .../reference/en/p5 copy/bezierPoint.mdx      | 162 ++++
 .../reference/en/p5 copy/bezierTangent.mdx    | 155 ++++
 .../reference/en/p5 copy/bezierVertex.mdx     | 337 ++++++++
 src/content/reference/en/p5 copy/blend.mdx    | 214 +++++
 .../reference/en/p5 copy/blendMode.mdx        | 541 ++++++++++++
 src/content/reference/en/p5 copy/blue.mdx     | 158 ++++
 src/content/reference/en/p5 copy/boolean.mdx  | 157 ++++
 src/content/reference/en/p5 copy/box.mdx      | 186 ++++
 .../reference/en/p5 copy/brightness.mdx       | 168 ++++
 .../reference/en/p5 copy/buildGeometry.mdx    | 263 ++++++
 src/content/reference/en/p5 copy/byte.mdx     | 180 ++++
 src/content/reference/en/p5 copy/camera.mdx   | 200 +++++
 src/content/reference/en/p5 copy/ceil.mdx     |  65 ++
 src/content/reference/en/p5 copy/changed.mdx  |  87 ++
 src/content/reference/en/p5 copy/char.mdx     | 152 ++++
 src/content/reference/en/p5 copy/circle.mdx   |  77 ++
 src/content/reference/en/p5 copy/class.mdx    |  19 +
 src/content/reference/en/p5 copy/clear.mdx    | 108 +++
 .../reference/en/p5 copy/clearDepth.mdx       | 113 +++
 .../reference/en/p5 copy/clearStorage.mdx     |  81 ++
 src/content/reference/en/p5 copy/clip.mdx     | 225 +++++
 src/content/reference/en/p5 copy/color.mdx    | 349 ++++++++
 .../reference/en/p5 copy/colorMode.mdx        | 271 ++++++
 src/content/reference/en/p5 copy/concat.mdx   |  54 ++
 src/content/reference/en/p5 copy/cone.mdx     | 265 ++++++
 src/content/reference/en/p5 copy/console.mdx  |  99 +++
 .../reference/en/p5 copy/constants/ADD.mdx    |  18 +
 .../reference/en/p5 copy/constants/ALT.mdx    |  18 +
 .../reference/en/p5 copy/constants/ARROW.mdx  |  18 +
 .../reference/en/p5 copy/constants/AUTO.mdx   |  25 +
 .../reference/en/p5 copy/constants/AXES.mdx   |  18 +
 .../en/p5 copy/constants/BACKSPACE.mdx        |  18 +
 .../en/p5 copy/constants/BASELINE.mdx         |  18 +
 .../reference/en/p5 copy/constants/BEVEL.mdx  |  18 +
 .../reference/en/p5 copy/constants/BEZIER.mdx |  18 +
 .../reference/en/p5 copy/constants/BLEND.mdx  |  18 +
 .../reference/en/p5 copy/constants/BLUR.mdx   |  18 +
 .../reference/en/p5 copy/constants/BOLD.mdx   |  18 +
 .../en/p5 copy/constants/BOLDITALIC.mdx       |  18 +
 .../reference/en/p5 copy/constants/BOTTOM.mdx |  18 +
 .../reference/en/p5 copy/constants/BURN.mdx   |  18 +
 .../reference/en/p5 copy/constants/CENTER.mdx |  18 +
 .../reference/en/p5 copy/constants/CHAR.mdx   |  18 +
 .../reference/en/p5 copy/constants/CHORD.mdx  |  18 +
 .../reference/en/p5 copy/constants/CLAMP.mdx  |  18 +
 .../reference/en/p5 copy/constants/CLOSE.mdx  |  18 +
 .../en/p5 copy/constants/CONTAIN.mdx          |  18 +
 .../en/p5 copy/constants/CONTROL.mdx          |  18 +
 .../reference/en/p5 copy/constants/CORNER.mdx |  18 +
 .../en/p5 copy/constants/CORNERS.mdx          |  18 +
 .../reference/en/p5 copy/constants/COVER.mdx  |  18 +
 .../reference/en/p5 copy/constants/CROSS.mdx  |  18 +
 .../reference/en/p5 copy/constants/CURVE.mdx  |  18 +
 .../en/p5 copy/constants/DARKEST.mdx          |  18 +
 .../en/p5 copy/constants/DEGREES.mdx          |  59 ++
 .../reference/en/p5 copy/constants/DELETE.mdx |  18 +
 .../en/p5 copy/constants/DIFFERENCE.mdx       |  18 +
 .../reference/en/p5 copy/constants/DILATE.mdx |  18 +
 .../reference/en/p5 copy/constants/DODGE.mdx  |  18 +
 .../en/p5 copy/constants/DOWN_ARROW.mdx       |  18 +
 .../reference/en/p5 copy/constants/ENTER.mdx  |  18 +
 .../reference/en/p5 copy/constants/ERODE.mdx  |  18 +
 .../reference/en/p5 copy/constants/ESCAPE.mdx |  18 +
 .../en/p5 copy/constants/EXCLUSION.mdx        |  18 +
 .../en/p5 copy/constants/FALLBACK.mdx         |  18 +
 .../reference/en/p5 copy/constants/FILL.mdx   |  18 +
 .../reference/en/p5 copy/constants/FLAT.mdx   |  18 +
 .../reference/en/p5 copy/constants/FLOAT.mdx  |  18 +
 .../reference/en/p5 copy/constants/GRAY.mdx   |  18 +
 .../reference/en/p5 copy/constants/GRID.mdx   |  18 +
 .../en/p5 copy/constants/HALF_FLOAT.mdx       |  18 +
 .../en/p5 copy/constants/HALF_PI.mdx          | 109 +++
 .../reference/en/p5 copy/constants/HAND.mdx   |  18 +
 .../en/p5 copy/constants/HARD_LIGHT.mdx       |  18 +
 .../reference/en/p5 copy/constants/HSB.mdx    |  24 +
 .../reference/en/p5 copy/constants/HSL.mdx    |  18 +
 .../reference/en/p5 copy/constants/IMAGE.mdx  |  18 +
 .../en/p5 copy/constants/IMMEDIATE.mdx        |  18 +
 .../reference/en/p5 copy/constants/INVERT.mdx |  18 +
 .../reference/en/p5 copy/constants/ITALIC.mdx |  18 +
 .../reference/en/p5 copy/constants/LABEL.mdx  |  18 +
 .../en/p5 copy/constants/LANDSCAPE.mdx        |  18 +
 .../reference/en/p5 copy/constants/LEFT.mdx   |  18 +
 .../en/p5 copy/constants/LEFT_ARROW.mdx       |  18 +
 .../en/p5 copy/constants/LIGHTEST.mdx         |  18 +
 .../reference/en/p5 copy/constants/LINEAR.mdx |  18 +
 .../reference/en/p5 copy/constants/LINES.mdx  |  18 +
 .../en/p5 copy/constants/LINE_LOOP.mdx        |  18 +
 .../en/p5 copy/constants/LINE_STRIP.mdx       |  18 +
 .../reference/en/p5 copy/constants/MIRROR.mdx |  18 +
 .../reference/en/p5 copy/constants/MITER.mdx  |  18 +
 .../reference/en/p5 copy/constants/MOVE.mdx   |  18 +
 .../en/p5 copy/constants/MULTIPLY.mdx         |  18 +
 .../en/p5 copy/constants/NEAREST.mdx          |  18 +
 .../reference/en/p5 copy/constants/NORMAL.mdx |  18 +
 .../reference/en/p5 copy/constants/OPAQUE.mdx |  18 +
 .../reference/en/p5 copy/constants/OPEN.mdx   |  18 +
 .../reference/en/p5 copy/constants/OPTION.mdx |  18 +
 .../en/p5 copy/constants/OVERLAY.mdx          |  18 +
 .../reference/en/p5 copy/constants/P2D.mdx    |  19 +
 .../reference/en/p5 copy/constants/PI.mdx     | 108 +++
 .../reference/en/p5 copy/constants/PIE.mdx    |  18 +
 .../reference/en/p5 copy/constants/POINTS.mdx |  18 +
 .../en/p5 copy/constants/PORTRAIT.mdx         |  18 +
 .../en/p5 copy/constants/POSTERIZE.mdx        |  18 +
 .../en/p5 copy/constants/PROJECT.mdx          |  18 +
 .../en/p5 copy/constants/QUADRATIC.mdx        |  18 +
 .../reference/en/p5 copy/constants/QUADS.mdx  |  18 +
 .../en/p5 copy/constants/QUAD_STRIP.mdx       |  18 +
 .../en/p5 copy/constants/QUARTER_PI.mdx       | 109 +++
 .../en/p5 copy/constants/RADIANS.mdx          |  66 ++
 .../reference/en/p5 copy/constants/RADIUS.mdx |  18 +
 .../reference/en/p5 copy/constants/REMOVE.mdx |  18 +
 .../reference/en/p5 copy/constants/REPEAT.mdx |  18 +
 .../en/p5 copy/constants/REPLACE.mdx          |  18 +
 .../reference/en/p5 copy/constants/RETURN.mdx |  18 +
 .../reference/en/p5 copy/constants/RGB.mdx    |  18 +
 .../reference/en/p5 copy/constants/RGBA.mdx   |  18 +
 .../reference/en/p5 copy/constants/RIGHT.mdx  |  18 +
 .../en/p5 copy/constants/RIGHT_ARROW.mdx      |  18 +
 .../reference/en/p5 copy/constants/ROUND.mdx  |  18 +
 .../reference/en/p5 copy/constants/SCREEN.mdx |  18 +
 .../reference/en/p5 copy/constants/SHIFT.mdx  |  18 +
 .../reference/en/p5 copy/constants/SMOOTH.mdx |  18 +
 .../en/p5 copy/constants/SOFT_LIGHT.mdx       |  18 +
 .../reference/en/p5 copy/constants/SQUARE.mdx |  18 +
 .../reference/en/p5 copy/constants/STROKE.mdx |  18 +
 .../en/p5 copy/constants/SUBTRACT.mdx         |  18 +
 .../reference/en/p5 copy/constants/TAB.mdx    |  18 +
 .../reference/en/p5 copy/constants/TAU.mdx    | 114 +++
 .../reference/en/p5 copy/constants/TESS.mdx   |  18 +
 .../reference/en/p5 copy/constants/TEXT.mdx   |  18 +
 .../en/p5 copy/constants/TEXTURE.mdx          |  18 +
 .../en/p5 copy/constants/THRESHOLD.mdx        |  18 +
 .../reference/en/p5 copy/constants/TOP.mdx    |  18 +
 .../en/p5 copy/constants/TRIANGLES.mdx        |  18 +
 .../en/p5 copy/constants/TRIANGLE_FAN.mdx     |  18 +
 .../en/p5 copy/constants/TRIANGLE_STRIP.mdx   |  18 +
 .../reference/en/p5 copy/constants/TWO_PI.mdx | 114 +++
 .../en/p5 copy/constants/UNSIGNED_BYTE.mdx    |  18 +
 .../en/p5 copy/constants/UNSIGNED_INT.mdx     |  18 +
 .../en/p5 copy/constants/UP_ARROW.mdx         |  18 +
 .../en/p5 copy/constants/VERSION.mdx          |  19 +
 .../reference/en/p5 copy/constants/WAIT.mdx   |  18 +
 .../reference/en/p5 copy/constants/WEBGL.mdx  |  91 ++
 .../reference/en/p5 copy/constants/WEBGL2.mdx |  21 +
 .../reference/en/p5 copy/constants/WORD.mdx   |  18 +
 .../reference/en/p5 copy/constrain.mdx        |  86 ++
 src/content/reference/en/p5 copy/copy.mdx     | 144 ++++
 src/content/reference/en/p5 copy/cos.mdx      | 107 +++
 src/content/reference/en/p5 copy/createA.mdx  |  93 ++
 .../reference/en/p5 copy/createAudio.mdx      |  83 ++
 .../reference/en/p5 copy/createButton.mdx     | 109 +++
 .../reference/en/p5 copy/createCamera.mdx     |  99 +++
 .../reference/en/p5 copy/createCanvas.mdx     | 191 +++++
 .../reference/en/p5 copy/createCapture.mdx    | 189 +++++
 .../reference/en/p5 copy/createCheckbox.mdx   | 131 +++
 .../en/p5 copy/createColorPicker.mdx          | 101 +++
 .../reference/en/p5 copy/createConvolver.mdx  |  78 ++
 .../reference/en/p5 copy/createDiv.mdx        |  72 ++
 .../reference/en/p5 copy/createElement.mdx    |  78 ++
 .../reference/en/p5 copy/createFileInput.mdx  | 138 +++
 .../en/p5 copy/createFilterShader.mdx         | 148 ++++
 .../en/p5 copy/createFramebuffer.mdx          | 208 +++++
 .../reference/en/p5 copy/createGraphics.mdx   | 191 +++++
 .../reference/en/p5 copy/createImage.mdx      | 172 ++++
 .../reference/en/p5 copy/createImg.mdx        | 115 +++
 .../reference/en/p5 copy/createInput.mdx      | 118 +++
 .../reference/en/p5 copy/createModel.mdx      | 193 +++++
 .../reference/en/p5 copy/createNumberDict.mdx |  57 ++
 src/content/reference/en/p5 copy/createP.mdx  |  54 ++
 .../reference/en/p5 copy/createRadio.mdx      | 223 +++++
 .../reference/en/p5 copy/createSelect.mdx     | 235 ++++++
 .../reference/en/p5 copy/createShader.mdx     | 438 ++++++++++
 .../reference/en/p5 copy/createSlider.mdx     | 162 ++++
 .../reference/en/p5 copy/createSpan.mdx       |  93 ++
 .../reference/en/p5 copy/createStringDict.mdx |  56 ++
 .../reference/en/p5 copy/createVector.mdx     | 133 +++
 .../reference/en/p5 copy/createVideo.mdx      | 135 +++
 .../reference/en/p5 copy/createWriter.mdx     | 146 ++++
 src/content/reference/en/p5 copy/cursor.mdx   | 139 +++
 src/content/reference/en/p5 copy/curve.mdx    | 272 ++++++
 .../reference/en/p5 copy/curveDetail.mdx      | 117 +++
 .../reference/en/p5 copy/curvePoint.mdx       | 160 ++++
 .../reference/en/p5 copy/curveTangent.mdx     | 153 ++++
 .../reference/en/p5 copy/curveTightness.mdx   |  77 ++
 .../reference/en/p5 copy/curveVertex.mdx      | 407 +++++++++
 src/content/reference/en/p5 copy/cylinder.mdx | 282 +++++++
 src/content/reference/en/p5 copy/day.mdx      |  47 ++
 .../reference/en/p5 copy/debugMode.mdx        | 362 ++++++++
 src/content/reference/en/p5 copy/degrees.mdx  |  53 ++
 .../reference/en/p5 copy/deltaTime.mdx        |  68 ++
 src/content/reference/en/p5 copy/describe.mdx | 137 +++
 .../reference/en/p5 copy/describeElement.mdx  | 127 +++
 .../reference/en/p5 copy/deviceMoved.mdx      |  49 ++
 .../en/p5 copy/deviceOrientation.mdx          |  22 +
 .../reference/en/p5 copy/deviceShaken.mdx     |  50 ++
 .../reference/en/p5 copy/deviceTurned.mdx     |  80 ++
 .../reference/en/p5 copy/directionalLight.mdx | 277 ++++++
 .../en/p5 copy/disableFriendlyErrors.mdx      |  55 ++
 .../reference/en/p5 copy/displayDensity.mdx   |  55 ++
 .../reference/en/p5 copy/displayHeight.mdx    |  47 ++
 .../reference/en/p5 copy/displayWidth.mdx     |  47 ++
 src/content/reference/en/p5 copy/dist.mdx     | 121 +++
 .../reference/en/p5 copy/doubleClicked.mdx    | 157 ++++
 src/content/reference/en/p5 copy/draw.mdx     | 129 +++
 .../reference/en/p5 copy/drawingContext.mdx   |  78 ++
 src/content/reference/en/p5 copy/ellipse.mdx  | 164 ++++
 .../reference/en/p5 copy/ellipseMode.mdx      | 113 +++
 .../reference/en/p5 copy/ellipsoid.mdx        | 233 +++++
 .../reference/en/p5 copy/emissiveMaterial.mdx | 140 ++++
 src/content/reference/en/p5 copy/endClip.mdx  |  43 +
 .../reference/en/p5 copy/endContour.mdx       | 133 +++
 .../reference/en/p5 copy/endGeometry.mdx      | 285 +++++++
 src/content/reference/en/p5 copy/endShape.mdx | 256 ++++++
 src/content/reference/en/p5 copy/erase.mdx    | 123 +++
 .../reference/en/p5 copy/exitPointerLock.mdx  |  82 ++
 src/content/reference/en/p5 copy/exp.mdx      |  83 ++
 src/content/reference/en/p5 copy/fill.mdx     | 312 +++++++
 src/content/reference/en/p5 copy/filter.mdx   | 330 ++++++++
 src/content/reference/en/p5 copy/float.mdx    | 116 +++
 src/content/reference/en/p5 copy/floor.mdx    |  57 ++
 src/content/reference/en/p5 copy/focused.mdx  |  50 ++
 src/content/reference/en/p5 copy/for.mdx      | 290 +++++++
 src/content/reference/en/p5 copy/fract.mdx    |  55 ++
 .../reference/en/p5 copy/frameCount.mdx       |  73 ++
 .../reference/en/p5 copy/frameRate.mdx        | 107 +++
 .../reference/en/p5 copy/freeGeometry.mdx     | 152 ++++
 .../reference/en/p5 copy/freqToMidi.mdx       |  29 +
 src/content/reference/en/p5 copy/frustum.mdx  | 175 ++++
 .../reference/en/p5 copy/fullscreen.mdx       |  63 ++
 src/content/reference/en/p5 copy/function.mdx |  19 +
 src/content/reference/en/p5 copy/get.mdx      | 178 ++++
 .../reference/en/p5 copy/getAudioContext.mdx  |  56 ++
 src/content/reference/en/p5 copy/getItem.mdx  | 151 ++++
 .../reference/en/p5 copy/getOutputVolume.mdx  |  25 +
 .../en/p5 copy/getTargetFrameRate.mdx         |  48 ++
 src/content/reference/en/p5 copy/getURL.mdx   |  46 +
 .../reference/en/p5 copy/getURLParams.mdx     |  59 ++
 .../reference/en/p5 copy/getURLPath.mdx       |  58 ++
 src/content/reference/en/p5 copy/green.mdx    | 159 ++++
 .../reference/en/p5 copy/gridOutput.mdx       | 189 +++++
 src/content/reference/en/p5 copy/height.mdx   |  87 ++
 src/content/reference/en/p5 copy/hex.mdx      | 166 ++++
 src/content/reference/en/p5 copy/hour.mdx     |  47 ++
 src/content/reference/en/p5 copy/httpDo.mdx   | 150 ++++
 src/content/reference/en/p5 copy/httpGet.mdx  | 140 ++++
 src/content/reference/en/p5 copy/httpPost.mdx | 165 ++++
 src/content/reference/en/p5 copy/hue.mdx      | 145 ++++
 src/content/reference/en/p5 copy/if.mdx       | 268 ++++++
 src/content/reference/en/p5 copy/image.mdx    | 327 ++++++++
 .../reference/en/p5 copy/imageLight.mdx       |  86 ++
 .../reference/en/p5 copy/imageMode.mdx        | 129 +++
 src/content/reference/en/p5 copy/input.mdx    |  88 ++
 src/content/reference/en/p5 copy/int.mdx      | 169 ++++
 .../reference/en/p5 copy/isLooping.mdx        |  65 ++
 src/content/reference/en/p5 copy/join.mdx     |  70 ++
 src/content/reference/en/p5 copy/key.mdx      | 106 +++
 src/content/reference/en/p5 copy/keyCode.mdx  | 128 +++
 .../reference/en/p5 copy/keyIsDown.mdx        | 142 ++++
 .../reference/en/p5 copy/keyIsPressed.mdx     | 105 +++
 .../reference/en/p5 copy/keyPressed.mdx       | 192 +++++
 .../reference/en/p5 copy/keyReleased.mdx      | 188 +++++
 src/content/reference/en/p5 copy/keyTyped.mdx | 170 ++++
 src/content/reference/en/p5 copy/lerp.mdx     | 122 +++
 .../reference/en/p5 copy/lerpColor.mdx        |  96 +++
 src/content/reference/en/p5 copy/let.mdx      |  91 ++
 .../reference/en/p5 copy/lightFalloff.mdx     | 100 +++
 .../reference/en/p5 copy/lightness.mdx        | 168 ++++
 src/content/reference/en/p5 copy/lights.mdx   |  88 ++
 src/content/reference/en/p5 copy/line.mdx     | 194 +++++
 .../reference/en/p5 copy/linePerspective.mdx  | 164 ++++
 .../reference/en/p5 copy/loadBytes.mdx        |  56 ++
 src/content/reference/en/p5 copy/loadFont.mdx | 171 ++++
 .../reference/en/p5 copy/loadImage.mdx        | 137 +++
 src/content/reference/en/p5 copy/loadJSON.mdx | 288 +++++++
 .../reference/en/p5 copy/loadModel.mdx        | 469 +++++++++++
 .../reference/en/p5 copy/loadPixels.mdx       |  61 ++
 .../reference/en/p5 copy/loadShader.mdx       | 172 ++++
 .../reference/en/p5 copy/loadSound.mdx        |  78 ++
 .../reference/en/p5 copy/loadStrings.mdx      | 188 +++++
 .../reference/en/p5 copy/loadTable.mdx        | 124 +++
 src/content/reference/en/p5 copy/loadXML.mdx  | 220 +++++
 src/content/reference/en/p5 copy/log.mdx      |  79 ++
 src/content/reference/en/p5 copy/loop.mdx     | 111 +++
 src/content/reference/en/p5 copy/mag.mdx      |  84 ++
 src/content/reference/en/p5 copy/map.mdx      | 119 +++
 src/content/reference/en/p5 copy/match.mdx    |  91 ++
 src/content/reference/en/p5 copy/matchAll.mdx | 107 +++
 src/content/reference/en/p5 copy/max.mdx      | 104 +++
 .../reference/en/p5 copy/metalness.mdx        | 142 ++++
 .../reference/en/p5 copy/midiToFreq.mdx       |  66 ++
 src/content/reference/en/p5 copy/millis.mdx   | 147 ++++
 src/content/reference/en/p5 copy/min.mdx      | 104 +++
 src/content/reference/en/p5 copy/minute.mdx   |  47 ++
 src/content/reference/en/p5 copy/model.mdx    | 155 ++++
 src/content/reference/en/p5 copy/month.mdx    |  47 ++
 .../reference/en/p5 copy/mouseButton.mdx      |  87 ++
 .../reference/en/p5 copy/mouseClicked.mdx     | 196 +++++
 .../reference/en/p5 copy/mouseDragged.mdx     | 130 +++
 .../reference/en/p5 copy/mouseIsPressed.mdx   |  73 ++
 .../reference/en/p5 copy/mouseMoved.mdx       | 118 +++
 .../reference/en/p5 copy/mousePressed.mdx     | 193 +++++
 .../reference/en/p5 copy/mouseReleased.mdx    | 195 +++++
 .../reference/en/p5 copy/mouseWheel.mdx       | 162 ++++
 src/content/reference/en/p5 copy/mouseX.mdx   | 124 +++
 src/content/reference/en/p5 copy/mouseY.mdx   | 124 +++
 src/content/reference/en/p5 copy/movedX.mdx   |  78 ++
 src/content/reference/en/p5 copy/movedY.mdx   |  78 ++
 src/content/reference/en/p5 copy/nf.mdx       | 159 ++++
 src/content/reference/en/p5 copy/nfc.mdx      | 153 ++++
 src/content/reference/en/p5 copy/nfp.mdx      | 188 +++++
 src/content/reference/en/p5 copy/nfs.mdx      | 176 ++++
 src/content/reference/en/p5 copy/noCanvas.mdx |  36 +
 src/content/reference/en/p5 copy/noCursor.mdx |  38 +
 .../reference/en/p5 copy/noDebugMode.mdx      |  54 ++
 src/content/reference/en/p5 copy/noErase.mdx  |  55 ++
 src/content/reference/en/p5 copy/noFill.mdx   |  73 ++
 src/content/reference/en/p5 copy/noLights.mdx |  79 ++
 src/content/reference/en/p5 copy/noLoop.mdx   | 139 +++
 src/content/reference/en/p5 copy/noSmooth.mdx |  92 ++
 src/content/reference/en/p5 copy/noStroke.mdx |  71 ++
 src/content/reference/en/p5 copy/noTint.mdx   |  51 ++
 src/content/reference/en/p5 copy/noise.mdx    | 282 +++++++
 .../reference/en/p5 copy/noiseDetail.mdx      | 100 +++
 .../reference/en/p5 copy/noiseSeed.mdx        |  68 ++
 src/content/reference/en/p5 copy/norm.mdx     |  69 ++
 src/content/reference/en/p5 copy/normal.mdx   | 250 ++++++
 .../reference/en/p5 copy/normalMaterial.mdx   |  55 ++
 .../reference/en/p5 copy/orbitControl.mdx     | 203 +++++
 src/content/reference/en/p5 copy/ortho.mdx    | 168 ++++
 .../reference/en/p5 copy/outputVolume.mdx     |  51 ++
 .../reference/en/p5 copy/p5.Camera.mdx        | 659 +++++++++++++++
 src/content/reference/en/p5 copy/p5.Color.mdx | 116 +++
 .../reference/en/p5 copy/p5.Element.mdx       | 545 ++++++++++++
 src/content/reference/en/p5 copy/p5.File.mdx  | 153 ++++
 src/content/reference/en/p5 copy/p5.Font.mdx  | 146 ++++
 .../reference/en/p5 copy/p5.Framebuffer.mdx   | 443 ++++++++++
 .../reference/en/p5 copy/p5.Geometry.mdx      | 793 ++++++++++++++++++
 .../reference/en/p5 copy/p5.Graphics.mdx      | 261 ++++++
 src/content/reference/en/p5 copy/p5.Image.mdx | 519 ++++++++++++
 .../reference/en/p5 copy/p5.MediaElement.mdx  | 258 ++++++
 .../reference/en/p5 copy/p5.NumberDict.mdx    |  63 ++
 .../reference/en/p5 copy/p5.PrintWriter.mdx   |  35 +
 .../reference/en/p5 copy/p5.Renderer.mdx      |  34 +
 .../reference/en/p5 copy/p5.Shader.mdx        | 433 ++++++++++
 .../reference/en/p5 copy/p5.StringDict.mdx    |  15 +
 src/content/reference/en/p5 copy/p5.Table.mdx | 213 +++++
 .../reference/en/p5 copy/p5.TableRow.mdx      |  66 ++
 .../reference/en/p5 copy/p5.TypedDict.mdx     |  66 ++
 .../reference/en/p5 copy/p5.Vector.mdx        | 673 +++++++++++++++
 src/content/reference/en/p5 copy/p5.XML.mdx   | 321 +++++++
 src/content/reference/en/p5 copy/p5.mdx       |  51 ++
 .../reference/en/p5 copy/pAccelerationX.mdx   |  21 +
 .../reference/en/p5 copy/pAccelerationY.mdx   |  21 +
 .../reference/en/p5 copy/pAccelerationZ.mdx   |  21 +
 .../reference/en/p5 copy/pRotationX.mdx       |  63 ++
 .../reference/en/p5 copy/pRotationY.mdx       |  62 ++
 .../reference/en/p5 copy/pRotationZ.mdx       |  58 ++
 .../reference/en/p5 copy/paletteLerp.mdx      |  66 ++
 src/content/reference/en/p5 copy/panorama.mdx |  76 ++
 .../reference/en/p5 copy/perspective.mdx      | 194 +++++
 .../reference/en/p5 copy/pixelDensity.mdx     |  90 ++
 src/content/reference/en/p5 copy/pixels.mdx   | 173 ++++
 src/content/reference/en/p5 copy/plane.mdx    | 152 ++++
 src/content/reference/en/p5 copy/pmouseX.mdx  |  88 ++
 src/content/reference/en/p5 copy/pmouseY.mdx  |  88 ++
 src/content/reference/en/p5 copy/point.mdx    | 229 +++++
 .../reference/en/p5 copy/pointLight.mdx       | 329 ++++++++
 src/content/reference/en/p5 copy/pop.mdx      |  20 +
 src/content/reference/en/p5 copy/pow.mdx      |  67 ++
 src/content/reference/en/p5 copy/preload.mdx  |  70 ++
 src/content/reference/en/p5 copy/print.mdx    |  55 ++
 src/content/reference/en/p5 copy/push.mdx     |  20 +
 .../reference/en/p5 copy/pwinMouseX.mdx       |  99 +++
 .../reference/en/p5 copy/pwinMouseY.mdx       |  99 +++
 src/content/reference/en/p5 copy/quad.mdx     | 233 +++++
 .../reference/en/p5 copy/quadraticVertex.mdx  | 303 +++++++
 src/content/reference/en/p5 copy/radians.mdx  |  53 ++
 src/content/reference/en/p5 copy/random.mdx   |  48 ++
 .../reference/en/p5 copy/randomGaussian.mdx   | 104 +++
 .../reference/en/p5 copy/randomSeed.mdx       |  71 ++
 src/content/reference/en/p5 copy/rect.mdx     | 209 +++++
 src/content/reference/en/p5 copy/rectMode.mdx | 142 ++++
 src/content/reference/en/p5 copy/red.mdx      | 158 ++++
 src/content/reference/en/p5 copy/redraw.mdx   | 117 +++
 src/content/reference/en/p5 copy/remove.mdx   |  57 ++
 .../reference/en/p5 copy/removeElements.mdx   |  85 ++
 .../reference/en/p5 copy/removeItem.mdx       |  97 +++
 .../en/p5 copy/requestPointerLock.mdx         |  85 ++
 .../reference/en/p5 copy/resetMatrix.mdx      |  52 ++
 .../reference/en/p5 copy/resetShader.mdx      |  95 +++
 .../reference/en/p5 copy/resizeCanvas.mdx     | 133 +++
 src/content/reference/en/p5 copy/reverse.mdx  |  43 +
 src/content/reference/en/p5 copy/rotate.mdx   | 226 +++++
 src/content/reference/en/p5 copy/rotateX.mdx  | 161 ++++
 src/content/reference/en/p5 copy/rotateY.mdx  | 161 ++++
 src/content/reference/en/p5 copy/rotateZ.mdx  | 161 ++++
 .../reference/en/p5 copy/rotationX.mdx        |  45 +
 .../reference/en/p5 copy/rotationY.mdx        |  45 +
 .../reference/en/p5 copy/rotationZ.mdx        |  47 ++
 src/content/reference/en/p5 copy/round.mdx    |  88 ++
 .../reference/en/p5 copy/sampleRate.mdx       |  26 +
 .../reference/en/p5 copy/saturation.mdx       | 201 +++++
 src/content/reference/en/p5 copy/save.mdx     | 140 ++++
 .../reference/en/p5 copy/saveCanvas.mdx       | 166 ++++
 .../reference/en/p5 copy/saveFrames.mdx       | 175 ++++
 src/content/reference/en/p5 copy/saveGif.mdx  | 119 +++
 src/content/reference/en/p5 copy/saveJSON.mdx | 170 ++++
 .../reference/en/p5 copy/saveSound.mdx        |  35 +
 .../reference/en/p5 copy/saveStrings.mdx      | 185 ++++
 .../reference/en/p5 copy/saveTable.mdx        |  70 ++
 src/content/reference/en/p5 copy/scale.mdx    | 231 +++++
 src/content/reference/en/p5 copy/second.mdx   |  47 ++
 src/content/reference/en/p5 copy/select.mdx   | 113 +++
 .../reference/en/p5 copy/selectAll.mdx        | 121 +++
 src/content/reference/en/p5 copy/set.mdx      | 157 ++++
 .../reference/en/p5 copy/setAttributes.mdx    | 163 ++++
 src/content/reference/en/p5 copy/setBPM.mdx   |  29 +
 .../reference/en/p5 copy/setCamera.mdx        |  81 ++
 .../reference/en/p5 copy/setMoveThreshold.mdx |  59 ++
 .../en/p5 copy/setShakeThreshold.mdx          |  59 ++
 src/content/reference/en/p5 copy/setup.mdx    | 111 +++
 src/content/reference/en/p5 copy/shader.mdx   | 244 ++++++
 src/content/reference/en/p5 copy/shearX.mdx   | 105 +++
 src/content/reference/en/p5 copy/shearY.mdx   | 105 +++
 .../reference/en/p5 copy/shininess.mdx        |  86 ++
 src/content/reference/en/p5 copy/shorten.mdx  |  44 +
 src/content/reference/en/p5 copy/shuffle.mdx  | 132 +++
 src/content/reference/en/p5 copy/sin.mdx      | 107 +++
 src/content/reference/en/p5 copy/smooth.mdx   |  94 +++
 src/content/reference/en/p5 copy/sort.mdx     |  63 ++
 .../reference/en/p5 copy/soundFormats.mdx     |  51 ++
 src/content/reference/en/p5 copy/soundOut.mdx |  26 +
 .../reference/en/p5 copy/specularColor.mdx    | 308 +++++++
 .../reference/en/p5 copy/specularMaterial.mdx | 311 +++++++
 src/content/reference/en/p5 copy/sphere.mdx   | 165 ++++
 src/content/reference/en/p5 copy/splice.mdx   |  58 ++
 src/content/reference/en/p5 copy/split.mdx    |  87 ++
 .../reference/en/p5 copy/splitTokens.mdx      | 180 ++++
 .../reference/en/p5 copy/spotLight.mdx        | 398 +++++++++
 src/content/reference/en/p5 copy/sq.mdx       |  83 ++
 src/content/reference/en/p5 copy/sqrt.mdx     |  84 ++
 src/content/reference/en/p5 copy/square.mdx   | 163 ++++
 .../reference/en/p5 copy/storeItem.mdx        | 149 ++++
 src/content/reference/en/p5 copy/str.mdx      | 135 +++
 src/content/reference/en/p5 copy/stroke.mdx   | 311 +++++++
 .../reference/en/p5 copy/strokeCap.mdx        |  67 ++
 .../reference/en/p5 copy/strokeJoin.mdx       | 114 +++
 .../reference/en/p5 copy/strokeWeight.mdx     |  77 ++
 src/content/reference/en/p5 copy/subset.mdx   |  59 ++
 src/content/reference/en/p5 copy/tan.mdx      |  66 ++
 src/content/reference/en/p5 copy/text.mdx     |  96 +++
 .../reference/en/p5 copy/textAlign.mdx        | 135 +++
 .../reference/en/p5 copy/textAscent.mdx       |  71 ++
 .../reference/en/p5 copy/textDescent.mdx      |  71 ++
 src/content/reference/en/p5 copy/textFont.mdx | 127 +++
 .../reference/en/p5 copy/textLeading.mdx      |  63 ++
 .../reference/en/p5 copy/textOutput.mdx       | 186 ++++
 src/content/reference/en/p5 copy/textSize.mdx |  65 ++
 .../reference/en/p5 copy/textStyle.mdx        |  79 ++
 .../reference/en/p5 copy/textWidth.mdx        |  83 ++
 src/content/reference/en/p5 copy/textWrap.mdx | 111 +++
 src/content/reference/en/p5 copy/texture.mdx  | 207 +++++
 .../reference/en/p5 copy/textureMode.mdx      | 254 ++++++
 .../reference/en/p5 copy/textureWrap.mdx      | 370 ++++++++
 src/content/reference/en/p5 copy/tint.mdx     | 201 +++++
 src/content/reference/en/p5 copy/torus.mdx    | 200 +++++
 .../reference/en/p5 copy/touchEnded.mdx       | 196 +++++
 .../reference/en/p5 copy/touchMoved.mdx       | 198 +++++
 .../reference/en/p5 copy/touchStarted.mdx     | 197 +++++
 src/content/reference/en/p5 copy/touches.mdx  | 102 +++
 .../reference/en/p5 copy/translate.mdx        | 241 ++++++
 src/content/reference/en/p5 copy/triangle.mdx | 104 +++
 src/content/reference/en/p5 copy/trim.mdx     | 113 +++
 src/content/reference/en/p5 copy/turnAxis.mdx |  54 ++
 .../reference/en/p5 copy/types/Array.mdx      | 269 ++++++
 .../reference/en/p5 copy/types/Boolean.mdx    | 273 ++++++
 .../reference/en/p5 copy/types/Number.mdx     | 201 +++++
 .../reference/en/p5 copy/types/Object.mdx     |  91 ++
 .../reference/en/p5 copy/types/String.mdx     | 153 ++++
 src/content/reference/en/p5 copy/unchar.mdx   | 114 +++
 src/content/reference/en/p5 copy/unhex.mdx    | 121 +++
 .../reference/en/p5 copy/updatePixels.mdx     |  94 +++
 .../reference/en/p5 copy/userStartAudio.mdx   |  99 +++
 src/content/reference/en/p5 copy/vertex.mdx   | 242 ++++++
 .../reference/en/p5 copy/webglVersion.mdx     | 105 +++
 src/content/reference/en/p5 copy/while.mdx    | 161 ++++
 src/content/reference/en/p5 copy/width.mdx    |  87 ++
 .../reference/en/p5 copy/winMouseX.mdx        |  61 ++
 .../reference/en/p5 copy/winMouseY.mdx        |  61 ++
 .../reference/en/p5 copy/windowHeight.mdx     |  43 +
 .../reference/en/p5 copy/windowResized.mdx    |  64 ++
 .../reference/en/p5 copy/windowWidth.mdx      |  43 +
 src/content/reference/en/p5 copy/year.mdx     |  47 ++
 523 files changed, 60155 insertions(+), 15 deletions(-)
 create mode 100644 src/content/reference/en/p5 copy/abs.mdx
 create mode 100644 src/content/reference/en/p5 copy/accelerationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/accelerationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/accelerationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/acos.mdx
 create mode 100644 src/content/reference/en/p5 copy/alpha.mdx
 create mode 100644 src/content/reference/en/p5 copy/ambientLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/ambientMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/angleMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/append.mdx
 create mode 100644 src/content/reference/en/p5 copy/applyMatrix.mdx
 create mode 100644 src/content/reference/en/p5 copy/arc.mdx
 create mode 100644 src/content/reference/en/p5 copy/arrayCopy.mdx
 create mode 100644 src/content/reference/en/p5 copy/asin.mdx
 create mode 100644 src/content/reference/en/p5 copy/atan.mdx
 create mode 100644 src/content/reference/en/p5 copy/atan2.mdx
 create mode 100644 src/content/reference/en/p5 copy/background.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseColorShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseMaterialShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseNormalShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/baseStrokeShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginClip.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginContour.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/beginShape.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezier.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierDetail.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierPoint.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierTangent.mdx
 create mode 100644 src/content/reference/en/p5 copy/bezierVertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/blend.mdx
 create mode 100644 src/content/reference/en/p5 copy/blendMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/blue.mdx
 create mode 100644 src/content/reference/en/p5 copy/boolean.mdx
 create mode 100644 src/content/reference/en/p5 copy/box.mdx
 create mode 100644 src/content/reference/en/p5 copy/brightness.mdx
 create mode 100644 src/content/reference/en/p5 copy/buildGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/byte.mdx
 create mode 100644 src/content/reference/en/p5 copy/camera.mdx
 create mode 100644 src/content/reference/en/p5 copy/ceil.mdx
 create mode 100644 src/content/reference/en/p5 copy/changed.mdx
 create mode 100644 src/content/reference/en/p5 copy/char.mdx
 create mode 100644 src/content/reference/en/p5 copy/circle.mdx
 create mode 100644 src/content/reference/en/p5 copy/class.mdx
 create mode 100644 src/content/reference/en/p5 copy/clear.mdx
 create mode 100644 src/content/reference/en/p5 copy/clearDepth.mdx
 create mode 100644 src/content/reference/en/p5 copy/clearStorage.mdx
 create mode 100644 src/content/reference/en/p5 copy/clip.mdx
 create mode 100644 src/content/reference/en/p5 copy/color.mdx
 create mode 100644 src/content/reference/en/p5 copy/colorMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/concat.mdx
 create mode 100644 src/content/reference/en/p5 copy/cone.mdx
 create mode 100644 src/content/reference/en/p5 copy/console.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ADD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ALT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/AUTO.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/AXES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BASELINE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BEVEL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BEZIER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BLEND.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BLUR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BOLD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BOTTOM.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/BURN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CENTER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CHAR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CHORD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CLAMP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CLOSE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CONTAIN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CONTROL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CORNER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CORNERS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/COVER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CROSS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/CURVE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DARKEST.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DEGREES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DELETE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DILATE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DODGE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ENTER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ERODE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ESCAPE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FALLBACK.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FILL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FLAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/FLOAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/GRAY.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/GRID.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HALF_PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HAND.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HSB.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/HSL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/IMAGE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/INVERT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ITALIC.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LABEL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LEFT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINEAR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MIRROR.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MITER.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MOVE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/NEAREST.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/NORMAL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OPAQUE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OPEN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OPTION.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/OVERLAY.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/P2D.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PIE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/POINTS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/PROJECT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUADS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RADIANS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RADIUS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/REMOVE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/REPEAT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/REPLACE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RETURN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RGB.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RGBA.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RIGHT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/ROUND.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SCREEN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SHIFT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SMOOTH.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SQUARE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/STROKE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TAB.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TAU.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TESS.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TEXT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TEXTURE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TOP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/TWO_PI.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/VERSION.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WAIT.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WEBGL.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WEBGL2.mdx
 create mode 100644 src/content/reference/en/p5 copy/constants/WORD.mdx
 create mode 100644 src/content/reference/en/p5 copy/constrain.mdx
 create mode 100644 src/content/reference/en/p5 copy/copy.mdx
 create mode 100644 src/content/reference/en/p5 copy/cos.mdx
 create mode 100644 src/content/reference/en/p5 copy/createA.mdx
 create mode 100644 src/content/reference/en/p5 copy/createAudio.mdx
 create mode 100644 src/content/reference/en/p5 copy/createButton.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCamera.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCapture.mdx
 create mode 100644 src/content/reference/en/p5 copy/createCheckbox.mdx
 create mode 100644 src/content/reference/en/p5 copy/createColorPicker.mdx
 create mode 100644 src/content/reference/en/p5 copy/createConvolver.mdx
 create mode 100644 src/content/reference/en/p5 copy/createDiv.mdx
 create mode 100644 src/content/reference/en/p5 copy/createElement.mdx
 create mode 100644 src/content/reference/en/p5 copy/createFileInput.mdx
 create mode 100644 src/content/reference/en/p5 copy/createFilterShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/createFramebuffer.mdx
 create mode 100644 src/content/reference/en/p5 copy/createGraphics.mdx
 create mode 100644 src/content/reference/en/p5 copy/createImage.mdx
 create mode 100644 src/content/reference/en/p5 copy/createImg.mdx
 create mode 100644 src/content/reference/en/p5 copy/createInput.mdx
 create mode 100644 src/content/reference/en/p5 copy/createModel.mdx
 create mode 100644 src/content/reference/en/p5 copy/createNumberDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/createP.mdx
 create mode 100644 src/content/reference/en/p5 copy/createRadio.mdx
 create mode 100644 src/content/reference/en/p5 copy/createSelect.mdx
 create mode 100644 src/content/reference/en/p5 copy/createShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/createSlider.mdx
 create mode 100644 src/content/reference/en/p5 copy/createSpan.mdx
 create mode 100644 src/content/reference/en/p5 copy/createStringDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/createVector.mdx
 create mode 100644 src/content/reference/en/p5 copy/createVideo.mdx
 create mode 100644 src/content/reference/en/p5 copy/createWriter.mdx
 create mode 100644 src/content/reference/en/p5 copy/cursor.mdx
 create mode 100644 src/content/reference/en/p5 copy/curve.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveDetail.mdx
 create mode 100644 src/content/reference/en/p5 copy/curvePoint.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveTangent.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveTightness.mdx
 create mode 100644 src/content/reference/en/p5 copy/curveVertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/cylinder.mdx
 create mode 100644 src/content/reference/en/p5 copy/day.mdx
 create mode 100644 src/content/reference/en/p5 copy/debugMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/degrees.mdx
 create mode 100644 src/content/reference/en/p5 copy/deltaTime.mdx
 create mode 100644 src/content/reference/en/p5 copy/describe.mdx
 create mode 100644 src/content/reference/en/p5 copy/describeElement.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceMoved.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceOrientation.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceShaken.mdx
 create mode 100644 src/content/reference/en/p5 copy/deviceTurned.mdx
 create mode 100644 src/content/reference/en/p5 copy/directionalLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
 create mode 100644 src/content/reference/en/p5 copy/displayDensity.mdx
 create mode 100644 src/content/reference/en/p5 copy/displayHeight.mdx
 create mode 100644 src/content/reference/en/p5 copy/displayWidth.mdx
 create mode 100644 src/content/reference/en/p5 copy/dist.mdx
 create mode 100644 src/content/reference/en/p5 copy/doubleClicked.mdx
 create mode 100644 src/content/reference/en/p5 copy/draw.mdx
 create mode 100644 src/content/reference/en/p5 copy/drawingContext.mdx
 create mode 100644 src/content/reference/en/p5 copy/ellipse.mdx
 create mode 100644 src/content/reference/en/p5 copy/ellipseMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/ellipsoid.mdx
 create mode 100644 src/content/reference/en/p5 copy/emissiveMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/endClip.mdx
 create mode 100644 src/content/reference/en/p5 copy/endContour.mdx
 create mode 100644 src/content/reference/en/p5 copy/endGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/endShape.mdx
 create mode 100644 src/content/reference/en/p5 copy/erase.mdx
 create mode 100644 src/content/reference/en/p5 copy/exitPointerLock.mdx
 create mode 100644 src/content/reference/en/p5 copy/exp.mdx
 create mode 100644 src/content/reference/en/p5 copy/fill.mdx
 create mode 100644 src/content/reference/en/p5 copy/filter.mdx
 create mode 100644 src/content/reference/en/p5 copy/float.mdx
 create mode 100644 src/content/reference/en/p5 copy/floor.mdx
 create mode 100644 src/content/reference/en/p5 copy/focused.mdx
 create mode 100644 src/content/reference/en/p5 copy/for.mdx
 create mode 100644 src/content/reference/en/p5 copy/fract.mdx
 create mode 100644 src/content/reference/en/p5 copy/frameCount.mdx
 create mode 100644 src/content/reference/en/p5 copy/frameRate.mdx
 create mode 100644 src/content/reference/en/p5 copy/freeGeometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/freqToMidi.mdx
 create mode 100644 src/content/reference/en/p5 copy/frustum.mdx
 create mode 100644 src/content/reference/en/p5 copy/fullscreen.mdx
 create mode 100644 src/content/reference/en/p5 copy/function.mdx
 create mode 100644 src/content/reference/en/p5 copy/get.mdx
 create mode 100644 src/content/reference/en/p5 copy/getAudioContext.mdx
 create mode 100644 src/content/reference/en/p5 copy/getItem.mdx
 create mode 100644 src/content/reference/en/p5 copy/getOutputVolume.mdx
 create mode 100644 src/content/reference/en/p5 copy/getTargetFrameRate.mdx
 create mode 100644 src/content/reference/en/p5 copy/getURL.mdx
 create mode 100644 src/content/reference/en/p5 copy/getURLParams.mdx
 create mode 100644 src/content/reference/en/p5 copy/getURLPath.mdx
 create mode 100644 src/content/reference/en/p5 copy/green.mdx
 create mode 100644 src/content/reference/en/p5 copy/gridOutput.mdx
 create mode 100644 src/content/reference/en/p5 copy/height.mdx
 create mode 100644 src/content/reference/en/p5 copy/hex.mdx
 create mode 100644 src/content/reference/en/p5 copy/hour.mdx
 create mode 100644 src/content/reference/en/p5 copy/httpDo.mdx
 create mode 100644 src/content/reference/en/p5 copy/httpGet.mdx
 create mode 100644 src/content/reference/en/p5 copy/httpPost.mdx
 create mode 100644 src/content/reference/en/p5 copy/hue.mdx
 create mode 100644 src/content/reference/en/p5 copy/if.mdx
 create mode 100644 src/content/reference/en/p5 copy/image.mdx
 create mode 100644 src/content/reference/en/p5 copy/imageLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/imageMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/input.mdx
 create mode 100644 src/content/reference/en/p5 copy/int.mdx
 create mode 100644 src/content/reference/en/p5 copy/isLooping.mdx
 create mode 100644 src/content/reference/en/p5 copy/join.mdx
 create mode 100644 src/content/reference/en/p5 copy/key.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyCode.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyIsDown.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyIsPressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyPressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyReleased.mdx
 create mode 100644 src/content/reference/en/p5 copy/keyTyped.mdx
 create mode 100644 src/content/reference/en/p5 copy/lerp.mdx
 create mode 100644 src/content/reference/en/p5 copy/lerpColor.mdx
 create mode 100644 src/content/reference/en/p5 copy/let.mdx
 create mode 100644 src/content/reference/en/p5 copy/lightFalloff.mdx
 create mode 100644 src/content/reference/en/p5 copy/lightness.mdx
 create mode 100644 src/content/reference/en/p5 copy/lights.mdx
 create mode 100644 src/content/reference/en/p5 copy/line.mdx
 create mode 100644 src/content/reference/en/p5 copy/linePerspective.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadBytes.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadFont.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadImage.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadJSON.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadModel.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadPixels.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadSound.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadStrings.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadTable.mdx
 create mode 100644 src/content/reference/en/p5 copy/loadXML.mdx
 create mode 100644 src/content/reference/en/p5 copy/log.mdx
 create mode 100644 src/content/reference/en/p5 copy/loop.mdx
 create mode 100644 src/content/reference/en/p5 copy/mag.mdx
 create mode 100644 src/content/reference/en/p5 copy/map.mdx
 create mode 100644 src/content/reference/en/p5 copy/match.mdx
 create mode 100644 src/content/reference/en/p5 copy/matchAll.mdx
 create mode 100644 src/content/reference/en/p5 copy/max.mdx
 create mode 100644 src/content/reference/en/p5 copy/metalness.mdx
 create mode 100644 src/content/reference/en/p5 copy/midiToFreq.mdx
 create mode 100644 src/content/reference/en/p5 copy/millis.mdx
 create mode 100644 src/content/reference/en/p5 copy/min.mdx
 create mode 100644 src/content/reference/en/p5 copy/minute.mdx
 create mode 100644 src/content/reference/en/p5 copy/model.mdx
 create mode 100644 src/content/reference/en/p5 copy/month.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseButton.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseClicked.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseDragged.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseIsPressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseMoved.mdx
 create mode 100644 src/content/reference/en/p5 copy/mousePressed.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseReleased.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseWheel.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/mouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/movedX.mdx
 create mode 100644 src/content/reference/en/p5 copy/movedY.mdx
 create mode 100644 src/content/reference/en/p5 copy/nf.mdx
 create mode 100644 src/content/reference/en/p5 copy/nfc.mdx
 create mode 100644 src/content/reference/en/p5 copy/nfp.mdx
 create mode 100644 src/content/reference/en/p5 copy/nfs.mdx
 create mode 100644 src/content/reference/en/p5 copy/noCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/noCursor.mdx
 create mode 100644 src/content/reference/en/p5 copy/noDebugMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/noErase.mdx
 create mode 100644 src/content/reference/en/p5 copy/noFill.mdx
 create mode 100644 src/content/reference/en/p5 copy/noLights.mdx
 create mode 100644 src/content/reference/en/p5 copy/noLoop.mdx
 create mode 100644 src/content/reference/en/p5 copy/noSmooth.mdx
 create mode 100644 src/content/reference/en/p5 copy/noStroke.mdx
 create mode 100644 src/content/reference/en/p5 copy/noTint.mdx
 create mode 100644 src/content/reference/en/p5 copy/noise.mdx
 create mode 100644 src/content/reference/en/p5 copy/noiseDetail.mdx
 create mode 100644 src/content/reference/en/p5 copy/noiseSeed.mdx
 create mode 100644 src/content/reference/en/p5 copy/norm.mdx
 create mode 100644 src/content/reference/en/p5 copy/normal.mdx
 create mode 100644 src/content/reference/en/p5 copy/normalMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/orbitControl.mdx
 create mode 100644 src/content/reference/en/p5 copy/ortho.mdx
 create mode 100644 src/content/reference/en/p5 copy/outputVolume.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Camera.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Color.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Element.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.File.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Font.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Framebuffer.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Geometry.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Graphics.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Image.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.MediaElement.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.NumberDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.PrintWriter.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Renderer.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Shader.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.StringDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Table.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.TableRow.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.TypedDict.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.Vector.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.XML.mdx
 create mode 100644 src/content/reference/en/p5 copy/p5.mdx
 create mode 100644 src/content/reference/en/p5 copy/pAccelerationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pAccelerationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/pAccelerationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/pRotationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pRotationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/pRotationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/paletteLerp.mdx
 create mode 100644 src/content/reference/en/p5 copy/panorama.mdx
 create mode 100644 src/content/reference/en/p5 copy/perspective.mdx
 create mode 100644 src/content/reference/en/p5 copy/pixelDensity.mdx
 create mode 100644 src/content/reference/en/p5 copy/pixels.mdx
 create mode 100644 src/content/reference/en/p5 copy/plane.mdx
 create mode 100644 src/content/reference/en/p5 copy/pmouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pmouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/point.mdx
 create mode 100644 src/content/reference/en/p5 copy/pointLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/pop.mdx
 create mode 100644 src/content/reference/en/p5 copy/pow.mdx
 create mode 100644 src/content/reference/en/p5 copy/preload.mdx
 create mode 100644 src/content/reference/en/p5 copy/print.mdx
 create mode 100644 src/content/reference/en/p5 copy/push.mdx
 create mode 100644 src/content/reference/en/p5 copy/pwinMouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/pwinMouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/quad.mdx
 create mode 100644 src/content/reference/en/p5 copy/quadraticVertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/radians.mdx
 create mode 100644 src/content/reference/en/p5 copy/random.mdx
 create mode 100644 src/content/reference/en/p5 copy/randomGaussian.mdx
 create mode 100644 src/content/reference/en/p5 copy/randomSeed.mdx
 create mode 100644 src/content/reference/en/p5 copy/rect.mdx
 create mode 100644 src/content/reference/en/p5 copy/rectMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/red.mdx
 create mode 100644 src/content/reference/en/p5 copy/redraw.mdx
 create mode 100644 src/content/reference/en/p5 copy/remove.mdx
 create mode 100644 src/content/reference/en/p5 copy/removeElements.mdx
 create mode 100644 src/content/reference/en/p5 copy/removeItem.mdx
 create mode 100644 src/content/reference/en/p5 copy/requestPointerLock.mdx
 create mode 100644 src/content/reference/en/p5 copy/resetMatrix.mdx
 create mode 100644 src/content/reference/en/p5 copy/resetShader.mdx
 create mode 100644 src/content/reference/en/p5 copy/resizeCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/reverse.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotate.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotateX.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotateY.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotateZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotationX.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotationY.mdx
 create mode 100644 src/content/reference/en/p5 copy/rotationZ.mdx
 create mode 100644 src/content/reference/en/p5 copy/round.mdx
 create mode 100644 src/content/reference/en/p5 copy/sampleRate.mdx
 create mode 100644 src/content/reference/en/p5 copy/saturation.mdx
 create mode 100644 src/content/reference/en/p5 copy/save.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveCanvas.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveFrames.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveGif.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveJSON.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveSound.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveStrings.mdx
 create mode 100644 src/content/reference/en/p5 copy/saveTable.mdx
 create mode 100644 src/content/reference/en/p5 copy/scale.mdx
 create mode 100644 src/content/reference/en/p5 copy/second.mdx
 create mode 100644 src/content/reference/en/p5 copy/select.mdx
 create mode 100644 src/content/reference/en/p5 copy/selectAll.mdx
 create mode 100644 src/content/reference/en/p5 copy/set.mdx
 create mode 100644 src/content/reference/en/p5 copy/setAttributes.mdx
 create mode 100644 src/content/reference/en/p5 copy/setBPM.mdx
 create mode 100644 src/content/reference/en/p5 copy/setCamera.mdx
 create mode 100644 src/content/reference/en/p5 copy/setMoveThreshold.mdx
 create mode 100644 src/content/reference/en/p5 copy/setShakeThreshold.mdx
 create mode 100644 src/content/reference/en/p5 copy/setup.mdx
 create mode 100644 src/content/reference/en/p5 copy/shader.mdx
 create mode 100644 src/content/reference/en/p5 copy/shearX.mdx
 create mode 100644 src/content/reference/en/p5 copy/shearY.mdx
 create mode 100644 src/content/reference/en/p5 copy/shininess.mdx
 create mode 100644 src/content/reference/en/p5 copy/shorten.mdx
 create mode 100644 src/content/reference/en/p5 copy/shuffle.mdx
 create mode 100644 src/content/reference/en/p5 copy/sin.mdx
 create mode 100644 src/content/reference/en/p5 copy/smooth.mdx
 create mode 100644 src/content/reference/en/p5 copy/sort.mdx
 create mode 100644 src/content/reference/en/p5 copy/soundFormats.mdx
 create mode 100644 src/content/reference/en/p5 copy/soundOut.mdx
 create mode 100644 src/content/reference/en/p5 copy/specularColor.mdx
 create mode 100644 src/content/reference/en/p5 copy/specularMaterial.mdx
 create mode 100644 src/content/reference/en/p5 copy/sphere.mdx
 create mode 100644 src/content/reference/en/p5 copy/splice.mdx
 create mode 100644 src/content/reference/en/p5 copy/split.mdx
 create mode 100644 src/content/reference/en/p5 copy/splitTokens.mdx
 create mode 100644 src/content/reference/en/p5 copy/spotLight.mdx
 create mode 100644 src/content/reference/en/p5 copy/sq.mdx
 create mode 100644 src/content/reference/en/p5 copy/sqrt.mdx
 create mode 100644 src/content/reference/en/p5 copy/square.mdx
 create mode 100644 src/content/reference/en/p5 copy/storeItem.mdx
 create mode 100644 src/content/reference/en/p5 copy/str.mdx
 create mode 100644 src/content/reference/en/p5 copy/stroke.mdx
 create mode 100644 src/content/reference/en/p5 copy/strokeCap.mdx
 create mode 100644 src/content/reference/en/p5 copy/strokeJoin.mdx
 create mode 100644 src/content/reference/en/p5 copy/strokeWeight.mdx
 create mode 100644 src/content/reference/en/p5 copy/subset.mdx
 create mode 100644 src/content/reference/en/p5 copy/tan.mdx
 create mode 100644 src/content/reference/en/p5 copy/text.mdx
 create mode 100644 src/content/reference/en/p5 copy/textAlign.mdx
 create mode 100644 src/content/reference/en/p5 copy/textAscent.mdx
 create mode 100644 src/content/reference/en/p5 copy/textDescent.mdx
 create mode 100644 src/content/reference/en/p5 copy/textFont.mdx
 create mode 100644 src/content/reference/en/p5 copy/textLeading.mdx
 create mode 100644 src/content/reference/en/p5 copy/textOutput.mdx
 create mode 100644 src/content/reference/en/p5 copy/textSize.mdx
 create mode 100644 src/content/reference/en/p5 copy/textStyle.mdx
 create mode 100644 src/content/reference/en/p5 copy/textWidth.mdx
 create mode 100644 src/content/reference/en/p5 copy/textWrap.mdx
 create mode 100644 src/content/reference/en/p5 copy/texture.mdx
 create mode 100644 src/content/reference/en/p5 copy/textureMode.mdx
 create mode 100644 src/content/reference/en/p5 copy/textureWrap.mdx
 create mode 100644 src/content/reference/en/p5 copy/tint.mdx
 create mode 100644 src/content/reference/en/p5 copy/torus.mdx
 create mode 100644 src/content/reference/en/p5 copy/touchEnded.mdx
 create mode 100644 src/content/reference/en/p5 copy/touchMoved.mdx
 create mode 100644 src/content/reference/en/p5 copy/touchStarted.mdx
 create mode 100644 src/content/reference/en/p5 copy/touches.mdx
 create mode 100644 src/content/reference/en/p5 copy/translate.mdx
 create mode 100644 src/content/reference/en/p5 copy/triangle.mdx
 create mode 100644 src/content/reference/en/p5 copy/trim.mdx
 create mode 100644 src/content/reference/en/p5 copy/turnAxis.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Array.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Boolean.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Number.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/Object.mdx
 create mode 100644 src/content/reference/en/p5 copy/types/String.mdx
 create mode 100644 src/content/reference/en/p5 copy/unchar.mdx
 create mode 100644 src/content/reference/en/p5 copy/unhex.mdx
 create mode 100644 src/content/reference/en/p5 copy/updatePixels.mdx
 create mode 100644 src/content/reference/en/p5 copy/userStartAudio.mdx
 create mode 100644 src/content/reference/en/p5 copy/vertex.mdx
 create mode 100644 src/content/reference/en/p5 copy/webglVersion.mdx
 create mode 100644 src/content/reference/en/p5 copy/while.mdx
 create mode 100644 src/content/reference/en/p5 copy/width.mdx
 create mode 100644 src/content/reference/en/p5 copy/winMouseX.mdx
 create mode 100644 src/content/reference/en/p5 copy/winMouseY.mdx
 create mode 100644 src/content/reference/en/p5 copy/windowHeight.mdx
 create mode 100644 src/content/reference/en/p5 copy/windowResized.mdx
 create mode 100644 src/content/reference/en/p5 copy/windowWidth.mdx
 create mode 100644 src/content/reference/en/p5 copy/year.mdx

diff --git a/.github/actions/translation-tracker/README.md b/.github/actions/translation-tracker/README.md
index 90ffdf1275..0c9a7e698e 100644
--- a/.github/actions/translation-tracker/README.md
+++ b/.github/actions/translation-tracker/README.md
@@ -6,7 +6,7 @@ Automatically tracks translation status, creates GitHub issues for outdated tran
 
 - Detects outdated/missing translations using Git commit comparison
 - Creates GitHub issues with diff snippets and action checklists
-- **Week 2:** Generates translation stub files and opens **one PR per language**
+- Generates translation stub files and opens **one PR per language**
 - Shows localized banners on outdated translation pages
 - Supports Spanish, Hindi, Korean, and Chinese Simplified
 
@@ -64,26 +64,30 @@ GENERATE_STUBS=true STUB_FULL_SCAN=true STUB_MAX_FILES=10 STUB_LANGUAGES=es,hi \
 
 ### GitHub Actions
 
-| Workflow | Trigger | What it does |
-|----------|---------|----------------|
-| `translation-sync.yml` | Push to `examples/en`, `tutorials/en` | Issues + manifests |
+
+| Workflow                | Trigger                                    | What it does                            |
+| ----------------------- | ------------------------------------------ | --------------------------------------- |
+| `translation-sync.yml`  | Push to `examples/en`, `tutorials/en`      | Issues + manifests                      |
 | `translation-stubs.yml` | Push to `reference/en`, or manual dispatch | Stub PRs (default: es, hi, ko, zh-Hans) |
 
+
 Manual stub run: Actions → **Translation Stub Generator** → Run workflow → optional full scan.
 
 ## Environment Variables
 
-| Variable | Purpose |
-|----------|---------|
-| `GITHUB_TOKEN` | API access (issues, PRs) |
-| `GITHUB_REPOSITORY` | `owner/repo` (default: `processing/p5.js-website`) |
-| `GENERATE_STUBS` | `true` = stub mode instead of issue tracking |
-| `STUB_LANGUAGES` | Comma-separated (default: `es`, `hi`, `ko`, `zh-Hans`) |
-| `STUB_CONTENT_TYPES` | Comma-separated (default: `reference`) |
-| `STUB_FULL_SCAN` | `true` = all English files, not just latest commit |
-| `STUB_DRY_RUN` | `true` = write to `stub-preview/`, no PR |
-| `STUB_MAX_FILES` | Max stubs per language per run (default: `50`) |
-| `STUB_OUTPUT_DIR` | Custom dry-run output directory |
+
+| Variable             | Purpose                                                |
+| -------------------- | ------------------------------------------------------ |
+| `GITHUB_TOKEN`       | API access (issues, PRs)                               |
+| `GITHUB_REPOSITORY`  | `owner/repo` (default: `processing/p5.js-website`)     |
+| `GENERATE_STUBS`     | `true` = stub mode instead of issue tracking           |
+| `STUB_LANGUAGES`     | Comma-separated (default: `es`, `hi`, `ko`, `zh-Hans`) |
+| `STUB_CONTENT_TYPES` | Comma-separated (default: `reference`)                 |
+| `STUB_FULL_SCAN`     | `true` = all English files, not just latest commit     |
+| `STUB_DRY_RUN`       | `true` = write to `stub-preview/`, no PR               |
+| `STUB_MAX_FILES`     | Max stubs per language per run (default: `50`)         |
+| `STUB_OUTPUT_DIR`    | Custom dry-run output directory                        |
+
 
 ## What stubs contain
 
@@ -98,3 +102,4 @@ For each English file with **no** translation yet:
 
 - `@octokit/rest`, `js-yaml`
 - Node.js built-ins: `fs`, `path`, `child_process`
+
diff --git a/src/content/reference/en/p5 copy/abs.mdx b/src/content/reference/en/p5 copy/abs.mdx
new file mode 100644
index 0000000000..1bdb6895ff
--- /dev/null
+++ b/src/content/reference/en/p5 copy/abs.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L10
+title: abs
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the absolute value of a number.</p>
+
+  <p>A number's absolute value is its distance from zero on the number line.
+
+  -5 and 5 are both five units away from zero, so calling <code>abs(-5)</code>
+  and
+
+  <code>abs(5)</code> both return 5. The absolute value of a number is always
+  positive.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Divide the canvas.
+      line(50, 0, 50, 100);
+
+      // Calculate the mouse's distance from the middle.
+      let h = abs(mouseX - 50);
+
+      // Draw a rectangle based on the mouse's distance
+      // from the middle.
+      rect(0, 100 - h, 100, h);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to compute.</p>
+    type: Number
+return:
+  description: absolute value of given number.
+  type: Number
+chainable: false
+---
+
+
+# abs
diff --git a/src/content/reference/en/p5 copy/accelerationX.mdx b/src/content/reference/en/p5 copy/accelerationX.mdx
new file mode 100644
index 0000000000..6a47fc46ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/accelerationX.mdx	
@@ -0,0 +1,37 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L23
+title: accelerationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationX always contains the acceleration of the
+
+  device along the x axis. Value is represented as meters per second
+  squared.</p>
+line: 23
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationX);
+      describe('Magnitude of device acceleration is displayed as ellipse size.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# accelerationX
diff --git a/src/content/reference/en/p5 copy/accelerationY.mdx b/src/content/reference/en/p5 copy/accelerationY.mdx
new file mode 100644
index 0000000000..bf5f54e39b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/accelerationY.mdx	
@@ -0,0 +1,37 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L45
+title: accelerationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationY always contains the acceleration of the
+
+  device along the y axis. Value is represented as meters per second
+  squared.</p>
+line: 45
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationY);
+      describe('Magnitude of device acceleration is displayed as ellipse size');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# accelerationY
diff --git a/src/content/reference/en/p5 copy/accelerationZ.mdx b/src/content/reference/en/p5 copy/accelerationZ.mdx
new file mode 100644
index 0000000000..11e5cbb53e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/accelerationZ.mdx	
@@ -0,0 +1,37 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L67
+title: accelerationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable accelerationZ always contains the acceleration of the
+
+  device along the z axis. Value is represented as meters per second
+  squared.</p>
+line: 67
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move a touchscreen device to register
+    // acceleration changes.
+    function draw() {
+      background(220, 50);
+      fill('magenta');
+      ellipse(width / 2, height / 2, accelerationZ);
+      describe('Magnitude of device acceleration is displayed as ellipse size');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# accelerationZ
diff --git a/src/content/reference/en/p5 copy/acos.mdx b/src/content/reference/en/p5 copy/acos.mdx
new file mode 100644
index 0000000000..c9ed943f5e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/acos.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L18
+title: acos
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the arc cosine of a number.</p>
+
+  <p><code>acos()</code> is the inverse of <a
+  href="/reference/p5/cos/">cos()</a>. It expects
+
+  arguments in the range -1 to 1. By default, <code>acos()</code> returns values
+  in the
+
+  range 0 to π (about 3.14). If the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
+  then values are
+
+  returned in the range 0 to 180.</p>
+line: 18
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate cos() and acos() values.
+      let a = PI;
+      let c = cos(a);
+      let ac = acos(c);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(c, 3)}`, 35, 50);
+      text(`${round(ac, 3)}`, 35, 75);
+
+      describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate cos() and acos() values.
+      let a = PI + QUARTER_PI;
+      let c = cos(a);
+      let ac = acos(c);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(c, 3)}`, 35, 50);
+      text(`${round(ac, 3)}`, 35, 75);
+
+      describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>value whose arc cosine is to be returned.</p>
+    type: Number
+return:
+  description: arc cosine of the given value.
+  type: Number
+chainable: false
+---
+
+
+# acos
diff --git a/src/content/reference/en/p5 copy/alpha.mdx b/src/content/reference/en/p5 copy/alpha.mdx
new file mode 100644
index 0000000000..c1a87aa78d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/alpha.mdx	
@@ -0,0 +1,120 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L16
+title: alpha
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the alpha (transparency) value of a color.</p>
+
+  <p><code>alpha()</code> extracts the alpha value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+line: 16
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let c = color(0, 126, 255, 102);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'alphaValue' to 102.
+      let alphaValue = alpha(c);
+
+      // Draw the right rectangle.
+      fill(alphaValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [0, 126, 255, 102];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'alphaValue' to 102.
+      let alphaValue = alpha(c);
+
+      // Draw the left rectangle.
+      fill(alphaValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgba(0, 126, 255, 0.4)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'alphaValue' to 102.
+      let alphaValue = alpha(c);
+
+      // Draw the right rectangle.
+      fill(alphaValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the alpha value.
+  type: Number
+chainable: false
+---
+
+
+# alpha
diff --git a/src/content/reference/en/p5 copy/ambientLight.mdx b/src/content/reference/en/p5 copy/ambientLight.mdx
new file mode 100644
index 0000000000..09f9159592
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ambientLight.mdx	
@@ -0,0 +1,241 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L10
+title: ambientLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines from all directions.</p>
+
+  <p>Ambient light does not come from one direction. Instead, 3D shapes are
+
+  lit evenly from all sides. Ambient lights are almost always used in
+
+  combination with other types of lights.</p>
+
+  <p>There are three ways to call <code>ambientLight()</code> with optional
+  parameters to
+
+  set the light’s color.</p>
+
+  <p>The first way to call <code>ambientLight()</code> has two parameters,
+  <code>gray</code> and
+
+  <code>alpha</code>. <code>alpha</code> is optional. Grayscale and alpha values
+  between 0 and 255
+
+  can be passed to set the ambient light’s color, as in
+  <code>ambientLight(50)</code> or
+
+  <code>ambientLight(50, 30)</code>.</p>
+
+  <p>The second way to call <code>ambientLight()</code> has one parameter,
+  color. A
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  values, or a
+
+  CSS color string, as in <code>ambientLight('magenta')</code>, can be passed to
+  set the
+
+  ambient light’s color.</p>
+
+  <p>The third way to call <code>ambientLight()</code> has four parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
+  HSBA, or HSLA values can be
+
+  passed to set the ambient light’s colors, as in <code>ambientLight(255, 0,
+  0)</code>
+
+  or <code>ambientLight(255, 0, 0, 30)</code>. Color values will be interpreted
+  using
+
+  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to turn on the light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the light.
+      if (isLit === true) {
+        // Use a grayscale value of 80.
+        ambientLight(80);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the ambient light when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A faded magenta sphere drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      // Use a p5.Color object.
+      let c = color('orchid');
+      ambientLight(c);
+
+      // Draw the sphere.
+      sphere();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A faded magenta sphere drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      // Use a CSS color string.
+      ambientLight('#DA70D6');
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A faded magenta sphere drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      // Use RGB values
+      ambientLight(218, 112, 214);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 10
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha (transparency) value in the current
+                                          <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 164
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 and 255.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 171
+    params:
+      - name: value
+        description: |
+          <p>color as a CSS string.</p>
+        type: String
+    chainable: 1
+  - line: 177
+    params:
+      - name: values
+        description: |
+          <p>color as an array of RGBA, HSBA, or HSLA
+                                          values.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 184
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# ambientLight
diff --git a/src/content/reference/en/p5 copy/ambientMaterial.mdx b/src/content/reference/en/p5 copy/ambientMaterial.mdx
new file mode 100644
index 0000000000..8b96f24260
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ambientMaterial.mdx	
@@ -0,0 +1,269 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2416
+title: ambientMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the ambient color of shapes’ surface material.</p>
+
+  <p>The <code>ambientMaterial()</code> color sets the components of the
+
+  <a href="/reference/p5/ambientLight/">ambientLight()</a> color that shapes
+  will
+
+  reflect. For example, calling <code>ambientMaterial(255, 255, 0)</code> would
+  cause a
+
+  shape to reflect red and green light, but not blue light.</p>
+
+  <p><code>ambientMaterial()</code> can be called three ways with different
+  parameters to
+
+  set the material’s color.</p>
+
+  <p>The first way to call <code>ambientMaterial()</code> has one parameter,
+  <code>gray</code>.
+
+  Grayscale values between 0 and 255, as in <code>ambientMaterial(50)</code>,
+  can be
+
+  passed to set the material’s color. Higher grayscale values make shapes
+
+  appear brighter.</p>
+
+  <p>The second way to call <code>ambientMaterial()</code> has one parameter,
+  <code>color</code>. A
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  values, or a
+
+  CSS color string, as in <code>ambientMaterial('magenta')</code>, can be passed
+  to set
+
+  the material’s color.</p>
+
+  <p>The third way to call <code>ambientMaterial()</code> has three parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  and <code>v3</code>. RGB, HSB, or HSL values, as in <code>ambientMaterial(255,
+  0, 0)</code>, can
+
+  be passed to set the material’s colors. Color values will be interpreted
+
+  using the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+
+  <p>Note: <code>ambientMaterial()</code> can only be used in WebGL mode.</p>
+line: 2416
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A magenta cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A purple cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a dark gray ambient material.
+      ambientMaterial(150);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a yellow ambient material using RGB values.
+      ambientMaterial(255, 255, 0);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a yellow ambient material using a p5.Color object.
+      let c = color(255, 255, 0);
+      ambientMaterial(c);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a magenta ambient light.
+      ambientLight(255, 0, 255);
+
+      // Add a yellow ambient material using a color string.
+      ambientMaterial('yellow');
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A yellow cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white ambient light.
+      ambientLight(255, 255, 255);
+
+      // Add a yellow ambient material using a color string.
+      ambientMaterial('yellow');
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2416
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the
+                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the
+                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+    chainable: 1
+  - line: 2621
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 (black) and 255 (white).</p>
+        type: Number
+    chainable: 1
+  - line: 2627
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                     an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+    chainable: 1
+chainable: true
+---
+
+
+# ambientMaterial
diff --git a/src/content/reference/en/p5 copy/angleMode.mdx b/src/content/reference/en/p5 copy/angleMode.mdx
new file mode 100644
index 0000000000..3401a563cd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/angleMode.mdx	
@@ -0,0 +1,219 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L557
+title: angleMode
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Changes the unit system used to measure angles.</p>
+
+  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
+
+  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
+
+  <p>Functions such as <a href="/reference/p5/rotate/">rotate()</a> and
+
+  <a href="/reference/p5/sin/">sin()</a> expect angles measured radians by
+  default.
+
+  Calling <code>angleMode(DEGREES)</code> switches to degrees. Calling
+
+  <code>angleMode(RADIANS)</code> switches back to radians.</p>
+
+  <p>Calling <code>angleMode()</code> with no arguments returns current angle
+  mode, which
+
+  is either <code>RADIANS</code> or <code>DEGREES</code>.</p>
+line: 557
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Rotate 1/8 turn.
+      rotate(QUARTER_PI);
+
+      // Draw a line.
+      line(0, 0, 80, 0);
+
+      describe('A diagonal line radiating from the top-left corner of a square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Rotate 1/8 turn.
+      rotate(45);
+
+      // Draw a line.
+      line(0, 0, 80, 0);
+
+      describe('A diagonal line radiating from the top-left corner of a square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Calculate the angle to rotate.
+      let angle = TWO_PI / 7;
+
+      // Move the origin to the center.
+      translate(50, 50);
+
+      // Style the flower.
+      noStroke();
+      fill(255, 50);
+
+      // Draw the flower.
+      for (let i = 0; i < 7; i += 1) {
+        ellipse(0, 0, 80, 20);
+        rotate(angle);
+      }
+
+      describe('A translucent white flower on a dark background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Calculate the angle to rotate.
+      let angle = 360 / 7;
+
+      // Move the origin to the center.
+      translate(50, 50);
+
+      // Style the flower.
+      noStroke();
+      fill(255, 50);
+
+      // Draw the flower.
+      for (let i = 0; i < 7; i += 1) {
+        ellipse(0, 0, 80, 20);
+        rotate(angle);
+      }
+
+      describe('A translucent white flower on a dark background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white ball on a string oscillates left and right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.05) + 50;
+      let y = 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white ball on a string oscillates left and right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 2.86) + 50;
+      let y = 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the upper line.
+      rotate(PI / 6);
+      line(0, 0, 80, 0);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Draw the lower line.
+      rotate(30);
+      line(0, 0, 80, 0);
+
+      describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 557
+    params:
+      - name: mode
+        description: |
+          <p>either RADIANS or DEGREES.</p>
+        type: Constant
+  - line: 743
+    params: []
+    return:
+      description: mode either RADIANS or DEGREES
+      type: Constant
+chainable: false
+---
+
+
+# angleMode
diff --git a/src/content/reference/en/p5 copy/append.mdx b/src/content/reference/en/p5 copy/append.mdx
new file mode 100644
index 0000000000..4e0bbeb5eb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/append.mdx	
@@ -0,0 +1,48 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L10
+title: append
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Adds a value to the end of an array. Extends the length of
+  the array by one. Maps to Array.push().</p>
+line: 10
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">array.push(value)</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    function setup() {
+      let myArray = ['Mango', 'Apple', 'Papaya'];
+      print(myArray); // ['Mango', 'Apple', 'Papaya']
+
+      append(myArray, 'Peach');
+      print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
+    }
+    </code></div>
+class: p5
+params:
+  - name: array
+    description: |
+      <p>Array to append</p>
+    type: Array
+  - name: value
+    description: |
+      <p>to be added to the Array</p>
+    type: Any
+return:
+  description: the array that was appended to
+  type: Array
+chainable: false
+---
+
+
+# append
diff --git a/src/content/reference/en/p5 copy/applyMatrix.mdx b/src/content/reference/en/p5 copy/applyMatrix.mdx
new file mode 100644
index 0000000000..b105ed75da
--- /dev/null
+++ b/src/content/reference/en/p5 copy/applyMatrix.mdx	
@@ -0,0 +1,347 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L11
+title: applyMatrix
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Applies a transformation matrix to the coordinate system.</p>
+
+  <p>Transformations such as
+
+  <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and
+
+  <a href="/reference/p5/scale/">scale()</a>
+
+  use matrix-vector multiplication behind the scenes. A table of numbers,
+
+  called a matrix, encodes each transformation. The values in the matrix
+
+  then multiply each point on the canvas, which is represented by a vector.</p>
+
+  <p><code>applyMatrix()</code> allows for many transformations to be applied at
+  once. See
+
+  <a href="https://en.wikipedia.org/wiki/Transformation_matrix/"
+  target="_blank">Wikipedia</a>
+
+  and <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web/"
+  target="_blank">MDN</a>
+
+  for more details about transformations.</p>
+
+  <p>There are two ways to call <code>applyMatrix()</code> in two and three
+  dimensions.</p>
+
+  <p>In 2D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
+  <code>d</code>, <code>e</code>, and <code>f</code>, correspond to
+
+  elements in the following transformation matrix:</p>
+
+  <blockquote>
+
+  <p><img style="max-width: 150px" src="/assets/transformation-matrix.png"
+  alt="The transformation matrix used when applyMatrix is called in 2D
+  mode."/></p>
+
+  </blockquote>
+
+  <p>The numbers can be passed individually, as in
+
+  <code>applyMatrix(2, 0, 0, 0, 2, 0)</code>. They can also be passed in an
+  array, as in
+
+  <code>applyMatrix([2, 0, 0, 0, 2, 0])</code>.</p>
+
+  <p>In 3D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
+  <code>d</code>, <code>e</code>, <code>f</code>, <code>g</code>,
+  <code>h</code>, <code>i</code>,
+
+  <code>j</code>, <code>k</code>, <code>l</code>, <code>m</code>,
+  <code>n</code>, <code>o</code>, and <code>p</code> correspond to elements in
+  the
+
+  following transformation matrix:</p>
+
+  <p><img style="max-width: 300px" src="/assets/transformation-matrix-4-4.png"
+  alt="The transformation matrix used when applyMatrix is called in 3D
+  mode."/></p>
+
+  <p>The numbers can be passed individually, as in
+
+  <code>applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)</code>. They
+  can
+
+  also be passed in an array, as in
+
+  <code>applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0,
+  1])</code>.</p>
+
+  <p>By default, transformations accumulate. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>applyMatrix()</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't
+
+  cause shapes to transform continuously.</p>
+line: 11
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      applyMatrix(1, 0, 0, 1, 50, 50);
+
+      // Draw the circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      let m = [1, 0, 0, 1, 50, 50];
+      applyMatrix(m);
+
+      // Draw the circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn.
+      let angle = QUARTER_PI;
+      let ca = cos(angle);
+      let sa = sin(angle);
+      applyMatrix(ca, sa, -sa, ca, 0, 0);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Scale the coordinate system by a factor of 0.5.
+      applyMatrix(0.5, 0, 0, 0.5, 0, 0);
+
+      // Draw a square at (30, 20).
+      // It appears at (15, 10) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the shear factor.
+      let angle = QUARTER_PI;
+      let shearFactor = 1 / tan(HALF_PI - angle);
+
+      // Shear the coordinate system along the x-axis.
+      applyMatrix(1, 0, shearFactor, 1, 0, 0);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      let ca = cos(angle);
+      let sa = sin(angle);
+      applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 11
+    params:
+      - name: arr
+        description: >
+          <p>an array containing the elements of the transformation matrix. Its
+          length should be either 6 (2D) or 16 (3D).</p>
+        type: Array
+    chainable: 1
+  - line: 206
+    params:
+      - name: a
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: b
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: c
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: d
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: e
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: f
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+    chainable: 1
+  - line: 216
+    params:
+      - name: a
+        description: ''
+        type: Number
+      - name: b
+        description: ''
+        type: Number
+      - name: c
+        description: ''
+        type: Number
+      - name: d
+        description: ''
+        type: Number
+      - name: e
+        description: ''
+        type: Number
+      - name: f
+        description: ''
+        type: Number
+      - name: g
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: i
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: j
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: k
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: l
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: m
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: 'n'
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: o
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+      - name: p
+        description: |
+          <p>an element of the transformation matrix.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# applyMatrix
diff --git a/src/content/reference/en/p5 copy/arc.mdx b/src/content/reference/en/p5 copy/arc.mdx
new file mode 100644
index 0000000000..ee50708815
--- /dev/null
+++ b/src/content/reference/en/p5 copy/arc.mdx	
@@ -0,0 +1,274 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L102
+title: arc
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws an arc.</p>
+
+  <p>An arc is a section of an ellipse defined by the <code>x</code>,
+  <code>y</code>, <code>w</code>, and
+
+  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
+  of the arc's center. <code>w</code> and
+
+  <code>h</code> set the arc's width and height. See
+
+  <a href="/reference/p5/ellipse/">ellipse()</a> and
+
+  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for more details.</p>
+
+  <p>The fifth and sixth parameters, <code>start</code> and <code>stop</code>,
+  set the angles
+
+  between which to draw the arc. Arcs are always drawn clockwise from
+
+  <code>start</code> to <code>stop</code>. The fifth and sixth parameters, start
+  and stop, set the
+
+  angles between which to draw the arc. By default, angles are given in radians,
+  but if angleMode
+
+  (DEGREES) is set, the function interprets the values in degrees.</p>
+
+  <p>The seventh parameter, <code>mode</code>, is optional. It determines the
+  arc's fill
+
+  style. The fill modes are a semi-circle (<code>OPEN</code>), a closed
+  semi-circle
+
+  (<code>CHORD</code>), or a closed pie segment (<code>PIE</code>).</p>
+
+  <p>The eighth parameter, <code>detail</code>, is also optional. It determines
+  how many
+
+  vertices are used to draw the arc in WebGL mode. The default value is 25.</p>
+line: 102
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      arc(50, 50, 80, 80, 0, PI + HALF_PI);
+
+      describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      arc(50, 50, 80, 40, 0, PI + HALF_PI);
+
+      describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Bottom-right.
+      arc(50, 55, 50, 50, 0, HALF_PI);
+
+      noFill();
+
+      // Bottom-left.
+      arc(50, 55, 60, 60, HALF_PI, PI);
+
+      // Top-left.
+      arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+
+      // Top-right.
+      arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+
+      describe(
+        'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Default fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+
+      describe('A white circle with the top-right third missing. The bottom is outlined in black.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // OPEN fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+
+      describe(
+        'A white circle missing a section from the top-right. The bottom is outlined in black.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // CHORD fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+
+      describe('A white circle with a black outline missing a section from the top-right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // PIE fill mode.
+      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+
+      describe('A white circle with a black outline. The top-right third is missing.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // PIE fill mode.
+      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);
+
+      describe('A white circle with a black outline. The top-right third is missing.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // PIE fill mode with 5 vertices.
+      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);
+
+      describe('A white circle with a black outline. The top-right third is missing.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A yellow circle on a black background. The circle opens and closes its mouth.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the arc.
+      noStroke();
+      fill(255, 255, 0);
+
+      // Update start and stop angles.
+      let biteSize = PI / 16;
+      let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
+      let endAngle = TWO_PI - startAngle;
+
+      // Draw the arc.
+      arc(50, 50, 80, 80, startAngle, endAngle, PIE);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the arc's ellipse.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the arc's ellipse.</p>
+    type: Number
+  - name: w
+    description: |
+      <p>width of the arc's ellipse by default.</p>
+    type: Number
+  - name: h
+    description: |
+      <p>height of the arc's ellipse by default.</p>
+    type: Number
+  - name: start
+    description: |
+      <p>angle to start the arc, specified in radians.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>angle to stop the arc, specified in radians.</p>
+    type: Number
+  - name: mode
+    description: |
+      <p>optional parameter to determine the way of drawing
+                              the arc. either CHORD, PIE, or OPEN.</p>
+    type: Constant
+    optional: true
+  - name: detail
+    description: |
+      <p>optional parameter for WebGL mode only. This is to
+                              specify the number of vertices that makes up the
+                              perimeter of the arc. Default value is 25. Won't
+                              draw a stroke for a detail of more than 50.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# arc
diff --git a/src/content/reference/en/p5 copy/arrayCopy.mdx b/src/content/reference/en/p5 copy/arrayCopy.mdx
new file mode 100644
index 0000000000..2d149d1ed3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/arrayCopy.mdx	
@@ -0,0 +1,95 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L35
+title: arrayCopy
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: >
+  <p>Copies an array (or part of an array) to another array. The src array is
+
+  copied to the dst array, beginning at the position specified by
+
+  srcPosition and into the position specified by dstPosition. The number of
+
+  elements to copy is determined by length. Note that copying values
+
+  overwrites existing values in the destination array. To append values
+
+  instead of overwriting them, use <a
+  href="/reference/p5/concat/">concat()</a>.</p>
+
+  <p>The simplified version with only two arguments, arrayCopy(src, dst),
+
+  copies an entire array to another of the same size. It is equivalent to
+
+  arrayCopy(src, 0, dst, 0, src.length).</p>
+
+  <p>Using this function is far more efficient for copying array data than
+
+  iterating through a for() loop and copying each element individually.</p>
+line: 35
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">arr1.copyWithin(arr2)</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    let src = ['A', 'B', 'C'];
+    let dst = [1, 2, 3];
+    let srcPosition = 1;
+    let dstPosition = 0;
+    let length = 2;
+
+    print(src); // ['A', 'B', 'C']
+    print(dst); // [ 1 ,  2 ,  3 ]
+
+    arrayCopy(src, srcPosition, dst, dstPosition, length);
+    print(dst); // ['B', 'C', 3]
+    </code></div>
+class: p5
+overloads:
+  - line: 35
+    params:
+      - name: src
+        description: |
+          <p>the source Array</p>
+        type: Array
+      - name: srcPosition
+        description: |
+          <p>starting position in the source Array</p>
+        type: Integer
+      - name: dst
+        description: |
+          <p>the destination Array</p>
+        type: Array
+      - name: dstPosition
+        description: |
+          <p>starting position in the destination Array</p>
+        type: Integer
+      - name: length
+        description: |
+          <p>number of Array elements to be copied</p>
+        type: Integer
+  - line: 73
+    params:
+      - name: src
+        description: ''
+        type: Array
+      - name: dst
+        description: ''
+        type: Array
+      - name: length
+        description: ''
+        type: Integer
+        optional: true
+chainable: false
+---
+
+
+# arrayCopy
diff --git a/src/content/reference/en/p5 copy/asin.mdx b/src/content/reference/en/p5 copy/asin.mdx
new file mode 100644
index 0000000000..78518c0050
--- /dev/null
+++ b/src/content/reference/en/p5 copy/asin.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L80
+title: asin
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the arc sine of a number.</p>
+
+  <p><code>asin()</code> is the inverse of <a
+  href="/reference/p5/sin/">sin()</a>. It expects input
+
+  values in the range of -1 to 1. By default, <code>asin()</code> returns values
+  in the
+
+  range -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If
+
+  the <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>
+  then values are
+
+  returned in the range -90 to 90.</p>
+line: 80
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate sin() and asin() values.
+      let a = PI / 3;
+      let s = sin(a);
+      let as = asin(s);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(s, 3)}`, 35, 50);
+      text(`${round(as, 3)}`, 35, 75);
+
+      describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate sin() and asin() values.
+      let a = PI + PI / 3;
+      let s = sin(a);
+      let as = asin(s);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(s, 3)}`, 35, 50);
+      text(`${round(as, 3)}`, 35, 75);
+
+      describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>value whose arc sine is to be returned.</p>
+    type: Number
+return:
+  description: arc sine of the given value.
+  type: Number
+chainable: false
+---
+
+
+# asin
diff --git a/src/content/reference/en/p5 copy/atan.mdx b/src/content/reference/en/p5 copy/atan.mdx
new file mode 100644
index 0000000000..86b3874bb0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/atan.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L142
+title: atan
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the arc tangent of a number.</p>
+
+  <p><code>atan()</code> is the inverse of <a
+  href="/reference/p5/tan/">tan()</a>. It expects input
+
+  values in the range of -Infinity to Infinity. By default, <code>atan()</code>
+  returns
+
+  values in the range -π ÷ 2 (about -1.57) to π ÷ 2
+
+  (about 1.57). If the <a href="/reference/p5/angleMode/">angleMode()</a> is
+  <code>DEGREES</code>
+
+  then values are returned in the range -90 to 90.</p>
+line: 142
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate tan() and atan() values.
+      let a = PI / 3;
+      let t = tan(a);
+      let at = atan(t);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(t, 3)}`, 35, 50);
+      text(`${round(at, 3)}`, 35, 75);
+
+      describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate tan() and atan() values.
+      let a = PI + PI / 3;
+      let t = tan(a);
+      let at = atan(t);
+
+      // Display the values.
+      text(`${round(a, 3)}`, 35, 25);
+      text(`${round(t, 3)}`, 35, 50);
+      text(`${round(at, 3)}`, 35, 75);
+
+      describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>value whose arc tangent is to be returned.</p>
+    type: Number
+return:
+  description: arc tangent of the given value.
+  type: Number
+chainable: false
+---
+
+
+# atan
diff --git a/src/content/reference/en/p5 copy/atan2.mdx b/src/content/reference/en/p5 copy/atan2.mdx
new file mode 100644
index 0000000000..200b49516b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/atan2.mdx	
@@ -0,0 +1,106 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L204
+title: atan2
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the angle formed by a point, the origin, and the positive
+
+  x-axis.</p>
+
+  <p><code>atan2()</code> is most often used for orienting geometry to the
+  mouse's
+
+  position, as in <code>atan2(mouseY, mouseX)</code>. The first parameter is the
+  point's
+
+  y-coordinate and the second parameter is its x-coordinate.</p>
+
+  <p>By default, <code>atan2()</code> returns values in the range
+
+  -π (about -3.14) to π (3.14). If the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
+  then values are
+
+  returned in the range -180 to 180.</p>
+line: 204
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle at the top-left of the canvas rotates with mouse movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the angle between the mouse
+      // and the origin.
+      let a = atan2(mouseY, mouseX);
+
+      // Rotate.
+      rotate(a);
+
+      // Draw the shape.
+      rect(0, 0, 60, 10);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle at the center of the canvas rotates with mouse movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Get the mouse's coordinates relative to the origin.
+      let x = mouseX - 50;
+      let y = mouseY - 50;
+
+      // Calculate the angle between the mouse and the origin.
+      let a = atan2(y, x);
+
+      // Rotate.
+      rotate(a);
+
+      // Draw the shape.
+      rect(-30, -5, 60, 10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the point.</p>
+    type: Number
+  - name: x
+    description: |
+      <p>x-coordinate of the point.</p>
+    type: Number
+return:
+  description: arc tangent of the given point.
+  type: Number
+chainable: false
+---
+
+
+# atan2
diff --git a/src/content/reference/en/p5 copy/background.mdx b/src/content/reference/en/p5 copy/background.mdx
new file mode 100644
index 0000000000..6250c60339
--- /dev/null
+++ b/src/content/reference/en/p5 copy/background.mdx	
@@ -0,0 +1,336 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L414
+title: background
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Sets the color used for the background of the canvas.</p>
+
+  <p>By default, the background is transparent. <code>background()</code> is
+  typically used
+
+  within <a href="/reference/p5/draw/">draw()</a> to clear the display window at
+  the
+
+  beginning of each frame. It can also be used inside
+
+  <a href="/reference/p5/setup/">setup()</a> to set the background on the first
+  frame
+
+  of animation.</p>
+
+  <p>The version of <code>background()</code> with one parameter interprets the
+  value one
+
+  of four ways. If the parameter is a <code>Number</code>, it's interpreted as a
+  grayscale
+
+  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
+  color string.
+
+  RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the
+
+  parameter is a <a href="/reference/p5/p5.Color">p5.Color</a> object, it will
+  be used as
+
+  the background color. If the parameter is a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object, it will be used as the
+  background
+
+  image.</p>
+
+  <p>The version of <code>background()</code> with two parameters interprets the
+  first one
+
+  as a grayscale value. The second parameter sets the alpha (transparency)
+
+  value.</p>
+
+  <p>The version of <code>background()</code> with three parameters interprets
+  them as RGB,
+
+  HSB, or HSL colors, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. By default, colors are
+  specified
+
+  in RGB values. Calling <code>background(255, 204, 0)</code> sets the
+  background a bright
+
+  yellow color.</p>
+
+  <p>The version of <code>background()</code> with four parameters interprets
+  them as RGBA,
+
+  HSBA, or HSLA colors, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter sets
+  the alpha
+
+  (transparency) value.</p>
+line: 414
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A grayscale value.
+      background(51);
+
+      describe('A canvas with a dark charcoal gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A grayscale value and an alpha value.
+      background(51, 0.4);
+      describe('A canvas with a transparent gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // R, G & B values.
+      background(255, 204, 0);
+
+      describe('A canvas with a yellow background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // R, G, B, and Alpha values.
+      background(255, 0, 0, 128);
+
+      describe('A canvas with a semi-transparent red background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // H, S & B values.
+      background(255, 204, 100);
+
+      describe('A canvas with a royal blue background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A CSS named color.
+      background('red');
+
+      describe('A canvas with a red background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Three-digit hex RGB notation.
+      background('#fae');
+
+      describe('A canvas with a pink background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Six-digit hex RGB notation.
+      background('#222222');
+
+      describe('A canvas with a black background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Integer RGB notation.
+      background('rgb(0, 255, 0)');
+
+      describe('A canvas with a bright green background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Integer RGBA notation.
+      background('rgba(0, 255, 0, 0.25)');
+
+      describe('A canvas with a transparent green background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Percentage RGB notation.
+      background('rgb(100%, 0%, 10%)');
+
+      describe('A canvas with a red background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Percentage RGBA notation.
+      background('rgba(100%, 0%, 100%, 0.5)');
+
+      describe('A canvas with a transparent purple background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // A p5.Color object.
+      let c = color(0, 0, 255);
+      background(c);
+
+      describe('A canvas with a blue background.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 414
+    params:
+      - name: color
+        description: >
+          <p>any value created by the <a href="#/p5/color">color()</a>
+          function</p>
+        type: p5.Color
+    chainable: 1
+  - line: 626
+    params:
+      - name: colorstring
+        description: |
+          <p>color string, possible formats include: integer
+                                  rgb() or rgba(), percentage rgb() or rgba(),
+                                  3-digit hex, 6-digit hex.</p>
+        type: String
+      - name: a
+        description: |
+          <p>opacity of the background relative to current
+                                      color range (default is 0-255).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 636
+    params:
+      - name: gray
+        description: |
+          <p>specifies a value between white and black.</p>
+        type: Number
+      - name: a
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 643
+    params:
+      - name: v1
+        description: >
+          <p>red value if color mode is RGB, or hue value if color mode is
+          HSB.</p>
+        type: Number
+      - name: v2
+        description: >
+          <p>green value if color mode is RGB, or saturation value if color mode
+          is HSB.</p>
+        type: Number
+      - name: v3
+        description: >
+          <p>blue value if color mode is RGB, or brightness value if color mode
+          is HSB.</p>
+        type: Number
+      - name: a
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 652
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 659
+    params:
+      - name: image
+        description: |
+          <p>image created with <a href="#/p5/loadImage">loadImage()</a>
+                                      or <a href="#/p5/createImage">createImage()</a>,
+                                      to set as background.
+                                      (must be same size as the sketch window).</p>
+        type: p5.Image
+      - name: a
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# background
diff --git a/src/content/reference/en/p5 copy/baseColorShader.mdx b/src/content/reference/en/p5 copy/baseColorShader.mdx
new file mode 100644
index 0000000000..a608e4d5ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseColorShader.mdx	
@@ -0,0 +1,178 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1292
+title: baseColorShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the shader used when no lights or materials are applied.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseColorShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <thead>
+
+  <tr>
+
+  <th>Hook</th>
+
+  <th>Description</th>
+
+  </tr>
+
+  </thead>
+
+  <tbody><tr>
+
+  <td><code>void beforeVertex</code></td>
+
+  <td>Called at the start of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalPosition</code></td>
+
+  <td>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldPosition</code></td>
+
+  <td>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalNormal</code></td>
+
+  <td>Update the normal before transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldNormal</code></td>
+
+  <td>Update the normal after transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec2 getUV</code></td>
+
+  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
+  return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getVertexColor</code></td>
+
+  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterVertex</code></td>
+
+  <td>Called at the end of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void beforeFragment</code></td>
+
+  <td>Called at the start of the fragment shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getFinalColor</code></td>
+
+  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterFragment</code></td>
+
+  <td>Called at the end of the fragment shader.</td>
+
+  </tr>
+
+  </tbody></table>
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseColorShader().inspectHooks()</code> to see all the possible
+  hooks and
+
+  their default implementations.</p>
+line: 1292
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseColorShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      noStroke();
+      fill('red');
+      circle(0, 0, 50);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The color shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseColorShader
diff --git a/src/content/reference/en/p5 copy/baseMaterialShader.mdx b/src/content/reference/en/p5 copy/baseMaterialShader.mdx
new file mode 100644
index 0000000000..d41248d1aa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseMaterialShader.mdx	
@@ -0,0 +1,418 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L886
+title: baseMaterialShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the default shader used with lights, materials,
+
+  and textures.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseMaterialShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <tr><th>Hook</th><th>Description</th></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getLocalPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getWorldPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getLocalNormal</code></p>
+
+  </td><td>
+
+
+  <p>Update the normal before transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getWorldNormal</code></p>
+
+  </td><td>
+
+
+  <p>Update the normal after transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec2 getUV</code></p>
+
+  </td><td>
+
+
+  <p>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
+  return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getVertexColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the fragment shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>Inputs getPixelInputs</code></p>
+
+  </td><td>
+
+
+  <p>Update the per-pixel inputs of the material. It takes in an
+  <code>Inputs</code> struct, which includes:</p>
+
+  <ul>
+
+  <li><code>vec3 normal</code>, the direction pointing out of the surface</li>
+
+  <li><code>vec2 texCoord</code>, a vector where <code>x</code> and
+  <code>y</code> are between 0 and 1 describing the spot on a texture the pixel
+  is mapped to, as a fraction of the texture size</li>
+
+  <li><code>vec3 ambientLight</code>, the ambient light color on the vertex</li>
+
+  <li><code>vec4 color</code>, the base material color of the pixel</li>
+
+  <li><code>vec3 ambientMaterial</code>, the color of the pixel when affected by
+  ambient light</li>
+
+  <li><code>vec3 specularMaterial</code>, the color of the pixel when reflecting
+  specular highlights</li>
+
+  <li><code>vec3 emissiveMaterial</code>, the light color emitted by the
+  pixel</li>
+
+  <li><code>float shininess</code>, a number representing how sharp specular
+  reflections should be, from 1 to infinity</li>
+
+  <li><code>float metalness</code>, a number representing how mirrorlike the
+  material should be, between 0 and 1
+
+  The struct can be modified and returned.</li></ul></td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 combineColors</code></p>
+
+  </td><td>
+
+
+  <p>Take in a <code>ColorComponents</code> struct containing all the different
+  components of light, and combining them into
+
+  a single final color. The struct contains:</p>
+
+  <ul>
+
+  <li><code>vec3 baseColor</code>, the base color of the pixel</li>
+
+  <li><code>float opacity</code>, the opacity between 0 and 1 that it should be
+  drawn at</li>
+
+  <li><code>vec3 ambientColor</code>, the color of the pixel when affected by
+  ambient light</li>
+
+  <li><code>vec3 specularColor</code>, the color of the pixel when affected by
+  specular reflections</li>
+
+  <li><code>vec3 diffuse</code>, the amount of diffused light hitting the
+  pixel</li>
+
+  <li><code>vec3 ambient</code>, the amount of ambient light hitting the
+  pixel</li>
+
+  <li><code>vec3 specular</code>, the amount of specular reflection hitting the
+  pixel</li>
+
+  <li><code>vec3 emissive</code>, the amount of light emitted by the pixel</li>
+
+  </ul>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getFinalColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the fragment shader.</p>
+
+  </td></tr>
+
+  </table>
+
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseMaterialShader().inspectHooks()</code> to see all the
+  possible hooks and
+
+  their default implementations.</p>
+line: 886
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20.0 * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      lights();
+      noStroke();
+      fill('red');
+      sphere(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        declarations: 'vec3 myNormal;',
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          myNormal = inputs.normal;
+          return inputs;
+        }`,
+        'vec4 getFinalColor': `(vec4 color) {
+          return mix(
+            vec4(1.0, 1.0, 1.0, 1.0),
+            color,
+            abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))
+          );
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      rotateY(millis() * 0.001);
+      shader(myShader);
+      lights();
+      noStroke();
+      fill('red');
+      torus(30);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+    let environment;
+
+    function preload() {
+      environment = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          float factor =
+            sin(
+              inputs.texCoord.x * ${TWO_PI} +
+              inputs.texCoord.y * ${TWO_PI}
+            ) * 0.4 + 0.5;
+          inputs.shininess = mix(1., 100., factor);
+          inputs.metalness = factor;
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      panorama(environment);
+      ambientLight(100);
+      imageLight(environment);
+      rotateY(millis() * 0.001);
+      shader(myShader);
+      noStroke();
+      fill(255);
+      specularMaterial(150);
+      sphere(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseMaterialShader().modify({
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          vec3 newNormal = inputs.normal;
+          // Simple bump mapping: adjust the normal based on position
+          newNormal.x += 0.2 * sin(
+              sin(
+                inputs.texCoord.y * ${TWO_PI} * 10.0 +
+                inputs.texCoord.x * ${TWO_PI} * 25.0
+              )
+            );
+          newNormal.y += 0.2 * sin(
+            sin(
+                inputs.texCoord.x * ${TWO_PI} * 10.0 +
+                inputs.texCoord.y * ${TWO_PI} * 25.0
+              )
+          );
+          inputs.normal = normalize(newNormal);
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      ambientLight(150);
+      pointLight(
+        255, 255, 255,
+        100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)
+      );
+      noStroke();
+      fill('red');
+      shininess(200);
+      specularMaterial(255);
+      sphere(50);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The material shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseMaterialShader
diff --git a/src/content/reference/en/p5 copy/baseNormalShader.mdx b/src/content/reference/en/p5 copy/baseNormalShader.mdx
new file mode 100644
index 0000000000..4eac6e9109
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseNormalShader.mdx	
@@ -0,0 +1,211 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1197
+title: baseNormalShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the shader used by <a
+  href="/reference/p5/normalMaterial/"><code>normalMaterial()</code></a>.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseNormalShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <thead>
+
+  <tr>
+
+  <th>Hook</th>
+
+  <th>Description</th>
+
+  </tr>
+
+  </thead>
+
+  <tbody><tr>
+
+  <td><code>void beforeVertex</code></td>
+
+  <td>Called at the start of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalPosition</code></td>
+
+  <td>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldPosition</code></td>
+
+  <td>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getLocalNormal</code></td>
+
+  <td>Update the normal before transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec3 getWorldNormal</code></td>
+
+  <td>Update the normal after transforms are applied. It takes in <code>vec3
+  normal</code> and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec2 getUV</code></td>
+
+  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
+  return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getVertexColor</code></td>
+
+  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterVertex</code></td>
+
+  <td>Called at the end of the vertex shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void beforeFragment</code></td>
+
+  <td>Called at the start of the fragment shader.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>vec4 getFinalColor</code></td>
+
+  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</td>
+
+  </tr>
+
+  <tr>
+
+  <td><code>void afterFragment</code></td>
+
+  <td>Called at the end of the fragment shader.</td>
+
+  </tr>
+
+  </tbody></table>
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseNormalShader().inspectHooks()</code> to see all the possible
+  hooks and
+
+  their default implementations.</p>
+line: 1197
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseNormalShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      noStroke();
+      sphere(50);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseNormalShader().modify({
+        'vec3 getWorldNormal': '(vec3 normal) { return abs(normal); }',
+        'vec4 getFinalColor': `(vec4 color) {
+          // Map the r, g, and b values of the old normal to new colors
+          // instead of just red, green, and blue:
+          vec3 newColor =
+            color.r * vec3(89.0, 240.0, 232.0) / 255.0 +
+            color.g * vec3(240.0, 237.0, 89.0) / 255.0 +
+            color.b * vec3(205.0, 55.0, 222.0) / 255.0;
+          newColor = newColor / (color.r + color.g + color.b);
+          return vec4(newColor, 1.0) * color.a;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      noStroke();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.015);
+      box(100);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The `normalMaterial` shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseNormalShader
diff --git a/src/content/reference/en/p5 copy/baseStrokeShader.mdx b/src/content/reference/en/p5 copy/baseStrokeShader.mdx
new file mode 100644
index 0000000000..f2bfb42be5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/baseStrokeShader.mdx	
@@ -0,0 +1,356 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1355
+title: baseStrokeShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Get the shader used when drawing the strokes of shapes.</p>
+
+  <p>You can call <a
+  href="/reference/p5.Shader/modify/"><code>baseStrokeShader().modify()</code></a>
+
+  and change any of the following hooks:</p>
+
+  <table>
+
+  <tr><th>Hook</th><th>Description</th></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getLocalPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices before transforms are applied. It takes in
+  <code>vec3 position</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec3 getWorldPosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of vertices after transforms are applied. It takes in
+  <code>vec3 position</code> and pust return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>float getStrokeWeight</code></p>
+
+  </td><td>
+
+
+  <p>Update the stroke weight. It takes in <code>float weight</code> and pust
+  return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec2 getLineCenter</code></p>
+
+  </td><td>
+
+
+  <p>Update the center of the line. It takes in <code>vec2 center</code> and
+  must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec2 getLinePosition</code></p>
+
+  </td><td>
+
+
+  <p>Update the position of each vertex on the edge of the line. It takes in
+  <code>vec2 position</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getVertexColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
+  must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterVertex</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the vertex shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void beforeFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the start of the fragment shader.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>Inputs getPixelInputs</code></p>
+
+  </td><td>
+
+
+  <p>Update the inputs to the shader. It takes in a struct <code>Inputs
+  inputs</code>, which includes:</p>
+
+  <ul>
+
+  <li><code>vec4 color</code>, the color of the stroke</li>
+
+  <li><code>vec2 tangent</code>, the direction of the stroke in screen
+  space</li>
+
+  <li><code>vec2 center</code>, the coordinate of the center of the stroke in
+  screen space p5.js pixels</li>
+
+  <li><code>vec2 position</code>, the coordinate of the current pixel in screen
+  space p5.js pixels</li>
+
+  <li><code>float strokeWeight</code>, the thickness of the stroke in p5.js
+  pixels</li>
+
+  </ul>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>bool shouldDiscard</code></p>
+
+  </td><td>
+
+
+  <p>Caps and joins are made by discarded pixels in the fragment shader to carve
+  away unwanted areas. Use this to change this logic. It takes in a <code>bool
+  willDiscard</code> and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>vec4 getFinalColor</code></p>
+
+  </td><td>
+
+
+  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
+  and must return a modified version.</p>
+
+  </td></tr>
+
+  <tr><td>
+
+
+  <p><code>void afterFragment</code></p>
+
+  </td><td>
+
+
+  <p>Called at the end of the fragment shader.</p>
+
+  </td></tr>
+
+  </table>
+
+
+  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
+  If you
+
+  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
+
+  <p>Call <code>baseStrokeShader().inspectHooks()</code> to see all the possible
+  hooks and
+
+  their default implementations.</p>
+line: 1355
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseStrokeShader().modify({
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          float opacity = 1.0 - smoothstep(
+            0.0,
+            15.0,
+            length(inputs.position - inputs.center)
+          );
+          inputs.color *= opacity;
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      strokeWeight(30);
+      line(
+        -width/3,
+        sin(millis()*0.001) * height/4,
+        width/3,
+        sin(millis()*0.001 + 1) * height/4
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseStrokeShader().modify({
+        uniforms: {
+          'float time': () => millis()
+        },
+        declarations: 'vec3 myPosition;',
+        'vec3 getWorldPosition': `(vec3 pos) {
+          myPosition = pos;
+          return pos;
+        }`,
+        'float getStrokeWeight': `(float w) {
+          // Add a somewhat random offset to the weight
+          // that varies based on position and time
+          float scale = 0.8 + 0.2*sin(10.0 * sin(
+            floor(time/250.) +
+            myPosition.x*0.01 +
+            myPosition.y*0.01
+          ));
+          return w * scale;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      myShader.setUniform('time', millis());
+      strokeWeight(10);
+      beginShape();
+      for (let i = 0; i <= 50; i++) {
+        let r = map(i, 0, 50, 0, width/3);
+        let x = r*cos(i*0.2);
+        let y = r*sin(i*0.2);
+        vertex(x, y);
+      }
+      endShape();
+    }
+    </code>
+    </div>
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    let myShader;
+
+    function setup() {
+      createCanvas(200, 200, WEBGL);
+      myShader = baseStrokeShader().modify({
+        'float random': `(vec2 p) {
+          vec3 p3  = fract(vec3(p.xyx) * .1031);
+          p3 += dot(p3, p3.yzx + 33.33);
+          return fract((p3.x + p3.y) * p3.z);
+        }`,
+        'Inputs getPixelInputs': `(Inputs inputs) {
+          // Replace alpha in the color with dithering by
+          // randomly setting pixel colors to 0 based on opacity
+          float a = inputs.color.a;
+          inputs.color.a = 1.0;
+          inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;
+          return inputs;
+        }`
+      });
+    }
+
+    function draw() {
+      background(255);
+      shader(myShader);
+      strokeWeight(10);
+      beginShape();
+      for (let i = 0; i <= 50; i++) {
+        stroke(
+          0,
+          255
+            * map(i, 0, 20, 0, 1, true)
+            * map(i, 30, 50, 1, 0, true)
+        );
+        vertex(
+          map(i, 0, 50, -1, 1) * width/3,
+          50 * sin(i/10 + frameCount/100)
+        );
+      }
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: The stroke shader
+  type: p5.Shader
+chainable: false
+beta: true
+---
+
+
+# baseStrokeShader
diff --git a/src/content/reference/en/p5 copy/beginClip.mdx b/src/content/reference/en/p5 copy/beginClip.mdx
new file mode 100644
index 0000000000..ebad022a68
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginClip.mdx	
@@ -0,0 +1,208 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L13
+title: beginClip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Starts defining a shape that will mask any shapes drawn afterward.</p>
+
+  <p>Any shapes drawn between <code>beginClip()</code> and
+
+  <a href="/reference/p5/endClip/">endClip()</a> will add to the mask shape. The
+  mask
+
+  will apply to anything drawn after <a
+  href="/reference/p5/endClip/">endClip()</a>.</p>
+
+  <p>The parameter, <code>options</code>, is optional. If an object with an
+  <code>invert</code>
+
+  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
+  used to
+
+  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
+  holes
+
+  in shapes that are masked. <code>invert</code> is <code>false</code> by
+  default.</p>
+
+  <p>Masks can be contained between the
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions.
+
+  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
+
+  <p>Masks can also be defined in a callback function that's passed to
+
+  <a href="/reference/p5/clip/">clip()</a>.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white triangle and circle on a gray background.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an inverted mask.
+      beginClip({ invert: true });
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      noStroke();
+
+      // Draw a masked shape.
+      push();
+      // Create a mask.
+      beginClip();
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw an inverted masked shape.
+      push();
+      // Create an inverted mask.
+      beginClip({ invert: true });
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored fuchsia.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+      endClip();
+
+      // Draw a backing shape.
+      noStroke();
+      fill('fuchsia');
+      plane(100);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+      endClip();
+
+      // Draw a backing shape.
+      noStroke();
+      beginShape(QUAD_STRIP);
+      fill(0, 255, 255);
+      vertex(-width / 2, -height / 2);
+      vertex(width / 2, -height / 2);
+      fill(100, 0, 100);
+      vertex(-width / 2, height / 2);
+      vertex(width / 2, height / 2);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: options
+    description: |
+      <p>an object containing clip settings.</p>
+    type: Object
+    optional: true
+chainable: false
+---
+
+
+# beginClip
diff --git a/src/content/reference/en/p5 copy/beginContour.mdx b/src/content/reference/en/p5 copy/beginContour.mdx
new file mode 100644
index 0000000000..5ecd6d1437
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginContour.mdx	
@@ -0,0 +1,134 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L20
+title: beginContour
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Begins creating a hole within a flat shape.</p>
+
+  <p>The <code>beginContour()</code> and <a
+  href="/reference/p5/endContour/">endContour()</a>
+
+  functions allow for creating negative space within custom shapes that are
+
+  flat. <code>beginContour()</code> begins adding vertices to a negative space
+  and
+
+  <a href="/reference/p5/endContour/">endContour()</a> stops adding them.
+
+  <code>beginContour()</code> and <a
+  href="/reference/p5/endContour/">endContour()</a> must be
+
+  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a>.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and <a
+  href="/reference/p5/scale/">scale()</a>
+
+  don't work between <code>beginContour()</code> and
+
+  <a href="/reference/p5/endContour/">endContour()</a>. It's also not possible
+  to use
+
+  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
+
+  <a href="/reference/p5/rect/">rect()</a>, between <code>beginContour()</code>
+  and
+
+  <a href="/reference/p5/endContour/">endContour()</a>.</p>
+
+  <p>Note: The vertices that define a negative space must "wind" in the opposite
+
+  direction from the outer shape. First, draw vertices for the outer shape
+
+  clockwise order. Then, draw vertices for the negative space in
+
+  counter-clockwise order.</p>
+line: 20
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(10, 10);
+      vertex(90, 10);
+      vertex(90, 90);
+      vertex(10, 90);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(30, 30);
+      vertex(30, 70);
+      vertex(70, 70);
+      vertex(70, 30);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(-40, -40);
+      vertex(40, -40);
+      vertex(40, 40);
+      vertex(-40, 40);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(-20, -20);
+      vertex(-20, 20);
+      vertex(20, 20);
+      vertex(20, -20);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# beginContour
diff --git a/src/content/reference/en/p5 copy/beginGeometry.mdx b/src/content/reference/en/p5 copy/beginGeometry.mdx
new file mode 100644
index 0000000000..3fdf211bd3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginGeometry.mdx	
@@ -0,0 +1,281 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L13
+title: beginGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Begins adding shapes to a new
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
+
+  <p>The <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>
+
+  functions help with creating complex 3D shapes from simpler ones such as
+
+  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
+  begins adding shapes
+
+  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
+
+  <p><code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a> can help
+
+  to make sketches more performant. For example, if a complex 3D shape
+
+  doesn’t change while a sketch runs, then it can be created with
+
+  <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>.
+
+  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
+  then
+
+  drawing it will run faster than repeatedly drawing the individual pieces.</p>
+
+  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
+  way to
+
+  build 3D shapes.</p>
+
+  <p>Note: <code>beginGeometry()</code> can only be used in WebGL mode.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add a cone.
+      cone();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      createArrow();
+
+      describe('A white arrow drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let blueArrow;
+    let redArrow;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the arrows.
+      redArrow = createArrow('red');
+      blueArrow = createArrow('blue');
+
+      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the red arrow.
+      model(redArrow);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the blue arrow.
+      model(blueArrow);
+    }
+
+    function createArrow(fillColor) {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      fill(fillColor);
+
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = createParticles();
+    }
+
+    function createParticles() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# beginGeometry
diff --git a/src/content/reference/en/p5 copy/beginShape.mdx b/src/content/reference/en/p5 copy/beginShape.mdx
new file mode 100644
index 0000000000..d8642333db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/beginShape.mdx	
@@ -0,0 +1,449 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L129
+title: beginShape
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Begins adding vertices to a custom shape.</p>
+
+  <p>The <code>beginShape()</code> and <a
+  href="/reference/p5/endShape/">endShape()</a> functions
+
+  allow for creating custom shapes in 2D or 3D. <code>beginShape()</code> begins
+  adding
+
+  vertices to a custom shape and <a
+  href="/reference/p5/endShape/">endShape()</a> stops
+
+  adding them.</p>
+
+  <p>The parameter, <code>kind</code>, sets the kind of shape to make. By
+  default, any
+
+  irregular polygon can be drawn. The available modes for kind are:</p>
+
+  <ul>
+
+  <li><code>POINTS</code> to draw a series of points.</li>
+
+  <li><code>LINES</code> to draw a series of unconnected line segments.</li>
+
+  <li><code>TRIANGLES</code> to draw a series of separate triangles.</li>
+
+  <li><code>TRIANGLE_FAN</code> to draw a series of connected triangles sharing
+  the first vertex in a fan-like fashion.</li>
+
+  <li><code>TRIANGLE_STRIP</code> to draw a series of connected triangles in
+  strip fashion.</li>
+
+  <li><code>QUADS</code> to draw a series of separate quadrilaterals
+  (quads).</li>
+
+  <li><code>QUAD_STRIP</code> to draw quad strip using adjacent edges to form
+  the next quad.</li>
+
+  <li><code>TESS</code> to create a filling curve by explicit tessellation
+  (WebGL only).</li>
+
+  </ul>
+
+  <p>After calling <code>beginShape()</code>, shapes can be built by calling
+
+  <a href="/reference/p5/vertex/">vertex()</a>,
+
+  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
+
+  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
+
+  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
+
+  <a href="/reference/p5/endShape/">endShape()</a> will stop adding vertices to
+  the
+
+  shape. Each shape will be outlined with the current stroke color and filled
+
+  with the current fill color.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and
+
+  <a href="/reference/p5/scale/">scale()</a> don't work between
+  <code>beginShape()</code> and
+
+  <a href="/reference/p5/endShape/">endShape()</a>. It's also not possible to
+  use
+
+  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
+
+  <a href="/reference/p5/rect/">rect()</a>, between <code>beginShape()</code>
+  and
+
+  <a href="/reference/p5/endShape/">endShape()</a>.</p>
+line: 129
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Only draw the vertices (points).
+      beginShape(POINTS);
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Four black dots that form a square are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Only draw lines between alternating pairs of vertices.
+      beginShape(LINES);
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Two horizontal black lines on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Three black lines form a sideways U shape on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      // Connect the first and last vertices.
+      endShape(CLOSE);
+
+      describe('A black outline of a square drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of triangles.
+      beginShape(TRIANGLES);
+
+      // Left triangle.
+      vertex(30, 75);
+      vertex(40, 20);
+      vertex(50, 75);
+
+      // Right triangle.
+      vertex(60, 20);
+      vertex(70, 75);
+      vertex(80, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Two white triangles drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of triangles.
+      beginShape(TRIANGLE_STRIP);
+
+      // Add vertices.
+      vertex(30, 75);
+      vertex(40, 20);
+      vertex(50, 75);
+      vertex(60, 20);
+      vertex(70, 75);
+      vertex(80, 20);
+      vertex(90, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Five white triangles that are interleaved drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of triangles that share their first vertex.
+      beginShape(TRIANGLE_FAN);
+
+      // Add vertices.
+      vertex(57.5, 50);
+      vertex(57.5, 15);
+      vertex(92, 50);
+      vertex(57.5, 85);
+      vertex(22, 50);
+      vertex(57.5, 15);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Four white triangles form a square are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(QUADS);
+
+      // Left rectangle.
+      vertex(30, 20);
+      vertex(30, 75);
+      vertex(50, 75);
+      vertex(50, 20);
+
+      // Right rectangle.
+      vertex(65, 20);
+      vertex(65, 75);
+      vertex(85, 75);
+      vertex(85, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Two white rectangles drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(QUAD_STRIP);
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(30, 75);
+      vertex(50, 20);
+      vertex(50, 75);
+      vertex(65, 20);
+      vertex(65, 75);
+      vertex(85, 20);
+      vertex(85, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Three white rectangles that share edges are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(TESS);
+
+      // Add the vertices.
+      vertex(-30, -30, 0);
+      vertex(30, -30, 0);
+      vertex(30, -10, 0);
+      vertex(-10, -10, 0);
+      vertex(-10, 10, 0);
+      vertex(30, 10, 0);
+      vertex(30, 30, 0);
+      vertex(-30, 30, 0);
+
+      // Stop drawing the shape.
+      // Connect the first and last vertices.
+      endShape(CLOSE);
+
+      describe('A blocky C shape drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag with the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A blocky C shape drawn in red, blue, and green on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Start drawing the shape.
+      // Draw a series of quadrilaterals.
+      beginShape(TESS);
+
+      // Add the vertices.
+      fill('red');
+      stroke('red');
+      vertex(-30, -30, 0);
+      vertex(30, -30, 0);
+      vertex(30, -10, 0);
+      fill('green');
+      stroke('green');
+      vertex(-10, -10, 0);
+      vertex(-10, 10, 0);
+      vertex(30, 10, 0);
+      fill('blue');
+      stroke('blue');
+      vertex(30, 30, 0);
+      vertex(-30, 30, 0);
+
+      // Stop drawing the shape.
+      // Connect the first and last vertices.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: kind
+    description: |
+      <p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
+                                     TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.</p>
+    type: Constant
+    optional: true
+chainable: true
+---
+
+
+# beginShape
diff --git a/src/content/reference/en/p5 copy/bezier.mdx b/src/content/reference/en/p5 copy/bezier.mdx
new file mode 100644
index 0000000000..50c15330b7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezier.mdx	
@@ -0,0 +1,273 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L13
+title: bezier
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Draws a Bézier curve.</p>
+
+  <p>Bézier curves can form shapes and curves that slope gently. They're defined
+
+  by two anchor points and two control points. Bézier curves provide more
+
+  control than the spline curves created with the
+
+  <a href="/reference/p5/curve/">curve()</a> function.</p>
+
+  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
+  first anchor point. The
+
+  first anchor point is where the curve starts.</p>
+
+  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
+  <code>x3</code>, and <code>y3</code>, set the two control
+
+  points. The control points "pull" the curve towards them.</p>
+
+  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
+  the last anchor
+
+  point. The last anchor point is where the curve ends.</p>
+
+  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>bezier()</code> has twelve arguments because each point has x-, y-,
+
+  and z-coordinates.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(85, 20);
+      point(15, 80);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(10, 10);
+      point(90, 90);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(85, 20, 10, 10, 90, 90, 15, 80);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(85, 20, 10, 10);
+      line(15, 80, 90, 90);
+
+      describe(
+        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the top-left corner
+    // and drag to change the curve's shape.
+
+    let x2 = 10;
+    let y2 = 10;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(85, 20);
+      point(15, 80);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x2, y2);
+      point(90, 90);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(85, 20, x2, y2, 90, 90, 15, 80);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(85, 20, x2, y2);
+      line(15, 80, 90, 90);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x2, y2) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x2 = mouseX;
+        y2 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background('skyblue');
+
+      // Draw the red balloon.
+      fill('red');
+      bezier(50, 60, 5, 15, 95, 15, 50, 60);
+
+      // Draw the balloon string.
+      line(50, 60, 50, 80);
+
+      describe('A red balloon in a blue sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');
+    }
+
+    function draw() {
+      background('skyblue');
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the red balloon.
+      fill('red');
+      bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);
+
+      // Draw the balloon string.
+      line(0, 0, 0, 0, 20, 0);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 13
+    params:
+      - name: x1
+        description: |
+          <p>x-coordinate of the first anchor point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>y-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>x-coordinate of the first control point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the second control point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>x-coordinate of the second anchor point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>y-coordinate of the second anchor point.</p>
+        type: Number
+    chainable: 1
+  - line: 191
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>z-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>z-coordinate of the second anchor point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# bezier
diff --git a/src/content/reference/en/p5 copy/bezierDetail.mdx b/src/content/reference/en/p5 copy/bezierDetail.mdx
new file mode 100644
index 0000000000..b4f895a3fc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierDetail.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L221
+title: bezierDetail
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Sets the number of segments used to draw Bézier curves in WebGL mode.</p>
+
+  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+
+  more flat segments makes shapes appear smoother.</p>
+
+  <p>The parameter, <code>detail</code>, is the number of segments to use while
+  drawing a
+
+  Bézier curve. For example, calling <code>bezierDetail(5)</code> will use 5
+  segments to
+
+  draw curves with the <a href="/reference/p5/bezier/">bezier()</a> function. By
+
+  default,<code>detail</code> is 20.</p>
+
+  <p>Note: <code>bezierDetail()</code> has no effect in 2D mode.</p>
+line: 221
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Draw the original curve.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(85, 20);
+      point(15, 80);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(10, 10);
+      point(90, 90);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(85, 20, 10, 10, 90, 90, 15, 80);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(85, 20, 10, 10);
+      line(15, 80, 90, 90);
+
+      describe(
+        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Draw the curve with less detail.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Set the curveDetail() to 5.
+      bezierDetail(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(35, -30, 0);
+      point(-35, 30, 0);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(-40, -40, 0);
+      point(40, 40, 0);
+
+      // Draw a black bezier curve.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+      bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(35, -30, -40, -40);
+      line(-35, 30, 40, 40);
+
+      describe(
+        'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: detail
+    description: |
+      <p>number of segments to use. Defaults to 20.</p>
+    type: Number
+chainable: true
+---
+
+
+# bezierDetail
diff --git a/src/content/reference/en/p5 copy/bezierPoint.mdx b/src/content/reference/en/p5 copy/bezierPoint.mdx
new file mode 100644
index 0000000000..a42c171121
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierPoint.mdx	
@@ -0,0 +1,162 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L324
+title: bezierPoint
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a Bézier curve using interpolation.</p>
+
+  <p><code>bezierPoint()</code> calculates coordinates along a Bézier curve
+  using the
+
+  anchor and control points. It expects points in the same order as the
+
+  <a href="/reference/p5/bezier/">bezier()</a> function.
+  <code>bezierPoint()</code> works one axis
+
+  at a time. Passing the anchor and control points' x-coordinates will
+
+  calculate the x-coordinate of a point on the curve. Passing the anchor and
+
+  control points' y-coordinates will calculate the y-coordinate of a point on
+
+  the curve.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  control points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 324
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 85;
+      let x2 = 10;
+      let x3 = 90;
+      let x4 = 15;
+      let y1 = 20;
+      let y2 = 10;
+      let y3 = 90;
+      let y4 = 80;
+
+      // Style the curve.
+      noFill();
+
+      // Draw the curve.
+      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw circles along the curve's path.
+      fill(255);
+
+      // Top-right.
+      let x = bezierPoint(x1, x2, x3, x4, 0);
+      let y = bezierPoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Center.
+      x = bezierPoint(x1, x2, x3, x4, 0.5);
+      y = bezierPoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Bottom-left.
+      x = bezierPoint(x1, x2, x3, x4, 1);
+      y = bezierPoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 85;
+      let x2 = 10;
+      let x3 = 90;
+      let x4 = 15;
+      let y1 = 20;
+      let y2 = 10;
+      let y3 = 90;
+      let y4 = 80;
+
+      // Draw the curve.
+      noFill();
+      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Calculate the circle's coordinates.
+      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+      let x = bezierPoint(x1, x2, x3, x4, t);
+      let y = bezierPoint(y1, y2, y3, y4, t);
+
+      // Draw the circle.
+      fill(255);
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of the point on the curve.
+  type: Number
+chainable: false
+---
+
+
+# bezierPoint
diff --git a/src/content/reference/en/p5 copy/bezierTangent.mdx b/src/content/reference/en/p5 copy/bezierTangent.mdx
new file mode 100644
index 0000000000..8fb0edfaa8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierTangent.mdx	
@@ -0,0 +1,155 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L450
+title: bezierTangent
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a line that's tangent to a Bézier curve.</p>
+
+  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
+
+  the curve's slope at the point where it intersects.</p>
+
+  <p><code>bezierTangent()</code> calculates coordinates along a tangent line
+  using the
+
+  Bézier curve's anchor and control points. It expects points in the same
+
+  order as the <a href="/reference/p5/bezier/">bezier()</a> function.
+  <code>bezierTangent()</code>
+
+  works one axis at a time. Passing the anchor and control points'
+
+  x-coordinates will calculate the x-coordinate of a point on the tangent
+
+  line. Passing the anchor and control points' y-coordinates will calculate
+
+  the y-coordinate of a point on the tangent line.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  control points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 450
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 85;
+      let x2 = 10;
+      let x3 = 90;
+      let x4 = 15;
+      let y1 = 20;
+      let y2 = 10;
+      let y3 = 90;
+      let y4 = 80;
+
+      // Style the curve.
+      noFill();
+
+      // Draw the curve.
+      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw tangents along the curve's path.
+      fill(255);
+
+      // Top-right circle.
+      stroke(0);
+      let x = bezierPoint(x1, x2, x3, x4, 0);
+      let y = bezierPoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Top-right tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);
+      let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Center circle.
+      stroke(0);
+      x = bezierPoint(x1, x2, x3, x4, 0.5);
+      y = bezierPoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Center tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);
+      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Bottom-left circle.
+      stroke(0);
+      x = bezierPoint(x1, x2, x3, x4, 1);
+      y = bezierPoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      // Bottom-left tangent.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);
+      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      describe(
+        'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of a point on the tangent line.
+  type: Number
+chainable: false
+---
+
+
+# bezierTangent
diff --git a/src/content/reference/en/p5 copy/bezierVertex.mdx b/src/content/reference/en/p5 copy/bezierVertex.mdx
new file mode 100644
index 0000000000..f4b5fb57cb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/bezierVertex.mdx	
@@ -0,0 +1,337 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L543
+title: bezierVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a Bézier curve segment to a custom shape.</p>
+
+  <p><code>bezierVertex()</code> adds a curved segment to custom shapes. The
+  Bézier curves
+
+  it creates are defined like those made by the
+
+  <a href="/reference/p5/bezier/">bezier()</a> function.
+  <code>bezierVertex()</code> must be
+
+  called between the
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
+  uses
+
+  the previous vertex as the first anchor point, so there must be at least
+
+  one call to <a href="/reference/p5/vertex/">vertex()</a> before
+  <code>bezierVertex()</code> can
+
+  be used.</p>
+
+  <p>The first four parameters, <code>x2</code>, <code>y2</code>,
+  <code>x3</code>, and <code>y3</code>, set the curve’s two
+
+  control points. The control points "pull" the curve towards them.</p>
+
+  <p>The fifth and sixth parameters, <code>x4</code>, and <code>y4</code>, set
+  the last anchor point.
+
+  The last anchor point is where the curve ends.</p>
+
+  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
+  and
+
+  z-coordinates.</p>
+
+  <p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to
+
+  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 543
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertex.
+      bezierVertex(80, 0, 80, 75, 30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A black C curve on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(30, 20);
+      point(30, 75);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(80, 0);
+      point(80, 75);
+
+      // Style the shape.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertex.
+      bezierVertex(80, 0, 80, 75, 30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(30, 20, 80, 0);
+      line(30, 75, 80, 75);
+
+      describe(
+        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the top-right corner
+    // and drag to change the curve's shape.
+
+    let x2 = 80;
+    let y2 = 0;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      strokeWeight(5);
+      point(30, 20);
+      point(30, 75);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x2, y2);
+      point(80, 75);
+
+      // Style the shape.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertex.
+      bezierVertex(x2, y2, 80, 75, 30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Draw red lines from the anchor points to the control points.
+      stroke(255, 0, 0);
+      line(30, 20, x2, y2);
+      line(30, 75, 80, 75);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x2, y2) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x2 = mouseX;
+        y2 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first anchor point.
+      vertex(30, 20);
+
+      // Add the Bézier vertices.
+      bezierVertex(80, 0, 80, 75, 30, 75);
+      bezierVertex(50, 80, 60, 25, 30, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A crescent moon shape drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');
+    }
+
+    function draw() {
+      background('midnightblue');
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the moons.
+      noStroke();
+      fill('lemonchiffon');
+
+      // Draw the first moon.
+      beginShape();
+      vertex(-20, -30, 0);
+      bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);
+      bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);
+      endShape();
+
+      // Draw the second moon.
+      beginShape();
+      vertex(-20, -30, -20);
+      bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);
+      bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 543
+    params:
+      - name: x2
+        description: |
+          <p>x-coordinate of the first control point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the second control point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>x-coordinate of the anchor point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>y-coordinate of the anchor point.</p>
+        type: Number
+    chainable: 1
+  - line: 792
+    params:
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the first control point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the second control point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>z-coordinate of the anchor point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# bezierVertex
diff --git a/src/content/reference/en/p5 copy/blend.mdx b/src/content/reference/en/p5 copy/blend.mdx
new file mode 100644
index 0000000000..53e9a94dc9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/blend.mdx	
@@ -0,0 +1,214 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L148
+title: blend
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Copies a region of pixels from one image to another.</p>
+
+  <p>The first parameter, <code>srcImage</code>, is the
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
+
+  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+  <code>sw</code>, and <code>sh</code> determine the region
+
+  to blend from the source image. <code>(sx, sy)</code> is the top-left corner
+  of the
+
+  region. <code>sw</code> and <code>sh</code> are the regions width and
+  height.</p>
+
+  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+  <code>dw</code>, and <code>dh</code> determine the region
+
+  of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of
+  the
+
+  region. <code>dw</code> and <code>dh</code> are the regions width and
+  height.</p>
+
+  <p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend
+  the images'
+
+  colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
+  <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
+
+  <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
+  <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
+
+  <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
+  <code>ADD</code>, or <code>NORMAL</code></p>
+line: 148
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    // Load the images.
+    function preload() {
+      img0 = loadImage('/assets/rockies.jpg');
+      img1 = loadImage('/assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img0);
+
+      // Display the bricks.
+      image(img1, 0, 0);
+
+      // Display the bricks faded into the landscape.
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    // Load the images.
+    function preload() {
+      img0 = loadImage('/assets/rockies.jpg');
+      img1 = loadImage('/assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img0);
+
+      // Display the bricks.
+      image(img1, 0, 0);
+
+      // Display the bricks partially transparent.
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img0;
+    let img1;
+
+    // Load the images.
+    function preload() {
+      img0 = loadImage('/assets/rockies.jpg');
+      img1 = loadImage('/assets/bricks_third.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img0);
+
+      // Display the bricks.
+      image(img1, 0, 0);
+
+      // Display the bricks washed out into the landscape.
+      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
+
+      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 148
+    params:
+      - name: srcImage
+        description: |
+          <p>source image.</p>
+        type: p5.Image
+      - name: sx
+        description: |
+          <p>x-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sy
+        description: |
+          <p>y-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sw
+        description: |
+          <p>source image width.</p>
+        type: Integer
+      - name: sh
+        description: |
+          <p>source image height.</p>
+        type: Integer
+      - name: dx
+        description: |
+          <p>x-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dy
+        description: |
+          <p>y-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dw
+        description: |
+          <p>destination image width.</p>
+        type: Integer
+      - name: dh
+        description: |
+          <p>destination image height.</p>
+        type: Integer
+      - name: blendMode
+        description: |
+          <p>the blend mode. either
+              BLEND, DARKEST, LIGHTEST, DIFFERENCE,
+              MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+              SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
+        type: Constant
+  - line: 267
+    params:
+      - name: sx
+        description: ''
+        type: Integer
+      - name: sy
+        description: ''
+        type: Integer
+      - name: sw
+        description: ''
+        type: Integer
+      - name: sh
+        description: ''
+        type: Integer
+      - name: dx
+        description: ''
+        type: Integer
+      - name: dy
+        description: ''
+        type: Integer
+      - name: dw
+        description: ''
+        type: Integer
+      - name: dh
+        description: ''
+        type: Integer
+      - name: blendMode
+        description: ''
+        type: Constant
+chainable: false
+---
+
+
+# blend
diff --git a/src/content/reference/en/p5 copy/blendMode.mdx b/src/content/reference/en/p5 copy/blendMode.mdx
new file mode 100644
index 0000000000..8f6365b78d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/blendMode.mdx	
@@ -0,0 +1,541 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L720
+title: blendMode
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Sets the way colors blend when added to the canvas.</p>
+
+  <p>By default, drawing with a solid color paints over the current pixel values
+
+  on the canvas. <code>blendMode()</code> offers many options for blending
+  colors.</p>
+
+  <p>Shapes, images, and text can be used as sources for drawing to the canvas.
+
+  A source pixel changes the color of the canvas pixel where it's drawn. The
+
+  final color results from blending the source pixel's color with the canvas
+
+  pixel's color. RGB color values from the source and canvas pixels are
+
+  compared, added, subtracted, multiplied, and divided to create different
+
+  effects. Red values with red values, greens with greens, and blues with
+
+  blues.</p>
+
+  <p>The parameter, <code>mode</code>, sets the blend mode. For example, calling
+
+  <code>blendMode(ADD)</code> sets the blend mode to <code>ADD</code>. The
+  following blend modes
+
+  are available in both 2D and WebGL mode:</p>
+
+  <ul>
+
+  <li><code>BLEND</code>: color values from the source overwrite the canvas.
+  This is the default mode.</li>
+
+  <li><code>ADD</code>: color values from the source are added to values from
+  the canvas.</li>
+
+  <li><code>DARKEST</code>: keeps the darkest color value.</li>
+
+  <li><code>LIGHTEST</code>: keeps the lightest color value.</li>
+
+  <li><code>EXCLUSION</code>: similar to <code>DIFFERENCE</code> but with less
+  contrast.</li>
+
+  <li><code>MULTIPLY</code>: color values from the source are multiplied with
+  values from the canvas. The result is always darker.</li>
+
+  <li><code>SCREEN</code>: all color values are inverted, then multiplied, then
+  inverted again. The result is always lighter. (Opposite of
+  <code>MULTIPLY</code>)</li>
+
+  <li><code>REPLACE</code>: the last source drawn completely replaces the rest
+  of the canvas.</li>
+
+  <li><code>REMOVE</code>: overlapping pixels are removed by making them
+  completely transparent.</li>
+
+  </ul>
+
+  <p>The following blend modes are only available in 2D mode:</p>
+
+  <ul>
+
+  <li><code>DIFFERENCE</code>: color values from the source are subtracted from
+  the values from the canvas. If the difference is a negative number, it's made
+  positive.</li>
+
+  <li><code>OVERLAY</code>: combines <code>MULTIPLY</code> and
+  <code>SCREEN</code>. Dark values in the canvas get darker and light values get
+  lighter.</li>
+
+  <li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code> and
+  <code>SCREEN</code>. Dark values in the source get darker and light values get
+  lighter.</li>
+
+  <li><code>SOFT_LIGHT</code>: a softer version of <code>HARD_LIGHT</code>.</li>
+
+  <li><code>DODGE</code>: lightens light tones and increases contrast. Divides
+  the canvas color values by the inverted color values from the source.</li>
+
+  <li><code>BURN</code>: darkens dark tones and increases contrast. Divides the
+  source color values by the inverted color values from the canvas, then inverts
+  the result.</li>
+
+  </ul>
+
+  <p>The following blend modes are only available in WebGL mode:</p>
+
+  <ul>
+
+  <li><code>SUBTRACT</code>: RGB values from the source are subtracted from the
+  values from the canvas. If the difference is a negative number, it's made
+  positive. Alpha (transparency) values from the source and canvas are
+  added.</li>
+
+  </ul>
+line: 720
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Use the default blend mode.
+      blendMode(BLEND);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A Sky Blue line and a Deep Rose line form an X on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(HARD_LIGHT);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(ADD);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(DARKEST);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(BURN);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(LIGHTEST);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(EXCLUSION);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(MULTIPLY);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(SCREEN);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(REPLACE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A diagonal deep rose line.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(REMOVE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('The silhouette of an X is missing from a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(DIFFERENCE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(OVERLAY);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(SOFT_LIGHT);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Set the blend mode.
+      blendMode(DODGE);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the first line.
+      stroke('#1a85ff');
+      line(25, 25, 75, 75);
+
+      // Draw the second line.
+      stroke('#d41159');
+      line(75, 25, 25, 75);
+
+      describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a canvas with WEBGL mode.
+      createCanvas(100, 100, WEBGL);
+
+      // Set the background color.
+      background(180);
+
+      // Set the blend mode to SUBTRACT.
+      blendMode(SUBTRACT);
+
+      // Style the lines.
+      strokeWeight(30);
+
+      // Draw the blue line.
+      stroke('#1a85ff');
+      line(-25, -25, 25, 25);
+
+      // Draw the red line.
+      stroke('#d41159');
+      line(25, -25, -25, 25);
+
+      describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>blend mode to set.
+                     either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
+                     EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
+                     SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT</p>
+    type: Constant
+chainable: false
+---
+
+
+# blendMode
diff --git a/src/content/reference/en/p5 copy/blue.mdx b/src/content/reference/en/p5 copy/blue.mdx
new file mode 100644
index 0000000000..d3e05aae37
--- /dev/null
+++ b/src/content/reference/en/p5 copy/blue.mdx	
@@ -0,0 +1,158 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L117
+title: blue
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the blue value of a color.</p>
+
+  <p><code>blue()</code> extracts the blue value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>blue()</code> returns a color's blue value in the range 0
+
+  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  RGB, it
+
+  returns the blue value in the given range.</p>
+line: 117
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(175, 100, 220);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 220.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [175, 100, 220];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 220.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgb(175, 100, 220)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 220.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(69, 39, 86);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'blueValue' to 86.
+      let blueValue = blue(c);
+
+      // Draw the right rectangle.
+      fill(0, 0, blueValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the blue value.
+  type: Number
+chainable: false
+---
+
+
+# blue
diff --git a/src/content/reference/en/p5 copy/boolean.mdx b/src/content/reference/en/p5 copy/boolean.mdx
new file mode 100644
index 0000000000..8eab48af5f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/boolean.mdx	
@@ -0,0 +1,157 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L341
+title: boolean
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>String</code> or <code>Number</code> to a
+  <code>Boolean</code>.</p>
+
+  <p><code>boolean()</code> converts values to <code>true</code> or
+  <code>false</code>.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a string, then
+
+  <code>boolean('true')</code> will return <code>true</code> and every other
+  string value will
+
+  return <code>false</code>. If <code>n</code> is a number, then
+  <code>boolean(0)</code> will return <code>false</code>
+
+  and every other numeric value will return <code>true</code>. If an array is
+  passed, as
+
+  <code>in boolean([0, 1, 'true', 'blue'])</code>, then an array of Boolean
+  values will
+
+  be returned.</p>
+line: 341
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 0;
+
+      // Convert the number to a Boolean value.
+      let converted = boolean(original);
+
+      // Style the circle based on the converted value.
+      if (converted === true) {
+        fill('blue');
+      } else {
+        fill('red');
+      }
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A red circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = 'true';
+
+      // Convert the string to a Boolean value.
+      let converted = boolean(original);
+
+      // Style the circle based on the converted value.
+      if (converted === true) {
+        fill('blue');
+      } else {
+        fill('red');
+      }
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A blue circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of values.
+      let original = [0, 'hi', 123, 'true'];
+
+      // Convert the array to a Boolean values.
+      let converted = boolean(original);
+
+      // Iterate over the array of converted Boolean values.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Style the circle based on the converted value.
+        if (converted[i] === true) {
+          fill('blue');
+        } else {
+          fill('red');
+        }
+
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 20;
+
+        // Draw the circle.
+        circle(x, 50, 15);
+      }
+
+      describe(
+        'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted Boolean value.
+  type: Boolean
+overloads:
+  - line: 341
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Boolean|Number
+    return:
+      description: converted Boolean value.
+      type: Boolean
+  - line: 451
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted Boolean values.
+      type: 'Boolean[]'
+chainable: false
+---
+
+
+# boolean
diff --git a/src/content/reference/en/p5 copy/box.mdx b/src/content/reference/en/p5 copy/box.mdx
new file mode 100644
index 0000000000..a4f5282947
--- /dev/null
+++ b/src/content/reference/en/p5 copy/box.mdx	
@@ -0,0 +1,186 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1009
+title: box
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a box (rectangular prism).</p>
+
+  <p>A box is a 3D shape with six faces. Each face makes a 90˚ with four
+
+  neighboring faces.</p>
+
+  <p>The first parameter, <code>width</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>box(20)</code>, it sets the box’s width and height. By default,
+  <code>width</code> is 50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>box(20, 30)</code>, it sets the box’s height. By default,
+  <code>height</code> is set
+
+  to the box’s <code>width</code>.</p>
+
+  <p>The third parameter, <code>depth</code>, is also optional. If a
+  <code>Number</code> is passed, as
+
+  in <code>box(20, 30, 40)</code>, it sets the box’s depth. By default,
+  <code>depth</code> is set
+
+  to the box’s <code>height</code>.</p>
+
+  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>box(20, 30, 40, 5)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the x-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailX</code> is 1.</p>
+
+  <p>The fifth parameter, <code>detailY</code>, is also optional. If a number is
+  passed, as
+
+  in <code>box(20, 30, 40, 5, 7)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailY</code> is 1.</p>
+
+  <p>Note: <code>box()</code> can only be used in WebGL mode.</p>
+line: 1009
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      // Set its width and height to 30.
+      box(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      // Set its width to 30 and height to 50.
+      box(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the box.
+      // Set its width to 30, height to 50, and depth to 10.
+      box(30, 50, 10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width of the box.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the box.</p>
+    type: Number
+    optional: true
+  - name: depth
+    description: |
+      <p>depth of the box.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# box
diff --git a/src/content/reference/en/p5 copy/brightness.mdx b/src/content/reference/en/p5 copy/brightness.mdx
new file mode 100644
index 0000000000..2860cbf226
--- /dev/null
+++ b/src/content/reference/en/p5 copy/brightness.mdx	
@@ -0,0 +1,168 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L253
+title: brightness
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the brightness value of a color.</p>
+
+  <p><code>brightness()</code> extracts the HSB brightness value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>brightness()</code> returns a color's HSB brightness in
+  the range 0
+
+  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  HSB, it
+
+  returns the brightness value in the given range.</p>
+line: 253
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a p5.Color object.
+      let c = color(0, 50, 100);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 100.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a color array.
+      let c = [0, 50, 100];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 100.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 100.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color with values in the range 0-255.
+      colorMode(HSB, 255);
+
+      // Create a p5.Color object.
+      let c = color(0, 127, 255);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'brightValue' to 255.
+      let brightValue = brightness(c);
+
+      // Draw the right rectangle.
+      fill(brightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the brightness value.
+  type: Number
+chainable: false
+---
+
+
+# brightness
diff --git a/src/content/reference/en/p5 copy/buildGeometry.mdx b/src/content/reference/en/p5 copy/buildGeometry.mdx
new file mode 100644
index 0000000000..ef58d7b650
--- /dev/null
+++ b/src/content/reference/en/p5 copy/buildGeometry.mdx	
@@ -0,0 +1,263 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L520
+title: buildGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Creates a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object
+  from
+
+  simpler 3D shapes.</p>
+
+  <p><code>buildGeometry()</code> helps with creating complex 3D shapes from
+  simpler ones
+
+  such as <a href="/reference/p5/sphere/">sphere()</a>. It can help to make
+  sketches
+
+  more performant. For example, if a complex 3D shape doesn’t change while a
+
+  sketch runs, then it can be created with <code>buildGeometry()</code>.
+  Creating a
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and then
+  drawing it
+
+  will run faster than repeatedly drawing the individual pieces.</p>
+
+  <p>The parameter, <code>callback</code>, is a function with the drawing
+  instructions for
+
+  the new <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object. It will be
+  called
+
+  once to create the new 3D shape.</p>
+
+  <p>See <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a> for another way to
+  build 3D
+
+  shapes.</p>
+
+  <p>Note: <code>buildGeometry()</code> can only be used in WebGL mode.</p>
+line: 520
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createShape);
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    // Create p5.Geometry object from a single cone.
+    function createShape() {
+      cone();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the arrow.
+      shape = buildGeometry(createArrow);
+
+      describe('A white arrow drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrow.
+      noStroke();
+
+      // Draw the arrow.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createArrow);
+
+      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the p5.Geometry object again.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+
+      describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = buildGeometry(createParticles);
+    }
+
+    function createParticles() {
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: callback
+    description: |
+      <p>function that draws the shape.</p>
+    type: Function
+return:
+  description: new 3D shape.
+  type: p5.Geometry
+chainable: false
+---
+
+
+# buildGeometry
diff --git a/src/content/reference/en/p5 copy/byte.mdx b/src/content/reference/en/p5 copy/byte.mdx
new file mode 100644
index 0000000000..0a6f3234a4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/byte.mdx	
@@ -0,0 +1,180 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L468
+title: byte
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Boolean</code>, <code>String</code>, or
+  <code>Number</code> to its byte value.</p>
+
+  <p><code>byte()</code> converts a value to an integer (whole number) between
+  -128 and
+
+  127. Values greater than 127 wrap around while negative values are
+
+  unchanged. For example, 128 becomes -128 and -129 remains the same.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a Boolean, as in
+
+  <code>byte(false)</code> or <code>byte(true)</code>, the number 0
+  (<code>false</code>) or 1 (<code>true</code>) will be
+
+  returned. If <code>n</code> is a string or number, as in
+  <code>byte('256')</code> or <code>byte(256)</code>,
+
+  then the byte value will be returned. Decimal values are ignored. If an
+
+  array is passed, as in <code>byte([true, 123, '456'])</code>, then an array of
+  byte
+
+  values will be returned.</p>
+
+  <p>Note: If a value can't be converted to a number, as in
+  <code>byte('giraffe')</code>,
+
+  then the value <code>NaN</code> (not a number) will be returned.</p>
+line: 468
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a Boolean variable.
+      let original = true;
+
+      // Convert the Boolean to its byte value.
+      let converted = byte(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "true : 1" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '256';
+
+      // Convert the string to its byte value.
+      let converted = byte(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "256 : 0" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 256;
+
+      // Convert the number to its byte value.
+      let converted = byte(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "256 : 0" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of values.
+      let original = [false, '64', 383];
+
+      // Convert the array elements to their byte values.
+      let converted = byte(original);
+
+      // Iterate over the converted array elements.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Style the circle.
+        fill(converted[i]);
+
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 25;
+
+        // Draw the circle.
+        circle(x, 50, 20);
+      }
+
+      describe(
+        'Three gray circles on a gray background. The circles get lighter from left to right.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted byte value.
+  type: Number
+overloads:
+  - line: 468
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Boolean|Number
+    return:
+      description: converted byte value.
+      type: Number
+  - line: 598
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted byte values.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# byte
diff --git a/src/content/reference/en/p5 copy/camera.mdx b/src/content/reference/en/p5 copy/camera.mdx
new file mode 100644
index 0000000000..55f983385e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/camera.mdx	
@@ -0,0 +1,200 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L13
+title: camera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets the position and orientation of the current camera in a 3D sketch.</p>
+
+  <p><code>camera()</code> allows objects to be viewed from different angles. It
+  has nine
+
+  parameters that are all optional.</p>
+
+  <p>The first three parameters, <code>x</code>, <code>y</code>, and
+  <code>z</code>, are the coordinates of the
+
+  camera’s position. For example, calling <code>camera(0, 0, 0)</code> places
+  the camera
+
+  at the origin <code>(0, 0, 0)</code>. By default, the camera is placed at
+
+  <code>(0, 0, 800)</code>.</p>
+
+  <p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and
+  <code>centerZ</code> are the
+
+  coordinates of the point where the camera faces. For example, calling
+
+  <code>camera(0, 0, 0, 10, 20, 30)</code> places the camera at the origin
+  <code>(0, 0, 0)</code>
+
+  and points it at <code>(10, 20, 30)</code>. By default, the camera points at
+  the
+
+  origin <code>(0, 0, 0)</code>.</p>
+
+  <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
+  <code>upZ</code> are the components of
+
+  the "up" vector. The "up" vector orients the camera’s y-axis. For example,
+
+  calling <code>camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera
+  at the
+
+  origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
+  sets the "up" vector
+
+  to <code>(0, -1, 0)</code> which is like holding it upside-down. By default,
+  the "up"
+
+  vector is <code>(0, 1, 0)</code>.</p>
+
+  <p>Note: <code>camera()</code> can only be used in WebGL mode.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Move the camera to the top-right.
+      camera(200, -400, 800);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube apperas to sway left and right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the camera's x-coordinate.
+      let x = 400 * cos(frameCount * 0.01);
+
+      // Orbit the camera around the box.
+      camera(x, -400, 800);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Adjust the range sliders to change the camera's position.
+
+    let xSlider;
+    let ySlider;
+    let zSlider;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create slider objects to set the camera's coordinates.
+      xSlider = createSlider(-400, 400, 400);
+      xSlider.position(0, 100);
+      xSlider.size(100);
+      ySlider = createSlider(-400, 400, -200);
+      ySlider.position(0, 120);
+      ySlider.size(100);
+      zSlider = createSlider(0, 1600, 800);
+      zSlider.position(0, 140);
+      zSlider.size(100);
+
+      describe(
+        'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Get the camera's coordinates from the sliders.
+      let x = xSlider.value();
+      let y = ySlider.value();
+      let z = zSlider.value();
+
+      // Move the camera.
+      camera(x, y, z);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the camera. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the camera. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z-coordinate of the camera. Defaults to 800.</p>
+    type: Number
+    optional: true
+  - name: centerX
+    description: |
+      <p>x-coordinate of the point the camera faces. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: centerY
+    description: |
+      <p>y-coordinate of the point the camera faces. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: centerZ
+    description: |
+      <p>z-coordinate of the point the camera faces. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: upX
+    description: |
+      <p>x-component of the camera’s "up" vector. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: upY
+    description: |
+      <p>y-component of the camera’s "up" vector. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: upZ
+    description: |
+      <p>z-component of the camera’s "up" vector. Defaults to 0.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# camera
diff --git a/src/content/reference/en/p5 copy/ceil.mdx b/src/content/reference/en/p5 copy/ceil.mdx
new file mode 100644
index 0000000000..45c17468bf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ceil.mdx	
@@ -0,0 +1,65 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L48
+title: ceil
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the closest integer value that is greater than or equal to a
+
+  number.</p>
+
+  <p>For example, calling <code>ceil(9.03)</code> and <code>ceil(9.97)</code>
+  both return the value
+
+  10.</p>
+line: 48
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values from 0 to 1.
+      colorMode(RGB, 1);
+
+      noStroke();
+
+      // Draw the left rectangle.
+      let r = 0.3;
+      fill(r, 0, 0);
+      rect(0, 0, 50, 100);
+
+      // Round r up to 1.
+      r = ceil(r);
+
+      // Draw the right rectangle.
+      fill(r, 0, 0);
+      rect(50, 0, 50, 100);
+
+      describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to round up.</p>
+    type: Number
+return:
+  description: rounded up number.
+  type: Integer
+chainable: false
+---
+
+
+# ceil
diff --git a/src/content/reference/en/p5 copy/changed.mdx b/src/content/reference/en/p5 copy/changed.mdx
new file mode 100644
index 0000000000..45289630e9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/changed.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L330
+title: changed
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>Calls a function when the element changes.</p>
+  <p>Calling <code>myElement.changed(false)</code> disables the function.</p>
+line: 330
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let dropdown;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a dropdown menu and add a few color options.
+      dropdown = createSelect();
+      dropdown.position(0, 0);
+      dropdown.option('red');
+      dropdown.option('green');
+      dropdown.option('blue');
+
+      // Call paintBackground() when the color option changes.
+      dropdown.changed(paintBackground);
+
+      describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');
+    }
+
+    // Paint the background with the selected color.
+    function paintBackground() {
+      let c = dropdown.value();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a checkbox and place it beneath the canvas.
+      checkbox = createCheckbox(' circle');
+      checkbox.position(0, 100);
+
+      // Call repaint() when the checkbox changes.
+      checkbox.changed(repaint);
+
+      describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.');
+    }
+
+    // Paint the background gray and determine whether to draw a circle.
+    function repaint() {
+      background(200);
+      if (checkbox.checked() === true) {
+        circle(50, 50, 30);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fxn
+    description: |
+      <p>function to call when the element changes.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+chainable: true
+---
+
+
+# changed
diff --git a/src/content/reference/en/p5 copy/char.mdx b/src/content/reference/en/p5 copy/char.mdx
new file mode 100644
index 0000000000..e01e22a9f7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/char.mdx	
@@ -0,0 +1,152 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L612
+title: char
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Number</code> or <code>String</code> to a single-character
+  <code>String</code>.</p>
+
+  <p><code>char()</code> converts numbers to their single-character string
+  representations.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If a number is
+  passed, as in
+
+  <code>char(65)</code>, the corresponding single-character string is returned.
+  If a
+
+  string is passed, as in <code>char('65')</code>, the string is converted to an
+  integer
+
+  (whole number) and the corresponding single-character string is returned.
+
+  If an array is passed, as in <code>char([65, 66, 67])</code>, an array of
+
+  single-character strings is returned.</p>
+
+  <p>See <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode/"
+  target="_blank">MDN</a>
+
+  for more information about conversions.</p>
+line: 612
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 65;
+
+      // Convert the number to a char.
+      let converted = char(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "65 : A" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '65';
+
+      // Convert the string to a char.
+      let converted = char(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "65 : A" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = ['65', 66, '67'];
+
+      // Convert the string to a char.
+      let converted = char(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Iterate over elements of the converted array.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${original[i]} : ${converted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "65 : A", "66 : B", and "67 : C" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted single-character string.
+  type: String
+overloads:
+  - line: 612
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Number
+    return:
+      description: converted single-character string.
+      type: String
+  - line: 716
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted single-character strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# char
diff --git a/src/content/reference/en/p5 copy/circle.mdx b/src/content/reference/en/p5 copy/circle.mdx
new file mode 100644
index 0000000000..46069bea74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/circle.mdx	
@@ -0,0 +1,77 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L488
+title: circle
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a circle.</p>
+
+  <p>A circle is a round shape defined by the <code>x</code>, <code>y</code>,
+  and <code>d</code> parameters.
+
+  <code>x</code> and <code>y</code> set the location of its center.
+  <code>d</code> sets its width and height (diameter).
+
+  Every point on the circle's edge is the same distance, <code>0.5 * d</code>,
+  from its center.
+
+  <code>0.5 * d</code> (half the diameter) is the circle's radius.
+
+  See <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to
+  set its position.</p>
+line: 488
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      circle(50, 50, 25);
+
+      describe('A white circle with black outline in the middle of a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      circle(0, 0, 25);
+
+      describe('A white circle with black outline in the middle of a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the center of the circle.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the center of the circle.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>diameter of the circle.</p>
+    type: Number
+chainable: true
+---
+
+
+# circle
diff --git a/src/content/reference/en/p5 copy/class.mdx b/src/content/reference/en/p5 copy/class.mdx
new file mode 100644
index 0000000000..94b64b75c2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/class.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1329
+title: class
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);\n</code></pre>\n<p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n</code></pre>\n<p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n  constructor(x, y, size) {\n    // This code runs once when an instance is created.\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    // This code runs once when myFrog.show() is called.\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    // This code runs once when myFrog.hop() is called.\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n}\n</code></pre>\n<p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();\n</code></pre>\n"
+line: 1329
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variable a new Frog object.\n  fifi = new Frog(50, 50, 20);\n\n  describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frog.\n  fifi.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n\n  // Move the frogs.\n  frog1.hop();\n  frog2.hop();\n\n  // Wrap around if they've hopped off the edge.\n  frog1.checkEdges();\n  frog2.checkEdges();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Add Frog objects to the array.\n  for (let i = 0; i < 5; i += 1) {\n    // Calculate random coordinates and size.\n    let x = random(0, 100);\n    let y = random(0, 100);\n    let s = random(2, 20);\n\n    // Create a new Frog object.\n    let frog = new Frog(x, y, s);\n\n    // Add the Frog to the array.\n    frogs.push(frog);\n  }\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe(\n    'Five frog faces on a blue background. The frogs hop around randomly.'\n  );\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  for (let frog of frogs) {\n    // Show the frog.\n    frog.show();\n\n    // Move the frog.\n    frog.hop();\n\n    // Wrap around if they've hopped off the edge.\n    frog.checkEdges();\n  }\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# class
diff --git a/src/content/reference/en/p5 copy/clear.mdx b/src/content/reference/en/p5 copy/clear.mdx
new file mode 100644
index 0000000000..a096184afc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clear.mdx	
@@ -0,0 +1,108 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L673
+title: clear
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Clears the pixels on the canvas.</p>
+
+  <p><code>clear()</code> makes every pixel 100% transparent. Calling
+  <code>clear()</code> doesn't
+
+  clear objects created by <code>createX()</code> functions such as
+
+  <a href="/reference/p5/createGraphics/">createGraphics()</a>,
+
+  <a href="/reference/p5/createVideo/">createVideo()</a>, and
+
+  <a href="/reference/p5/createImg/">createImg()</a>. These objects will remain
+
+  unchanged after calling <code>clear()</code> and can be redrawn.</p>
+
+  <p>In WebGL mode, this function can clear the screen to a specific color. It
+
+  interprets four numeric parameters as normalized RGBA color values. It also
+
+  clears the depth buffer. If you are not using the WebGL renderer, these
+
+  parameters will have no effect.</p>
+line: 673
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');
+    }
+
+    function draw() {
+      circle(mouseX, mouseY, 20);
+    }
+
+    function mousePressed() {
+      clear();
+      background(200);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      pg = createGraphics(60, 60);
+      pg.background(200);
+      pg.noStroke();
+      pg.circle(pg.width / 2, pg.height / 2, 15);
+      image(pg, 20, 20);
+
+      describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
+    }
+
+    function mousePressed() {
+      clear();
+      image(pg, 20, 20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: r
+    description: |
+      <p>normalized red value.</p>
+    type: Number
+    optional: true
+  - name: g
+    description: |
+      <p>normalized green value.</p>
+    type: Number
+    optional: true
+  - name: b
+    description: |
+      <p>normalized blue value.</p>
+    type: Number
+    optional: true
+  - name: a
+    description: |
+      <p>normalized alpha value.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# clear
diff --git a/src/content/reference/en/p5 copy/clearDepth.mdx b/src/content/reference/en/p5 copy/clearDepth.mdx
new file mode 100644
index 0000000000..25425d1920
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clearDepth.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L635
+title: clearDepth
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Clears the depth buffer in WebGL mode.</p>
+
+  <p><code>clearDepth()</code> clears information about how far objects are from
+  the camera
+
+  in 3D space. This information is stored in an object called the
+
+  <em>depth buffer</em>. Clearing the depth buffer ensures new objects aren't
+  drawn
+
+  behind old ones. Doing so can be useful for feedback effects in which the
+
+  previous frame serves as the background for the current frame.</p>
+
+  <p>The parameter, <code>depth</code>, is optional. If a number is passed, as
+  in
+
+  <code>clearDepth(0.5)</code>, it determines the range of objects to clear from
+  the
+
+  depth buffer. 0 doesn't clear any depth information, 0.5 clears depth
+
+  information halfway between the near and far clipping planes, and 1 clears
+
+  depth information all the way to the far clipping plane. By default,
+
+  <code>depth</code> is 1.</p>
+
+  <p>Note: <code>clearDepth()</code> can only be used in WebGL mode.</p>
+line: 635
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let previous;
+    let current;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Framebuffer objects.
+      previous = createFramebuffer({ format: FLOAT });
+      current = createFramebuffer({ format: FLOAT });
+
+      describe(
+        'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'
+      );
+    }
+
+    function draw() {
+      // Swap the previous p5.Framebuffer and the
+      // current one so it can be used as a texture.
+      [previous, current] = [current, previous];
+
+      // Start drawing to the current p5.Framebuffer.
+      current.begin();
+
+      // Paint the background.
+      background(255);
+
+      // Draw the previous p5.Framebuffer.
+      // Clear the depth buffer so the previous
+      // frame doesn't block the current one.
+      push();
+      tint(255, 250);
+      image(previous, -50, -50);
+      clearDepth();
+      pop();
+
+      // Draw the box on top of the previous frame.
+      push();
+      let x = 25 * sin(frameCount * 0.01);
+      let y = 25 * sin(frameCount * 0.02);
+      translate(x, y, 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      normalMaterial();
+      box(12);
+      pop();
+
+      // Stop drawing to the current p5.Framebuffer.
+      current.end();
+
+      // Display the current p5.Framebuffer.
+      image(current, -50, -50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: depth
+    description: |
+      <p>amount of the depth buffer to clear between 0
+                              (none) and 1 (far clipping plane). Defaults to 1.</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# clearDepth
diff --git a/src/content/reference/en/p5 copy/clearStorage.mdx b/src/content/reference/en/p5 copy/clearStorage.mdx
new file mode 100644
index 0000000000..d2c89e63bf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clearStorage.mdx	
@@ -0,0 +1,81 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L313
+title: clearStorage
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Removes all items in the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs. Calling <code>clearStorage()</code> removes all data from
+  <code>localStorage</code>.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 313
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to clear localStorage.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe(
+        'The text "Feist: 1234" written in black on a gray background. The text "null: null" appears when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+
+    // Clear localStorage when the user double-clicks.
+    function doubleClicked() {
+      clearStorage();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# clearStorage
diff --git a/src/content/reference/en/p5 copy/clip.mdx b/src/content/reference/en/p5 copy/clip.mdx
new file mode 100644
index 0000000000..ae72687f03
--- /dev/null
+++ b/src/content/reference/en/p5 copy/clip.mdx	
@@ -0,0 +1,225 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L222
+title: clip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Defines a shape that will mask any shapes drawn afterward.</p>
+
+  <p>The first parameter, <code>callback</code>, is a function that defines the
+  mask.
+
+  Any shapes drawn in  <code>callback</code> will add to the mask shape. The
+  mask
+
+  will apply to anything drawn after <code>clip()</code> is called.</p>
+
+  <p>The second parameter, <code>options</code>, is optional. If an object with
+  an <code>invert</code>
+
+  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
+  used to
+
+  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
+  holes
+
+  in shapes that are masked. <code>invert</code> is <code>false</code> by
+  default.</p>
+
+  <p>Masks can be contained between the
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions.
+
+  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
+
+  <p>Masks can also be defined with <a
+  href="/reference/p5/beginClip/">beginClip()</a>
+
+  and <a href="/reference/p5/endClip/">endClip()</a>.</p>
+line: 222
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white triangle and circle on a gray background.');
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an inverted mask.
+      clip(mask, { invert: true });
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      noStroke();
+
+      // Draw a masked shape.
+      push();
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw an inverted masked shape.
+      push();
+      // Create an inverted mask.
+      clip(mask, { invert: true });
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+      pop();
+
+      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored fuchsia.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      noStroke();
+      fill('fuchsia');
+      plane(100);
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a mask.
+      clip(mask);
+
+      // Draw a backing shape.
+      noStroke();
+      beginShape(QUAD_STRIP);
+      fill(0, 255, 255);
+      vertex(-width / 2, -height / 2);
+      vertex(width / 2, -height / 2);
+      fill(100, 0, 100);
+      vertex(-width / 2, height / 2);
+      vertex(width / 2, height / 2);
+      endShape();
+    }
+
+    // Declare a function that defines the mask.
+    function mask() {
+      push();
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      scale(0.5);
+      torus(30, 15);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: callback
+    description: |
+      <p>a function that draws the mask shape.</p>
+    type: Function
+  - name: options
+    description: |
+      <p>an object containing clip settings.</p>
+    type: Object
+    optional: true
+chainable: false
+---
+
+
+# clip
diff --git a/src/content/reference/en/p5 copy/color.mdx b/src/content/reference/en/p5 copy/color.mdx
new file mode 100644
index 0000000000..ad2bdbd8da
--- /dev/null
+++ b/src/content/reference/en/p5 copy/color.mdx	
@@ -0,0 +1,349 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L398
+title: color
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Creates a <a href="/reference/p5/p5.Color">p5.Color</a> object.</p>
+
+  <p>By default, the parameters are interpreted as RGB values. Calling
+
+  <code>color(255, 204, 0)</code> will return a bright yellow color. The way
+  these
+
+  parameters are interpreted may be changed with the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
+
+  <p>The version of <code>color()</code> with one parameter interprets the value
+  one of two
+
+  ways. If the parameter is a number, it's interpreted as a grayscale value.
+
+  If the parameter is a string, it's interpreted as a CSS color string.</p>
+
+  <p>The version of <code>color()</code> with two parameters interprets the
+  first one as a
+
+  grayscale value. The second parameter sets the alpha (transparency) value.</p>
+
+  <p>The version of <code>color()</code> with three parameters interprets them
+  as RGB, HSB,
+
+  or HSL colors, depending on the current <code>colorMode()</code>.</p>
+
+  <p>The version of <code>color()</code> with four parameters interprets them as
+  RGBA, HSBA,
+
+  or HSLA colors, depending on the current <code>colorMode()</code>. The last
+  parameter
+
+  sets the alpha (transparency) value.</p>
+line: 398
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(255, 204, 0);
+
+      // Draw the square.
+      fill(c);
+      noStroke();
+      square(30, 20, 55);
+
+      describe('A yellow square on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c1 = color(255, 204, 0);
+
+      // Draw the left circle.
+      fill(c1);
+      noStroke();
+      circle(25, 25, 80);
+
+      // Create a p5.Color object using a grayscale value.
+      let c2 = color(65);
+
+      // Draw the right circle.
+      fill(c2);
+      circle(75, 75, 80);
+
+      describe(
+        'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a named color.
+      let c = color('magenta');
+
+      // Draw the square.
+      fill(c);
+      noStroke();
+      square(20, 20, 60);
+
+      describe('A magenta square on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a hex color code.
+      let c1 = color('#0f0');
+
+      // Draw the left rectangle.
+      fill(c1);
+      noStroke();
+      rect(0, 10, 45, 80);
+
+      // Create a p5.Color object using a hex color code.
+      let c2 = color('#00ff00');
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two bright green rectangles on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a RGB color string.
+      let c1 = color('rgb(0, 0, 255)');
+
+      // Draw the top-left square.
+      fill(c1);
+      square(10, 10, 35);
+
+      // Create a p5.Color object using a RGB color string.
+      let c2 = color('rgb(0%, 0%, 100%)');
+
+      // Draw the top-right square.
+      fill(c2);
+      square(55, 10, 35);
+
+      // Create a p5.Color object using a RGBA color string.
+      let c3 = color('rgba(0, 0, 255, 1)');
+
+      // Draw the bottom-left square.
+      fill(c3);
+      square(10, 55, 35);
+
+      // Create a p5.Color object using a RGBA color string.
+      let c4 = color('rgba(0%, 0%, 100%, 1)');
+
+      // Draw the bottom-right square.
+      fill(c4);
+      square(55, 55, 35);
+
+      describe('Four blue squares in the corners of a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a HSL color string.
+      let c1 = color('hsl(160, 100%, 50%)');
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c1);
+      rect(0, 10, 45, 80);
+
+      // Create a p5.Color object using a HSLA color string.
+      let c2 = color('hsla(160, 100%, 50%, 0.5)');
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using a HSB color string.
+      let c1 = color('hsb(160, 100%, 50%)');
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c1);
+      rect(0, 10, 45, 80);
+
+      // Create a p5.Color object using a HSBA color string.
+      let c2 = color('hsba(160, 100%, 50%, 0.5)');
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object using RGB values.
+      let c1 = color(50, 55, 100);
+
+      // Draw the left rectangle.
+      fill(c1);
+      rect(0, 10, 45, 80);
+
+      // Switch the color mode to HSB.
+      colorMode(HSB, 100);
+
+      // Create a p5.Color object using HSB values.
+      let c2 = color(50, 55, 100);
+
+      // Draw the right rectangle.
+      fill(c2);
+      rect(55, 10, 45, 80);
+
+      describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: resulting color.
+  type: p5.Color
+overloads:
+  - line: 398
+    params:
+      - name: gray
+        description: |
+          <p>number specifying value between white and black.</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha value relative to current color range
+                                          (default is 0-255).</p>
+        type: Number
+        optional: true
+    return:
+      description: resulting color.
+      type: p5.Color
+  - line: 652
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value relative to
+                                          the current color range.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value
+                                          relative to the current color range.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue or brightness value
+                                          relative to the current color range.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    return:
+      description: ''
+      type: p5.Color
+  - line: 664
+    params:
+      - name: value
+        description: |
+          <p>a color string.</p>
+        type: String
+    return:
+      description: ''
+      type: p5.Color
+  - line: 670
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue,
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    return:
+      description: ''
+      type: p5.Color
+  - line: 677
+    params:
+      - name: color
+        description: ''
+        type: p5.Color
+    return:
+      description: ''
+      type: p5.Color
+chainable: false
+---
+
+
+# color
diff --git a/src/content/reference/en/p5 copy/colorMode.mdx b/src/content/reference/en/p5 copy/colorMode.mdx
new file mode 100644
index 0000000000..b4aca3c9ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/colorMode.mdx	
@@ -0,0 +1,271 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L751
+title: colorMode
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Changes the way color values are interpreted.</p>
+
+  <p>By default, the <code>Number</code> parameters for <a
+  href="/reference/p5/fill/">fill()</a>,
+
+  <a href="/reference/p5/stroke/">stroke()</a>,
+
+  <a href="/reference/p5/background/">background()</a>, and
+
+  <a href="/reference/p5/color/">color()</a> are defined by values between 0 and
+  255
+
+  using the RGB color model. This is equivalent to calling
+
+  <code>colorMode(RGB, 255)</code>. Pure red is <code>color(255, 0, 0)</code> in
+  this model.</p>
+
+  <p>Calling <code>colorMode(RGB, 100)</code> sets colors to use RGB color
+  values
+
+  between 0 and 100. Pure red is <code>color(100, 0, 0)</code> in this
+  model.</p>
+
+  <p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes
+  to HSB or HSL system
+
+  instead of RGB. Pure red is <code>color(0, 100, 100)</code> in HSB and
+
+  <code>color(0, 100, 50)</code> in HSL.</p>
+
+  <p><a href="/reference/p5/p5.Color">p5.Color</a> objects remember the mode
+  that they were
+
+  created in. Changing modes doesn't affect their appearance.</p>
+line: 751
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Fill with pure red.
+      fill(255, 0, 0);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Fill with pure red.
+      fill(100, 0, 0);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Fill with pure red.
+      fill(0, 100, 100);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Fill with pure red.
+      fill(0, 100, 50);
+
+      circle(50, 50, 25);
+
+      describe('A gray square with a red circle at its center.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      for (let x = 0; x < 100; x += 1) {
+        for (let y = 0; y < 100; y += 1) {
+          stroke(x, y, 0);
+          point(x, y);
+        }
+      }
+
+      describe(
+        'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use HSB color with values in the range 0-100.
+      colorMode(HSB, 100);
+
+      for (let x = 0; x < 100; x += 1) {
+        for (let y = 0; y < 100; y += 1) {
+          stroke(x, y, 100);
+          point(x, y);
+        }
+      }
+
+      describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let myColor = color(180, 175, 230);
+      background(myColor);
+
+      // Use RGB color with values in the range 0-1.
+      colorMode(RGB, 1);
+
+      // Get the red, green, and blue color components.
+      let redValue = red(myColor);
+      let greenValue = green(myColor);
+      let blueValue = blue(myColor);
+
+      // Round the color components for display.
+      redValue = round(redValue, 2);
+      greenValue = round(greenValue, 2);
+      blueValue = round(blueValue, 2);
+
+      // Display the color components.
+      text(`Red: ${redValue}`, 10, 10, 80, 80);
+      text(`Green: ${greenValue}`, 10, 40, 80, 80);
+      text(`Blue: ${blueValue}`, 10, 70, 80, 80);
+
+      describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Use RGB color with alpha values in the range 0-1.
+      colorMode(RGB, 255, 255, 255, 1);
+
+      noFill();
+      strokeWeight(4);
+      stroke(255, 0, 10, 0.3);
+      circle(40, 40, 50);
+      circle(50, 60, 50);
+
+      describe('Two overlapping translucent pink circle outlines.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 751
+    params:
+      - name: mode
+        description: |
+          <p>either RGB, HSB or HSL, corresponding to
+                                   Red/Green/Blue and Hue/Saturation/Brightness
+                                   (or Lightness).</p>
+        type: Constant
+      - name: max
+        description: |
+          <p>range for all values.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 956
+    params:
+      - name: mode
+        description: ''
+        type: Constant
+      - name: max1
+        description: |
+          <p>range for the red or hue depending on the
+                                       current color mode.</p>
+        type: Number
+      - name: max2
+        description: |
+          <p>range for the green or saturation depending
+                                       on the current color mode.</p>
+        type: Number
+      - name: max3
+        description: |
+          <p>range for the blue or brightness/lightness
+                                       depending on the current color mode.</p>
+        type: Number
+      - name: maxA
+        description: |
+          <p>range for the alpha.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# colorMode
diff --git a/src/content/reference/en/p5 copy/concat.mdx b/src/content/reference/en/p5 copy/concat.mdx
new file mode 100644
index 0000000000..1e83bf84c0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/concat.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L112
+title: concat
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Concatenates two arrays, maps to Array.concat(). Does not modify the
+  input arrays.</p>
+line: 112
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat">arr1.concat(arr2)</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let arr1 = ['A', 'B', 'C'];
+      let arr2 = [1, 2, 3];
+
+      print(arr1); // ['A','B','C']
+      print(arr2); // [1,2,3]
+
+      let arr3 = concat(arr1, arr2);
+
+      print(arr1); // ['A','B','C']
+      print(arr2); // [1, 2, 3]
+      print(arr3); // ['A','B','C', 1, 2, 3]
+    }
+    </code></div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>first Array to concatenate</p>
+    type: Array
+  - name: b
+    description: |
+      <p>second Array to concatenate</p>
+    type: Array
+return:
+  description: concatenated array
+  type: Array
+chainable: false
+---
+
+
+# concat
diff --git a/src/content/reference/en/p5 copy/cone.mdx b/src/content/reference/en/p5 copy/cone.mdx
new file mode 100644
index 0000000000..ff0756d0a5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cone.mdx	
@@ -0,0 +1,265 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1730
+title: cone
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a cone.</p>
+
+  <p>A cone is a 3D shape with triangular faces that connect a flat bottom to a
+
+  single point. Cones with few faces look like pyramids. Cones with many
+
+  faces have smooth surfaces.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>cone(20)</code>, it sets the radius of the cone’s base. By default,
+  <code>radius</code> is
+
+  50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cone(20, 30)</code>, it sets the cone’s height. By default,
+  <code>height</code> is
+
+  set to the cone’s <code>radius</code>.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cone(20, 30, 5)</code>, it sets the number of edges used to form
+  the
+
+  cone's base. Using more edges makes the base look more like a circle. By
+
+  default, <code>detailX</code> is 24.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cone(20, 30, 5, 7)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis connecting the base to the tip. All 3D shapes are made
+
+  by connecting triangles to form their surfaces. By default,
+  <code>detailY</code> is 1.</p>
+
+  <p>The fifth parameter, <code>cap</code>, is also optional. If a
+  <code>false</code> is passed, as
+
+  in <code>cone(20, 30, 5, 7, false)</code> the cone’s base won’t be drawn. By
+  default,
+
+  <code>cap</code> is <code>true</code>.</p>
+
+  <p>Note: <code>cone()</code> can only be used in WebGL mode.</p>
+line: 1730
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      cone();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius and height to 30.
+      cone(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      cone(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 5.
+      cone(30, 50, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white pyramid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 5.
+      cone(30, 50, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 2.
+      cone(30, 50, 24, 2);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cone on a gray background. Its base is missing.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cone.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 1.
+      // Don't draw its base.
+      cone(30, 50, 24, 1, false);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the cone's base. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the cone. Defaults to the value of <code>radius</code>.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of edges used to draw the base. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
+    type: Integer
+    optional: true
+  - name: cap
+    description: |
+      <p>whether to draw the cone's base.  Defaults to <code>true</code>.</p>
+    type: Boolean
+    optional: true
+chainable: true
+---
+
+
+# cone
diff --git a/src/content/reference/en/p5 copy/console.mdx b/src/content/reference/en/p5 copy/console.mdx
new file mode 100644
index 0000000000..411b08357e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/console.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1988
+title: console
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Prints a message to the web browser's console.</p>
+
+  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/console/"
+  target="_blank">console</a>
+
+  object is helpful for printing messages while debugging. For example, it's
+
+  common to add a <code>console.log()</code> statement while studying how a
+  section of
+
+  code works:</p>
+
+  <pre><code class="language-js">if (isPlaying === true) {
+    // Add a console.log() statement to make sure this block of code runs.
+    console.log('Got here!');
+
+    // Game logic.
+  }
+
+  </code></pre>
+
+  <p><code>console.error()</code> is helpful for tracking errors because it
+  prints
+
+  formatted messages. For example, it's common to encounter errors when
+
+  loading media assets:</p>
+
+  <pre><code class="language-js">// Logs an error message with special
+  formatting.
+
+  function handleFailure(error) {
+    console.error('Oops!', error);
+  }
+
+
+  // Try to load an image and call handleError() if it fails.
+
+  loadImage('https://example.com/cat.jpg', handleImage, handleError);
+
+  </code></pre>
+line: 1988
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Prints "Hello!" to the console.
+      console.log('Hello!');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Try to load an image from a fake URL.
+      // Call handleError() if the image fails to load.
+      loadImage('https://example.com/cat.jpg', handleImage, handleError);
+    }
+
+    // Displays the image.
+    function handleImage(img) {
+      image(img, 0, 0);
+
+      describe('A cat on a gray background.');
+    }
+
+    // Prints the error.
+    function handleError(error) {
+      console.error('Oops!', error);
+
+      describe('A gray square.');
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# console
diff --git a/src/content/reference/en/p5 copy/constants/ADD.mdx b/src/content/reference/en/p5 copy/constants/ADD.mdx
new file mode 100644
index 0000000000..9148f688e9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ADD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L905
+title: ADD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 905
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ADD
diff --git a/src/content/reference/en/p5 copy/constants/ALT.mdx b/src/content/reference/en/p5 copy/constants/ALT.mdx
new file mode 100644
index 0000000000..a039e3919b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ALT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L820
+title: ALT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 820
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# ALT
diff --git a/src/content/reference/en/p5 copy/constants/ARROW.mdx b/src/content/reference/en/p5 copy/constants/ARROW.mdx
new file mode 100644
index 0000000000..d2a0e065a1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L55
+title: ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 55
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ARROW
diff --git a/src/content/reference/en/p5 copy/constants/AUTO.mdx b/src/content/reference/en/p5 copy/constants/AUTO.mdx
new file mode 100644
index 0000000000..185fb15902
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/AUTO.mdx	
@@ -0,0 +1,25 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L810
+title: AUTO
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>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 <a href="/reference/p5.Element/size/">size</a> function as
+  AUTO, at a time.</p>
+line: 810
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# AUTO
diff --git a/src/content/reference/en/p5 copy/constants/AXES.mdx b/src/content/reference/en/p5 copy/constants/AXES.mdx
new file mode 100644
index 0000000000..c6f60b6b89
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/AXES.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1171
+title: AXES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1171
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# AXES
diff --git a/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx b/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
new file mode 100644
index 0000000000..ee299ffcff
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L826
+title: BACKSPACE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 826
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# BACKSPACE
diff --git a/src/content/reference/en/p5 copy/constants/BASELINE.mdx b/src/content/reference/en/p5 copy/constants/BASELINE.mdx
new file mode 100644
index 0000000000..200aa201ec
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BASELINE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L675
+title: BASELINE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 675
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BASELINE
diff --git a/src/content/reference/en/p5 copy/constants/BEVEL.mdx b/src/content/reference/en/p5 copy/constants/BEVEL.mdx
new file mode 100644
index 0000000000..a4af3693f7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BEVEL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L777
+title: BEVEL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 777
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BEVEL
diff --git a/src/content/reference/en/p5 copy/constants/BEZIER.mdx b/src/content/reference/en/p5 copy/constants/BEZIER.mdx
new file mode 100644
index 0000000000..b2993b2c33
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BEZIER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1073
+title: BEZIER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1073
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BEZIER
diff --git a/src/content/reference/en/p5 copy/constants/BLEND.mdx b/src/content/reference/en/p5 copy/constants/BLEND.mdx
new file mode 100644
index 0000000000..bf367f05eb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BLEND.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L893
+title: BLEND
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 893
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BLEND
diff --git a/src/content/reference/en/p5 copy/constants/BLUR.mdx b/src/content/reference/en/p5 copy/constants/BLUR.mdx
new file mode 100644
index 0000000000..5580994e74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BLUR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1019
+title: BLUR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1019
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BLUR
diff --git a/src/content/reference/en/p5 copy/constants/BOLD.mdx b/src/content/reference/en/p5 copy/constants/BOLD.mdx
new file mode 100644
index 0000000000..6069c955e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BOLD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1036
+title: BOLD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1036
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BOLD
diff --git a/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx b/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
new file mode 100644
index 0000000000..2967579a9c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1041
+title: BOLDITALIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1041
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BOLDITALIC
diff --git a/src/content/reference/en/p5 copy/constants/BOTTOM.mdx b/src/content/reference/en/p5 copy/constants/BOTTOM.mdx
new file mode 100644
index 0000000000..b01ded11ea
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BOTTOM.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L670
+title: BOTTOM
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 670
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BOTTOM
diff --git a/src/content/reference/en/p5 copy/constants/BURN.mdx b/src/content/reference/en/p5 copy/constants/BURN.mdx
new file mode 100644
index 0000000000..7ba3764dac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/BURN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L976
+title: BURN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 976
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# BURN
diff --git a/src/content/reference/en/p5 copy/constants/CENTER.mdx b/src/content/reference/en/p5 copy/constants/CENTER.mdx
new file mode 100644
index 0000000000..cab0205cef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CENTER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L660
+title: CENTER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 660
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CENTER
diff --git a/src/content/reference/en/p5 copy/constants/CHAR.mdx b/src/content/reference/en/p5 copy/constants/CHAR.mdx
new file mode 100644
index 0000000000..564855787a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CHAR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1046
+title: CHAR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1046
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CHAR
diff --git a/src/content/reference/en/p5 copy/constants/CHORD.mdx b/src/content/reference/en/p5 copy/constants/CHORD.mdx
new file mode 100644
index 0000000000..40896bb3a1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CHORD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L750
+title: CHORD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 750
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CHORD
diff --git a/src/content/reference/en/p5 copy/constants/CLAMP.mdx b/src/content/reference/en/p5 copy/constants/CLAMP.mdx
new file mode 100644
index 0000000000..977b02599d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CLAMP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1126
+title: CLAMP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1126
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CLAMP
diff --git a/src/content/reference/en/p5 copy/constants/CLOSE.mdx b/src/content/reference/en/p5 copy/constants/CLOSE.mdx
new file mode 100644
index 0000000000..34bc946fe5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CLOSE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L740
+title: CLOSE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 740
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CLOSE
diff --git a/src/content/reference/en/p5 copy/constants/CONTAIN.mdx b/src/content/reference/en/p5 copy/constants/CONTAIN.mdx
new file mode 100644
index 0000000000..59d56be350
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CONTAIN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1188
+title: CONTAIN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1188
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CONTAIN
diff --git a/src/content/reference/en/p5 copy/constants/CONTROL.mdx b/src/content/reference/en/p5 copy/constants/CONTROL.mdx
new file mode 100644
index 0000000000..d620bb502d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CONTROL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L831
+title: CONTROL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 831
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# CONTROL
diff --git a/src/content/reference/en/p5 copy/constants/CORNER.mdx b/src/content/reference/en/p5 copy/constants/CORNER.mdx
new file mode 100644
index 0000000000..e8b5eced3e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CORNER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L635
+title: CORNER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 635
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CORNER
diff --git a/src/content/reference/en/p5 copy/constants/CORNERS.mdx b/src/content/reference/en/p5 copy/constants/CORNERS.mdx
new file mode 100644
index 0000000000..85e4226b1e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CORNERS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L640
+title: CORNERS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 640
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CORNERS
diff --git a/src/content/reference/en/p5 copy/constants/COVER.mdx b/src/content/reference/en/p5 copy/constants/COVER.mdx
new file mode 100644
index 0000000000..3714b4bec3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/COVER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1194
+title: COVER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1194
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# COVER
diff --git a/src/content/reference/en/p5 copy/constants/CROSS.mdx b/src/content/reference/en/p5 copy/constants/CROSS.mdx
new file mode 100644
index 0000000000..eba1238e34
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CROSS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L60
+title: CROSS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 60
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CROSS
diff --git a/src/content/reference/en/p5 copy/constants/CURVE.mdx b/src/content/reference/en/p5 copy/constants/CURVE.mdx
new file mode 100644
index 0000000000..3e46bf2151
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/CURVE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1078
+title: CURVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1078
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# CURVE
diff --git a/src/content/reference/en/p5 copy/constants/DARKEST.mdx b/src/content/reference/en/p5 copy/constants/DARKEST.mdx
new file mode 100644
index 0000000000..b86d06dec4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DARKEST.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L913
+title: DARKEST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 913
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DARKEST
diff --git a/src/content/reference/en/p5 copy/constants/DEGREES.mdx b/src/content/reference/en/p5 copy/constants/DEGREES.mdx
new file mode 100644
index 0000000000..c259f456ad
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DEGREES.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L547
+title: DEGREES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>String</code> constant that's used to set the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
+  and
+
+  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
+  radians.
+
+  Calling <code>angleMode(DEGREES)</code> ensures that angles are measured in
+  units of
+
+  degrees.</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
+line: 547
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a red arc from 0 to HALF_PI radians.
+      fill(255, 0, 0);
+      arc(50, 50, 80, 80, 0, HALF_PI);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Draw a blue arc from 90˚ to 180˚.
+      fill(0, 0, 255);
+      arc(50, 50, 80, 80, 90, 180);
+
+      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# DEGREES
diff --git a/src/content/reference/en/p5 copy/constants/DELETE.mdx b/src/content/reference/en/p5 copy/constants/DELETE.mdx
new file mode 100644
index 0000000000..3bef8a3983
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DELETE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L836
+title: DELETE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 836
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# DELETE
diff --git a/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx b/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
new file mode 100644
index 0000000000..27d7e0880c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L924
+title: DIFFERENCE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 924
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DIFFERENCE
diff --git a/src/content/reference/en/p5 copy/constants/DILATE.mdx b/src/content/reference/en/p5 copy/constants/DILATE.mdx
new file mode 100644
index 0000000000..5eca5b06dd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DILATE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1009
+title: DILATE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1009
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DILATE
diff --git a/src/content/reference/en/p5 copy/constants/DODGE.mdx b/src/content/reference/en/p5 copy/constants/DODGE.mdx
new file mode 100644
index 0000000000..ba1594bfe4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DODGE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L970
+title: DODGE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 970
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# DODGE
diff --git a/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx b/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
new file mode 100644
index 0000000000..c1d80ae679
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L841
+title: DOWN_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 841
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# DOWN\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ENTER.mdx b/src/content/reference/en/p5 copy/constants/ENTER.mdx
new file mode 100644
index 0000000000..0ded2aec7f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ENTER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L846
+title: ENTER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 846
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# ENTER
diff --git a/src/content/reference/en/p5 copy/constants/ERODE.mdx b/src/content/reference/en/p5 copy/constants/ERODE.mdx
new file mode 100644
index 0000000000..9dba021043
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ERODE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1014
+title: ERODE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1014
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ERODE
diff --git a/src/content/reference/en/p5 copy/constants/ESCAPE.mdx b/src/content/reference/en/p5 copy/constants/ESCAPE.mdx
new file mode 100644
index 0000000000..53256ed7ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ESCAPE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L851
+title: ESCAPE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 851
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# ESCAPE
diff --git a/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx b/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
new file mode 100644
index 0000000000..61c3572125
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L934
+title: EXCLUSION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 934
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# EXCLUSION
diff --git a/src/content/reference/en/p5 copy/constants/FALLBACK.mdx b/src/content/reference/en/p5 copy/constants/FALLBACK.mdx
new file mode 100644
index 0000000000..6c9f4ec37c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FALLBACK.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1182
+title: FALLBACK
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1182
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FALLBACK
diff --git a/src/content/reference/en/p5 copy/constants/FILL.mdx b/src/content/reference/en/p5 copy/constants/FILL.mdx
new file mode 100644
index 0000000000..9e2ca1ce96
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FILL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1090
+title: FILL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1090
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FILL
diff --git a/src/content/reference/en/p5 copy/constants/FLAT.mdx b/src/content/reference/en/p5 copy/constants/FLAT.mdx
new file mode 100644
index 0000000000..50d8b95b1e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FLAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1138
+title: FLAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1138
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FLAT
diff --git a/src/content/reference/en/p5 copy/constants/FLOAT.mdx b/src/content/reference/en/p5 copy/constants/FLOAT.mdx
new file mode 100644
index 0000000000..b063ffc631
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/FLOAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1212
+title: FLOAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1212
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/GRAY.mdx b/src/content/reference/en/p5 copy/constants/GRAY.mdx
new file mode 100644
index 0000000000..ca8a56d090
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/GRAY.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L989
+title: GRAY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 989
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# GRAY
diff --git a/src/content/reference/en/p5 copy/constants/GRID.mdx b/src/content/reference/en/p5 copy/constants/GRID.mdx
new file mode 100644
index 0000000000..683bbf43f9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/GRID.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1165
+title: GRID
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1165
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# GRID
diff --git a/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx b/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
new file mode 100644
index 0000000000..a70c409626
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1218
+title: HALF_FLOAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1218
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HALF\_FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/HALF_PI.mdx b/src/content/reference/en/p5 copy/constants/HALF_PI.mdx
new file mode 100644
index 0000000000..212458ee9e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HALF_PI.mdx	
@@ -0,0 +1,109 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L88
+title: HALF_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 1.5708.</p>
+
+  <p><code>HALF_PI</code> is half the value of the mathematical constant π. It's
+  useful for
+
+  many tasks that involve rotation and oscillation. For example, calling
+
+  <code>rotate(HALF_PI)</code> rotates the coordinate system
+  <code>HALF_PI</code> radians, which is
+
+  a quarter turn (90˚).</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 88
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to HALF_PI.
+      arc(50, 50, 80, 80, 0, HALF_PI);
+
+      describe('The bottom-right quarter of a circle drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a quarter turn.
+      rotate(HALF_PI);
+
+      // Draw the same line, rotated.
+      line(0, 0, 40, 0);
+
+      describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator.
+      fill(0, 0, 255);
+      circle(x2, 0, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# HALF\_PI
diff --git a/src/content/reference/en/p5 copy/constants/HAND.mdx b/src/content/reference/en/p5 copy/constants/HAND.mdx
new file mode 100644
index 0000000000..0bd864fb59
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HAND.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L65
+title: HAND
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 65
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HAND
diff --git a/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
new file mode 100644
index 0000000000..9f3f9742fc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L960
+title: HARD_LIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 960
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HARD\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/HSB.mdx b/src/content/reference/en/p5 copy/constants/HSB.mdx
new file mode 100644
index 0000000000..d921d5405e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HSB.mdx	
@@ -0,0 +1,24 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L794
+title: HSB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>HSB (hue, saturation, brightness) is a type of color model.
+
+  You can learn more about it at
+
+  <a
+  href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">HSB</a>.</p>
+line: 794
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HSB
diff --git a/src/content/reference/en/p5 copy/constants/HSL.mdx b/src/content/reference/en/p5 copy/constants/HSL.mdx
new file mode 100644
index 0000000000..aa660c2da5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/HSL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L803
+title: HSL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 803
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# HSL
diff --git a/src/content/reference/en/p5 copy/constants/IMAGE.mdx b/src/content/reference/en/p5 copy/constants/IMAGE.mdx
new file mode 100644
index 0000000000..479af890bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/IMAGE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1108
+title: IMAGE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1108
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# IMAGE
diff --git a/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx b/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
new file mode 100644
index 0000000000..52b38ee8b5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1100
+title: IMMEDIATE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1100
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# IMMEDIATE
diff --git a/src/content/reference/en/p5 copy/constants/INVERT.mdx b/src/content/reference/en/p5 copy/constants/INVERT.mdx
new file mode 100644
index 0000000000..9c383dd4d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/INVERT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L999
+title: INVERT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 999
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# INVERT
diff --git a/src/content/reference/en/p5 copy/constants/ITALIC.mdx b/src/content/reference/en/p5 copy/constants/ITALIC.mdx
new file mode 100644
index 0000000000..d0a9a1f2e5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ITALIC.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1031
+title: ITALIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1031
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ITALIC
diff --git a/src/content/reference/en/p5 copy/constants/LABEL.mdx b/src/content/reference/en/p5 copy/constants/LABEL.mdx
new file mode 100644
index 0000000000..92786b3feb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LABEL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1177
+title: LABEL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1177
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LABEL
diff --git a/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx b/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
new file mode 100644
index 0000000000..c1709051cd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1150
+title: LANDSCAPE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1150
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LANDSCAPE
diff --git a/src/content/reference/en/p5 copy/constants/LEFT.mdx b/src/content/reference/en/p5 copy/constants/LEFT.mdx
new file mode 100644
index 0000000000..6e48fe2d99
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LEFT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L655
+title: LEFT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 655
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LEFT
diff --git a/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
new file mode 100644
index 0000000000..8628e56688
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L856
+title: LEFT_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 856
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LEFT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx b/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
new file mode 100644
index 0000000000..bd15662468
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L918
+title: LIGHTEST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 918
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LIGHTEST
diff --git a/src/content/reference/en/p5 copy/constants/LINEAR.mdx b/src/content/reference/en/p5 copy/constants/LINEAR.mdx
new file mode 100644
index 0000000000..e56c663585
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINEAR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1063
+title: LINEAR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1063
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# LINEAR
diff --git a/src/content/reference/en/p5 copy/constants/LINES.mdx b/src/content/reference/en/p5 copy/constants/LINES.mdx
new file mode 100644
index 0000000000..9d7d5d2abc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINES.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L687
+title: LINES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 687
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LINES
diff --git a/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx b/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
new file mode 100644
index 0000000000..2a566fa4c7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L699
+title: LINE_LOOP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 699
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LINE\_LOOP
diff --git a/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
new file mode 100644
index 0000000000..816e857d01
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L693
+title: LINE_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 693
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# LINE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/MIRROR.mdx b/src/content/reference/en/p5 copy/constants/MIRROR.mdx
new file mode 100644
index 0000000000..9b2bcd7146
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MIRROR.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1131
+title: MIRROR
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1131
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MIRROR
diff --git a/src/content/reference/en/p5 copy/constants/MITER.mdx b/src/content/reference/en/p5 copy/constants/MITER.mdx
new file mode 100644
index 0000000000..533039ecc8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MITER.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L782
+title: MITER
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 782
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MITER
diff --git a/src/content/reference/en/p5 copy/constants/MOVE.mdx b/src/content/reference/en/p5 copy/constants/MOVE.mdx
new file mode 100644
index 0000000000..aea9bf8a71
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MOVE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L70
+title: MOVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 70
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MOVE
diff --git a/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx b/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
new file mode 100644
index 0000000000..ce343b4bf2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L939
+title: MULTIPLY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 939
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# MULTIPLY
diff --git a/src/content/reference/en/p5 copy/constants/NEAREST.mdx b/src/content/reference/en/p5 copy/constants/NEAREST.mdx
new file mode 100644
index 0000000000..9fba7e46cf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/NEAREST.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1116
+title: NEAREST
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1116
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# NEAREST
diff --git a/src/content/reference/en/p5 copy/constants/NORMAL.mdx b/src/content/reference/en/p5 copy/constants/NORMAL.mdx
new file mode 100644
index 0000000000..2c49e02fbf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/NORMAL.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1026
+title: NORMAL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1026
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# NORMAL
diff --git a/src/content/reference/en/p5 copy/constants/OPAQUE.mdx b/src/content/reference/en/p5 copy/constants/OPAQUE.mdx
new file mode 100644
index 0000000000..9ddf599dd1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OPAQUE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L994
+title: OPAQUE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 994
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# OPAQUE
diff --git a/src/content/reference/en/p5 copy/constants/OPEN.mdx b/src/content/reference/en/p5 copy/constants/OPEN.mdx
new file mode 100644
index 0000000000..29011d1e69
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OPEN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L745
+title: OPEN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 745
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# OPEN
diff --git a/src/content/reference/en/p5 copy/constants/OPTION.mdx b/src/content/reference/en/p5 copy/constants/OPTION.mdx
new file mode 100644
index 0000000000..8ea0e625db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OPTION.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L861
+title: OPTION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 861
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# OPTION
diff --git a/src/content/reference/en/p5 copy/constants/OVERLAY.mdx b/src/content/reference/en/p5 copy/constants/OVERLAY.mdx
new file mode 100644
index 0000000000..ccb03411bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/OVERLAY.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L955
+title: OVERLAY
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 955
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# OVERLAY
diff --git a/src/content/reference/en/p5 copy/constants/P2D.mdx b/src/content/reference/en/p5 copy/constants/P2D.mdx
new file mode 100644
index 0000000000..83f09b1d9c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/P2D.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L18
+title: P2D
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>The default, two-dimensional renderer.</p>
+line: 18
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# P2D
diff --git a/src/content/reference/en/p5 copy/constants/PI.mdx b/src/content/reference/en/p5 copy/constants/PI.mdx
new file mode 100644
index 0000000000..bddf509592
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PI.mdx	
@@ -0,0 +1,108 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L178
+title: PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 3.1416.</p>
+
+  <p><code>PI</code> is the mathematical constant π. It's useful for many tasks
+  that
+
+  involve rotation and oscillation. For example, calling <code>rotate(PI)</code>
+  rotates
+
+  the coordinate system <code>PI</code> radians, which is a half turn
+  (180˚).</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 178
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to PI.
+      arc(50, 50, 80, 80, 0, PI);
+
+      describe('The bottom half of a circle drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a half turn.
+      rotate(PI);
+
+      // Draw the same line, rotated.
+      line(0, 0, 40, 0);
+
+      describe('A horizontal black line on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator.
+      fill(0, 0, 255);
+      circle(x2, 0, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# PI
diff --git a/src/content/reference/en/p5 copy/constants/PIE.mdx b/src/content/reference/en/p5 copy/constants/PIE.mdx
new file mode 100644
index 0000000000..7be0810e6e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PIE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L755
+title: PIE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 755
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# PIE
diff --git a/src/content/reference/en/p5 copy/constants/POINTS.mdx b/src/content/reference/en/p5 copy/constants/POINTS.mdx
new file mode 100644
index 0000000000..8dea326a14
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/POINTS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L681
+title: POINTS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 681
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# POINTS
diff --git a/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx b/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
new file mode 100644
index 0000000000..492546578c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1155
+title: PORTRAIT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1155
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# PORTRAIT
diff --git a/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx b/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
new file mode 100644
index 0000000000..198c365591
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1004
+title: POSTERIZE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1004
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# POSTERIZE
diff --git a/src/content/reference/en/p5 copy/constants/PROJECT.mdx b/src/content/reference/en/p5 copy/constants/PROJECT.mdx
new file mode 100644
index 0000000000..ce6f7dbaac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/PROJECT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L760
+title: PROJECT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 760
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# PROJECT
diff --git a/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx b/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
new file mode 100644
index 0000000000..49e8d2cc19
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1068
+title: QUADRATIC
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1068
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# QUADRATIC
diff --git a/src/content/reference/en/p5 copy/constants/QUADS.mdx b/src/content/reference/en/p5 copy/constants/QUADS.mdx
new file mode 100644
index 0000000000..c67a193a4f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUADS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L723
+title: QUADS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 723
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# QUADS
diff --git a/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx b/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
new file mode 100644
index 0000000000..c1ce9d4291
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L728
+title: QUAD_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 728
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# QUAD\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx b/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
new file mode 100644
index 0000000000..5f4cc24bc1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx	
@@ -0,0 +1,109 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L267
+title: QUARTER_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 0.7854.</p>
+
+  <p><code>QUARTER_PI</code> is one-fourth the value of the mathematical
+  constant π. It's
+
+  useful for many tasks that involve rotation and oscillation. For example,
+
+  calling <code>rotate(QUARTER_PI)</code> rotates the coordinate system
+  <code>QUARTER_PI</code>
+
+  radians, which is an eighth of a turn (45˚).</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 267
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to QUARTER_PI.
+      arc(50, 50, 80, 80, 0, QUARTER_PI);
+
+      describe('A one-eighth slice of a circle drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate an eighth turn.
+      rotate(QUARTER_PI);
+
+      // Draw the same line, rotated.
+      line(0, 0, 40, 0);
+
+      describe('Two black lines that form a "V" opening towards the bottom-right corner of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator.
+      fill(0, 0, 255);
+      circle(x2, 0, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# QUARTER\_PI
diff --git a/src/content/reference/en/p5 copy/constants/RADIANS.mdx b/src/content/reference/en/p5 copy/constants/RADIANS.mdx
new file mode 100644
index 0000000000..856db37b9f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RADIANS.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L587
+title: RADIANS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>String</code> constant that's used to set the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
+  and
+
+  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
+  radians.
+
+  Calling <code>angleMode(RADIANS)</code> ensures that angles are measured in
+  units of
+
+  radians. Doing so can be useful if the
+
+  <a href="/reference/p5/angleMode/">angleMode()</a> has been set to
+
+  <a href="/reference/p5/DEGREES/">DEGREES</a>.</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
+line: 587
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      // Draw a red arc from 0˚ to 90˚.
+      fill(255, 0, 0);
+      arc(50, 50, 80, 80, 0, 90);
+
+      // Use radians.
+      angleMode(RADIANS);
+
+      // Draw a blue arc from HALF_PI to PI.
+      fill(0, 0, 255);
+      arc(50, 50, 80, 80, HALF_PI, PI);
+
+      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# RADIANS
diff --git a/src/content/reference/en/p5 copy/constants/RADIUS.mdx b/src/content/reference/en/p5 copy/constants/RADIUS.mdx
new file mode 100644
index 0000000000..95f1dcdeef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RADIUS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L645
+title: RADIUS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 645
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RADIUS
diff --git a/src/content/reference/en/p5 copy/constants/REMOVE.mdx b/src/content/reference/en/p5 copy/constants/REMOVE.mdx
new file mode 100644
index 0000000000..c2daffc564
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/REMOVE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L899
+title: REMOVE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 899
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# REMOVE
diff --git a/src/content/reference/en/p5 copy/constants/REPEAT.mdx b/src/content/reference/en/p5 copy/constants/REPEAT.mdx
new file mode 100644
index 0000000000..c9e75c8bec
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/REPEAT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1121
+title: REPEAT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1121
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# REPEAT
diff --git a/src/content/reference/en/p5 copy/constants/REPLACE.mdx b/src/content/reference/en/p5 copy/constants/REPLACE.mdx
new file mode 100644
index 0000000000..8a04f06130
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/REPLACE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L949
+title: REPLACE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 949
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# REPLACE
diff --git a/src/content/reference/en/p5 copy/constants/RETURN.mdx b/src/content/reference/en/p5 copy/constants/RETURN.mdx
new file mode 100644
index 0000000000..3069efc256
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RETURN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L866
+title: RETURN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 866
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# RETURN
diff --git a/src/content/reference/en/p5 copy/constants/RGB.mdx b/src/content/reference/en/p5 copy/constants/RGB.mdx
new file mode 100644
index 0000000000..b0ae826064
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RGB.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L789
+title: RGB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 789
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RGB
diff --git a/src/content/reference/en/p5 copy/constants/RGBA.mdx b/src/content/reference/en/p5 copy/constants/RGBA.mdx
new file mode 100644
index 0000000000..256949cfd1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RGBA.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1224
+title: RGBA
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1224
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RGBA
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT.mdx b/src/content/reference/en/p5 copy/constants/RIGHT.mdx
new file mode 100644
index 0000000000..e9f69e8a80
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RIGHT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L650
+title: RIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 650
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# RIGHT
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
new file mode 100644
index 0000000000..731ab29fb5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L871
+title: RIGHT_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 871
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# RIGHT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ROUND.mdx b/src/content/reference/en/p5 copy/constants/ROUND.mdx
new file mode 100644
index 0000000000..50426d2636
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/ROUND.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L772
+title: ROUND
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 772
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# ROUND
diff --git a/src/content/reference/en/p5 copy/constants/SCREEN.mdx b/src/content/reference/en/p5 copy/constants/SCREEN.mdx
new file mode 100644
index 0000000000..65f2e6192d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SCREEN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L944
+title: SCREEN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 944
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SCREEN
diff --git a/src/content/reference/en/p5 copy/constants/SHIFT.mdx b/src/content/reference/en/p5 copy/constants/SHIFT.mdx
new file mode 100644
index 0000000000..e48b091ab3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SHIFT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L876
+title: SHIFT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 876
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# SHIFT
diff --git a/src/content/reference/en/p5 copy/constants/SMOOTH.mdx b/src/content/reference/en/p5 copy/constants/SMOOTH.mdx
new file mode 100644
index 0000000000..816be1029b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SMOOTH.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1143
+title: SMOOTH
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1143
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SMOOTH
diff --git a/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
new file mode 100644
index 0000000000..846e6fe72b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L965
+title: SOFT_LIGHT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 965
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SOFT\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/SQUARE.mdx b/src/content/reference/en/p5 copy/constants/SQUARE.mdx
new file mode 100644
index 0000000000..7b5da139d7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SQUARE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L766
+title: SQUARE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 766
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SQUARE
diff --git a/src/content/reference/en/p5 copy/constants/STROKE.mdx b/src/content/reference/en/p5 copy/constants/STROKE.mdx
new file mode 100644
index 0000000000..16cfa32e5e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/STROKE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1085
+title: STROKE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1085
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# STROKE
diff --git a/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx b/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
new file mode 100644
index 0000000000..2bd6d94fe9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L929
+title: SUBTRACT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 929
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# SUBTRACT
diff --git a/src/content/reference/en/p5 copy/constants/TAB.mdx b/src/content/reference/en/p5 copy/constants/TAB.mdx
new file mode 100644
index 0000000000..cf89117ae4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TAB.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L881
+title: TAB
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 881
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TAB
diff --git a/src/content/reference/en/p5 copy/constants/TAU.mdx b/src/content/reference/en/p5 copy/constants/TAU.mdx
new file mode 100644
index 0000000000..a553339913
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TAU.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L357
+title: TAU
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
+
+  <p><code>TAU</code> is twice the value of the mathematical constant π. It's
+  useful for
+
+  many tasks that involve rotation and oscillation. For example, calling
+
+  <code>rotate(TAU)</code> rotates the coordinate system <code>TAU</code>
+  radians, which is one
+
+  full turn (360˚). <code>TAU</code> and <code>TWO_PI</code> are equal.</p>
+
+  <p>Note: <code>TAU</code> radians equals 360˚, <code>PI</code> radians equals
+  180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 357
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to TAU.
+      arc(50, 50, 80, 80, 0, TAU);
+
+      describe('A white circle drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a full turn.
+      rotate(TAU);
+
+      // Style the second line.
+      strokeWeight(5);
+
+      // Draw the same line, shorter and rotated.
+      line(0, 0, 20, 0);
+
+      describe(
+        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle with a blue center oscillates from left to right on a gray background.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + TAU);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator, smaller.
+      fill(0, 0, 255);
+      circle(x2, 0, 10);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# TAU
diff --git a/src/content/reference/en/p5 copy/constants/TESS.mdx b/src/content/reference/en/p5 copy/constants/TESS.mdx
new file mode 100644
index 0000000000..e6f853e8ab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TESS.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L734
+title: TESS
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 734
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TESS
diff --git a/src/content/reference/en/p5 copy/constants/TEXT.mdx b/src/content/reference/en/p5 copy/constants/TEXT.mdx
new file mode 100644
index 0000000000..157a90001a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TEXT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L75
+title: TEXT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 75
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TEXT
diff --git a/src/content/reference/en/p5 copy/constants/TEXTURE.mdx b/src/content/reference/en/p5 copy/constants/TEXTURE.mdx
new file mode 100644
index 0000000000..8ada92f376
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TEXTURE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1095
+title: TEXTURE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1095
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TEXTURE
diff --git a/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx b/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
new file mode 100644
index 0000000000..f12e6ea336
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L984
+title: THRESHOLD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 984
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# THRESHOLD
diff --git a/src/content/reference/en/p5 copy/constants/TOP.mdx b/src/content/reference/en/p5 copy/constants/TOP.mdx
new file mode 100644
index 0000000000..a91b5f4824
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TOP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L665
+title: TOP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 665
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# TOP
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
new file mode 100644
index 0000000000..ec281d033e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L705
+title: TRIANGLES
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 705
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TRIANGLES
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
new file mode 100644
index 0000000000..bcd5d5f5a1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L711
+title: TRIANGLE_FAN
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 711
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TRIANGLE\_FAN
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
new file mode 100644
index 0000000000..fefe226e17
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L717
+title: TRIANGLE_STRIP
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 717
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# TRIANGLE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/TWO_PI.mdx b/src/content/reference/en/p5 copy/constants/TWO_PI.mdx
new file mode 100644
index 0000000000..ed62a10b0f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/TWO_PI.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L452
+title: TWO_PI
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
+
+  <p><code>TWO_PI</code> is twice the value of the mathematical constant π. It's
+  useful for
+
+  many tasks that involve rotation and oscillation. For example, calling
+
+  <code>rotate(TWO_PI)</code> rotates the coordinate system <code>TWO_PI</code>
+  radians, which is
+
+  one full turn (360˚). <code>TWO_PI</code> and <code>TAU</code> are equal.</p>
+
+  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
+  equals 180˚, <code>HALF_PI</code>
+
+  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
+line: 452
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw an arc from 0 to TWO_PI.
+      arc(50, 50, 80, 80, 0, TWO_PI);
+
+      describe('A white circle drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a line.
+      line(0, 0, 40, 0);
+
+      // Rotate a full turn.
+      rotate(TWO_PI);
+
+      // Style the second line.
+      strokeWeight(5);
+
+      // Draw the same line, shorter and rotated.
+      line(0, 0, 20, 0);
+
+      describe(
+        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A red circle with a blue center oscillates from left to right on a gray background.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Calculate the x-coordinates.
+      let x1 = 40 * sin(frameCount * 0.05);
+      let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);
+
+      // Style the oscillators.
+      noStroke();
+
+      // Draw the red oscillator.
+      fill(255, 0, 0);
+      circle(x1, 0, 20);
+
+      // Draw the blue oscillator, smaller.
+      fill(0, 0, 255);
+      circle(x2, 0, 10);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# TWO\_PI
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
new file mode 100644
index 0000000000..00acfe29c0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1200
+title: UNSIGNED_BYTE
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1200
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# UNSIGNED\_BYTE
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
new file mode 100644
index 0000000000..f060682a13
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1206
+title: UNSIGNED_INT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1206
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# UNSIGNED\_INT
diff --git a/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx b/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
new file mode 100644
index 0000000000..e0e0326aa6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L886
+title: UP_ARROW
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 886
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# UP\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/VERSION.mdx b/src/content/reference/en/p5 copy/constants/VERSION.mdx
new file mode 100644
index 0000000000..f9f62fca55
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/VERSION.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L9
+title: VERSION
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>Version of this p5.js.</p>
+line: 9
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# VERSION
diff --git a/src/content/reference/en/p5 copy/constants/WAIT.mdx b/src/content/reference/en/p5 copy/constants/WAIT.mdx
new file mode 100644
index 0000000000..833f77ee4f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WAIT.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L80
+title: WAIT
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 80
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WAIT
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL.mdx b/src/content/reference/en/p5 copy/constants/WEBGL.mdx
new file mode 100644
index 0000000000..2919ec489c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WEBGL.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L24
+title: WEBGL
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: >
+  <p>One of the two render modes in p5.js, used for computationally intensive
+  tasks like 3D rendering and shaders.</p>
+
+  <p><code>WEBGL</code> differs from the default <a
+  href="/reference/p5/P2D/"><code>P2D</code></a> renderer in the following
+  ways:</p>
+
+  <ul>
+
+  <li><strong>Coordinate System</strong> - When drawing in <code>WEBGL</code>
+  mode, the origin point (0,0,0) is located at the center of the screen, not the
+  top-left corner. See <a
+  href="https://p5js.org/tutorials/coordinates-and-transformations/">the
+  tutorial page about coordinates and transformations</a>.</li>
+
+  <li><strong>3D Shapes</strong> - <code>WEBGL</code> mode can be used to draw
+  3-dimensional shapes like <a href="/reference/p5/box/">box()</a>, <a
+  href="/reference/p5/sphere/">sphere()</a>, <a
+  href="/reference/p5/cone/">cone()</a>, and <a
+  href="https://p5js.org/reference/#3D%20Primitives/">more</a>. See <a
+  href="https://p5js.org/tutorials/custom-geometry/">the tutorial page about
+  custom geometry</a> to make more complex objects.</li>
+
+  <li><strong>Shape Detail</strong> - When drawing in <code>WEBGL</code> mode,
+  you can specify how smooth curves should be drawn by using a
+  <code>detail</code> parameter. See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#3d-primitives-shapes">the
+  wiki section about shapes</a> for a more information and an example.</li>
+
+  <li><strong>Textures</strong> - A texture is like a skin that wraps onto a
+  shape. See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#textures">the
+  wiki section about textures</a> for examples of mapping images onto surfaces
+  with textures.</li>
+
+  <li><strong>Materials and Lighting</strong> - <code>WEBGL</code> offers
+  different types of lights like <a
+  href="/reference/p5/ambientLight/">ambientLight()</a> to place around a scene.
+  Materials like <a
+  href="/reference/p5/specularMaterial/">specularMaterial()</a> reflect the
+  lighting to convey shape and depth. See <a
+  href="https://p5js.org/tutorials/lights-camera-materials/">the tutorial page
+  for styling and appearance</a> to experiment with different combinations.</li>
+
+  <li><strong>Camera</strong> - The viewport of a <code>WEBGL</code> sketch can
+  be adjusted by changing camera attributes. See <a
+  href="https://p5js.org/tutorials/lights-camera-materials#camera-and-view">the
+  tutorial page section about cameras</a> for an explanation of camera
+  controls.</li>
+
+  <li><strong>Text</strong> - <code>WEBGL</code> requires opentype/truetype font
+  files to be preloaded using <a href="/reference/p5/loadFont/">loadFont()</a>.
+  See <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#text">the
+  wiki section about text</a> for details, along with a workaround.</li>
+
+  <li><strong>Shaders</strong> - Shaders are hardware accelerated programs that
+  can be used for a variety of effects and graphics. See the <a
+  href="https://p5js.org/tutorials/intro-to-shaders/">introduction to
+  shaders</a> to get started with shaders in p5.js.</li>
+
+  <li><strong>Graphics Acceleration</strong> - <code>WEBGL</code> mode uses the
+  graphics card instead of the CPU, so it may help boost the performance of your
+  sketch (example: drawing more shapes on the screen at once).</li>
+
+  </ul>
+
+  <p>To learn more about WEBGL mode, check out <a
+  href="https://p5js.org/tutorials/#webgl">all the interactive WEBGL
+  tutorials</a> in the "Tutorials" section of this website, or read the wiki
+  article <a
+  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/">"Getting
+  started with WebGL in p5"</a>.</p>
+line: 24
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WEBGL
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL2.mdx b/src/content/reference/en/p5 copy/constants/WEBGL2.mdx
new file mode 100644
index 0000000000..68c6ca83fa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WEBGL2.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L45
+title: WEBGL2
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: |
+  <p>One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
+  which can be used to determine what capabilities the rendering environment
+  has.</p>
+line: 45
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WEBGL2
diff --git a/src/content/reference/en/p5 copy/constants/WORD.mdx b/src/content/reference/en/p5 copy/constants/WORD.mdx
new file mode 100644
index 0000000000..03f13b4874
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constants/WORD.mdx	
@@ -0,0 +1,18 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1051
+title: WORD
+module: Constants
+submodule: Constants
+file: src/core/constants.js
+description: ''
+line: 1051
+isConstructor: false
+itemtype: property
+class: p5
+type: String
+---
+
+
+# WORD
diff --git a/src/content/reference/en/p5 copy/constrain.mdx b/src/content/reference/en/p5 copy/constrain.mdx
new file mode 100644
index 0000000000..d869ce2e74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/constrain.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L91
+title: constrain
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Constrains a number between a minimum and maximum value.</p>
+line: 91
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      let x = constrain(mouseX, 33, 67);
+      let y = 50;
+
+      strokeWeight(5);
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set boundaries and draw them.
+      let leftWall = 25;
+      let rightWall = 75;
+      line(leftWall, 0, leftWall, 100);
+      line(rightWall, 0, rightWall, 100);
+
+      // Draw a circle that follows the mouse freely.
+      fill(255);
+      circle(mouseX, 33, 9);
+
+      // Draw a circle that's constrained.
+      let xc = constrain(mouseX, leftWall, rightWall);
+      fill(0);
+      circle(xc, 67, 9);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to constrain.</p>
+    type: Number
+  - name: low
+    description: |
+      <p>minimum limit.</p>
+    type: Number
+  - name: high
+    description: |
+      <p>maximum limit.</p>
+    type: Number
+return:
+  description: constrained number.
+  type: Number
+chainable: false
+---
+
+
+# constrain
diff --git a/src/content/reference/en/p5 copy/copy.mdx b/src/content/reference/en/p5 copy/copy.mdx
new file mode 100644
index 0000000000..059df56434
--- /dev/null
+++ b/src/content/reference/en/p5 copy/copy.mdx	
@@ -0,0 +1,144 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L288
+title: copy
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Copies pixels from a source image to a region of the canvas.</p>
+
+  <p>The first parameter, <code>srcImage</code>, is the
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend. The source
+  image can be
+
+  the canvas itself or a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object. <code>copy()</code> will
+  scale pixels from
+
+  the source region if it isn't the same size as the destination region.</p>
+
+  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+  <code>sw</code>, and <code>sh</code> determine the region
+
+  to copy from the source image. <code>(sx, sy)</code> is the top-left corner of
+  the
+
+  region. <code>sw</code> and <code>sh</code> are the region's width and
+  height.</p>
+
+  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+  <code>dw</code>, and <code>dh</code> determine the region
+
+  of the canvas to copy into. <code>(dx, dy)</code> is the top-left corner of
+  the
+
+  region. <code>dw</code> and <code>dh</code> are the region's width and
+  height.</p>
+line: 288
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the mountains as the background.
+      background(img);
+
+      // Copy a region of pixels to another spot.
+      copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
+
+      // Outline the copied region.
+      stroke(255);
+      noFill();
+      square(7, 22, 10);
+
+      describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 288
+    params:
+      - name: srcImage
+        description: |
+          <p>source image.</p>
+        type: p5.Image|p5.Element
+      - name: sx
+        description: |
+          <p>x-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sy
+        description: |
+          <p>y-coordinate of the source's upper-left corner.</p>
+        type: Integer
+      - name: sw
+        description: |
+          <p>source image width.</p>
+        type: Integer
+      - name: sh
+        description: |
+          <p>source image height.</p>
+        type: Integer
+      - name: dx
+        description: |
+          <p>x-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dy
+        description: |
+          <p>y-coordinate of the destination's upper-left corner.</p>
+        type: Integer
+      - name: dw
+        description: |
+          <p>destination image width.</p>
+        type: Integer
+      - name: dh
+        description: |
+          <p>destination image height.</p>
+        type: Integer
+  - line: 345
+    params:
+      - name: sx
+        description: ''
+        type: Integer
+      - name: sy
+        description: ''
+        type: Integer
+      - name: sw
+        description: ''
+        type: Integer
+      - name: sh
+        description: ''
+        type: Integer
+      - name: dx
+        description: ''
+        type: Integer
+      - name: dy
+        description: ''
+        type: Integer
+      - name: dw
+        description: ''
+        type: Integer
+      - name: dh
+        description: ''
+        type: Integer
+chainable: false
+---
+
+
+# copy
diff --git a/src/content/reference/en/p5 copy/cos.mdx b/src/content/reference/en/p5 copy/cos.mdx
new file mode 100644
index 0000000000..cd6468fc4f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cos.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L281
+title: cos
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the cosine of an angle.</p>
+
+  <p><code>cos()</code> is useful for many geometric tasks in creative coding.
+  The values
+
+  returned oscillate between -1 and 1 as the input angle increases.
+  <code>cos()</code>
+
+  calculates the cosine of an angle, using radians by default, or according to
+
+  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+  DEGREES).</p>
+line: 281
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white ball on a string oscillates left and right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.05) + 50;
+      let y = 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form a wave pattern.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 30 * cos(x * 0.1) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form an infinity symbol.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.1) + 50;
+      let y = 10 * sin(frameCount * 0.2) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>the angle, in radians by default, or according to
+
+      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+      DEGREES).</p>
+    type: Number
+return:
+  description: cosine of the angle.
+  type: Number
+chainable: false
+---
+
+
+# cos
diff --git a/src/content/reference/en/p5 copy/createA.mdx b/src/content/reference/en/p5 copy/createA.mdx
new file mode 100644
index 0000000000..669ce45a27
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createA.mdx	
@@ -0,0 +1,93 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L724
+title: createA
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code><a></a></code> element that links to another web page.</p>
+
+  <p>The first parmeter, <code>href</code>, is a string that sets the URL of the
+  linked
+
+  page.</p>
+
+  <p>The second parameter, <code>html</code>, is a string that sets the inner
+  HTML of the
+
+  link. It's common to use text, images, or buttons as links.</p>
+
+  <p>The third parameter, <code>target</code>, is optional. It's a string that
+  tells the
+
+  web browser where to open the link. By default, links open in the current
+
+  browser tab. Passing <code>'_blank'</code> will cause the link to open in a
+  new
+
+  browser tab. MDN describes a few
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"
+  target="_blank">other options</a>.</p>
+line: 724
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an anchor element that links to p5js.org.
+      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.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create an anchor tag that links to p5js.org.
+      // Open the link in a new tab.
+      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.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: href
+    description: |
+      <p>URL of linked page.</p>
+    type: String
+  - name: html
+    description: |
+      <p>inner HTML of link element to display.</p>
+    type: String
+  - name: target
+    description: |
+      <p>target where the new link should open,
+                                  either <code>'_blank'</code>, <code>'_self'</code>, <code>'_parent'</code>, or <code>'_top'</code>.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createA
diff --git a/src/content/reference/en/p5 copy/createAudio.mdx b/src/content/reference/en/p5 copy/createAudio.mdx
new file mode 100644
index 0000000000..24b3bce36b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createAudio.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2213
+title: createAudio
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a hidden <code><audio></code> element for simple audio
+  playback.</p>
+
+  <p><code>createAudio()</code> returns a new
+
+  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object.</p>
+
+  <p>The first parameter, <code>src</code>, is the path the video. If a single
+  string is
+
+  passed, as in <code>'/assets/video.mp4'</code>, a single video is loaded. An
+  array
+
+  of strings can be used to load the same video in different formats. For
+
+  example, <code>['/assets/video.mp4', '/assets/video.ogv',
+  '/assets/video.webm']</code>.
+
+  This is useful for ensuring that the video can play across different
+
+  browsers with different capabilities. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/"
+  target="_blank">MDN</a>
+
+  for more information about supported formats.</p>
+
+  <p>The second parameter, <code>callback</code>, is optional. It's a function
+  to call once
+
+  the audio is ready to play.</p>
+line: 2213
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load the audio.
+      let beat = createAudio('/assets/beat.mp3');
+
+      // Show the default audio controls.
+      beat.showControls();
+
+      describe('An audio beat plays when the user double-clicks the square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: src
+    description: |
+      <p>path to an audio file, or an array of paths
+                                      for supporting different browsers.</p>
+    type: 'String|String[]'
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the audio is ready to play.</p>
+    type: Function
+    optional: true
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createAudio
diff --git a/src/content/reference/en/p5 copy/createButton.mdx b/src/content/reference/en/p5 copy/createButton.mdx
new file mode 100644
index 0000000000..9ff2d66faf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createButton.mdx	
@@ -0,0 +1,109 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L924
+title: createButton
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><button></button></code> element.</p>
+
+  <p>The first parameter, <code>label</code>, is a string that sets the label
+  displayed on
+
+  the button.</p>
+
+  <p>The second parameter, <code>value</code>, is optional. It's a string that
+  sets the
+
+  button's value. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value"
+  target="_blank">MDN</a>
+
+  for more details.</p>
+line: 924
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a button and place it beneath the canvas.
+      let button = createButton('click me');
+      button.position(0, 100);
+
+      // Call repaint() when the button is pressed.
+      button.mousePressed(repaint);
+
+      describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+    }
+
+    // Change the background color.
+    function repaint() {
+      let g = random(255);
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let button;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a button and set its value to 0.
+      // Place the button beneath the canvas.
+      button = createButton('click me', 'red');
+      button.position(0, 100);
+
+      // Call randomColor() when the button is pressed.
+      button.mousePressed(randomColor);
+
+      describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+    }
+
+    function draw() {
+      // Use the button's value to set the background color.
+      let c = button.value();
+      background(c);
+    }
+
+    // Set the button's value to a random color.
+    function randomColor() {
+      let c = random(['red', 'green', 'blue', 'yellow']);
+      button.value(c);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: label
+    description: |
+      <p>label displayed on the button.</p>
+    type: String
+  - name: value
+    description: |
+      <p>value of the button.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createButton
diff --git a/src/content/reference/en/p5 copy/createCamera.mdx b/src/content/reference/en/p5 copy/createCamera.mdx
new file mode 100644
index 0000000000..8fbb13ce5d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCamera.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L638
+title: createCamera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Camera">p5.Camera</a> object and
+  sets it
+
+  as the current (active) camera.</p>
+
+  <p>The new camera is initialized with a default position <code>(0, 0,
+  800)</code> and a
+
+  default perspective projection. Its properties can be controlled with
+
+  <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
+
+  <code>myCamera.lookAt(0, 0, 0)</code>.</p>
+
+  <p>Note: Every 3D sketch starts with a default camera initialized.
+
+  This camera can be controlled with the functions
+
+  <a href="/reference/p5/camera/">camera()</a>,
+
+  <a href="/reference/p5/perspective/">perspective()</a>,
+
+  <a href="/reference/p5/ortho/">ortho()</a>, and
+
+  <a href="/reference/p5/frustum/">frustum()</a> if it's the only camera in the
+  scene.</p>
+
+  <p>Note: <code>createCamera()</code> can only be used in WebGL mode.</p>
+line: 638
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to toggle between cameras.
+
+    let cam1;
+    let cam2;
+    let usingCam1 = true;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the first camera.
+      // Keep its default settings.
+      cam1 = createCamera();
+
+      // Create the second camera.
+      // Place it at the top-left.
+      // Point it at the origin.
+      cam2 = createCamera();
+      cam2.setPosition(400, -400, 800);
+      cam2.lookAt(0, 0, 0);
+
+      // Set the current camera to cam1.
+      setCamera(cam1);
+
+      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the box.
+      box();
+    }
+
+    // Toggle the current camera when the user double-clicks.
+    function doubleClicked() {
+      if (usingCam1 === true) {
+        setCamera(cam2);
+        usingCam1 = false;
+      } else {
+        setCamera(cam1);
+        usingCam1 = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: the new camera.
+  type: p5.Camera
+chainable: false
+---
+
+
+# createCamera
diff --git a/src/content/reference/en/p5 copy/createCanvas.mdx b/src/content/reference/en/p5 copy/createCanvas.mdx
new file mode 100644
index 0000000000..600d7e3545
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCanvas.mdx	
@@ -0,0 +1,191 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L15
+title: createCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates a canvas element on the web page.</p>
+
+  <p><code>createCanvas()</code> creates the main drawing canvas for a sketch.
+  It should
+
+  only be called once at the beginning of <a
+  href="/reference/p5/setup/">setup()</a>.
+
+  Calling <code>createCanvas()</code> more than once causes unpredictable
+  behavior.</p>
+
+  <p>The first two parameters, <code>width</code> and <code>height</code>, are
+  optional. They set the
+
+  dimensions of the canvas and the values of the
+
+  <a href="/reference/p5/width/">width</a> and <a
+  href="/reference/p5/height/">height</a> system
+
+  variables. For example, calling <code>createCanvas(900, 500)</code> creates a
+  canvas
+
+  that's 900×500 pixels. By default, <code>width</code> and <code>height</code>
+  are both 100.</p>
+
+  <p>The third parameter is also optional. If either of the constants
+  <code>P2D</code> or
+
+  <code>WEBGL</code> is passed, as in <code>createCanvas(900, 500,
+  WEBGL)</code>, then it will set
+
+  the sketch's rendering mode. If an existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createCanvas(900, 500, myCanvas)</code>, then it will
+  be used
+
+  by the sketch.</p>
+
+  <p>The fourth parameter is also optional. If an existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createCanvas(900, 500, WEBGL, myCanvas)</code>, then it
+  will be
+
+  used by the sketch.</p>
+
+  <p>Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported
+
+  by the browser. Check the <a
+  href="/reference/p5/webglVersion/">webglVersion</a>
+
+  system variable to check what version is being used, or call
+
+  <code>setAttributes({ version: 1 })</code> to create a WebGL1 context.</p>
+line: 15
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(0, 0, width, height);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 50);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(0, 0, width, height);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Use WebGL mode.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(-width / 2, -height / 2, width / 2, height / 2);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create a p5.Renderer object.
+      let cnv = createCanvas(50, 50);
+
+      // Position the canvas.
+      cnv.position(10, 20);
+
+      background(180);
+
+      // Draw a diagonal line.
+      line(0, 0, width, height);
+
+      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new `p5.Renderer` that holds the canvas.
+  type: p5.Renderer
+overloads:
+  - line: 15
+    params:
+      - name: width
+        description: |
+          <p>width of the canvas. Defaults to 100.</p>
+        type: Number
+        optional: true
+      - name: height
+        description: |
+          <p>height of the canvas. Defaults to 100.</p>
+        type: Number
+        optional: true
+      - name: renderer
+        description: |
+          <p>either P2D or WEBGL. Defaults to <code>P2D</code>.</p>
+        type: Constant
+        optional: true
+      - name: canvas
+        description: |
+          <p>existing canvas element that should be used for the sketch.</p>
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: new `p5.Renderer` that holds the canvas.
+      type: p5.Renderer
+  - line: 119
+    params:
+      - name: width
+        description: ''
+        type: Number
+        optional: true
+      - name: height
+        description: ''
+        type: Number
+        optional: true
+      - name: canvas
+        description: ''
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: ''
+      type: p5.Renderer
+chainable: false
+---
+
+
+# createCanvas
diff --git a/src/content/reference/en/p5 copy/createCapture.mdx b/src/content/reference/en/p5 copy/createCapture.mdx
new file mode 100644
index 0000000000..1087d14b1a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCapture.mdx	
@@ -0,0 +1,189 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2295
+title: createCapture
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><video></code> element that "captures" the audio/video
+  stream from
+
+  the webcam and microphone.</p>
+
+  <p><code>createCapture()</code> returns a new
+
+  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
+  shown by
+
+  default. They can be hidden by calling <code>capture.hide()</code> and drawn
+  to the
+
+  canvas using <a href="/reference/p5/image/">image()</a>.</p>
+
+  <p>The first parameter, <code>type</code>, is optional. It sets the type of
+  capture to
+
+  use. By default, <code>createCapture()</code> captures both audio and video.
+  If <code>VIDEO</code>
+
+  is passed, as in <code>createCapture(VIDEO)</code>, only video will be
+  captured.
+
+  If <code>AUDIO</code> is passed, as in <code>createCapture(AUDIO)</code>, only
+  audio will be
+
+  captured. A constraints object can also be passed to customize the stream.
+
+  See the <a
+  href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints"
+  target="_blank">
+
+  W3C documentation</a> for possible properties. Different browsers support
+  different
+
+  properties.</p>
+
+  <p>The 'flipped' property is an optional property which can be set to
+  <code>{flipped:true}</code>
+
+  to mirror the video output.If it is true then it means that video will be
+  mirrored
+
+  or flipped and if nothing is mentioned then by default it will be
+  <code>false</code>.</p>
+
+  <p>The second parameter,<code>callback</code>, is optional. It's a function to
+  call once
+
+  the capture is ready for use. The callback function should have one
+
+  parameter, <code>stream</code>, that's a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/"
+  target="_blank">MediaStream</a> object.</p>
+
+  <p>Note: <code>createCapture()</code> only works when running a sketch locally
+  or using HTTPS. Learn more
+
+  <a
+  href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https/"
+  target="_blank">here</a>
+
+  and <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia/"
+  target="_blank">here</a>.</p>
+line: 2295
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Create the video capture.
+      createCapture(VIDEO);
+
+      describe('A video stream from the webcam.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    let capture;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the video capture and hide the element.
+      capture = createCapture(VIDEO);
+      capture.hide();
+
+      describe('A video stream from the webcam with inverted colors.');
+    }
+
+    function draw() {
+      // Draw the video capture within the canvas.
+      image(capture, 0, 0, width, width * capture.height / capture.width);
+
+      // Invert the colors in the stream.
+      filter(INVERT);
+    }
+    </code>
+    </div>
+    <div class='notest'>
+    <code>
+    let capture;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the video capture with mirrored output.
+      capture = createCapture(VIDEO,{ flipped:true });
+      capture.size(100,100);
+
+      describe('A video stream from the webcam with flipped or mirrored output.');
+    }
+
+    </code>
+    </div>
+
+    <div class='notest norender'>
+    <code>
+    function setup() {
+      createCanvas(480, 120);
+
+      // Create a constraints object.
+      let constraints = {
+        video: {
+          mandatory: {
+            minWidth: 1280,
+            minHeight: 720
+          },
+          optional: [{ maxFrameRate: 10 }]
+        },
+        audio: false
+      };
+
+      // Create the video capture.
+      createCapture(constraints);
+
+      describe('A video stream from the webcam.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: type
+    description: |
+      <p>type of capture, either AUDIO or VIDEO,
+                                        or a constraints object. Both video and audio
+                                        audio streams are captured by default.</p>
+    type: String|Constant|Object
+    optional: true
+  - name: flipped
+    description: >
+      <p>flip the capturing video and mirror the output with
+      <code>{flipped:true}</code>. By
+                                        default it is false.</p>
+    type: Object
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the stream
+                                        has loaded.</p>
+    type: Function
+    optional: true
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createCapture
diff --git a/src/content/reference/en/p5 copy/createCheckbox.mdx b/src/content/reference/en/p5 copy/createCheckbox.mdx
new file mode 100644
index 0000000000..45335be2d4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createCheckbox.mdx	
@@ -0,0 +1,131 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1008
+title: createCheckbox
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a checkbox <code><input></input></code> element.</p>
+
+  <p>Checkboxes extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a
+
+  <code>checked()</code> method. Calling <code>myBox.checked()</code> returns
+  <code>true</code> if it the box
+
+  is checked and <code>false</code> if not.</p>
+
+  <p>The first parameter, <code>label</code>, is optional. It's a string that
+  sets the label
+
+  to display next to the checkbox.</p>
+
+  <p>The second parameter, <code>value</code>, is also optional. It's a boolean
+  that sets the
+
+  checkbox's value.</p>
+line: 1008
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a checkbox and place it beneath the canvas.
+      checkbox = createCheckbox();
+      checkbox.position(0, 100);
+
+      describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a checkbox and place it beneath the canvas.
+      // Label the checkbox "white".
+      checkbox = createCheckbox(' white');
+      checkbox.position(0, 100);
+
+      describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let checkbox;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a checkbox and place it beneath the canvas.
+      // Label the checkbox "white" and set its value to true.
+      checkbox = createCheckbox(' white', true);
+      checkbox.position(0, 100);
+
+      describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
+    }
+
+    function draw() {
+      // Use the checkbox to set the background color.
+      if (checkbox.checked()) {
+        background(255);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: label
+    description: |
+      <p>label displayed after the checkbox.</p>
+    type: String
+    optional: true
+  - name: value
+    description: >
+      <p>value of the checkbox. Checked is <code>true</code> and unchecked is
+      <code>false</code>.</p>
+    type: Boolean
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createCheckbox
diff --git a/src/content/reference/en/p5 copy/createColorPicker.mdx b/src/content/reference/en/p5 copy/createColorPicker.mdx
new file mode 100644
index 0000000000..0c34a0593e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createColorPicker.mdx	
@@ -0,0 +1,101 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1759
+title: createColorPicker
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a color picker element.</p>
+
+  <p>The parameter, <code>value</code>, is optional. If a color string or
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object is passed, it will set
+  the default
+
+  color.</p>
+
+  <p>Color pickers extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a
+
+  couple of helpful methods for managing colors:</p>
+
+  <ul>
+
+  <li><code>myPicker.value()</code> returns the current color as a hex string in
+  the format <code>'#rrggbb'</code>.</li>
+
+  <li><code>myPicker.color()</code> returns the current color as a <a
+  href="/reference/p5/p5.Color">p5.Color</a> object.</li>
+
+  </ul>
+line: 1759
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myPicker;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a color picker and set its position.
+      myPicker = createColorPicker('deeppink');
+      myPicker.position(0, 100);
+
+      describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
+    }
+
+    function draw() {
+      // Use the color picker to paint the background.
+      let c = myPicker.color();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myPicker;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a color picker and set its position.
+      myPicker = createColorPicker('deeppink');
+      myPicker.position(0, 100);
+
+      describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
+    }
+
+    function draw() {
+      // Use the color picker to paint the background.
+      let c = myPicker.value();
+      background(c);
+
+      // Display the current color as a hex string.
+      text(c, 25, 55);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: >
+      <p>default color as a <a
+      href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"
+      target="_blank">CSS color string</a>.</p>
+    type: String|p5.Color
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createColorPicker
diff --git a/src/content/reference/en/p5 copy/createConvolver.mdx b/src/content/reference/en/p5 copy/createConvolver.mdx
new file mode 100644
index 0000000000..89fba3be4e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createConvolver.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L8885
+title: createConvolver
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Create a p5.Convolver. Accepts a path to a soundfile
+  that will be used to generate an impulse response.</p>
+line: 8885
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    let cVerb, sound;
+    function preload() {
+      // We have both MP3 and OGG versions of all sound assets
+      soundFormats('ogg', 'mp3');
+
+      // Try replacing 'bx-spring' with other soundfiles like
+      // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
+      cVerb = createConvolver('/assets/bx-spring.mp3');
+
+      // Try replacing 'Damscray_DancingTiger' with
+      // 'beat', 'doorbell', lucky_dragons_-_power_melody'
+      sound = loadSound('/assets/Damscray_DancingTiger.mp3');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(playSound);
+      background(220);
+      text('tap to play', 20, 20);
+
+      // disconnect from main output...
+      sound.disconnect();
+
+      // ...and process with cVerb
+      // so that we only hear the convolution
+      cVerb.process(sound);
+    }
+
+    function playSound() {
+      sound.play();
+    }
+    </code></div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path to a sound file</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to call if loading is successful.
+                                    The object will be passed in as the argument
+                                    to the callback function.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if loading is not successful.
+                                    A custom error will be passed in as the argument
+                                    to the callback function.</p>
+    type: Function
+    optional: true
+return:
+  description: ''
+  type: p5.Convolver
+chainable: false
+---
+
+
+# createConvolver
diff --git a/src/content/reference/en/p5 copy/createDiv.mdx b/src/content/reference/en/p5 copy/createDiv.mdx
new file mode 100644
index 0000000000..610e0a4f67
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createDiv.mdx	
@@ -0,0 +1,72 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L491
+title: createDiv
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><div></div></code> element.</p>
+
+  <p><code><div></div></code> elements are commonly used as containers for
+
+  other elements.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code><div></div></code>.</p>
+line: 491
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a div element and set its position.
+      let div = createDiv('p5*js');
+      div.position(25, 35);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an h3 element within the div.
+      let div = createDiv('<h3>p5*js</h3>');
+      div.position(20, 5);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: html
+    description: >
+      <p>inner HTML for the new <code>&lt;div&gt;&lt;/div&gt;</code>
+      element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createDiv
diff --git a/src/content/reference/en/p5 copy/createElement.mdx b/src/content/reference/en/p5 copy/createElement.mdx
new file mode 100644
index 0000000000..5969416251
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createElement.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2493
+title: createElement
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
+
+  <p>The first parameter, <code>tag</code>, is a string an HTML tag such as
+  <code>'h5'</code>.</p>
+
+  <p>The second parameter, <code>content</code>, is optional. It's a string that
+  sets the
+
+  HTML content to insert into the new element. New elements have no content
+
+  by default.</p>
+line: 2493
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an h5 element with nothing in it.
+      createElement('h5');
+
+      describe('A gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an h5 element with the content "p5*js".
+      let h5 = createElement('h5', 'p5*js');
+
+      // Set the element's style and position.
+      h5.style('color', 'deeppink');
+      h5.position(30, 15);
+
+      describe('The text "p5*js" written in pink in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: tag
+    description: |
+      <p>tag for the new element.</p>
+    type: String
+  - name: content
+    description: |
+      <p>HTML content to insert into the element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createElement
diff --git a/src/content/reference/en/p5 copy/createFileInput.mdx b/src/content/reference/en/p5 copy/createFileInput.mdx
new file mode 100644
index 0000000000..295f2a0434
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createFileInput.mdx	
@@ -0,0 +1,138 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1942
+title: createFileInput
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code><input></input></code> element of type
+  <code>'file'</code>.</p>
+
+  <p><code>createFileInput()</code> allows users to select local files for use
+  in a sketch.
+
+  It returns a <a href="/reference/p5/p5.File">p5.File</a> object.</p>
+
+  <p>The first parameter, <code>callback</code>, is a function that's called
+  when the file
+
+  loads. The callback function should have one parameter, <code>file</code>,
+  that's a
+
+  <a href="/reference/p5/p5.File">p5.File</a> object.</p>
+
+  <p>The second parameter, <code>multiple</code>, is optional. It's a boolean
+  value that
+
+  allows loading multiple files if set to <code>true</code>. If
+  <code>true</code>, <code>callback</code>
+
+  will be called once per file.</p>
+line: 1942
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to select an image to
+    // load and display.
+    let input;
+    let img;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a file input and place it beneath
+      // the canvas.
+      input = createFileInput(handleImage);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the image if loaded.
+      if (img) {
+        image(img, 0, 0, width, height);
+      }
+    }
+
+    // Create an image if the file is an image.
+    function handleImage(file) {
+      if (file.type === 'image') {
+        img = createImg(file.data, '');
+        img.hide();
+      } else {
+        img = null;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Use the file input to select multiple images
+    // to load and display.
+    let input;
+    let images = [];
+
+    function setup() {
+      // Create a file input and place it beneath
+      // the canvas. Allow it to load multiple files.
+      input = createFileInput(handleImage, true);
+      input.position(0, 100);
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the images if loaded. Each image
+      // is drawn 20 pixels lower than the
+      // previous image.
+      for (let i = 0; i < images.length; i += 1) {
+        // Calculate the y-coordinate.
+        let y = i * 20;
+
+        // Draw the image.
+        image(images[i], 0, y, 100, 100);
+      }
+
+      describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
+    }
+
+    // Create an image if the file is an image,
+    // then add it to the images array.
+    function handleImage(file) {
+      if (file.type === 'image') {
+        let img = createImg(file.data, '');
+        img.hide();
+        images.push(img);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: callback
+    description: |
+      <p>function to call once the file loads.</p>
+    type: Function
+  - name: multiple
+    description: |
+      <p>allow multiple files to be selected.</p>
+    type: Boolean
+    optional: true
+return:
+  description: new <a href="#/p5.File">p5.File</a> object.
+  type: p5.File
+chainable: false
+---
+
+
+# createFileInput
diff --git a/src/content/reference/en/p5 copy/createFilterShader.mdx b/src/content/reference/en/p5 copy/createFilterShader.mdx
new file mode 100644
index 0000000000..5c6c9a4ec5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createFilterShader.mdx	
@@ -0,0 +1,148 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L540
+title: createFilterShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Creates a <a href="/reference/p5/p5.Shader">p5.Shader</a> object to be used
+  with the
+
+  <a href="/reference/p5/filter/">filter()</a> function.</p>
+
+  <p><code>createFilterShader()</code> works like
+
+  <a href="/reference/p5/createShader/">createShader()</a> but has a default
+  vertex
+
+  shader included. <code>createFilterShader()</code> is intended to be used
+  along with
+
+  <a href="/reference/p5/filter/">filter()</a> for filtering the contents of a
+  canvas.
+
+  A filter shader will be applied to the whole canvas instead of just
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects.</p>
+
+  <p>The parameter, <code>fragSrc</code>, sets the fragment shader. It’s a
+  string that
+
+  contains the fragment shader program written in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>.</p>
+
+  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> object that's created
+  has some
+
+  uniforms that can be set:</p>
+
+  <ul>
+
+  <li><code>sampler2D tex0</code>, which contains the canvas contents as a
+  texture.</li>
+
+  <li><code>vec2 canvasSize</code>, which is the width and height of the canvas,
+  not including pixel density.</li>
+
+  <li><code>vec2 texelSize</code>, which is the size of a physical pixel
+  including pixel density. This is calculated as <code>1.0 / (width *
+  density)</code> for the pixel width and <code>1.0 / (height * density)</code>
+  for the pixel height.</li>
+
+  </ul>
+
+  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> that's created also
+  provides
+
+  <code>varying vec2 vTexCoord</code>, a coordinate with values between 0 and 1.
+
+  <code>vTexCoord</code> describes where on the canvas the pixel will be
+  drawn.</p>
+
+  <p>For more info about filters and shaders, see Adam Ferriss' <a
+  href="https://github.com/aferriss/p5jsShaderExamples/">repo of shader
+  examples</a>
+
+  or the <a href="https://p5js.org/tutorials/intro-to-shaders/">Introduction to
+  Shaders</a> tutorial.</p>
+line: 540
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      let fragSrc = `precision highp float;
+      void main() {
+        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+      }`;
+
+      createCanvas(100, 100, WEBGL);
+      let s = createFilterShader(fragSrc);
+      filter(s);
+      describe('a yellow canvas');
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    let img, s;
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+    function setup() {
+      let fragSrc = `precision highp float;
+
+      // x,y coordinates, given from the vertex shader
+      varying vec2 vTexCoord;
+
+      // the canvas contents, given from filter()
+      uniform sampler2D tex0;
+      // other useful information from the canvas
+      uniform vec2 texelSize;
+      uniform vec2 canvasSize;
+      // a custom variable from this sketch
+      uniform float darkness;
+
+      void main() {
+        // get the color at current pixel
+        vec4 color = texture2D(tex0, vTexCoord);
+        // set the output color
+        color.b = 1.0;
+        color *= darkness;
+        gl_FragColor = vec4(color.rgb, 1.0);
+      }`;
+
+      createCanvas(100, 100, WEBGL);
+      s = createFilterShader(fragSrc);
+    }
+    function draw() {
+      image(img, -50, -50);
+      s.setUniform('darkness', 0.5);
+      filter(s);
+      describe('a image of bricks tinted dark blue');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader.</p>
+    type: String
+return:
+  description: new shader object created from the fragment shader.
+  type: p5.Shader
+chainable: false
+---
+
+
+# createFilterShader
diff --git a/src/content/reference/en/p5 copy/createFramebuffer.mdx b/src/content/reference/en/p5 copy/createFramebuffer.mdx
new file mode 100644
index 0000000000..80d8199779
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createFramebuffer.mdx	
@@ -0,0 +1,208 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L495
+title: createFramebuffer
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates and a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+  object.</p>
+
+  <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
+  separate drawing
+
+  surfaces that can be used as textures in WebGL mode. They're similar to
+
+  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally run
+  much
+
+  faster when used as textures.</p>
+
+  <p>The parameter, <code>options</code>, is optional. An object can be passed
+  to configure
+
+  the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
+  available
+
+  properties are:</p>
+
+  <ul>
+
+  <li><code>format</code>: data format of the texture, either
+  <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>.
+  Default is <code>UNSIGNED_BYTE</code>.</li>
+
+  <li><code>channels</code>: whether to store <code>RGB</code> or
+  <code>RGBA</code> color channels. Default is to match the main canvas which is
+  <code>RGBA</code>.</li>
+
+  <li><code>depth</code>: whether to include a depth buffer. Default is
+  <code>true</code>.</li>
+
+  <li><code>depthFormat</code>: data format of depth information, either
+  <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
+  <code>FLOAT</code>.</li>
+
+  <li><code>stencil</code>: whether to include a stencil buffer for masking.
+  <code>depth</code> must be <code>true</code> for this feature to work.
+  Defaults to the value of <code>depth</code> which is <code>true</code>.</li>
+
+  <li><code>antialias</code>: whether to perform anti-aliasing. If set to
+  <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be
+  used by default. The number of samples can also be set, as in <code>{
+  antialias: 4 }</code>. Default is to match <a
+  href="/reference/p5/setAttributes/">setAttributes()</a> which is
+  <code>false</code> (<code>true</code> in Safari).</li>
+
+  <li><code>width</code>: width of the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
+  always match the main canvas width.</li>
+
+  <li><code>height</code>: height of the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
+  always match the main canvas height.</li>
+
+  <li><code>density</code>: pixel density of the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
+  always match the main canvas pixel density.</li>
+
+  <li><code>textureFiltering</code>: how to read values from the <a
+  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
+  <code>LINEAR</code> (nearby pixels will be interpolated) or
+  <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code>
+  when using the texture as an image and <code>NEAREST</code> if reading the
+  texture as data. Default is <code>LINEAR</code>.</li>
+
+  </ul>
+
+  <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
+  attributes are set, they won't automatically match the main canvas and must be
+  changed manually.</p>
+
+  <p>Note: <code>createFramebuffer()</code> can only be used in WebGL mode.</p>
+line: 495
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myBuffer;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Framebuffer object.
+      myBuffer = createFramebuffer();
+
+      describe('A grid of white toruses rotating against a dark gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Start drawing to the p5.Framebuffer object.
+      myBuffer.begin();
+
+      // Clear the drawing surface.
+      clear();
+
+      // Turn on the lights.
+      lights();
+
+      // Rotate the coordinate system.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Style the torus.
+      noStroke();
+
+      // Draw the torus.
+      torus(20);
+
+      // Stop drawing to the p5.Framebuffer object.
+      myBuffer.end();
+
+      // Iterate from left to right.
+      for (let x = -50; x < 50; x += 25) {
+        // Iterate from top to bottom.
+        for (let y = -50; y < 50; y += 25) {
+          // Draw the p5.Framebuffer object to the canvas.
+          image(myBuffer, x, y, 25, 25);
+        }
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myBuffer;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create an options object.
+      let options = { width: 25, height: 25 };
+
+      // Create a p5.Framebuffer object.
+      // Use options for configuration.
+      myBuffer = createFramebuffer(options);
+
+      describe('A grid of white toruses rotating against a dark gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Start drawing to the p5.Framebuffer object.
+      myBuffer.begin();
+
+      // Clear the drawing surface.
+      clear();
+
+      // Turn on the lights.
+      lights();
+
+      // Rotate the coordinate system.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Style the torus.
+      noStroke();
+
+      // Draw the torus.
+      torus(5, 2.5);
+
+      // Stop drawing to the p5.Framebuffer object.
+      myBuffer.end();
+
+      // Iterate from left to right.
+      for (let x = -50; x < 50; x += 25) {
+        // Iterate from top to bottom.
+        for (let y = -50; y < 50; y += 25) {
+          // Draw the p5.Framebuffer object to the canvas.
+          image(myBuffer, x, y);
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: options
+    description: |
+      <p>configuration options.</p>
+    type: Object
+    optional: true
+return:
+  description: new framebuffer.
+  type: p5.Framebuffer
+chainable: false
+---
+
+
+# createFramebuffer
diff --git a/src/content/reference/en/p5 copy/createGraphics.mdx b/src/content/reference/en/p5 copy/createGraphics.mdx
new file mode 100644
index 0000000000..6d75f158f4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createGraphics.mdx	
@@ -0,0 +1,191 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L370
+title: createGraphics
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Creates a <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.</p>
+
+  <p><code>createGraphics()</code> creates an offscreen drawing canvas (graphics
+  buffer)
+
+  and returns it as a <a href="/reference/p5/p5.Graphics">p5.Graphics</a>
+  object. Drawing
+
+  to a separate graphics buffer can be helpful for performance and for
+
+  organizing code.</p>
+
+  <p>The first two parameters, <code>width</code> and <code>height</code>, are
+  optional. They set the
+
+  dimensions of the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.
+  For
+
+  example, calling <code>createGraphics(900, 500)</code> creates a graphics
+  buffer
+
+  that's 900×500 pixels.</p>
+
+  <p>The third parameter is also optional. If either of the constants
+  <code>P2D</code> or
+
+  <code>WEBGL</code> is passed, as in <code>createGraphics(900, 500,
+  WEBGL)</code>, then it will set
+
+  the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object's rendering
+  mode. If an
+
+  existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createGraphics(900, 500, myCanvas)</code>, then it will
+  be used
+
+  by the graphics buffer.</p>
+
+  <p>The fourth parameter is also optional. If an existing
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
+  target="_blank">HTMLCanvasElement</a>
+
+  is passed, as in <code>createGraphics(900, 500, WEBGL, myCanvas)</code>, then
+  it will be
+
+  used by the graphics buffer.</p>
+
+  <p>Note: In WebGL mode, the <a
+  href="/reference/p5/p5.Graphics">p5.Graphics</a> object
+
+  will use a WebGL2 context if it's supported by the browser. Check the
+
+  <a href="/reference/p5/webglVersion/">webglVersion</a> system variable to
+  check what
+
+  version is being used, or call <code>setAttributes({ version: 1 })</code> to
+  create a
+
+  WebGL1 context.</p>
+line: 370
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    //  Double-click to draw the contents of the graphics buffer.
+
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Create the p5.Graphics object.
+      pg = createGraphics(50, 50);
+
+      // Draw to the graphics buffer.
+      pg.background(100);
+      pg.circle(pg.width / 2, pg.height / 2, 20);
+
+      describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');
+    }
+
+    // Display the graphics buffer when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        image(pg, 25, 25);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    //  Double-click to draw the contents of the graphics buffer.
+
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Create the p5.Graphics object in WebGL mode.
+      pg = createGraphics(50, 50, WEBGL);
+
+      // Draw to the graphics buffer.
+      pg.background(100);
+      pg.lights();
+      pg.noStroke();
+      pg.rotateX(QUARTER_PI);
+      pg.rotateY(QUARTER_PI);
+      pg.torus(15, 5);
+
+      describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');
+    }
+
+    // Display the graphics buffer when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        image(pg, 25, 25);
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new graphics buffer.
+  type: p5.Graphics
+overloads:
+  - line: 370
+    params:
+      - name: width
+        description: |
+          <p>width of the graphics buffer.</p>
+        type: Number
+      - name: height
+        description: |
+          <p>height of the graphics buffer.</p>
+        type: Number
+      - name: renderer
+        description: |
+          <p>either P2D or WEBGL. Defaults to P2D.</p>
+        type: Constant
+        optional: true
+      - name: canvas
+        description: |
+          <p>existing canvas element that should be
+                                               used for the graphics buffer..</p>
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: new graphics buffer.
+      type: p5.Graphics
+  - line: 475
+    params:
+      - name: width
+        description: ''
+        type: Number
+      - name: height
+        description: ''
+        type: Number
+      - name: canvas
+        description: ''
+        type: HTMLCanvasElement
+        optional: true
+    return:
+      description: ''
+      type: p5.Graphics
+chainable: false
+---
+
+
+# createGraphics
diff --git a/src/content/reference/en/p5 copy/createImage.mdx b/src/content/reference/en/p5 copy/createImage.mdx
new file mode 100644
index 0000000000..33c151c315
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createImage.mdx	
@@ -0,0 +1,172 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L15
+title: createImage
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+  <p><code>createImage()</code> uses the <code>width</code> and
+  <code>height</code> parameters to set the new
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object's dimensions in pixels.
+  The new
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> can be modified by updating its
+
+  <a href="/reference/p5.Image/pixels/">pixels</a> array or by calling its
+
+  <a href="/reference/p5.Image/get/">get()</a> and
+
+  <a href="/reference/p5.Image/set/">set()</a> methods. The
+
+  <a href="/reference/p5.Image/loadPixels/">loadPixels()</a> method must be
+  called
+
+  before reading or modifying pixel values. The
+
+  <a href="/reference/p5.Image/updatePixels/">updatePixels()</a> method must be
+  called
+
+  for updates to take effect.</p>
+
+  <p>Note: The new <a href="/reference/p5/p5.Image">p5.Image</a> object is
+  transparent by
+
+  default.</p>
+line: 15
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the image's pixels into memory.
+      img.loadPixels();
+
+      // Set all the image's pixels to black.
+      for (let x = 0; x < img.width; x += 1) {
+        for (let y = 0; y < img.height; y += 1) {
+          img.set(x, y, 0);
+        }
+      }
+
+      // Update the image's pixel values.
+      img.updatePixels();
+
+      // Draw the image.
+      image(img, 17, 17);
+
+      describe('A black square drawn in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the image's pixels into memory.
+      img.loadPixels();
+
+      // Create a color gradient.
+      for (let x = 0; x < img.width; x += 1) {
+        for (let y = 0; y < img.height; y += 1) {
+          // Calculate the transparency.
+          let a = map(x, 0, img.width, 0, 255);
+
+          // Create a p5.Color object.
+          let c = color(0, a);
+
+          // Set the pixel's color.
+          img.set(x, y, c);
+        }
+      }
+
+      // Update the image's pixels.
+      img.updatePixels();
+
+      // Display the image.
+      image(img, 17, 17);
+
+      describe('A square with a horizontal color gradient that transitions from gray to black.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the pixels into memory.
+      img.loadPixels();
+      // Get the current pixel density.
+      let d = pixelDensity();
+
+      // Calculate the pixel that is halfway through the image's pixel array.
+      let halfImage = 4 * (d * img.width) * (d * img.height / 2);
+
+      // Set half of the image's pixels to black.
+      for (let i = 0; i < halfImage; i += 4) {
+        // Red.
+        img.pixels[i] = 0;
+        // Green.
+        img.pixels[i + 1] = 0;
+        // Blue.
+        img.pixels[i + 2] = 0;
+        // Alpha.
+        img.pixels[i + 3] = 255;
+      }
+
+      // Update the image's pixels.
+      img.updatePixels();
+
+      // Display the image.
+      image(img, 17, 17);
+
+      describe('A black square drawn in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width in pixels.</p>
+    type: Integer
+  - name: height
+    description: |
+      <p>height in pixels.</p>
+    type: Integer
+return:
+  description: new <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# createImage
diff --git a/src/content/reference/en/p5 copy/createImg.mdx b/src/content/reference/en/p5 copy/createImg.mdx
new file mode 100644
index 0000000000..22b71d22c4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createImg.mdx	
@@ -0,0 +1,115 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L649
+title: createImg
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates an <code><img></code> element that can appear outside of the
+  canvas.</p>
+
+  <p>The first parameter, <code>src</code>, is a string with the path to the
+  image file.
+
+  <code>src</code> should be a relative path, as in
+  <code>'/assets/image.png'</code>, or a URL, as
+
+  in <code>'https://example.com/image.png'</code>.</p>
+
+  <p>The second parameter, <code>alt</code>, is a string with the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes"
+  target="_blank">alternate text</a>
+
+  for the image. An empty string <code>''</code> can be used for images that
+  aren't displayed.</p>
+
+  <p>The third parameter, <code>crossOrigin</code>, is optional. It's a string
+  that sets the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes/"
+  target="_blank">crossOrigin property</a>
+
+  of the image. Use <code>'anonymous'</code> or <code>'use-credentials'</code>
+  to fetch the image
+
+  with cross-origin access.</p>
+
+  <p>The fourth parameter, <code>callback</code>, is also optional. It sets a
+  function to
+
+  call after the image loads. The new image is passed to the callback
+
+  function as a <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
+line: 649
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      let img = createImg(
+        'https://p5js.org//assets/img/asterisk-01.png',
+        'The p5.js magenta asterisk.'
+      );
+      img.position(0, -10);
+
+      describe('A gray square with a magenta asterisk in its center.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 649
+    params:
+      - name: src
+        description: |
+          <p>relative path or URL for the image.</p>
+        type: String
+      - name: alt
+        description: |
+          <p>alternate text for the image.</p>
+        type: String
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 693
+    params:
+      - name: src
+        description: ''
+        type: String
+      - name: alt
+        description: ''
+        type: String
+      - name: crossOrigin
+        description: |
+          <p>crossOrigin property to use when fetching the image.</p>
+        type: String
+        optional: true
+      - name: successCallback
+        description: |
+          <p>function to call once the image loads. The new image will be passed
+                                               to the function as a <a href="#/p5.Element">p5.Element</a> object.</p>
+        type: Function
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+chainable: false
+---
+
+
+# createImg
diff --git a/src/content/reference/en/p5 copy/createInput.mdx b/src/content/reference/en/p5 copy/createInput.mdx
new file mode 100644
index 0000000000..3a790ee6b2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createInput.mdx	
@@ -0,0 +1,118 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1859
+title: createInput
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a text <code><input></input></code> element.</p>
+
+  <p>Call <code>myInput.size()</code> to set the length of the text box.</p>
+
+  <p>The first parameter, <code>value</code>, is optional. It's a string that
+  sets the
+
+  input's default value. The input is blank by default.</p>
+
+  <p>The second parameter, <code>type</code>, is also optional. It's a string
+  that
+
+  specifies the type of text being input. See MDN for a full
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/"
+  target="_blank">list of options</a>.
+
+  The default is <code>'text'</code>.</p>
+line: 1859
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myInput;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an input element and place it
+      // beneath the canvas.
+      myInput = createInput();
+      myInput.position(0, 100);
+
+      describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input to display a message.
+      let msg = myInput.value();
+      text(msg, 25, 55);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myInput;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an input element and place it
+      // beneath the canvas. Set its default
+      // text to "hello!".
+      myInput = createInput('hello!');
+      myInput.position(0, 100);
+
+      describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the input to display a message.
+      let msg = myInput.value();
+      text(msg, 25, 55);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 1859
+    params:
+      - name: value
+        description: >
+          <p>default value of the input box. Defaults to an empty string
+          <code>''</code>.</p>
+        type: String
+        optional: true
+      - name: type
+        description: |
+          <p>type of input. Defaults to <code>'text'</code>.</p>
+        type: String
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1929
+    params:
+      - name: value
+        description: ''
+        type: String
+        optional: true
+    return:
+      description: ''
+      type: p5.Element
+chainable: false
+---
+
+
+# createInput
diff --git a/src/content/reference/en/p5 copy/createModel.mdx b/src/content/reference/en/p5 copy/createModel.mdx
new file mode 100644
index 0000000000..c94e95900f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createModel.mdx	
@@ -0,0 +1,193 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L1132
+title: createModel
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: >
+  <p>Load a 3d model from an OBJ or STL string.</p>
+
+  <p>OBJ and STL files lack a built-in sense of scale, causing models exported
+  from different programs to vary in size.
+
+  If your model doesn't display correctly, consider using
+  <code>loadModel()</code> with <code>normalize</code> set to <code>true</code>
+  to standardize its size.
+
+  Further adjustments can be made using the <code>scale()</code> function.</p>
+
+  <p>Also, the support for colored STL files is not present. STL files with
+  color will be
+
+  rendered without color properties.</p>
+
+  <ul>
+
+  <li>Options can include:</li>
+
+  </ul>
+
+  <ul>
+
+  <li><code>modelString</code>: Specifies the plain text string of either an stl
+  or obj file to be loaded.</li>
+
+  <li><code>fileType</code>: Defines the file extension of the model.</li>
+
+  <li><code>normalize</code>: Enables standardized size scaling during loading
+  if set to true.</li>
+
+  <li><code>successCallback</code>: Callback for post-loading actions with the
+  3D model object.</li>
+
+  <li><code>failureCallback</code>: Handles errors if model loading fails,
+  receiving an event error.</li>
+
+  <li><code>flipU</code>: Flips the U texture coordinates of the model.</li>
+
+  <li><code>flipV</code>: Flips the V texture coordinates of the model.</li>
+
+  </ul>
+line: 1132
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    const octahedron_model = `
+    v 0.000000E+00 0.000000E+00 40.0000
+    v 22.5000 22.5000 0.000000E+00
+    v 22.5000 -22.5000 0.000000E+00
+    v -22.5000 -22.5000 0.000000E+00
+    v -22.5000 22.5000 0.000000E+00
+    v 0.000000E+00 0.000000E+00 -40.0000
+    f     1 2 3
+    f     1 3 4
+    f     1 4 5
+    f     1 5 2
+    f     6 5 4
+    f     6 4 3
+    f     6 3 2
+    f     6 2 5
+    `;
+    //draw a spinning octahedron
+    let octahedron;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      octahedron = createModel(octahedron_model, '.obj');
+      describe('Vertically rotating 3D octahedron.');
+    }
+
+    function draw() {
+      background(200);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      model(octahedron);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+  type: p5.Geometry
+overloads:
+  - line: 1132
+    params:
+      - name: modelString
+        description: |
+          <p>String of the object to be loaded</p>
+        type: String
+      - name: fileType
+        description: |
+          <p>The file extension of the model
+                                               (<code>.stl</code>, <code>.obj</code>).</p>
+        type: String
+        optional: true
+      - name: normalize
+        description: |
+          <p>If true, scale the model to a
+                                               standardized size when loading</p>
+        type: Boolean
+      - name: successCallback
+        description: |
+          <p>Function to be called
+                                              once the model is loaded. Will be passed
+                                              the 3D model object.</p>
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: |
+          <p>called with event error if
+                                                  the model fails to load.</p>
+        type: Function(Event)
+        optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+  - line: 1202
+    params:
+      - name: modelString
+        description: ''
+        type: String
+      - name: fileType
+        description: ''
+        type: String
+        optional: true
+      - name: successCallback
+        description: ''
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: ''
+        type: Function(Event)
+        optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+  - line: 1210
+    params:
+      - name: modelString
+        description: ''
+        type: String
+      - name: fileType
+        description: ''
+        type: String
+        optional: true
+      - name: options
+        description: ''
+        type: Object
+        optional: true
+        props:
+          - name: successCallback
+            description: ''
+            type: function(p5.Geometry)
+            optional: true
+          - name: failureCallback
+            description: ''
+            type: Function(Event)
+            optional: true
+          - name: normalize
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipU
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipV
+            description: ''
+            type: Boolean
+            optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+chainable: false
+---
+
+
+# createModel
diff --git a/src/content/reference/en/p5 copy/createNumberDict.mdx b/src/content/reference/en/p5 copy/createNumberDict.mdx
new file mode 100644
index 0000000000..952410a222
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createNumberDict.mdx	
@@ -0,0 +1,57 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L48
+title: createNumberDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: >
+  <p>Creates a new instance of <a
+  href="/reference/p5/p5.NumberDict">p5.NumberDict</a> using the key-value pair
+   or object you provide.</p>
+line: 48
+isConstructor: false
+itemtype: method
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myDictionary = createNumberDict(100, 42);
+       print(myDictionary.hasKey(100)); // logs true to console
+      let anotherDictionary = createNumberDict({ 200: 84 });
+       print(anotherDictionary.hasKey(200)); // logs true to console
+     }
+     </code></div>
+class: p5
+return:
+  description: ''
+  type: p5.NumberDict
+overloads:
+  - line: 48
+    params:
+      - name: key
+        description: ''
+        type: Number
+      - name: value
+        description: ''
+        type: Number
+    return:
+      description: ''
+      type: p5.NumberDict
+  - line: 71
+    params:
+      - name: object
+        description: |
+          <p>object</p>
+        type: Object
+    return:
+      description: ''
+      type: p5.NumberDict
+chainable: false
+---
+
+
+# createNumberDict
diff --git a/src/content/reference/en/p5 copy/createP.mdx b/src/content/reference/en/p5 copy/createP.mdx
new file mode 100644
index 0000000000..6d3005fc37
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createP.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L543
+title: createP
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a paragraph element.</p>
+
+  <p><code><p></p></code> elements are commonly used for paragraph-length
+  text.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code><p></p></code>.</p>
+line: 543
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a paragraph element and set its position.
+      let p = createP('Tell me a story.');
+      p.position(5, 0);
+
+      describe('A gray square displaying the text "Tell me a story." written in black.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: html
+    description: |
+      <p>inner HTML for the new <code>&lt;p&gt;&lt;/p&gt;</code> element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createP
diff --git a/src/content/reference/en/p5 copy/createRadio.mdx b/src/content/reference/en/p5 copy/createRadio.mdx
new file mode 100644
index 0000000000..f2b8a2a81c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createRadio.mdx	
@@ -0,0 +1,223 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1440
+title: createRadio
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a radio button element.</p>
+
+  <p>The parameter is optional. If a string is passed, as in
+
+  <code>let myRadio = createSelect('food')</code>, then each radio option will
+
+  have <code>"food"</code> as its <code>name</code> parameter: <code><input
+  name="food"></code>.
+
+  If an existing <code><div></div></code> or <code><span></span></code>
+
+  element is passed, as in <code>let myRadio = createSelect(container)</code>,
+  it will
+
+  become the radio button's parent element.</p>
+
+  <p>Radio buttons extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a few
+
+  helpful methods for managing options:</p>
+
+  <ul>
+
+  <li><code>myRadio.option(value, [label])</code> adds an option to the menu.
+  The first parameter, <code>value</code>, is a string that sets the option's
+  value and label. The second parameter, <code>label</code>, is optional. If
+  provided, it sets the label displayed for the <code>value</code>. If an option
+  with <code>value</code> already exists, its label is changed and its value is
+  returned.</li>
+
+  <li><code>myRadio.value()</code> returns the currently-selected option's
+  value.</li>
+
+  <li><code>myRadio.selected()</code> returns the currently-selected
+  option.</li>
+
+  <li><code>myRadio.selected(value)</code> selects the given option and returns
+  it as an <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/"
+  target="_blank"><code>HTMLInputElement</code></a>.</li>
+
+  <li><code>myRadio.disable(shouldDisable)</code> Disables the radio button if
+  <code>true</code> is passed, and enables it if <code>false</code> is
+  passed.</li>
+
+  </ul>
+line: 1440
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let style = document.createElement('style');
+    style.innerHTML = `
+    .p5-radio label {
+       display: flex;
+       align-items: center;
+     }
+     .p5-radio input {
+       margin-right: 5px;
+     }
+     `;
+    document.head.appendChild(style);
+
+    let myRadio;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.class('p5-radio');
+      myRadio.size(60);
+
+      // Add a few color options.
+      myRadio.option('red');
+      myRadio.option('yellow');
+      myRadio.option('blue');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let g = myRadio.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myRadio;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.size(50);
+
+      // Add a few color options.
+      // Color values are labeled with
+      // emotions they evoke.
+      myRadio.option('red', 'love');
+      myRadio.option('yellow', 'joy');
+      myRadio.option('blue', 'trust');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let c = myRadio.value();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myRadio;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a radio button element and place it
+      // in the top-left corner.
+      myRadio = createRadio();
+      myRadio.position(0, 0);
+      myRadio.class('p5-radio');
+      myRadio.size(50);
+
+      // Add a few color options.
+      myRadio.option('red');
+      myRadio.option('yellow');
+      myRadio.option('blue');
+
+      // Choose a default option.
+      myRadio.selected('yellow');
+
+      // Create a button and place it beneath the canvas.
+      let btn = createButton('disable');
+      btn.position(0, 100);
+
+      // Call disableRadio() when btn is pressed.
+      btn.mousePressed(disableRadio);
+
+      describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
+    }
+
+    function draw() {
+      // Set the background color using the radio button.
+      let c = myRadio.value();
+      background(c);
+    }
+
+    // Disable myRadio.
+    function disableRadio() {
+      myRadio.disable(true);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 1440
+    params:
+      - name: containerElement
+        description: >
+          <p>container HTML Element, either a
+          <code>&lt;div&gt;&lt;/div&gt;</code>
+
+          or <code>&lt;span&gt;&lt;/span&gt;</code>.</p>
+        type: Object
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1588
+    params:
+      - name: name
+        description: >
+          <p>name parameter assigned to each option's
+          <code>&lt;input&gt;&lt;/input&gt;</code> element.</p>
+        type: String
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1593
+    params: []
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+chainable: false
+---
+
+
+# createRadio
diff --git a/src/content/reference/en/p5 copy/createSelect.mdx b/src/content/reference/en/p5 copy/createSelect.mdx
new file mode 100644
index 0000000000..496f4082e6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createSelect.mdx	
@@ -0,0 +1,235 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1159
+title: createSelect
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a dropdown menu <code><select></select></code> element.</p>
+
+  <p>The parameter is optional. If <code>true</code> is passed, as in
+
+  <code>let mySelect = createSelect(true)</code>, then the dropdown will support
+
+  multiple selections. If an existing <code><select></select></code> element
+
+  is passed, as in <code>let mySelect = createSelect(otherSelect)</code>, the
+  existing
+
+  element will be wrapped in a new <a
+  href="/reference/p5/p5.Element">p5.Element</a>
+
+  object.</p>
+
+  <p>Dropdowns extend the <a href="/reference/p5/p5.Element">p5.Element</a>
+  class with a few
+
+  helpful methods for managing options:</p>
+
+  <ul>
+
+  <li><code>mySelect.option(name, [value])</code> adds an option to the menu.
+  The first paremeter, <code>name</code>, is a string that sets the option's
+  name and value. The second parameter, <code>value</code>, is optional. If
+  provided, it sets the value that corresponds to the key <code>name</code>. If
+  an option with <code>name</code> already exists, its value is changed to
+  <code>value</code>.</li>
+
+  <li><code>mySelect.value()</code> returns the currently-selected option's
+  value.</li>
+
+  <li><code>mySelect.selected()</code> returns the currently-selected
+  option.</li>
+
+  <li><code>mySelect.selected(option)</code> selects the given option by
+  default.</li>
+
+  <li><code>mySelect.disable()</code> marks the whole dropdown element as
+  disabled.</li>
+
+  <li><code>mySelect.disable(option)</code> marks a given option as
+  disabled.</li>
+
+  <li><code>mySelect.enable()</code> marks the whole dropdown element as
+  enabled.</li>
+
+  <li><code>mySelect.enable(option)</code> marks a given option as enabled.</li>
+
+  </ul>
+line: 1159
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      // Set the selected option to "red".
+      mySelect.selected('red');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      // Set the selected option to "red".
+      mySelect.selected('red');
+
+      // Disable the "yellow" option.
+      mySelect.disable('yellow');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and place it beneath the canvas.
+      mySelect = createSelect();
+      mySelect.position(0, 100);
+
+      // Add color options with names and values.
+      mySelect.option('one', 'red');
+      mySelect.option('two', 'green');
+      mySelect.option('three', 'blue');
+      mySelect.option('four', 'yellow');
+
+      // Set the selected option to "one".
+      mySelect.selected('one');
+
+      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+    }
+
+    function draw() {
+      // Use the selected value to paint the background.
+      let c = mySelect.selected();
+      background(c);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Hold CTRL to select multiple options on Windows and Linux.
+    // Hold CMD to select multiple options on macOS.
+    let mySelect;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a dropdown and allow multiple selections.
+      // Place it beneath the canvas.
+      mySelect = createSelect(true);
+      mySelect.position(0, 100);
+
+      // Add color options.
+      mySelect.option('red');
+      mySelect.option('green');
+      mySelect.option('blue');
+      mySelect.option('yellow');
+
+      describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use the selected value(s) to draw circles.
+      let colors = mySelect.selected();
+      for (let i = 0; i < colors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = 10 + i * 20;
+
+        // Access the color.
+        let c = colors[i];
+
+        // Draw the circle.
+        fill(c);
+        circle(x, 50, 20);
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+overloads:
+  - line: 1159
+    params:
+      - name: multiple
+        description: |
+          <p>support multiple selections.</p>
+        type: Boolean
+        optional: true
+    return:
+      description: new <a href="#/p5.Element">p5.Element</a> object.
+      type: p5.Element
+  - line: 1324
+    params:
+      - name: existing
+        description: >
+          <p>select element to wrap, either as a <a
+          href="#/p5.Element">p5.Element</a> or
+                                   a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" target="_blank">HTMLSelectElement</a>.</p>
+        type: Object
+    return:
+      description: ''
+      type: p5.Element
+chainable: false
+---
+
+
+# createSelect
diff --git a/src/content/reference/en/p5 copy/createShader.mdx b/src/content/reference/en/p5 copy/createShader.mdx
new file mode 100644
index 0000000000..c595145529
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createShader.mdx	
@@ -0,0 +1,438 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L173
+title: createShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
+
+  <p>Shaders are programs that run on the graphics processing unit (GPU). They
+
+  can process many pixels at the same time, making them fast for many
+
+  graphics tasks. They’re written in a language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.</p>
+
+  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
+  it can be
+
+  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
+
+  <code>shader(myShader)</code>. A shader program consists of two parts, a
+  vertex shader
+
+  and a fragment shader. The vertex shader affects where 3D geometry is drawn
+
+  on the screen and the fragment shader affects color.</p>
+
+  <p>The first parameter, <code>vertSrc</code>, sets the vertex shader. It’s a
+  string that
+
+  contains the vertex shader program written in GLSL.</p>
+
+  <p>The second parameter, <code>fragSrc</code>, sets the fragment shader. It’s
+  a string
+
+  that contains the fragment shader program written in GLSL.</p>
+
+  <p>A shader can optionally describe <em>hooks,</em> which are functions in
+  GLSL that
+
+  users may choose to provide to customize the behavior of the shader using the
+
+  <a href="/reference/p5.Shader/modify/"><code>modify()</code></a> method of
+  <code>p5.Shader</code>. These are added by
+
+  describing the hooks in a third parameter, <code>options</code>, and
+  referencing the hooks in
+
+  your <code>vertSrc</code> or <code>fragSrc</code>. Hooks for the vertex or
+  fragment shader are described under
+
+  the <code>vertex</code> and <code>fragment</code> keys of
+  <code>options</code>. Each one is an object. where each key is
+
+  the type and name of a hook function, and each value is a string with the
+
+  parameter list and default implementation of the hook. For example, to let
+  users
+
+  optionally run code at the start of the vertex shader, the options object
+  could
+
+  include:</p>
+
+  <pre><code class="language-js">{
+    vertex: {
+      'void beforeVertex': '() {}'
+    }
+  }
+
+  </code></pre>
+
+  <p>Then, in your vertex shader source, you can run a hook by calling a
+  function
+
+  with the same name prefixed by <code>HOOK_</code>. If you want to check if the
+  default
+
+  hook has been replaced, maybe to avoid extra overhead, you can check if the
+
+  same name prefixed by <code>AUGMENTED_HOOK_</code> has been defined:</p>
+
+  <pre><code class="language-glsl">void main() {
+    // In most cases, just calling the hook is fine:
+    HOOK_beforeVertex();
+
+    // Alternatively, for more efficiency:
+    #ifdef AUGMENTED_HOOK_beforeVertex
+    HOOK_beforeVertex();
+    #endif
+
+    // Add the rest of your shader code here!
+  }
+
+  </code></pre>
+
+  <p>Note: Only filter shaders can be used in 2D mode. All shaders can be used
+
+  in WebGL mode.</p>
+line: 173
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+
+    void main() {
+      // Set each pixel's RGBA value to yellow.
+      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let shaderProgram = createShader(vertSrc, fragSrc);
+
+      // Compile and apply the p5.Shader object.
+      shader(shaderProgram);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A yellow square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+    uniform vec2 p;
+    uniform float r;
+    const int numIterations = 500;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vec2 c = p + gl_FragCoord.xy * r;
+      vec2 z = c;
+      float n = 0.0;
+
+      for (int i = numIterations; i > 0; i--) {
+        if (z.x * z.x + z.y * z.y > 4.0) {
+          n = float(i) / float(numIterations);
+          break;
+        }
+        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+      }
+
+      gl_FragColor = vec4(
+        0.5 - cos(n * 17.0) / 2.0,
+        0.5 - cos(n * 13.0) / 2.0,
+        0.5 - cos(n * 23.0) / 2.0,
+        1.0
+      );
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let mandelbrot = createShader(vertSrc, fragSrc);
+
+      // Compile and apply the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      // p is the center point of the Mandelbrot image.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      // Set the shader uniform r to 0.005.
+      // r is the size of the image in Mandelbrot-space.
+      mandelbrot.setUniform('r', 0.005);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A black fractal image on a magenta background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+    uniform vec2 p;
+    uniform float r;
+    const int numIterations = 500;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vec2 c = p + gl_FragCoord.xy * r;
+      vec2 z = c;
+      float n = 0.0;
+
+      for (int i = numIterations; i > 0; i--) {
+        if (z.x * z.x + z.y * z.y > 4.0) {
+          n = float(i) / float(numIterations);
+          break;
+        }
+
+        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+      }
+
+      gl_FragColor = vec4(
+        0.5 - cos(n * 17.0) / 2.0,
+        0.5 - cos(n * 13.0) / 2.0,
+        0.5 - cos(n * 23.0) / 2.0,
+        1.0
+      );
+    }
+    `;
+
+    let mandelbrot;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      mandelbrot = createShader(vertSrc, fragSrc);
+
+      // Apply the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      // p is the center point of the Mandelbrot image.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates
+      // between 0 and 0.005.
+      // r is the size of the image in Mandelbrot-space.
+      let radius = 0.005 * (sin(frameCount * 0.01) + 1);
+      mandelbrot.setUniform('r', radius);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // A shader with hooks.
+    let myShader;
+
+    // A shader with modified hooks.
+    let modifiedShader;
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+
+    void main() {
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a fragment shader that uses a hook.
+    let fragSrc = `
+    precision highp float;
+    void main() {
+      // Let users override the color
+      gl_FragColor = HOOK_getColor(vec4(1., 0., 0., 1.));
+    }
+    `;
+
+    function setup() {
+      createCanvas(50, 50, WEBGL);
+
+      // Create a shader with hooks
+      myShader = createShader(vertSrc, fragSrc, {
+        fragment: {
+          'vec4 getColor': '(vec4 color) { return color; }'
+        }
+      });
+
+      // Make a version of the shader with a hook overridden
+      modifiedShader = myShader.modify({
+        'vec4 getColor': `(vec4 color) {
+          return vec4(0., 0., 1., 1.);
+        }`
+      });
+    }
+
+    function draw() {
+      noStroke();
+
+      push();
+      shader(myShader);
+      translate(-width/3, 0);
+      sphere(10);
+      pop();
+
+      push();
+      shader(modifiedShader);
+      translate(width/3, 0);
+      sphere(10);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: vertSrc
+    description: |
+      <p>source code for the vertex shader.</p>
+    type: String
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader.</p>
+    type: String
+  - name: options
+    description: >
+      <p>An optional object describing how this shader can
+
+      be augmented with hooks. It can include:</p>
+
+      <ul>
+
+      <li><code>vertex</code>: An object describing the available vertex shader
+      hooks.</li>
+
+      <li><code>fragment</code>: An object describing the available frament
+      shader hooks.</li>
+
+      </ul>
+    type: Object
+    optional: true
+return:
+  description: |-
+    new shader object created from the
+    vertex and fragment shaders.
+  type: p5.Shader
+chainable: false
+---
+
+
+# createShader
diff --git a/src/content/reference/en/p5 copy/createSlider.mdx b/src/content/reference/en/p5 copy/createSlider.mdx
new file mode 100644
index 0000000000..7bdf510078
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createSlider.mdx	
@@ -0,0 +1,162 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L789
+title: createSlider
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a slider <code><input></input></code> element.</p>
+
+  <p>Range sliders are useful for quickly selecting numbers from a given
+  range.</p>
+
+  <p>The first two parameters, <code>min</code> and <code>max</code>, are
+  numbers that set the
+
+  slider's minimum and maximum.</p>
+
+  <p>The third parameter, <code>value</code>, is optional. It's a number that
+  sets the
+
+  slider's default value.</p>
+
+  <p>The fourth parameter, <code>step</code>, is also optional. It's a number
+  that sets the
+
+  spacing between each value in the slider's range. Setting <code>step</code> to
+  0
+
+  allows the slider to move smoothly from <code>min</code> to
+  <code>max</code>.</p>
+line: 789
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      slider = createSlider(0, 255);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      slider = createSlider(0, 255, 0);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      // Set its step size to 50.
+      slider = createSlider(0, 255, 0, 50);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a slider and place it at the top of the canvas.
+      // Set its default value to 0.
+      // Set its step size to 0 so that it moves smoothly.
+      slider = createSlider(0, 255, 0, 0);
+      slider.position(10, 10);
+      slider.size(80);
+
+      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+    }
+
+    function draw() {
+      // Use the slider as a grayscale value.
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: min
+    description: |
+      <p>minimum value of the slider.</p>
+    type: Number
+  - name: max
+    description: |
+      <p>maximum value of the slider.</p>
+    type: Number
+  - name: value
+    description: |
+      <p>default value of the slider.</p>
+    type: Number
+    optional: true
+  - name: step
+    description: |
+      <p>size for each step in the slider's range.</p>
+    type: Number
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createSlider
diff --git a/src/content/reference/en/p5 copy/createSpan.mdx b/src/content/reference/en/p5 copy/createSpan.mdx
new file mode 100644
index 0000000000..ed346b35dc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createSpan.mdx	
@@ -0,0 +1,93 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L578
+title: createSpan
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><span></span></code> element.</p>
+
+  <p><code><span></span></code> elements are commonly used as containers
+
+  for inline elements. For example, a <code><span></span></code>
+
+  can hold part of a sentence that's a
+
+  <span style="color: deeppink;">different</span> style.</p>
+
+  <p>The parameter <code>html</code> is optional. It accepts a string that sets
+  the
+
+  inner HTML of the new <code><span></span></code>.</p>
+line: 578
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a span element and set its position.
+      let span = createSpan('p5*js');
+      span.position(25, 35);
+
+      describe('A gray square with the text "p5*js" written in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Create a div element as a container.
+      let div = createDiv();
+
+      // Place the div at the center.
+      div.position(25, 35);
+
+      // Create a span element.
+      let s1 = createSpan('p5');
+
+      // Create a second span element.
+      let s2 = createSpan('*');
+
+      // Set the second span's font color.
+      s2.style('color', 'deeppink');
+
+      // Create a third span element.
+      let s3 = createSpan('js');
+
+      // Add all the spans to the container div.
+      s1.parent(div);
+      s2.parent(div);
+      s3.parent(div);
+
+      describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: html
+    description: >
+      <p>inner HTML for the new <code>&lt;span&gt;&lt;/span&gt;</code>
+      element.</p>
+    type: String
+    optional: true
+return:
+  description: new <a href="#/p5.Element">p5.Element</a> object.
+  type: p5.Element
+chainable: false
+---
+
+
+# createSpan
diff --git a/src/content/reference/en/p5 copy/createStringDict.mdx b/src/content/reference/en/p5 copy/createStringDict.mdx
new file mode 100644
index 0000000000..bc080c1276
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createStringDict.mdx	
@@ -0,0 +1,56 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L14
+title: createStringDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Creates a new instance of p5.StringDict using the key-value pair
+   or the object you provide.</p>
+line: 14
+isConstructor: false
+itemtype: method
+example:
+  - |2-
+
+     <div class="norender">
+     <code>
+     function setup() {
+       let myDictionary = createStringDict('p5', 'js');
+       print(myDictionary.hasKey('p5')); // logs true to console
+      let anotherDictionary = createStringDict({ happy: 'coding' });
+       print(anotherDictionary.hasKey('happy')); // logs true to console
+     }
+     </code></div>
+class: p5
+return:
+  description: ''
+  type: p5.StringDict
+overloads:
+  - line: 14
+    params:
+      - name: key
+        description: ''
+        type: String
+      - name: value
+        description: ''
+        type: String
+    return:
+      description: ''
+      type: p5.StringDict
+  - line: 37
+    params:
+      - name: object
+        description: |
+          <p>object</p>
+        type: Object
+    return:
+      description: ''
+      type: p5.StringDict
+chainable: false
+---
+
+
+# createStringDict
diff --git a/src/content/reference/en/p5 copy/createVector.mdx b/src/content/reference/en/p5 copy/createVector.mdx
new file mode 100644
index 0000000000..07ca75ec36
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createVector.mdx	
@@ -0,0 +1,133 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/math.js#L10
+title: createVector
+module: Math
+submodule: Vector
+file: src/math/math.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+
+  <p>A vector can be thought of in different ways. In one view, a vector is like
+
+  an arrow pointing in space. Vectors have both magnitude (length) and
+
+  direction. This view is helpful for programming motion.</p>
+
+  <p>A vector's components determine its magnitude and direction. For example,
+
+  calling <code>createVector(3, 4)</code> creates a new
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object with an x-component of
+  3 and a
+
+  y-component of 4. From the origin, this vector's tip is 3 units to the
+
+  right and 4 units down.</p>
+
+  <p><a href="/reference/p5/p5.Vector">p5.Vector</a> objects are often used to
+  program
+
+  motion because they simplify the math. For example, a moving ball has a
+
+  position and a velocity. Position describes where the ball is in space. The
+
+  ball's position vector extends from the origin to the ball's center.
+
+  Velocity describes the ball's speed and the direction it's moving. If the
+
+  ball is moving straight up, its velocity vector points straight up. Adding
+
+  the ball's velocity vector to its position vector moves it, as in
+
+  <code>pos.add(vel)</code>. Vector math relies on methods inside the
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> class.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create p5.Vector objects.
+      let p1 = createVector(25, 25);
+      let p2 = createVector(50, 50);
+      let p3 = createVector(75, 75);
+
+      // Draw the dots.
+      strokeWeight(5);
+      point(p1);
+      point(p2);
+      point(p3);
+
+      describe('Three black dots form a diagonal line from top left to bottom right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pos;
+    let vel;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create p5.Vector objects.
+      pos = createVector(50, 100);
+      vel = createVector(0, -1);
+
+      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Add velocity to position.
+      pos.add(vel);
+
+      // If the dot reaches the top of the canvas,
+      // restart from the bottom.
+      if (pos.y < 0) {
+        pos.y = 100;
+      }
+
+      // Draw the dot.
+      strokeWeight(5);
+      point(pos);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x component of the vector.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y component of the vector.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z component of the vector.</p>
+    type: Number
+    optional: true
+return:
+  description: new <a href="#/p5.Vector">p5.Vector</a> object.
+  type: p5.Vector
+chainable: false
+---
+
+
+# createVector
diff --git a/src/content/reference/en/p5 copy/createVideo.mdx b/src/content/reference/en/p5 copy/createVideo.mdx
new file mode 100644
index 0000000000..a7053f80a0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createVideo.mdx	
@@ -0,0 +1,135 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2115
+title: createVideo
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Creates a <code><video></code> element for simple audio/video playback.</p>
+
+  <p><code>createVideo()</code> returns a new
+
+  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
+  shown by
+
+  default. They can be hidden by calling <code>video.hide()</code> and drawn to
+  the
+
+  canvas using <a href="/reference/p5/image/">image()</a>.</p>
+
+  <p>The first parameter, <code>src</code>, is the path the video. If a single
+  string is
+
+  passed, as in <code>'/assets/topsecret.mp4'</code>, a single video is loaded.
+  An array
+
+  of strings can be used to load the same video in different formats. For
+
+  example, <code>['/assets/topsecret.mp4', '/assets/topsecret.ogv',
+  '/assets/topsecret.webm']</code>.
+
+  This is useful for ensuring that the video can play across different browsers
+  with
+
+  different capabilities. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/">MDN</a>
+
+  for more information about supported formats.</p>
+
+  <p>The second parameter, <code>callback</code>, is optional. It's a function
+  to call once
+
+  the video is ready to play.</p>
+line: 2115
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Note: this may not work in some browsers.
+      let video = createVideo('/assets/small.mp4');
+
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Provide an array options for different file formats.
+      let video = createVideo(
+        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm']
+      );
+
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    let video;
+
+    function setup() {
+      noCanvas();
+
+      // Load a video and add it to the page.
+      // Provide an array options for different file formats.
+      // Call mute() once the video loads.
+      video = createVideo(
+        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm'],
+        muteVideo
+      );
+
+      // Show the default video controls.
+      video.showControls();
+
+      describe('A video of a toy robot with playback controls beneath it.');
+    }
+
+    // Mute the video once it loads.
+    function muteVideo() {
+      video.volume(0);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: src
+    description: |
+      <p>path to a video file, or an array of paths for
+                                    supporting different browsers.</p>
+    type: 'String|String[]'
+  - name: callback
+    description: |
+      <p>function to call once the video is ready to play.</p>
+    type: Function
+    optional: true
+return:
+  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
+  type: p5.MediaElement
+chainable: false
+---
+
+
+# createVideo
diff --git a/src/content/reference/en/p5 copy/createWriter.mdx b/src/content/reference/en/p5 copy/createWriter.mdx
new file mode 100644
index 0000000000..18928ff461
--- /dev/null
+++ b/src/content/reference/en/p5 copy/createWriter.mdx	
@@ -0,0 +1,146 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1444
+title: createWriter
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Creates a new <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a>
+  object.</p>
+
+  <p><a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> objects provide a
+  way to
+
+  save a sequence of text data, called the <em>print stream</em>, to the user's
+
+  computer. They're low-level objects that enable precise control of text
+
+  output. Functions such as
+
+  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
+
+  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
+  file
+
+  saving.</p>
+
+  <p>The first parameter, <code>filename</code>, is the name of the file to be
+  written. If
+
+  a string is passed, as in <code>createWriter('words.txt')</code>, a new
+
+  <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> object will be
+  created that
+
+  writes to a file named <code>words.txt</code>.</p>
+
+  <p>The second parameter, <code>extension</code>, is optional. If a string is
+  passed, as
+
+  in <code>createWriter('words', 'csv')</code>, the first parameter will be
+  interpreted
+
+  as the file name and the second parameter as the extension.</p>
+line: 1444
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create a p5.PrintWriter object.
+        let myWriter = createWriter('xo.txt');
+
+        // Add some lines to the print stream.
+        myWriter.print('XOO');
+        myWriter.print('OXO');
+        myWriter.print('OOX');
+
+        // Save the file and close the print stream.
+        myWriter.close();
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create a p5.PrintWriter object.
+        // Use the file format .csv.
+        let myWriter = createWriter('mauna_loa_co2', 'csv');
+
+        // Add some lines to the print stream.
+        myWriter.print('date,ppm_co2');
+        myWriter.print('1960-01-01,316.43');
+        myWriter.print('1970-01-01,325.06');
+        myWriter.print('1980-01-01,337.9');
+        myWriter.print('1990-01-01,353.86');
+        myWriter.print('2000-01-01,369.45');
+        myWriter.print('2020-01-01,413.61');
+
+        // Save the file and close the print stream.
+        myWriter.close();
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: name
+    description: |
+      <p>name of the file to create.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>format to use for the file.</p>
+    type: String
+    optional: true
+return:
+  description: stream for writing data.
+  type: p5.PrintWriter
+chainable: false
+---
+
+
+# createWriter
diff --git a/src/content/reference/en/p5 copy/cursor.mdx b/src/content/reference/en/p5 copy/cursor.mdx
new file mode 100644
index 0000000000..8ada3a4379
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cursor.mdx	
@@ -0,0 +1,139 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L209
+title: cursor
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Changes the cursor's appearance.</p>
+
+  <p>The first parameter, <code>type</code>, sets the type of cursor to display.
+  The
+
+  built-in options are <code>ARROW</code>, <code>CROSS</code>,
+  <code>HAND</code>, <code>MOVE</code>, <code>TEXT</code>, and
+  <code>WAIT</code>.
+
+  <code>cursor()</code> also recognizes standard CSS cursor properties passed as
+
+  strings: <code>'help'</code>, <code>'wait'</code>, <code>'crosshair'</code>,
+  <code>'not-allowed'</code>, <code>'zoom-in'</code>,
+
+  and <code>'grab'</code>. If the path to an image is passed, as in
+
+  <code>cursor('/assets/target.png')</code>, then the image will be used as the
+  cursor.
+
+  Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be <a
+  href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits">at
+  most 32 by 32 pixels large.</a></p>
+
+  <p>The parameters <code>x</code> and <code>y</code> are optional. If an image
+  is used for the
+
+  cursor, <code>x</code> and <code>y</code> set the location pointed to within
+  the image. They are
+
+  both 0 by default, so the cursor points to the image's top-left corner.
+  <code>x</code>
+
+  and <code>y</code> must be less than the image's width and height,
+  respectively.</p>
+line: 209
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square. The cursor appears as crosshairs.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the cursor to crosshairs: +
+      cursor(CROSS);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Divide the canvas into quadrants.
+      line(50, 0, 50, 100);
+      line(0, 50, 100, 50);
+
+      // Change cursor based on mouse position.
+      if (mouseX < 50 && mouseY < 50) {
+        cursor(CROSS);
+      } else if (mouseX > 50 && mouseY < 50) {
+        cursor('progress');
+      } else if (mouseX > 50 && mouseY > 50) {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+      } else {
+        cursor('grab');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Change the cursor's active spot
+      // when the mouse is pressed.
+      if (mouseIsPressed === true) {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);
+      } else {
+        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: type
+    description: |
+      <p>Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
+                                    Native CSS properties: 'grab', 'progress', and so on.
+                                    Path to cursor image.</p>
+    type: String|Constant
+  - name: x
+    description: |
+      <p>horizontal active spot of the cursor.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>vertical active spot of the cursor.</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# cursor
diff --git a/src/content/reference/en/p5 copy/curve.mdx b/src/content/reference/en/p5 copy/curve.mdx
new file mode 100644
index 0000000000..9631e551e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curve.mdx	
@@ -0,0 +1,272 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L570
+title: curve
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Draws a curve using a Catmull-Rom spline.</p>
+
+  <p>Spline curves can form shapes and curves that slope gently. They’re like
+
+  cables that are attached to a set of points. Splines are defined by two
+
+  anchor points and two control points.</p>
+
+  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
+  first control point. This
+
+  point isn’t drawn and can be thought of as the curve’s starting point.</p>
+
+  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
+  <code>x3</code>, and <code>y3</code>, set the two anchor
+
+  points. The anchor points are the start and end points of the curve’s
+
+  visible segment.</p>
+
+  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
+  the last control
+
+  point. This point isn’t drawn and can be thought of as the curve’s ending
+
+  point.</p>
+
+  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>curve()</code> has twelve arguments because each point has x-, y-, and
+
+  z-coordinates.</p>
+line: 570
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(5, 26, 73, 24, 73, 61, 15, 65);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(5, 26, 5, 26, 73, 24, 73, 61);
+      curve(73, 24, 73, 61, 15, 65, 15, 65);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(73, 24);
+      point(73, 61);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(5, 26);
+      point(15, 65);
+
+      describe(
+        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let x1 = 5;
+    let y1 = 26;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(x1, y1, 73, 24, 73, 61, 15, 65);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(x1, y1, x1, y1, 73, 24, 73, 61);
+      curve(73, 24, 73, 61, 15, 65, 15, 65);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(73, 24);
+      point(73, 61);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x1, y1);
+      point(15, 65);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x1, y1) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x1 = mouseX;
+        y1 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background('skyblue');
+
+      // Draw the red balloon.
+      fill('red');
+      curve(-150, 275, 50, 60, 50, 60, 250, 275);
+
+      // Draw the balloon string.
+      line(50, 60, 50, 80);
+
+      describe('A red balloon in a blue sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red balloon in a blue sky.');
+    }
+
+    function draw() {
+      background('skyblue');
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the red balloon.
+      fill('red');
+      curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
+
+      // Draw the balloon string.
+      line(0, 10, 0, 0, 30, 0);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 570
+    params:
+      - name: x1
+        description: |
+          <p>x-coordinate of the first control point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>y-coordinate of the first control point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>x-coordinate of the first anchor point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the second anchor point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the second anchor point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>x-coordinate of the second control point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>y-coordinate of the second control point.</p>
+        type: Number
+    chainable: 1
+  - line: 746
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>z-coordinate of the first control point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the first anchor point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the second anchor point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>z-coordinate of the second control point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# curve
diff --git a/src/content/reference/en/p5 copy/curveDetail.mdx b/src/content/reference/en/p5 copy/curveDetail.mdx
new file mode 100644
index 0000000000..796ca5a026
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveDetail.mdx	
@@ -0,0 +1,117 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L772
+title: curveDetail
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Sets the number of segments used to draw spline curves in WebGL mode.</p>
+
+  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+
+  more flat segments makes shapes appear smoother.</p>
+
+  <p>The parameter, <code>detail</code>, is the number of segments to use while
+  drawing a
+
+  spline curve. For example, calling <code>curveDetail(5)</code> will use 5
+  segments to
+
+  draw curves with the <a href="/reference/p5/curve/">curve()</a> function. By
+
+  default,<code>detail</code> is 20.</p>
+
+  <p>Note: <code>curveDetail()</code> has no effect in 2D mode.</p>
+line: 772
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(5, 26, 73, 24, 73, 61, 15, 65);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(5, 26, 5, 26, 73, 24, 73, 61);
+      curve(73, 24, 73, 61, 15, 65, 15, 65);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(73, 24);
+      point(73, 61);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(5, 26);
+      point(15, 65);
+
+      describe(
+        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Set the curveDetail() to 3.
+      curveDetail(3);
+
+      // Draw a black spline curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+      curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);
+
+      // Draw red spline curves from the anchor points to the control points.
+      stroke(255, 0, 0);
+      curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);
+      curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(23, -26);
+      point(23, 11);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(-45, -24);
+      point(-35, 15);
+
+      describe(
+        'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: resolution
+    description: |
+      <p>number of segments to use. Defaults to 20.</p>
+    type: Number
+chainable: true
+---
+
+
+# curveDetail
diff --git a/src/content/reference/en/p5 copy/curvePoint.mdx b/src/content/reference/en/p5 copy/curvePoint.mdx
new file mode 100644
index 0000000000..761b468ca6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curvePoint.mdx	
@@ -0,0 +1,160 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L930
+title: curvePoint
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a spline curve using interpolation.</p>
+
+  <p><code>curvePoint()</code> calculates coordinates along a spline curve using
+  the
+
+  anchor and control points. It expects points in the same order as the
+
+  <a href="/reference/p5/curve/">curve()</a> function. <code>curvePoint()</code>
+  works one axis
+
+  at a time. Passing the anchor and control points' x-coordinates will
+
+  calculate the x-coordinate of a point on the curve. Passing the anchor and
+
+  control points' y-coordinates will calculate the y-coordinate of a point on
+
+  the curve.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first control
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  anchor points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 930
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 5;
+      let y1 = 26;
+      let x2 = 73;
+      let y2 = 24;
+      let x3 = 73;
+      let y3 = 61;
+      let x4 = 15;
+      let y4 = 65;
+
+      // Draw the curve.
+      noFill();
+      curve(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw circles along the curve's path.
+      fill(255);
+
+      // Top.
+      let x = curvePoint(x1, x2, x3, x4, 0);
+      let y = curvePoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Center.
+      x = curvePoint(x1, x2, x3, x4, 0.5);
+      y = curvePoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Bottom.
+      x = curvePoint(x1, x2, x3, x4, 1);
+      y = curvePoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black curve on a gray square. A white circle moves back and forth along the curve.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 5;
+      let y1 = 26;
+      let x2 = 73;
+      let y2 = 24;
+      let x3 = 73;
+      let y3 = 61;
+      let x4 = 15;
+      let y4 = 65;
+
+      // Draw the curve.
+      noFill();
+      curve(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Calculate the circle's coordinates.
+      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+      let x = curvePoint(x1, x2, x3, x4, t);
+      let y = curvePoint(y1, y2, y3, y4, t);
+
+      // Draw the circle.
+      fill(255);
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of a point on the curve.
+  type: Number
+chainable: false
+---
+
+
+# curvePoint
diff --git a/src/content/reference/en/p5 copy/curveTangent.mdx b/src/content/reference/en/p5 copy/curveTangent.mdx
new file mode 100644
index 0000000000..005ade9aab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveTangent.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L1054
+title: curveTangent
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Calculates coordinates along a line that's tangent to a spline curve.</p>
+
+  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
+
+  the curve's slope at the point where it intersects.</p>
+
+  <p><code>curveTangent()</code> calculates coordinates along a tangent line
+  using the
+
+  spline curve's anchor and control points. It expects points in the same
+
+  order as the <a href="/reference/p5/curve/">curve()</a> function.
+  <code>curveTangent()</code>
+
+  works one axis at a time. Passing the anchor and control points'
+
+  x-coordinates will calculate the x-coordinate of a point on the tangent
+
+  line. Passing the anchor and control points' y-coordinates will calculate
+
+  the y-coordinate of a point on the tangent line.</p>
+
+  <p>The first parameter, <code>a</code>, is the coordinate of the first control
+  point.</p>
+
+  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
+  coordinates of the
+
+  anchor points.</p>
+
+  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
+  point.</p>
+
+  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
+  curve. 0
+
+  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+
+  between them.</p>
+line: 1054
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates for the curve's anchor and control points.
+      let x1 = 5;
+      let y1 = 26;
+      let x2 = 73;
+      let y2 = 24;
+      let x3 = 73;
+      let y3 = 61;
+      let x4 = 15;
+      let y4 = 65;
+
+      // Draw the curve.
+      noFill();
+      curve(x1, y1, x2, y2, x3, y3, x4, y4);
+
+      // Draw tangents along the curve's path.
+      fill(255);
+
+      // Top circle.
+      stroke(0);
+      let x = curvePoint(x1, x2, x3, x4, 0);
+      let y = curvePoint(y1, y2, y3, y4, 0);
+      circle(x, y, 5);
+
+      // Top tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);
+      let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Center circle.
+      stroke(0);
+      x = curvePoint(x1, x2, x3, x4, 0.5);
+      y = curvePoint(y1, y2, y3, y4, 0.5);
+      circle(x, y, 5);
+
+      // Center tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);
+      ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      // Bottom circle.
+      stroke(0);
+      x = curvePoint(x1, x2, x3, x4, 1);
+      y = curvePoint(y1, y2, y3, y4, 1);
+      circle(x, y, 5);
+
+      // Bottom tangent line.
+      // Scale the tangent point to draw a shorter line.
+      stroke(255, 0, 0);
+      tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);
+      ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);
+      line(x + tx, y + ty, x - tx, y - ty);
+
+      describe(
+        'A black curve on a gray square. A white circle moves back and forth along the curve.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: a
+    description: |
+      <p>coordinate of first control point.</p>
+    type: Number
+  - name: b
+    description: |
+      <p>coordinate of first anchor point.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>coordinate of second anchor point.</p>
+    type: Number
+  - name: d
+    description: |
+      <p>coordinate of second control point.</p>
+    type: Number
+  - name: t
+    description: |
+      <p>amount to interpolate between 0 and 1.</p>
+    type: Number
+return:
+  description: coordinate of a point on the tangent line.
+  type: Number
+chainable: false
+---
+
+
+# curveTangent
diff --git a/src/content/reference/en/p5 copy/curveTightness.mdx b/src/content/reference/en/p5 copy/curveTightness.mdx
new file mode 100644
index 0000000000..506066be18
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveTightness.mdx	
@@ -0,0 +1,77 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L875
+title: curveTightness
+module: Shape
+submodule: Curves
+file: src/core/shape/curves.js
+description: >
+  <p>Adjusts the way <a href="/reference/p5/curve/">curve()</a> and
+
+  <a href="/reference/p5/curveVertex/">curveVertex()</a> draw.</p>
+
+  <p>Spline curves are like cables that are attached to a set of points.
+
+  <code>curveTightness()</code> adjusts how tightly the cable is attached to the
+  points.</p>
+
+  <p>The parameter, <code>tightness</code>, determines how the curve fits to the
+  vertex
+
+  points. By default, <code>tightness</code> is set to 0. Setting tightness to
+  1,
+
+  as in <code>curveTightness(1)</code>, connects the curve's points using
+  straight
+
+  lines. Values in the range from –5 to  5 deform curves while leaving them
+
+  recognizable.</p>
+line: 875
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Move the mouse left and right to see the curve change.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the curve's tightness using the mouse.
+      let t = map(mouseX, 0, 100, -5, 5, true);
+      curveTightness(t);
+
+      // Draw the curve.
+      noFill();
+      beginShape();
+      curveVertex(10, 26);
+      curveVertex(10, 26);
+      curveVertex(83, 24);
+      curveVertex(83, 61);
+      curveVertex(25, 65);
+      curveVertex(25, 65);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: amount
+    description: |
+      <p>amount of tightness.</p>
+    type: Number
+chainable: true
+---
+
+
+# curveTightness
diff --git a/src/content/reference/en/p5 copy/curveVertex.mdx b/src/content/reference/en/p5 copy/curveVertex.mdx
new file mode 100644
index 0000000000..3d928fc0ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/curveVertex.mdx	
@@ -0,0 +1,407 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L832
+title: curveVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a spline curve segment to a custom shape.</p>
+
+  <p><code>curveVertex()</code> adds a curved segment to custom shapes. The
+  spline curves
+
+  it creates are defined like those made by the
+
+  <a href="/reference/p5/curve/">curve()</a> function.
+  <code>curveVertex()</code> must be called
+
+  between the <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
+
+  <p>Spline curves can form shapes and curves that slope gently. They’re like
+
+  cables that are attached to a set of points. Splines are defined by two
+
+  anchor points and two control points. <code>curveVertex()</code> must be
+  called at
+
+  least four times between
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> in order to draw a curve:</p>
+
+  <pre><code class="language-js">beginShape();
+
+
+  // Add the first control point.
+
+  curveVertex(84, 91);
+
+
+  // Add the anchor points to draw between.
+
+  curveVertex(68, 19);
+
+  curveVertex(21, 17);
+
+
+  // Add the second control point.
+
+  curveVertex(32, 91);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p>The code snippet above would only draw the curve between the anchor points,
+
+  similar to the <a href="/reference/p5/curve/">curve()</a> function. The
+  segments
+
+  between the control and anchor points can be drawn by calling
+
+  <code>curveVertex()</code> with the coordinates of the control points:</p>
+
+  <pre><code class="language-js">beginShape();
+
+
+  // Add the first control point and draw a segment to it.
+
+  curveVertex(84, 91);
+
+  curveVertex(84, 91);
+
+
+  // Add the anchor points to draw between.
+
+  curveVertex(68, 19);
+
+  curveVertex(21, 17);
+
+
+  // Add the second control point.
+
+  curveVertex(32, 91);
+
+
+  // Uncomment the next line to draw the segment to the second control point.
+
+  // curveVertex(32, 91);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p>The first two parameters, <code>x</code> and <code>y</code>, set the
+  vertex’s location. For
+
+  example, calling <code>curveVertex(10, 10)</code> adds a point to the curve at
+
+  <code>(10, 10)</code>.</p>
+
+  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>curveVertex()</code> has three arguments because each point has x-, y-,
+  and
+
+  z-coordinates. By default, the vertex’s z-coordinate is set to 0.</p>
+
+  <p>Note: <code>curveVertex()</code> won’t work when an argument is passed to
+
+  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 832
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point.
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point.
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(32, 91);
+      point(84, 91);
+
+      describe(
+        'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(32, 91);
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point.
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(32, 91);
+      point(84, 91);
+
+      describe(
+        'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(32, 91);
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point and draw a segment to it.
+      curveVertex(84, 91);
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(32, 91);
+      point(84, 91);
+
+      describe(
+        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the bottom-left corner
+    // and drag to change the curve's shape.
+
+    let x1 = 32;
+    let y1 = 91;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the shape.
+      noFill();
+      stroke(0);
+      strokeWeight(1);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(x1, y1);
+      curveVertex(x1, y1);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point and draw a segment to it.
+      curveVertex(84, 91);
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      // Style the anchor and control points.
+      strokeWeight(5);
+
+      // Draw the anchor points in black.
+      stroke(0);
+      point(21, 17);
+      point(68, 19);
+
+      // Draw the control points in red.
+      stroke(255, 0, 0);
+      point(x1, y1);
+      point(84, 91);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x1, y1) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x1 = mouseX;
+        y1 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the first control point and draw a segment to it.
+      curveVertex(32, 91);
+      curveVertex(32, 91);
+
+      // Add the anchor points.
+      curveVertex(21, 17);
+      curveVertex(68, 19);
+
+      // Add the second control point.
+      curveVertex(84, 91);
+      curveVertex(84, 91);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A ghost shape drawn in white on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 832
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the vertex</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the vertex</p>
+        type: Number
+    chainable: 1
+  - line: 1160
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the vertex.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# curveVertex
diff --git a/src/content/reference/en/p5 copy/cylinder.mdx b/src/content/reference/en/p5 copy/cylinder.mdx
new file mode 100644
index 0000000000..dd81cd687f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/cylinder.mdx	
@@ -0,0 +1,282 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1477
+title: cylinder
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a cylinder.</p>
+
+  <p>A cylinder is a 3D shape with triangular faces that connect a flat bottom
+
+  to a flat top. Cylinders with few faces look like boxes. Cylinders with
+
+  many faces have smooth surfaces.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>cylinder(20)</code>, it sets the radius of the cylinder’s base. By
+  default,
+
+  <code>radius</code> is 50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cylinder(20, 30)</code>, it sets the cylinder’s height. By
+  default,
+
+  <code>height</code> is set to the cylinder’s <code>radius</code>.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cylinder(20, 30, 5)</code>, it sets the number of edges used to
+  form the
+
+  cylinder's top and bottom. Using more edges makes the top and bottom look
+
+  more like circles. By default, <code>detailX</code> is 24.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>cylinder(20, 30, 5, 2)</code>, it sets the number of triangle
+  subdivisions
+
+  to use along the y-axis, between cylinder's the top and bottom. All 3D
+
+  shapes are made by connecting triangles to form their surfaces. By default,
+
+  <code>detailY</code> is 1.</p>
+
+  <p>The fifth parameter, <code>bottomCap</code>, is also optional. If a
+  <code>false</code> is passed,
+
+  as in <code>cylinder(20, 30, 5, 2, false)</code> the cylinder’s bottom won’t
+  be drawn.
+
+  By default, <code>bottomCap</code> is <code>true</code>.</p>
+
+  <p>The sixth parameter, <code>topCap</code>, is also optional. If a
+  <code>false</code> is passed, as
+
+  in <code>cylinder(20, 30, 5, 2, false, false)</code> the cylinder’s top won’t
+  be
+
+  drawn. By default, <code>topCap</code> is <code>true</code>.</p>
+
+  <p>Note: <code>cylinder()</code> can only be used in WebGL mode.</p>
+line: 1477
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      cylinder();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius and height to 30.
+      cylinder(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      cylinder(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 5.
+      cylinder(30, 50, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 2.
+      cylinder(30, 50, 24, 2);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background. Its top is missing.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 1.
+      // Don't draw its bottom.
+      cylinder(30, 50, 24, 1, false);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cylinder on a gray background. Its top and bottom are missing.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the cylinder.
+      // Set its radius to 30 and height to 50.
+      // Set its detailX to 24 and detailY to 1.
+      // Don't draw its bottom or top.
+      cylinder(30, 50, 24, 1, false, false);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the cylinder. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: >
+      <p>height of the cylinder. Defaults to the value of
+      <code>radius</code>.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of edges along the top and bottom. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
+    type: Integer
+    optional: true
+  - name: bottomCap
+    description: >
+      <p>whether to draw the cylinder's bottom. Defaults to
+      <code>true</code>.</p>
+    type: Boolean
+    optional: true
+  - name: topCap
+    description: |
+      <p>whether to draw the cylinder's top. Defaults to <code>true</code>.</p>
+    type: Boolean
+    optional: true
+chainable: true
+---
+
+
+# cylinder
diff --git a/src/content/reference/en/p5 copy/day.mdx b/src/content/reference/en/p5 copy/day.mdx
new file mode 100644
index 0000000000..f029fcb983
--- /dev/null
+++ b/src/content/reference/en/p5 copy/day.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L10
+title: day
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current day as a number from 1–31.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current day.
+      let d = day();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the day.
+      text(`Current day: ${d}`, 20, 50, 60);
+
+      describe(`The text 'Current day: ${d}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current day between 1 and 31.
+  type: Integer
+chainable: false
+---
+
+
+# day
diff --git a/src/content/reference/en/p5 copy/debugMode.mdx b/src/content/reference/en/p5 copy/debugMode.mdx
new file mode 100644
index 0000000000..19ccdfb63f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/debugMode.mdx	
@@ -0,0 +1,362 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L471
+title: debugMode
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: >
+  <p>Adds a grid and an axes icon to clarify orientation in 3D sketches.</p>
+
+  <p><code>debugMode()</code> adds a grid that shows where the “ground” is in a
+  sketch. By
+
+  default, the grid will run through the origin <code>(0, 0, 0)</code> of the
+  sketch
+
+  along the XZ plane. <code>debugMode()</code> also adds an axes icon that
+  points along
+
+  the positive x-, y-, and z-axes. Calling <code>debugMode()</code> displays the
+  grid
+
+  and axes icon with their default size and position.</p>
+
+  <p>There are four ways to call <code>debugMode()</code> with optional
+  parameters to
+
+  customize the debugging environment.</p>
+
+  <p>The first way to call <code>debugMode()</code> has one parameter,
+  <code>mode</code>. If the
+
+  system constant <code>GRID</code> is passed, as in
+  <code>debugMode(GRID)</code>, then the grid
+
+  will be displayed and the axes icon will be hidden. If the constant
+  <code>AXES</code>
+
+  is passed, as in <code>debugMode(AXES)</code>, then the axes icon will be
+  displayed
+
+  and the grid will be hidden.</p>
+
+  <p>The second way to call <code>debugMode()</code> has six parameters. The
+  first
+
+  parameter, <code>mode</code>, selects either <code>GRID</code> or
+  <code>AXES</code> to be displayed. The
+
+  next five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
+  <code>xOff</code>, <code>yOff</code>, and
+
+  <code>zOff</code> are optional. They’re numbers that set the appearance of the
+  grid
+
+  (<code>gridSize</code> and <code>gridDivisions</code>) and the placement of
+  the axes icon
+
+  (<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>). For example,
+  calling
+
+  <code>debugMode(20, 5, 10, 10, 10)</code> sets the <code>gridSize</code> to 20
+  pixels, the number
+
+  of <code>gridDivisions</code> to 5, and offsets the axes icon by 10 pixels
+  along the
+
+  x-, y-, and z-axes.</p>
+
+  <p>The third way to call <code>debugMode()</code> has five parameters. The
+  first
+
+  parameter, <code>mode</code>, selects either <code>GRID</code> or
+  <code>AXES</code> to be displayed. The
+
+  next four parameters, <code>axesSize</code>, <code>xOff</code>,
+  <code>yOff</code>, and <code>zOff</code> are optional.
+
+  They’re numbers that set the appearance of the size of the axes icon
+
+  (<code>axesSize</code>) and its placement (<code>xOff</code>,
+  <code>yOff</code>, and <code>zOff</code>).</p>
+
+  <p>The fourth way to call <code>debugMode()</code> has nine optional
+  parameters. The
+
+  first five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
+  <code>gridXOff</code>, <code>gridYOff</code>,
+
+  and <code>gridZOff</code> are numbers that set the appearance of the grid. For
+
+  example, calling <code>debugMode(100, 5, 0, 0, 0)</code> sets the
+  <code>gridSize</code> to 100,
+
+  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
+  so that
+
+  the grid is centered at the origin. The next four parameters,
+  <code>axesSize</code>,
+
+  <code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are numbers that
+  set the appearance of the size
+
+  of the axes icon (<code>axesSize</code>) and its placement
+  (<code>axesXOff</code>, <code>axesYOff</code>,
+
+  and <code>axesZOff</code>). For example, calling
+
+  <code>debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)</code> sets the
+  <code>gridSize</code> to 100,
+
+  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
+  so that
+
+  the grid is centered at the origin. It then sets the <code>axesSize</code> to
+  50 and
+
+  offsets the icon 10 pixels along each axis.</p>
+line: 471
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      debugMode();
+
+      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      // Only display the axes icon.
+      debugMode(AXES);
+
+      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      // Only display the grid and customize it:
+      // - size: 50
+      // - divisions: 10
+      // - offsets: 0, 20, 0
+      debugMode(GRID, 50, 10, 0, 20, 0);
+
+      describe('A multicolor box on a gray background. A grid is displayed below the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      // Display the grid and axes icon and customize them:
+      // Grid
+      // ----
+      // - size: 50
+      // - divisions: 10
+      // - offsets: 0, 20, 0
+      // Axes
+      // ----
+      // - size: 50
+      // - offsets: 0, 0, 0
+      debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);
+
+      describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(20, 40);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 471
+    params: []
+  - line: 650
+    params:
+      - name: mode
+        description: |
+          <p>either GRID or AXES</p>
+        type: Constant
+  - line: 655
+    params:
+      - name: mode
+        description: ''
+        type: Constant
+      - name: gridSize
+        description: |
+          <p>side length of the grid.</p>
+        type: Number
+        optional: true
+      - name: gridDivisions
+        description: |
+          <p>number of divisions in the grid.</p>
+        type: Number
+        optional: true
+      - name: xOff
+        description: |
+          <p>offset from origin along the x-axis.</p>
+        type: Number
+        optional: true
+      - name: yOff
+        description: |
+          <p>offset from origin along the y-axis.</p>
+        type: Number
+        optional: true
+      - name: zOff
+        description: |
+          <p>offset from origin along the z-axis.</p>
+        type: Number
+        optional: true
+  - line: 665
+    params:
+      - name: mode
+        description: ''
+        type: Constant
+      - name: axesSize
+        description: |
+          <p>length of axes icon markers.</p>
+        type: Number
+        optional: true
+      - name: xOff
+        description: ''
+        type: Number
+        optional: true
+      - name: yOff
+        description: ''
+        type: Number
+        optional: true
+      - name: zOff
+        description: ''
+        type: Number
+        optional: true
+  - line: 674
+    params:
+      - name: gridSize
+        description: ''
+        type: Number
+        optional: true
+      - name: gridDivisions
+        description: ''
+        type: Number
+        optional: true
+      - name: gridXOff
+        description: |
+          <p>grid offset from the origin along the x-axis.</p>
+        type: Number
+        optional: true
+      - name: gridYOff
+        description: |
+          <p>grid offset from the origin along the y-axis.</p>
+        type: Number
+        optional: true
+      - name: gridZOff
+        description: |
+          <p>grid offset from the origin along the z-axis.</p>
+        type: Number
+        optional: true
+      - name: axesSize
+        description: ''
+        type: Number
+        optional: true
+      - name: axesXOff
+        description: |
+          <p>axes icon offset from the origin along the x-axis.</p>
+        type: Number
+        optional: true
+      - name: axesYOff
+        description: |
+          <p>axes icon offset from the origin along the y-axis.</p>
+        type: Number
+        optional: true
+      - name: axesZOff
+        description: |
+          <p>axes icon offset from the origin along the z-axis.</p>
+        type: Number
+        optional: true
+chainable: false
+---
+
+
+# debugMode
diff --git a/src/content/reference/en/p5 copy/degrees.mdx b/src/content/reference/en/p5 copy/degrees.mdx
new file mode 100644
index 0000000000..730b361384
--- /dev/null
+++ b/src/content/reference/en/p5 copy/degrees.mdx	
@@ -0,0 +1,53 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L485
+title: degrees
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: |
+  <p>Converts an angle measured in radians to its value in degrees.</p>
+  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
+  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
+  <p>The same angle can be expressed in with either unit. For example, 90° is a
+  quarter of a full rotation. The same angle is 2 × π ÷ 4
+  (about 1.57) radians.</p>
+line: 485
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the angle conversion.
+      let rad = QUARTER_PI;
+      let deg = degrees(rad);
+
+      // Display the conversion.
+      text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
+
+      describe('The text "0.79 rad = 45˚".');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radians
+    description: |
+      <p>radians value to convert to degrees.</p>
+    type: Number
+return:
+  description: converted angle.
+  type: Number
+chainable: false
+---
+
+
+# degrees
diff --git a/src/content/reference/en/p5 copy/deltaTime.mdx b/src/content/reference/en/p5 copy/deltaTime.mdx
new file mode 100644
index 0000000000..0915a014c2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deltaTime.mdx	
@@ -0,0 +1,68 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L124
+title: deltaTime
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that tracks the number of milliseconds it
+  took to draw
+
+  the last frame.</p>
+
+  <p><code>deltaTime</code> contains the amount of time it took
+
+  <a href="/reference/p5/draw/">draw()</a> to execute during the previous frame.
+  It's
+
+  useful for simulating physics.</p>
+line: 124
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    let x = 0;
+    let speed = 0.05;
+
+    function setup()  {
+      createCanvas(100, 100);
+
+      // Set the frameRate to 30.
+      frameRate(30);
+
+      describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Use deltaTime to calculate
+      // a change in position.
+      let deltaX = speed * deltaTime;
+
+      // Update the x variable.
+      x += deltaX;
+
+      // Reset x to 0 if it's
+      // greater than 100.
+      if (x > 100)  {
+        x = 0;
+      }
+
+      // Use x to set the circle's
+      // position.
+      circle(x, 50, 20);
+    }
+    </code>
+    </div>
+class: p5
+type: Integer
+---
+
+
+# deltaTime
diff --git a/src/content/reference/en/p5 copy/describe.mdx b/src/content/reference/en/p5 copy/describe.mdx
new file mode 100644
index 0000000000..dee815b9f1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/describe.mdx	
@@ -0,0 +1,137 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L18
+title: describe
+module: Environment
+submodule: Environment
+file: src/accessibility/describe.js
+description: >
+  <p>Creates a screen reader-accessible description of the canvas.</p>
+
+  <p>The first parameter, <code>text</code>, is the description of the
+  canvas.</p>
+
+  <p>The second parameter, <code>display</code>, is optional. It determines how
+  the
+
+  description is displayed. If <code>LABEL</code> is passed, as in
+
+  <code>describe('A description.', LABEL)</code>, the description will be
+  visible in
+
+  a div element next to the canvas. If <code>FALLBACK</code> is passed, as in
+
+  <code>describe('A description.', FALLBACK)</code>, the description will only
+  be
+
+  visible to screen readers. This is the default mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+line: 18
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Draw a heart.
+      fill('red');
+      noStroke();
+      circle(67, 67, 20);
+      circle(83, 67, 20);
+      triangle(91, 73, 75, 95, 59, 73);
+
+      // Add a general description of the canvas.
+      describe('A pink square with a red heart in the bottom-right corner.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Draw a heart.
+      fill('red');
+      noStroke();
+      circle(67, 67, 20);
+      circle(83, 67, 20);
+      triangle(91, 73, 75, 95, 59, 73);
+
+      // Add a general description of the canvas
+      // and display it for debugging.
+      describe('A pink square with a red heart in the bottom-right corner.', LABEL);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // The expression
+      // frameCount % 100
+      // causes x to increase from 0
+      // to 99, then restart from 0.
+      let x = frameCount % 100;
+
+      // Draw the circle.
+      fill(0, 255, 0);
+      circle(x, 50, 40);
+
+      // Add a general description of the canvas.
+      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function draw() {
+      background(200);
+
+      // The expression
+      // frameCount % 100
+      // causes x to increase from 0
+      // to 99, then restart from 0.
+      let x = frameCount % 100;
+
+      // Draw the circle.
+      fill(0, 255, 0);
+      circle(x, 50, 40);
+
+      // Add a general description of the canvas
+      // and display it for debugging.
+      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: text
+    description: |
+      <p>description of the canvas.</p>
+    type: String
+  - name: display
+    description: |
+      <p>either LABEL or FALLBACK.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# describe
diff --git a/src/content/reference/en/p5 copy/describeElement.mdx b/src/content/reference/en/p5 copy/describeElement.mdx
new file mode 100644
index 0000000000..0b7bc8b330
--- /dev/null
+++ b/src/content/reference/en/p5 copy/describeElement.mdx	
@@ -0,0 +1,127 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L162
+title: describeElement
+module: Environment
+submodule: Environment
+file: src/accessibility/describe.js
+description: >
+  <p>Creates a screen reader-accessible description of elements in the
+  canvas.</p>
+
+  <p>Elements are shapes or groups of shapes that create meaning together. For
+
+  example, a few overlapping circles could make an "eye" element.</p>
+
+  <p>The first parameter, <code>name</code>, is the name of the element.</p>
+
+  <p>The second parameter, <code>text</code>, is the description of the
+  element.</p>
+
+  <p>The third parameter, <code>display</code>, is optional. It determines how
+  the
+
+  description is displayed. If <code>LABEL</code> is passed, as in
+
+  <code>describe('A description.', LABEL)</code>, the description will be
+  visible in
+
+  a div element next to the canvas. Using <code>LABEL</code> creates unhelpful
+
+  duplicates for screen readers. Only use <code>LABEL</code> during development.
+  If
+
+  <code>FALLBACK</code> is passed, as in <code>describe('A description.',
+  FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+line: 162
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Describe the first element
+      // and draw it.
+      describeElement('Circle', 'A yellow circle in the top-left corner.');
+      noStroke();
+      fill('yellow');
+      circle(25, 25, 40);
+
+      // Describe the second element
+      // and draw it.
+      describeElement('Heart', 'A red heart in the bottom-right corner.');
+      fill('red');
+      circle(66.6, 66.6, 20);
+      circle(83.2, 66.6, 20);
+      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+
+      // Add a general description of the canvas.
+      describe('A red heart and yellow circle over a pink background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('pink');
+
+      // Describe the first element
+      // and draw it. Display the
+      // description for debugging.
+      describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
+      noStroke();
+      fill('yellow');
+      circle(25, 25, 40);
+
+      // Describe the second element
+      // and draw it. Display the
+      // description for debugging.
+      describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
+      fill('red');
+      circle(66.6, 66.6, 20);
+      circle(83.2, 66.6, 20);
+      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+
+      // Add a general description of the canvas.
+      describe('A red heart and yellow circle over a pink background.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: name
+    description: |
+      <p>name of the element.</p>
+    type: String
+  - name: text
+    description: |
+      <p>description of the element.</p>
+    type: String
+  - name: display
+    description: |
+      <p>either LABEL or FALLBACK.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# describeElement
diff --git a/src/content/reference/en/p5 copy/deviceMoved.mdx b/src/content/reference/en/p5 copy/deviceMoved.mdx
new file mode 100644
index 0000000000..90e9ce91fb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceMoved.mdx	
@@ -0,0 +1,49 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L501
+title: deviceMoved
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function is
+  called when the device is moved by more than
+
+  the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
+
+  The threshold value can be changed using <a
+  href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>.</p>
+line: 501
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Move the device around
+    // to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device moves`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# deviceMoved
diff --git a/src/content/reference/en/p5 copy/deviceOrientation.mdx b/src/content/reference/en/p5 copy/deviceOrientation.mdx
new file mode 100644
index 0000000000..a18763fc87
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceOrientation.mdx	
@@ -0,0 +1,22 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L11
+title: deviceOrientation
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable deviceOrientation always contains the orientation of
+  the device. The value of this variable will either be set 'landscape'
+  or 'portrait'. If no data is available it will be set to 'undefined'.
+  either LANDSCAPE or PORTRAIT.</p>
+line: 11
+isConstructor: false
+itemtype: property
+class: p5
+type: Constant
+---
+
+
+# deviceOrientation
diff --git a/src/content/reference/en/p5 copy/deviceShaken.mdx b/src/content/reference/en/p5 copy/deviceShaken.mdx
new file mode 100644
index 0000000000..0c1cce17f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceShaken.mdx	
@@ -0,0 +1,50 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L589
+title: deviceShaken
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function is
+  called when the device total acceleration
+
+  changes of accelerationX and accelerationY values is more than
+
+  the threshold value. The default threshold is set to 30.
+
+  The threshold value can be changed using <a
+  href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>.</p>
+line: 589
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Shake the device to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device shakes`);
+    }
+    function deviceShaken() {
+      value = value + 5;
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# deviceShaken
diff --git a/src/content/reference/en/p5 copy/deviceTurned.mdx b/src/content/reference/en/p5 copy/deviceTurned.mdx
new file mode 100644
index 0000000000..28f760eb6f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/deviceTurned.mdx	
@@ -0,0 +1,80 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L531
+title: deviceTurned
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> function is
+  called when the device rotates by
+
+  more than 90 degrees continuously.</p>
+
+  <p>The axis that triggers the <a
+  href="/reference/p5/deviceTurned/">deviceTurned()</a> method is stored in the
+  turnAxis
+
+  variable. The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> method
+  can be locked to trigger on any axis:
+
+  X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>
+line: 531
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees
+    // to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device turns`);
+    }
+    function deviceTurned() {
+      if (value === 0) {
+        value = 255;
+      } else if (value === 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+    <div>
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees in the
+    // X-axis to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when x-axis turns`);
+    }
+    function deviceTurned() {
+      if (turnAxis === 'X') {
+        if (value === 0) {
+          value = 255;
+        } else if (value === 255) {
+          value = 0;
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# deviceTurned
diff --git a/src/content/reference/en/p5 copy/directionalLight.mdx b/src/content/reference/en/p5 copy/directionalLight.mdx
new file mode 100644
index 0000000000..b2b3e011a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/directionalLight.mdx	
@@ -0,0 +1,277 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L461
+title: directionalLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines in one direction.</p>
+
+  <p>Directional lights don’t shine from a specific point. They’re like a sun
+
+  that shines from somewhere offscreen. The light’s direction is set using
+
+  three <code>(x, y, z)</code> values between -1 and 1. For example, setting a
+  light’s
+
+  direction as <code>(1, 0, 0)</code> will light <a
+  href="/reference/p5/p5.Geometry">p5.Geometry</a>
+
+  objects from the left since the light faces directly to the right. A
+
+  maximum of 5 directional lights can be active at once.</p>
+
+  <p>There are four ways to call <code>directionalLight()</code> with parameters
+  to set the
+
+  light’s color and direction.</p>
+
+  <p>The first way to call <code>directionalLight()</code> has six parameters.
+  The first
+
+  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
+  the light’s color using the
+
+  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last three
+
+  parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the
+  light’s direction. For example,
+
+  <code>directionalLight(255, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0,
+  0)</code> light
+
+  that shines to the right <code>(1, 0, 0)</code>.</p>
+
+  <p>The second way to call <code>directionalLight()</code> has four parameters.
+  The first
+
+  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
+  the light’s color using the
+
+  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last
+  parameter,
+
+  <code>direction</code> sets the light’s direction using a
+   <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
+  <code>directionalLight(255, 0, 0, lightDir)</code> creates a red <code>(255,
+  0, 0)</code> light
+
+  that shines in the direction the <code>lightDir</code> vector points.</p>
+
+  <p>The third way to call <code>directionalLight()</code> has four parameters.
+  The first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
+  the light’s direction. For
+
+  example, <code>directionalLight(myColor, 1, 0, 0)</code> creates a light that
+  shines
+
+  to the right <code>(1, 0, 0)</code> with the color value of
+  <code>myColor</code>.</p>
+
+  <p>The fourth way to call <code>directionalLight()</code> has two parameters.
+  The first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  second parameter, <code>direction</code>, sets the light’s direction using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object. For example,
+
+  <code>directionalLight(myColor, lightDir)</code> creates a light that shines
+  in the
+
+  direction the <code>lightDir</code> vector points with the color value of
+  <code>myColor</code>.</p>
+line: 461
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to turn on the directional light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the light.
+      if (isLit === true) {
+        // Add a red directional light from above.
+        // Use RGB values and XYZ directions.
+        directionalLight(255, 0, 0, 0, 1, 0);
+      }
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red directional light from above.
+      // Use a p5.Color object and XYZ directions.
+      let c = color(255, 0, 0);
+      directionalLight(c, 0, 1, 0);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red directional light from above.
+      // Use a p5.Color object and a p5.Vector object.
+      let c = color(255, 0, 0);
+      let lightDir = createVector(0, 1, 0);
+      directionalLight(c, lightDir);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 461
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: x
+        description: |
+          <p>x-component of the light's direction between -1 and 1.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-component of the light's direction between -1 and 1.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-component of the light's direction between -1 and 1.</p>
+        type: Number
+    chainable: 1
+  - line: 614
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: direction
+        description: |
+          <p>direction of the light as a
+                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
+        type: p5.Vector
+    chainable: 1
+  - line: 624
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                                                    an array of color values, or as a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+    chainable: 1
+  - line: 634
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: direction
+        description: ''
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# directionalLight
diff --git a/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx b/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
new file mode 100644
index 0000000000..a72ec28678
--- /dev/null
+++ b/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L872
+title: disableFriendlyErrors
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>Turns off the parts of the Friendly Error System (FES) that impact
+  performance.</p>
+
+  <p>The <a
+  href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md"
+  target="_blank">FES</a>
+
+  can cause sketches to draw slowly because it does extra work behind the
+
+  scenes. For example, the FES checks the arguments passed to functions,
+
+  which takes time to process. Disabling the FES can significantly improve
+
+  performance by turning off these checks.</p>
+line: 872
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Disable the FES.
+    p5.disableFriendlyErrors = true;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // The circle() function requires three arguments. The
+      // next line would normally display a friendly error that
+      // points this out. Instead, nothing happens and it fails
+      // silently.
+      circle(50, 50);
+
+      describe('A gray square.');
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# disableFriendlyErrors
diff --git a/src/content/reference/en/p5 copy/displayDensity.mdx b/src/content/reference/en/p5 copy/displayDensity.mdx
new file mode 100644
index 0000000000..e52be83ec2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/displayDensity.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1078
+title: displayDensity
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Returns the display's current pixel density.</p>
+line: 1078
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 1.
+      pixelDensity(1);
+
+      // Create a canvas and draw
+      // a circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');
+    }
+
+    function mousePressed() {
+      // Get the current display density.
+      let d = displayDensity();
+
+      // Use the display density to set
+      // the sketch's pixel density.
+      pixelDensity(d);
+
+      // Paint the background and
+      // draw a circle.
+      background(200);
+      circle(50, 50, 70);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current pixel density of the display.
+  type: Number
+chainable: false
+---
+
+
+# displayDensity
diff --git a/src/content/reference/en/p5 copy/displayHeight.mdx b/src/content/reference/en/p5 copy/displayHeight.mdx
new file mode 100644
index 0000000000..d392419e70
--- /dev/null
+++ b/src/content/reference/en/p5 copy/displayHeight.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L621
+title: displayHeight
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the height of the screen
+  display.</p>
+
+  <p><code>displayHeight</code> is useful for running full-screen programs. Its
+  value
+
+  depends on the current <a
+  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
+
+  <p>Note: The actual screen height can be computed as
+
+  <code>displayHeight * pixelDensity()</code>.</p>
+line: 621
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the display's dimensions.
+      createCanvas(displayWidth, displayHeight);
+
+      background(200);
+
+      describe('A gray canvas that is the same size as the display.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# displayHeight
diff --git a/src/content/reference/en/p5 copy/displayWidth.mdx b/src/content/reference/en/p5 copy/displayWidth.mdx
new file mode 100644
index 0000000000..9ab79a09db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/displayWidth.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L590
+title: displayWidth
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the width of the screen
+  display.</p>
+
+  <p><code>displayWidth</code> is useful for running full-screen programs. Its
+  value
+
+  depends on the current <a
+  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
+
+  <p>Note: The actual screen width can be computed as
+
+  <code>displayWidth * pixelDensity()</code>.</p>
+line: 590
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the display's dimensions.
+      createCanvas(displayWidth, displayHeight);
+
+      background(200);
+
+      describe('A gray canvas that is the same size as the display.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# displayWidth
diff --git a/src/content/reference/en/p5 copy/dist.mdx b/src/content/reference/en/p5 copy/dist.mdx
new file mode 100644
index 0000000000..60b7155b9b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/dist.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L155
+title: dist
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the distance between two points.</p>
+
+  <p>The version of <code>dist()</code> with four parameters calculates distance
+  in two
+
+  dimensions.</p>
+
+  <p>The version of <code>dist()</code> with six parameters calculates distance
+  in three
+
+  dimensions.</p>
+
+  <p>Use <a href="/reference/p5.Vector/dist/">p5.Vector.dist()</a> to calculate
+  the
+
+  distance between two <a href="/reference/p5/p5.Vector">p5.Vector</a>
+  objects.</p>
+line: 155
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the coordinates.
+      let x1 = 10;
+      let y1 = 50;
+      let x2 = 90;
+      let y2 = 50;
+
+      // Draw the points and a line connecting them.
+      line(x1, y1, x2, y2);
+      strokeWeight(5);
+      point(x1, y1);
+      point(x2, y2);
+
+      // Calculate the distance.
+      let d = dist(x1, y1, x2, y2);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the distance.
+      text(d, 43, 40);
+
+      describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: distance between the two points.
+  type: Number
+overloads:
+  - line: 155
+    params:
+      - name: x1
+        description: |
+          <p>x-coordinate of the first point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>y-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>x-coordinate of the second point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>y-coordinate of the second point.</p>
+        type: Number
+    return:
+      description: distance between the two points.
+      type: Number
+  - line: 209
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>z-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>z-coordinate of the second point.</p>
+        type: Number
+    return:
+      description: distance between the two points.
+      type: Number
+chainable: false
+---
+
+
+# dist
diff --git a/src/content/reference/en/p5 copy/doubleClicked.mdx b/src/content/reference/en/p5 copy/doubleClicked.mdx
new file mode 100644
index 0000000000..3e148c677f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/doubleClicked.mdx	
@@ -0,0 +1,157 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1599
+title: doubleClicked
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when a mouse button is clicked twice
+  quickly.</p>
+
+  <p>Declaring the function <code>doubleClicked()</code> sets a code block to
+  run
+
+  automatically when the user presses and releases the mouse button twice
+
+  quickly:</p>
+
+  <pre><code class="language-js">function doubleClicked() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>doubleClicked()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function doubleClicked() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional.
+  <code>doubleClicked()</code> is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the double-click event:</p>
+
+  <pre><code class="language-js">function doubleClicked(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, code placed in <code>doubleClicked()</code> will
+  run after two
+
+  touches that occur within a short time.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+line: 1599
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the square's color when the user double-clicks.
+    function doubleClicked() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the circle.
+      fill(value);
+
+      // Draw the circle.
+      circle(50, 50, 80);
+    }
+
+    // Reassign value to 255 when the user double-clicks on the circle.
+    function doubleClicked() {
+      if (dist(50, 50, mouseX, mouseY) < 40) {
+        value = 255;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# doubleClicked
diff --git a/src/content/reference/en/p5 copy/draw.mdx b/src/content/reference/en/p5 copy/draw.mdx
new file mode 100644
index 0000000000..dba2e2b44a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/draw.mdx	
@@ -0,0 +1,129 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L176
+title: draw
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>A function that's called repeatedly while the sketch runs.</p>
+
+  <p>Declaring the function <code>draw()</code> sets a code block to run
+  repeatedly
+
+  once the sketch starts. It’s used to create animations and respond to
+
+  user inputs:</p>
+
+  <pre><code class="language-js">function draw() {
+    // Code to run repeatedly.
+  }
+
+  </code></pre>
+
+  <p>This is often called the "draw loop" because p5.js calls the code in
+
+  <code>draw()</code> in a loop behind the scenes. By default,
+  <code>draw()</code> tries to run
+
+  60 times per second. The actual rate depends on many factors. The
+
+  drawing rate, called the "frame rate", can be controlled by calling
+
+  <a href="/reference/p5/frameRate/">frameRate()</a>. The number of times
+  <code>draw()</code>
+
+  has run is stored in the system variable
+
+  <a href="/reference/p5/frameCount/">frameCount()</a>.</p>
+
+  <p>Code placed within <code>draw()</code> begins looping after
+
+  <a href="/reference/p5/setup/">setup()</a> runs. <code>draw()</code> will run
+  until the user
+
+  closes the sketch. <code>draw()</code> can be stopped by calling the
+
+  <a href="/reference/p5/noLoop/">noLoop()</a> function. <code>draw()</code> can
+  be resumed by
+
+  calling the <a href="/reference/p5/loop/">loop()</a> function.</p>
+line: 176
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Paint the background once.
+      background(200);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+      );
+    }
+
+    function draw() {
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves.'
+      );
+    }
+
+    function draw() {
+      // Paint the background repeatedly.
+      background(200);
+
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click the canvas to change the circle's color.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      // Paint the background repeatedly.
+      background(200);
+
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+
+    // Change the fill color when the user double-clicks.
+    function doubleClicked() {
+      fill('deeppink');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# draw
diff --git a/src/content/reference/en/p5 copy/drawingContext.mdx b/src/content/reference/en/p5 copy/drawingContext.mdx
new file mode 100644
index 0000000000..3cf1335733
--- /dev/null
+++ b/src/content/reference/en/p5 copy/drawingContext.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L1198
+title: drawingContext
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>A system variable that provides direct access to the sketch's
+
+  <code><canvas></code> element.</p>
+
+  <p>The <code><canvas></code> element provides many specialized features that
+  aren't
+
+  included in the p5.js library. The <code>drawingContext</code> system variable
+
+  provides access to these features by exposing the sketch's
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/">CanvasRenderingContext2D</a>
+
+  object.</p>
+line: 1198
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(180);
+
+      // Style the circle using shadows.
+      drawingContext.shadowOffsetX = 5;
+      drawingContext.shadowOffsetY = -5;
+      drawingContext.shadowBlur = 10;
+      drawingContext.shadowColor = 'black';
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe("A white circle on a gray background. The circle's edges are shadowy.");
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background('skyblue');
+
+      // Style the circle using a color gradient.
+      let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);
+      myGradient.addColorStop(0, 'yellow');
+      myGradient.addColorStop(0.6, 'orangered');
+      myGradient.addColorStop(1, 'yellow');
+      drawingContext.fillStyle = myGradient;
+      drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A fiery sun drawn on a light blue background.');
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# drawingContext
diff --git a/src/content/reference/en/p5 copy/ellipse.mdx b/src/content/reference/en/p5 copy/ellipse.mdx
new file mode 100644
index 0000000000..6c07765230
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ellipse.mdx	
@@ -0,0 +1,164 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L371
+title: ellipse
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws an ellipse (oval).</p>
+
+  <p>An ellipse is a round shape defined by the <code>x</code>, <code>y</code>,
+  <code>w</code>, and
+
+  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
+  of its center. <code>w</code> and
+
+  <code>h</code> set its width and height. See
+
+  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to set
+
+  its position.</p>
+
+  <p>If no height is set, the value of width is used for both the width and
+
+  height. If a negative height or width is specified, the absolute value is
+
+  taken.</p>
+
+  <p>The fifth parameter, <code>detail</code>, is also optional. It determines
+  how many
+
+  vertices are used to draw the ellipse in WebGL mode. The default value is
+
+  25.</p>
+line: 371
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      ellipse(50, 50, 80, 80);
+
+      describe('A white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      ellipse(50, 50, 80);
+
+      describe('A white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      ellipse(50, 50, 80, 40);
+
+      describe('A white ellipse on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      ellipse(0, 0, 80, 40);
+
+      describe('A white ellipse on a gray canvas.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Use 6 vertices.
+      ellipse(0, 0, 80, 40, 6);
+
+      describe('A white hexagon on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 371
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the center of the ellipse.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the center of the ellipse.</p>
+        type: Number
+      - name: w
+        description: |
+          <p>width of the ellipse.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>height of the ellipse.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 472
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: w
+        description: ''
+        type: Number
+      - name: h
+        description: ''
+        type: Number
+      - name: detail
+        description: |
+          <p>optional parameter for WebGL mode only. This is to
+                                  specify the number of vertices that makes up the
+                                  perimeter of the ellipse. Default value is 25. Won't
+                                  draw a stroke for a detail of more than 50.</p>
+        type: Integer
+        optional: true
+chainable: true
+---
+
+
+# ellipse
diff --git a/src/content/reference/en/p5 copy/ellipseMode.mdx b/src/content/reference/en/p5 copy/ellipseMode.mdx
new file mode 100644
index 0000000000..0826de63f4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ellipseMode.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L12
+title: ellipseMode
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Changes where ellipses, circles, and arcs are drawn.</p>
+
+  <p>By default, the first two parameters of
+
+  <a href="/reference/p5/ellipse/">ellipse()</a>, <a
+  href="/reference/p5/circle/">circle()</a>,
+
+  and <a href="/reference/p5/arc/">arc()</a>
+
+  are the x- and y-coordinates of the shape's center. The next parameters set
+
+  the shape's width and height. This is the same as calling
+
+  <code>ellipseMode(CENTER)</code>.</p>
+
+  <p><code>ellipseMode(RADIUS)</code> also uses the first two parameters to set
+  the x- and
+
+  y-coordinates of the shape's center. The next parameters are half of the
+
+  shapes's width and height. Calling <code>ellipse(0, 0, 10, 15)</code> draws a
+  shape
+
+  with a width of 20 and height of 30.</p>
+
+  <p><code>ellipseMode(CORNER)</code> uses the first two parameters as the
+  upper-left
+
+  corner of the shape. The next parameters are its width and height.</p>
+
+  <p><code>ellipseMode(CORNERS)</code> uses the first two parameters as the
+  location of one
+
+  corner of the ellipse's bounding box. The next parameters are the location
+
+  of the opposite corner.</p>
+
+  <p>The argument passed to <code>ellipseMode()</code> must be written in ALL
+  CAPS because
+
+  the constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>,
+  and <code>CORNERS</code> are defined this
+
+  way. JavaScript is a case-sensitive language.</p>
+line: 12
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // White ellipse.
+      ellipseMode(RADIUS);
+      fill(255);
+      ellipse(50, 50, 30, 30);
+
+      // Gray ellipse.
+      ellipseMode(CENTER);
+      fill(100);
+      ellipse(50, 50, 30, 30);
+
+      describe('A white circle with a gray circle at its center. Both circles have black outlines.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // White ellipse.
+      ellipseMode(CORNER);
+      fill(255);
+      ellipse(25, 25, 50, 50);
+
+      // Gray ellipse.
+      ellipseMode(CORNERS);
+      fill(100);
+      ellipse(25, 25, 50, 50);
+
+      describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either CENTER, RADIUS, CORNER, or CORNERS</p>
+    type: Constant
+chainable: true
+---
+
+
+# ellipseMode
diff --git a/src/content/reference/en/p5 copy/ellipsoid.mdx b/src/content/reference/en/p5 copy/ellipsoid.mdx
new file mode 100644
index 0000000000..56d86709b7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ellipsoid.mdx	
@@ -0,0 +1,233 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1965
+title: ellipsoid
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws an ellipsoid.</p>
+
+  <p>An ellipsoid is a 3D shape with triangular faces that connect to form a
+
+  round surface. Ellipsoids with few faces look like crystals. Ellipsoids
+
+  with many faces have smooth surfaces and look like eggs.
+  <code>ellipsoid()</code>
+
+  defines a shape by its radii. This is different from
+
+  <a href="/reference/p5/ellipse/">ellipse()</a> which uses diameters
+
+  (width and height).</p>
+
+  <p>The first parameter, <code>radiusX</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>ellipsoid(20)</code>, it sets the radius of the ellipsoid along the
+  x-axis. By
+
+  default, <code>radiusX</code> is 50.</p>
+
+  <p>The second parameter, <code>radiusY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30)</code>, it sets the ellipsoid’s radius along the
+  y-axis.
+
+  By default, <code>radiusY</code> is set to the ellipsoid’s
+  <code>radiusX</code>.</p>
+
+  <p>The third parameter, <code>radiusZ</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30, 40)</code>, it sets the ellipsoid’s radius along
+  the
+
+  z-axis. By default, <code>radiusZ</code> is set to the ellipsoid’s
+  <code>radiusY</code>.</p>
+
+  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30, 40, 5)</code>, it sets the number of triangle
+
+  subdivisions to use along the x-axis. All 3D shapes are made by connecting
+
+  triangles to form their surfaces. By default, <code>detailX</code> is 24.</p>
+
+  <p>The fifth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>ellipsoid(20, 30, 40, 5, 7)</code>, it sets the number of triangle
+
+  subdivisions to use along the y-axis. All 3D shapes are made by connecting
+
+  triangles to form their surfaces. By default, <code>detailY</code> is 16.</p>
+
+  <p>Note: <code>ellipsoid()</code> can only be used in WebGL mode.</p>
+line: 1965
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      ellipsoid(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      ellipsoid(30, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      // Set its radiusZ to 50.
+      ellipsoid(30, 40, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      // Set its radiusZ to 50.
+      // Set its detailX to 4.
+      ellipsoid(30, 40, 50, 4);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white ellipsoid on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the ellipsoid.
+      // Set its radiusX to 30.
+      // Set its radiusY to 40.
+      // Set its radiusZ to 50.
+      // Set its detailX to 4.
+      // Set its detailY to 3.
+      ellipsoid(30, 40, 50, 4, 3);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radiusX
+    description: |
+      <p>radius of the ellipsoid along the x-axis. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: radiusY
+    description: >
+      <p>radius of the ellipsoid along the y-axis. Defaults to
+      <code>radiusX</code>.</p>
+    type: Number
+    optional: true
+  - name: radiusZ
+    description: >
+      <p>radius of the ellipsoid along the z-axis. Defaults to
+      <code>radiusY</code>.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# ellipsoid
diff --git a/src/content/reference/en/p5 copy/emissiveMaterial.mdx b/src/content/reference/en/p5 copy/emissiveMaterial.mdx
new file mode 100644
index 0000000000..10037c3c86
--- /dev/null
+++ b/src/content/reference/en/p5 copy/emissiveMaterial.mdx	
@@ -0,0 +1,140 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2647
+title: emissiveMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the emissive color of shapes’ surface material.</p>
+
+  <p>The <code>emissiveMaterial()</code> color sets a color shapes display at
+  full
+
+  strength, regardless of lighting. This can give the appearance that a shape
+
+  is glowing. However, emissive materials don’t actually emit light that
+
+  can affect surrounding objects.</p>
+
+  <p><code>emissiveMaterial()</code> can be called three ways with different
+  parameters to
+
+  set the material’s color.</p>
+
+  <p>The first way to call <code>emissiveMaterial()</code> has one parameter,
+  <code>gray</code>.
+
+  Grayscale values between 0 and 255, as in <code>emissiveMaterial(50)</code>,
+  can be
+
+  passed to set the material’s color. Higher grayscale values make shapes
+
+  appear brighter.</p>
+
+  <p>The second way to call <code>emissiveMaterial()</code> has one parameter,
+  <code>color</code>. A
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  values, or a
+
+  CSS color string, as in <code>emissiveMaterial('magenta')</code>, can be
+  passed to set
+
+  the material’s color.</p>
+
+  <p>The third way to call <code>emissiveMaterial()</code> has four parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
+  HSBA, or HSLA values can be
+
+  passed to set the material’s colors, as in <code>emissiveMaterial(255, 0,
+  0)</code> or
+
+  <code>emissiveMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
+  using
+
+  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+
+  <p>Note: <code>emissiveMaterial()</code> can only be used in WebGL mode.</p>
+line: 2647
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red cube drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white ambient light.
+      ambientLight(255, 255, 255);
+
+      // Add a red emissive material using RGB values.
+      emissiveMaterial(255, 0, 0);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2647
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the
+                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the
+                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha value in the current
+                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2717
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 (black) and 255 (white).</p>
+        type: Number
+    chainable: 1
+  - line: 2723
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                     an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+    chainable: 1
+chainable: true
+---
+
+
+# emissiveMaterial
diff --git a/src/content/reference/en/p5 copy/endClip.mdx b/src/content/reference/en/p5 copy/endClip.mdx
new file mode 100644
index 0000000000..69bf243858
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endClip.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L190
+title: endClip
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: |
+  <p>Ends defining a mask that was started with
+  <a href="/reference/p5/beginClip/">beginClip()</a>.</p>
+line: 190
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a mask.
+      beginClip();
+      triangle(15, 37, 30, 13, 43, 37);
+      circle(45, 45, 7);
+      endClip();
+
+      // Draw a backing shape.
+      square(5, 5, 45);
+
+      describe('A white triangle and circle on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# endClip
diff --git a/src/content/reference/en/p5 copy/endContour.mdx b/src/content/reference/en/p5 copy/endContour.mdx
new file mode 100644
index 0000000000..5965b72db8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endContour.mdx	
@@ -0,0 +1,133 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1224
+title: endContour
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Stops creating a hole within a flat shape.</p>
+
+  <p>The <a href="/reference/p5/beginContour/">beginContour()</a> and
+  <code>endContour()</code>
+
+  functions allow for creating negative space within custom shapes that are
+
+  flat. <a href="/reference/p5/beginContour/">beginContour()</a> begins adding
+  vertices
+
+  to a negative space and <code>endContour()</code> stops adding them.
+
+  <a href="/reference/p5/beginContour/">beginContour()</a> and
+  <code>endContour()</code> must be
+
+  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a>.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and <a
+  href="/reference/p5/scale/">scale()</a>
+
+  don't work between <a href="/reference/p5/beginContour/">beginContour()</a>
+  and
+
+  <code>endContour()</code>. It's also not possible to use other shapes, such as
+
+  <a href="/reference/p5/ellipse/">ellipse()</a> or <a
+  href="/reference/p5/rect/">rect()</a>,
+
+  between <a href="/reference/p5/beginContour/">beginContour()</a> and
+  <code>endContour()</code>.</p>
+
+  <p>Note: The vertices that define a negative space must "wind" in the opposite
+
+  direction from the outer shape. First, draw vertices for the outer shape
+
+  clockwise order. Then, draw vertices for the negative space in
+
+  counter-clockwise order.</p>
+line: 1224
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(10, 10);
+      vertex(90, 10);
+      vertex(90, 90);
+      vertex(10, 90);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(30, 30);
+      vertex(30, 70);
+      vertex(70, 70);
+      vertex(70, 30);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square with a square hole in its center drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Exterior vertices, clockwise winding.
+      vertex(-40, -40);
+      vertex(40, -40);
+      vertex(40, 40);
+      vertex(-40, 40);
+
+      // Interior vertices, counter-clockwise winding.
+      beginContour();
+      vertex(-20, -20);
+      vertex(-20, 20);
+      vertex(20, 20);
+      vertex(20, -20);
+      endContour();
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# endContour
diff --git a/src/content/reference/en/p5 copy/endGeometry.mdx b/src/content/reference/en/p5 copy/endGeometry.mdx
new file mode 100644
index 0000000000..bfbeb81c7b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endGeometry.mdx	
@@ -0,0 +1,285 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L266
+title: endGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Stops adding shapes to a new
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and returns the
+  object.</p>
+
+  <p>The <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>
+
+  functions help with creating complex 3D shapes from simpler ones such as
+
+  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
+  begins adding shapes
+
+  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
+
+  <p><code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a> can help
+
+  to make sketches more performant. For example, if a complex 3D shape
+
+  doesn’t change while a sketch runs, then it can be created with
+
+  <code>beginGeometry()</code> and <a
+  href="/reference/p5/endGeometry/">endGeometry()</a>.
+
+  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
+  then
+
+  drawing it will run faster than repeatedly drawing the individual pieces.</p>
+
+  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
+  way to
+
+  build 3D shapes.</p>
+
+  <p>Note: <code>endGeometry()</code> can only be used in WebGL mode.</p>
+line: 266
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add a cone.
+      cone();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      createArrow();
+
+      describe('A white arrow drawn on a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      shape = endGeometry();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let blueArrow;
+    let redArrow;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the arrows.
+      redArrow = createArrow('red');
+      blueArrow = createArrow('blue');
+
+      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the red arrow.
+      model(redArrow);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the blue arrow.
+      model(blueArrow);
+    }
+
+    function createArrow(fillColor) {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      fill(fillColor);
+
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = createParticles();
+    }
+
+    function createParticles() {
+      // Start building the p5.Geometry object.
+      beginGeometry();
+
+      // Add shapes.
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+
+      // Stop building the p5.Geometry object.
+      let shape = endGeometry();
+
+      return shape;
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: new 3D shape.
+  type: p5.Geometry
+chainable: false
+---
+
+
+# endGeometry
diff --git a/src/content/reference/en/p5 copy/endShape.mdx b/src/content/reference/en/p5 copy/endShape.mdx
new file mode 100644
index 0000000000..198b6d7497
--- /dev/null
+++ b/src/content/reference/en/p5 copy/endShape.mdx	
@@ -0,0 +1,256 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1344
+title: endShape
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Stops adding vertices to a custom shape.</p>
+
+  <p>The <a href="/reference/p5/beginShape/">beginShape()</a> and
+  <code>endShape()</code> functions
+
+  allow for creating custom shapes in 2D or 3D.
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> begins adding vertices to
+  a
+
+  custom shape and <code>endShape()</code> stops adding them.</p>
+
+  <p>The first parameter, <code>mode</code>, is optional. By default, the first
+  and last
+
+  vertices of a shape aren't connected. If the constant <code>CLOSE</code> is
+  passed, as
+
+  in <code>endShape(CLOSE)</code>, then the first and last vertices will be
+  connected.</p>
+
+  <p>The second parameter, <code>count</code>, is also optional. In WebGL mode,
+  it’s more
+
+  efficient to draw many copies of the same shape using a technique called
+
+  <a
+  href="https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html"
+  target="_blank">instancing</a>.
+
+  The <code>count</code> parameter tells WebGL mode how many copies to draw. For
+
+  example, calling <code>endShape(CLOSE, 400)</code> after drawing a custom
+  shape will
+
+  make it efficient to draw 400 copies. This feature requires
+
+  <a href="https://p5js.org/tutorials/intro-to-shaders/" target="_blank">writing
+  a custom shader</a>.</p>
+
+  <p>After calling <a href="/reference/p5/beginShape/">beginShape()</a>, shapes
+  can be
+
+  built by calling <a href="/reference/p5/vertex/">vertex()</a>,
+
+  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
+
+  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
+
+  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
+
+  <code>endShape()</code> will stop adding vertices to the
+
+  shape. Each shape will be outlined with the current stroke color and filled
+
+  with the current fill color.</p>
+
+  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
+
+  <a href="/reference/p5/rotate/">rotate()</a>, and
+
+  <a href="/reference/p5/scale/">scale()</a> don't work between
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+  <code>endShape()</code>. It's also not
+
+  possible to use other shapes, such as <a
+  href="/reference/p5/ellipse/">ellipse()</a> or
+
+  <a href="/reference/p5/rect/">rect()</a>, between
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+  <code>endShape()</code>.</p>
+line: 1344
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shapes.
+      noFill();
+
+      // Left triangle.
+      beginShape();
+      vertex(20, 20);
+      vertex(45, 20);
+      vertex(45, 80);
+      endShape(CLOSE);
+
+      // Right triangle.
+      beginShape();
+      vertex(50, 20);
+      vertex(75, 20);
+      vertex(75, 80);
+      endShape();
+
+      describe(
+        'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(200, 100);
+
+      background(240);
+
+      noFill();
+      stroke(0);
+
+      // Open shape (left)
+      beginShape();
+      vertex(20, 20);
+      vertex(80, 20);
+      vertex(80, 80);
+      endShape();  // Not closed
+
+      // Closed shape (right)
+      beginShape();
+      vertex(120, 20);
+      vertex(180, 20);
+      vertex(180, 80);
+      endShape(CLOSE);  // Closed
+
+      describe(
+        'Two right-angled shapes on a light gray background. The left shape is open with three lines. The right shape is closed, forming a triangle.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `#version 300 es
+
+    precision mediump float;
+
+    in vec3 aPosition;
+    flat out int instanceID;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+
+      // Copy the instance ID to the fragment shader.
+      instanceID = gl_InstanceID;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+
+      // gl_InstanceID represents a numeric value for each instance.
+      // Using gl_InstanceID allows us to move each instance separately.
+      // Here we move each instance horizontally by ID * 23.
+      float xOffset = float(gl_InstanceID) * 23.0;
+
+      // Apply the offset to the final position.
+      gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
+        vec4(xOffset, 0.0, 0.0, 0.0));
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `#version 300 es
+
+    precision mediump float;
+
+    out vec4 outColor;
+    flat in int instanceID;
+    uniform float numInstances;
+
+    void main() {
+      vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
+      vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
+
+      // Normalize the instance ID.
+      float normId = float(instanceID) / numInstances;
+
+      // Mix between two colors using the normalized instance ID.
+      outColor = mix(red, blue, normId);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let myShader = createShader(vertSrc, fragSrc);
+
+      background(220);
+
+      // Compile and apply the p5.Shader.
+      shader(myShader);
+
+      // Set the numInstances uniform.
+      myShader.setUniform('numInstances', 4);
+
+      // Translate the origin to help align the drawing.
+      translate(25, -10);
+
+      // Style the shapes.
+      noStroke();
+
+      // Draw the shapes.
+      beginShape();
+      vertex(0, 0);
+      vertex(0, 20);
+      vertex(20, 20);
+      vertex(20, 0);
+      vertex(0, 0);
+      endShape(CLOSE, 4);
+
+      describe('A row of four squares. Their colors transition from purple on the left to red on the right');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>use CLOSE to close the shape</p>
+    type: Constant
+    optional: true
+  - name: count
+    description: >
+      <p>number of times you want to draw/instance the shape (for WebGL
+      mode).</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# endShape
diff --git a/src/content/reference/en/p5 copy/erase.mdx b/src/content/reference/en/p5 copy/erase.mdx
new file mode 100644
index 0000000000..24f1397e8e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/erase.mdx	
@@ -0,0 +1,123 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1629
+title: erase
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Starts using shapes to erase parts of the canvas.</p>
+
+  <p>All drawing that follows <code>erase()</code> will subtract from the
+  canvas, revealing
+
+  the web page underneath. The erased areas will become transparent, allowing
+
+  the content behind the canvas to show through. The
+
+  <a href="/reference/p5/fill/">fill()</a>, <a
+  href="/reference/p5/stroke/">stroke()</a>, and
+
+  <a href="/reference/p5/blendMode/">blendMode()</a> have no effect once
+  <code>erase()</code> is
+
+  called.</p>
+
+  <p>The <code>erase()</code> function has two optional parameters. The first
+  parameter
+
+  sets the strength of erasing by the shape's interior. A value of 0 means
+
+  that no erasing will occur. A value of 255 means that the shape's interior
+
+  will fully erase the content underneath. The default value is 255
+
+  (full strength).</p>
+
+  <p>The second parameter sets the strength of erasing by the shape's edge. A
+
+  value of 0 means that no erasing will occur. A value of 255 means that the
+
+  shape's edge will fully erase the content underneath. The default value is
+
+  255 (full strength).</p>
+
+  <p>To cancel the erasing effect, use the <a
+  href="/reference/p5/noErase/">noErase()</a>
+
+  function.</p>
+
+  <p><code>erase()</code> has no effect on drawing done with the
+
+  <a href="/reference/p5/image/">image()</a> and
+
+  <a href="/reference/p5/background/">background()</a> functions.</p>
+line: 1629
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(100, 100, 250);
+
+      // Draw a pink square.
+      fill(250, 100, 100);
+      square(20, 20, 60);
+
+      // Erase a circular area.
+      erase();
+      circle(25, 30, 30);
+      noErase();
+
+      describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(100, 100, 250);
+
+      // Draw a pink square.
+      fill(250, 100, 100);
+      square(20, 20, 60);
+
+      // Erase a circular area.
+      strokeWeight(5);
+      erase(150, 255);
+      circle(25, 30, 30);
+      noErase();
+
+      describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: strengthFill
+    description: |
+      <p>a number (0-255) for the strength of erasing under a shape's interior.
+                                             Defaults to 255, which is full strength.</p>
+    type: Number
+    optional: true
+  - name: strengthStroke
+    description: |
+      <p>a number (0-255) for the strength of erasing under a shape's edge.
+                                             Defaults to 255, which is full strength.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# erase
diff --git a/src/content/reference/en/p5 copy/exitPointerLock.mdx b/src/content/reference/en/p5 copy/exitPointerLock.mdx
new file mode 100644
index 0000000000..db8a989422
--- /dev/null
+++ b/src/content/reference/en/p5 copy/exitPointerLock.mdx	
@@ -0,0 +1,82 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1946
+title: exitPointerLock
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>Exits a pointer lock started with
+
+  <a href="/reference/p5/requestPointerLock/">requestPointerLock</a>.</p>
+
+  <p>Calling <code>requestPointerLock()</code> locks the values of
+
+  <a href="/reference/p5/mouseX/">mouseX</a>, <a
+  href="/reference/p5/mouseY/">mouseY</a>,
+
+  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
+  href="/reference/p5/pmouseY/">pmouseY</a>.
+
+  Calling <code>exitPointerLock()</code> resumes updating the mouse system
+  variables.</p>
+
+  <p>Note: Most browsers require an input, such as a click, before calling
+
+  <code>requestPointerLock()</code>. It’s recommended to call
+  <code>requestPointerLock()</code> in
+
+  an event function such as <a
+  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
+line: 1946
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let isLocked = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a word at its center. The word changes between "Unlocked" and "Locked" when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Tell the user whether the pointer is locked.
+      if (isLocked === true) {
+        text('Locked', 50, 50);
+      } else {
+        text('Unlocked', 50, 50);
+      }
+    }
+
+    // Toggle the pointer lock when the user double-clicks.
+    function doubleClicked() {
+      if (isLocked === true) {
+        exitPointerLock();
+        isLocked = false;
+      } else {
+        requestPointerLock();
+        isLocked = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# exitPointerLock
diff --git a/src/content/reference/en/p5 copy/exp.mdx b/src/content/reference/en/p5 copy/exp.mdx
new file mode 100644
index 0000000000..e75a420dab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/exp.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L230
+title: exp
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the value of Euler's number e (2.71828...) raised to the power
+  of a number.</p>
+line: 230
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = exp(1);
+      circle(10, 10, d);
+
+      // Left-center.
+      d = exp(2);
+      circle(20, 20, d);
+
+      // Right-center.
+      d = exp(3);
+      circle(40, 40, d);
+
+      // Bottom-right.
+      d = exp(4);
+      circle(80, 80, d);
+
+      describe('A series of circles that grow exponentially from top left to bottom right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that grow exponentially from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 0.005 * exp(x * 0.1);
+
+      // Draw a point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>exponent to raise.</p>
+    type: Number
+return:
+  description: e^n
+  type: Number
+chainable: false
+---
+
+
+# exp
diff --git a/src/content/reference/en/p5 copy/fill.mdx b/src/content/reference/en/p5 copy/fill.mdx
new file mode 100644
index 0000000000..84f074abd4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/fill.mdx	
@@ -0,0 +1,312 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1000
+title: fill
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Sets the color used to fill shapes.</p>
+
+  <p>Calling <code>fill(255, 165, 0)</code> or <code>fill('orange')</code> means
+  all shapes drawn
+
+  after the fill command will be filled with the color orange.</p>
+
+  <p>The version of <code>fill()</code> with one parameter interprets the value
+  one of
+
+  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
+  grayscale
+
+  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
+  color
+
+  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
+  provided to
+
+  set the fill color.</p>
+
+  <p>The version of <code>fill()</code> with three parameters interprets them as
+  RGB, HSB,
+
+  or HSL colors, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The default color space is
+  RGB,
+
+  with each value in the range from 0 to 255.</p>
+
+  <p>The version of <code>fill()</code> with four parameters interprets them as
+  <code>RGBA</code>, <code>HSBA</code>,
+
+  or <code>HSLA</code> colors, depending on the current <a
+  href="/reference/p5/colorMode/">colorMode()</a>. The last parameter
+
+  sets the alpha (transparency) value.</p>
+line: 1000
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A grayscale value.
+      fill(51);
+      square(20, 20, 60);
+
+      describe('A dark charcoal gray square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // R, G & B values.
+      fill(255, 204, 0);
+      square(20, 20, 60);
+
+      describe('A yellow square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // R, G, B, and Alpha values.
+      fill(255, 0, 0, 128);
+      square(20, 20, 60);
+
+      describe('A semi-transparent red square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(100);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // H, S & B values.
+      fill(255, 204, 100);
+      square(20, 20, 60);
+
+      describe('A royal blue square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A CSS named color.
+      fill('red');
+      square(20, 20, 60);
+
+      describe('A red square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Three-digit hex RGB notation.
+      fill('#fae');
+      square(20, 20, 60);
+
+      describe('A pink square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Six-digit hex RGB notation.
+      fill('#A251FA');
+      square(20, 20, 60);
+
+      describe('A purple square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGB notation.
+      fill('rgb(0, 255, 0)');
+      square(20, 20, 60);
+
+      describe('A bright green square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGBA notation.
+      fill('rgba(0, 255, 0, 0.25)');
+      square(20, 20, 60);
+
+      describe('A soft green rectange with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGB notation.
+      fill('rgb(100%, 0%, 10%)');
+      square(20, 20, 60);
+
+      describe('A red square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGBA notation.
+      fill('rgba(100%, 0%, 100%, 0.5)');
+      square(20, 20, 60);
+
+      describe('A dark fuchsia square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A p5.Color object.
+      let c = color(0, 0, 255);
+      fill(c);
+      square(20, 20, 60);
+
+      describe('A blue square with a black outline.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1000
+    params:
+      - name: v1
+        description: >
+          <p>red value if color mode is RGB or hue value if color mode is
+          HSB.</p>
+        type: Number
+      - name: v2
+        description: >
+          <p>green value if color mode is RGB or saturation value if color mode
+          is HSB.</p>
+        type: Number
+      - name: v3
+        description: >
+          <p>blue value if color mode is RGB or brightness value if color mode
+          is HSB.</p>
+        type: Number
+      - name: alpha
+        description: >
+          <p>alpha value, controls transparency (0 - transparent, 255 -
+          opaque).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1225
+    params:
+      - name: value
+        description: |
+          <p>a color string.</p>
+        type: String
+    chainable: 1
+  - line: 1231
+    params:
+      - name: gray
+        description: |
+          <p>a grayscale value.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1238
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue &
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 1245
+    params:
+      - name: color
+        description: |
+          <p>the fill color.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# fill
diff --git a/src/content/reference/en/p5 copy/filter.mdx b/src/content/reference/en/p5 copy/filter.mdx
new file mode 100644
index 0000000000..5496568d48
--- /dev/null
+++ b/src/content/reference/en/p5 copy/filter.mdx	
@@ -0,0 +1,330 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L442
+title: filter
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Applies an image filter to the canvas.</p>
+
+  <p>The preset options are:</p>
+
+  <p><code>INVERT</code>
+
+  Inverts the colors in the image. No parameter is used.</p>
+
+  <p><code>GRAY</code>
+
+  Converts the image to grayscale. No parameter is used.</p>
+
+  <p><code>THRESHOLD</code>
+
+  Converts the image to black and white. Pixels with a grayscale value
+
+  above a given threshold are converted to white. The rest are converted to
+
+  black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+
+  value is specified, 0.5 is used.</p>
+
+  <p><code>OPAQUE</code>
+
+  Sets the alpha channel to entirely opaque. No parameter is used.</p>
+
+  <p><code>POSTERIZE</code>
+
+  Limits the number of colors in the image. Each color channel is limited to
+
+  the number of colors specified. Values between 2 and 255 are valid, but
+
+  results are most noticeable with lower values. The default value is 4.</p>
+
+  <p><code>BLUR</code>
+
+  Blurs the image. The level of blurring is specified by a blur radius. Larger
+
+  values increase the blur. The default value is 4. A gaussian blur is used
+
+  in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>
+
+  <p><code>ERODE</code>
+
+  Reduces the light areas. No parameter is used.</p>
+
+  <p><code>DILATE</code>
+
+  Increases the light areas. No parameter is used.</p>
+
+  <p><code>filter()</code> uses WebGL in the background by default because it's
+  faster.
+
+  This can be disabled in <code>P2D</code> mode by adding a <code>false</code>
+  argument, as in
+
+  <code>filter(BLUR, false)</code>. This may be useful to keep computation off
+  the GPU
+
+  or to work around a lack of WebGL support.</p>
+
+  <p>In WebgL mode, <code>filter()</code> can also use custom shaders. See
+
+  <a href="/reference/p5/createFilterShader/">createFilterShader()</a> for more
+
+  information.</p>
+line: 442
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the INVERT filter.
+      filter(INVERT);
+
+      describe('A blue brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the GRAY filter.
+      filter(GRAY);
+
+      describe('A brick wall drawn in grayscale.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the THRESHOLD filter.
+      filter(THRESHOLD);
+
+      describe('A brick wall drawn in black and white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the OPAQUE filter.
+      filter(OPAQUE);
+
+      describe('A red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the POSTERIZE filter.
+      filter(POSTERIZE, 3);
+
+      describe('An image of a red brick wall drawn with limited color palette.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the BLUR filter.
+      filter(BLUR, 3);
+
+      describe('A blurry image of a red brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the DILATE filter.
+      filter(DILATE);
+
+      describe('A red brick wall with bright lines between each brick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the ERODE filter.
+      filter(ERODE);
+
+      describe('A red brick wall with faint lines between each brick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Apply the BLUR filter.
+      // Don't use WebGL.
+      filter(BLUR, 3, false);
+
+      describe('A blurry image of a red brick wall.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 442
+    params:
+      - name: filterType
+        description: |
+          <p>either THRESHOLD, GRAY, OPAQUE, INVERT,
+                                         POSTERIZE, BLUR, ERODE, DILATE or BLUR.</p>
+        type: Constant
+      - name: filterParam
+        description: |
+          <p>parameter unique to each filter.</p>
+        type: Number
+        optional: true
+      - name: useWebGL
+        description: |
+          <p>flag to control whether to use fast
+                                         WebGL filters (GPU) or original image
+                                         filters (CPU); defaults to <code>true</code>.</p>
+        type: Boolean
+        optional: true
+  - line: 715
+    params:
+      - name: filterType
+        description: ''
+        type: Constant
+      - name: useWebGL
+        description: ''
+        type: Boolean
+        optional: true
+  - line: 720
+    params:
+      - name: shaderFilter
+        description: |
+          <p>shader that's been loaded, with the
+                                            frag shader using a <code>tex0</code> uniform.</p>
+        type: p5.Shader
+chainable: false
+---
+
+
+# filter
diff --git a/src/content/reference/en/p5 copy/float.mdx b/src/content/reference/en/p5 copy/float.mdx
new file mode 100644
index 0000000000..fffd6bfc1b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/float.mdx	
@@ -0,0 +1,116 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L10
+title: float
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>String</code> to a floating point (decimal)
+  <code>Number</code>.</p>
+
+  <p><code>float()</code> converts strings that resemble numbers, such as
+  <code>'12.34'</code>, into
+
+  numbers.</p>
+
+  <p>The parameter, <code>str</code>, is the string value to convert. For
+  example, calling
+
+  <code>float('12.34')</code> returns the number <code>12.34</code>.  If an
+  array of strings is
+
+  passed, as in <code>float(['12.34', '56.78'])</code>, then an array of numbers
+  will be
+
+  returned.</p>
+
+  <p>Note: If a string can't be converted to a number, as in
+  <code>float('giraffe')</code>,
+
+  then the value <code>NaN</code> (not a number) will be returned.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '12.3';
+
+      // Convert the string to a number.
+      let converted = float(original);
+
+      // Double the converted value.
+      let twice = converted * 2;
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(12);
+
+      // Display the original and converted values.
+      text(`${original} × 2 = ${twice}`, 50, 50);
+
+      describe('The text "12.3 × 2 = 24.6" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let original = ['60', '30', '15'];
+
+      // Convert the strings to numbers.
+      let diameters = float(original);
+
+      for (let d of diameters) {
+        // Draw a circle.
+        circle(50, 50, d);
+      }
+
+      describe('Three white, concentric circles on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 10
+    params:
+      - name: str
+        description: |
+          <p>string to convert.</p>
+        type: String
+    return:
+      description: converted number.
+      type: Number
+  - line: 80
+    params:
+      - name: ns
+        description: |
+          <p>array of strings to convert.</p>
+        type: 'String[]'
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# float
diff --git a/src/content/reference/en/p5 copy/floor.mdx b/src/content/reference/en/p5 copy/floor.mdx
new file mode 100644
index 0000000000..a9e97965a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/floor.mdx	
@@ -0,0 +1,57 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L294
+title: floor
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the closest integer value that is less than or equal to the
+  value of a number.</p>
+line: 294
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use RGB color with values from 0 to 1.
+      colorMode(RGB, 1);
+
+      noStroke();
+
+      // Draw the left rectangle.
+      let r = 0.8;
+      fill(r, 0, 0);
+      rect(0, 0, 50, 100);
+
+      // Round r down to 0.
+      r = floor(r);
+
+      // Draw the right rectangle.
+      fill(r, 0, 0);
+      rect(50, 0, 50, 100);
+
+      describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to round down.</p>
+    type: Number
+return:
+  description: rounded down number.
+  type: Integer
+chainable: false
+---
+
+
+# floor
diff --git a/src/content/reference/en/p5 copy/focused.mdx b/src/content/reference/en/p5 copy/focused.mdx
new file mode 100644
index 0000000000..1e95f25927
--- /dev/null
+++ b/src/content/reference/en/p5 copy/focused.mdx	
@@ -0,0 +1,50 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L174
+title: focused
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Boolean</code> variable that's <code>true</code> if the browser is
+  focused and <code>false</code> if
+
+  not.</p>
+
+  <p>Note: The browser window can only receive input if it's focused.</p>
+line: 174
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Open this example in two separate browser
+    // windows placed side-by-side to demonstrate.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A square changes color from green to red when the browser window is out of focus.');
+    }
+
+    function draw() {
+      // Change the background color
+      // when the browser window
+      // goes in/out of focus.
+      if (focused === true) {
+        background(0, 255, 0);
+      } else {
+        background(255, 0, 0);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# focused
diff --git a/src/content/reference/en/p5 copy/for.mdx b/src/content/reference/en/p5 copy/for.mdx
new file mode 100644
index 0000000000..dc71d1c2ca
--- /dev/null
+++ b/src/content/reference/en/p5 copy/for.mdx	
@@ -0,0 +1,290 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1648
+title: for
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A way to repeat a block of code when the number of iterations is known.</p>
+
+  <p><code>for</code> loops are helpful for repeating statements a certain
+  number of times.
+
+  For example, a <code>for</code> loop makes it easy to express the idea
+
+  "draw five lines" like so:</p>
+
+  <pre><code class="language-js">for (let x = 10; x < 100; x += 20) {
+    line(x, 25, x, 75);
+  }
+
+  </code></pre>
+
+  <p>The loop's header begins with the keyword <code>for</code>. Loops generally
+  count up
+
+  or count down as they repeat, or iterate. The statements in parentheses
+
+  <code>let x = 10; x < 100; x += 20</code> tell the loop how it should
+  repeat:</p>
+
+  <ul>
+
+  <li><code>let x = 10</code> tells the loop to start counting at
+  <code>10</code> and keep track of iterations using the variable
+  <code>x</code>.</li>
+
+  <li><code>x < 100</code> tells the loop to count up to, but not including,
+  <code>100</code>.</li>
+
+  <li><code>x += 20</code>  tells the loop to count up by <code>20</code> at the
+  end of each iteration.</li>
+
+  </ul>
+
+  <p>The code between the curly braces <code>{}</code> is the loop's body.
+  Statements in the
+
+  loop body are repeated during each iteration of the loop.</p>
+
+  <p>It's common to create infinite loops accidentally. When this happens,
+
+  sketches may become unresponsive and the web browser may display a warning.
+
+  For example, the following loop never stops iterating because it doesn't
+
+  count up:</p>
+
+  <pre><code class="language-js">for (let x = 10; x < 100; x = 20) {
+    line(x, 25, x, 75);
+  }
+
+  </code></pre>
+
+  <p>The statement <code>x = 20</code> keeps the variable <code>x</code> stuck
+  at <code>20</code>, which is
+
+  always less than <code>100</code>.</p>
+
+  <p><code>for</code> loops can also count down:</p>
+
+  <pre><code class="language-js">for (let d = 100; d > 0; d -= 10) {
+    circle(50, 50, d);
+  }
+
+  </code></pre>
+
+  <p><code>for</code> loops can also contain other loops. The following nested
+  loop draws a
+
+  grid of points:</p>
+
+  <pre><code class="language-js">// Loop from left to right.
+
+  for (let x = 10; x < 100; x += 10) {
+
+    // Loop from top to bottom.
+    for (let y = 10; y < 100; y += 10) {
+      point(x, y);
+    }
+
+  }
+
+  </code></pre>
+
+  <p><code>for</code> loops are also helpful for iterating through the elements
+  of an
+
+  array. For example, it's common to iterate through an array that contains
+
+  information about where or what to draw:</p>
+
+  <pre><code class="language-js">// Create an array of x-coordinates.
+
+  let xCoordinates = [20, 40, 60];
+
+
+  for (let i = 0; i < xCoordinates.length; i += 1) {
+    // Update the element.
+    xCoordinates[i] += random(-1, 1);
+
+    // Draw a circle.
+    circle(xCoordinates[i], 50, 20);
+  }
+
+  </code></pre>
+
+  <p>If the array's values aren't modified, the <code>for...of</code> statement
+  can
+
+  simplify the code. They're similar to <code>for</code> loops in Python and
+  <code>for-each</code>
+
+  loops in C++ and Java. The following loops have the same effect:</p>
+
+  <pre><code class="language-js">// Draw circles with a for loop.
+
+  let xCoordinates = [20, 40, 60];
+
+
+  for (let i = 0; i < xCoordinates.length; i += 1) {
+    circle(xCoordinates[i], 50, 20);
+  }
+
+  </code></pre>
+
+  <pre><code class="language-js">// Draw circles with a for...of statement.
+
+  let xCoordinates = [20, 40, 60];
+
+
+  for (let x of xCoordinates) {
+    circle(x, 50, 20);
+  }
+
+  </code></pre>
+
+  <p>In the code snippets above, the variables <code>i</code> and <code>x</code>
+  have different roles.</p>
+
+  <p>In the first snippet, <code>i</code> counts from <code>0</code> up to
+  <code>2</code>, which is one less than
+
+  <code>xCoordinates.length</code>. <code>i</code> is used to access the element
+  in <code>xCoordinates</code>
+
+  at index <code>i</code>.</p>
+
+  <p>In the second code snippet, <code>x</code> isn't keeping track of the
+  loop's progress
+
+  or an index. During each iteration, <code>x</code> contains the next element
+  of
+
+  <code>xCoordinates</code>. <code>x</code> starts from the beginning of
+  <code>xCoordinates</code> (<code>20</code>) and
+
+  updates its value to <code>40</code> and then <code>60</code> during the next
+  iterations.</p>
+line: 1648
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Five black vertical lines on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw vertical lines using a loop.
+      for (let x = 10; x < 100; x += 20) {
+        line(x, 25, x, 75);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Five white concentric circles drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw concentric circles using a loop.
+      for (let d = 100; d > 0; d -= 20) {
+        circle(50, 50, d);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A grid of black dots on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the spacing for points on the grid.
+      let space = 10;
+
+      // Increase the stroke weight.
+      strokeWeight(3);
+
+      // Loop from the left to the right.
+      for (let x = space; x < 100; x += space) {
+        // Loop from the top to the bottom.
+        for (let y = space; y < 100; y += space) {
+          point(x, y);
+        }
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable xCoordinates and assign it an array of numbers.
+    let xCoordinates = [20, 40, 60, 80];
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the element at index i and use it to draw a circle.
+      for (let i = 0; i < xCoordinates.length; i += 1) {
+        circle(xCoordinates[i], 50, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable xCoordinates and assign it an array of numbers.
+    let xCoordinates = [20, 40, 60, 80];
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access each element of the array and use it to draw a circle.
+      for (let x of xCoordinates) {
+        circle(x, 50, 20);
+      }
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# for
diff --git a/src/content/reference/en/p5 copy/fract.mdx b/src/content/reference/en/p5 copy/fract.mdx
new file mode 100644
index 0000000000..399f144c09
--- /dev/null
+++ b/src/content/reference/en/p5 copy/fract.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L1048
+title: fract
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates the fractional part of a number.</p>
+  <p>A number's fractional part includes its decimal values. For example,
+  <code>fract(12.34)</code> returns 0.34.</p>
+line: 1048
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Original number.
+      let n = 56.78;
+      text(n, 50, 33);
+
+      // Fractional part.
+      let f = fract(n);
+      text(f, 50, 67);
+
+      describe('The number 56.78 written above the number 0.78.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number whose fractional part will be found.</p>
+    type: Number
+return:
+  description: fractional part of n.
+  type: Number
+chainable: false
+---
+
+
+# fract
diff --git a/src/content/reference/en/p5 copy/frameCount.mdx b/src/content/reference/en/p5 copy/frameCount.mdx
new file mode 100644
index 0000000000..f2d02603a0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/frameCount.mdx	
@@ -0,0 +1,73 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L69
+title: frameCount
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that tracks the number of frames drawn since
+  the sketch
+
+  started.</p>
+
+  <p><code>frameCount</code>'s value is 0 inside <a
+  href="/reference/p5/setup/">setup()</a>. It
+
+  increments by 1 each time the code in <a href="/reference/p5/draw/">draw()</a>
+
+  finishes executing.</p>
+line: 69
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the value of
+      // frameCount.
+      textSize(30);
+      textAlign(CENTER, CENTER);
+      text(frameCount, 50, 50);
+
+      describe('The number 0 written in black in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Set the frameRate to 30.
+      frameRate(30);
+
+      textSize(30);
+      textAlign(CENTER, CENTER);
+
+      describe('A number written in black in the middle of a gray square. Its value increases rapidly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display the value of
+      // frameCount.
+      text(frameCount, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Integer
+---
+
+
+# frameCount
diff --git a/src/content/reference/en/p5 copy/frameRate.mdx b/src/content/reference/en/p5 copy/frameRate.mdx
new file mode 100644
index 0000000000..38ccddd0d6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/frameRate.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L330
+title: frameRate
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Sets the number of frames to draw per second.</p>
+
+  <p>Calling <code>frameRate()</code> with one numeric argument, as in
+  <code>frameRate(30)</code>,
+
+  attempts to draw 30 frames per second (FPS). The target frame rate may not
+
+  be achieved depending on the sketch's processing needs. Most computers
+
+  default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
+
+  fast enough for smooth animations.</p>
+
+  <p>Calling <code>frameRate()</code> without an argument returns the current
+  frame rate.
+
+  The value returned is an approximation.</p>
+line: 330
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the x variable based
+      // on the current frameCount.
+      let x = frameCount % 100;
+
+      // If the mouse is pressed,
+      // decrease the frame rate.
+      if (mouseIsPressed === true) {
+        frameRate(10);
+      } else {
+        frameRate(60);
+      }
+
+      // Use x to set the circle's
+      // position.
+      circle(x, 50, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the mouse is pressed, do lots
+      // of math to slow down drawing.
+      if (mouseIsPressed === true) {
+        for (let i = 0; i < 1000000; i += 1) {
+          random();
+        }
+      }
+
+      // Get the current frame rate
+      // and display it.
+      let fps = frameRate();
+      text(fps, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 330
+    params:
+      - name: fps
+        description: |
+          <p>number of frames to draw per second.</p>
+        type: Number
+    chainable: 1
+  - line: 404
+    params: []
+    return:
+      description: current frame rate.
+      type: Number
+chainable: true
+---
+
+
+# frameRate
diff --git a/src/content/reference/en/p5 copy/freeGeometry.mdx b/src/content/reference/en/p5 copy/freeGeometry.mdx
new file mode 100644
index 0000000000..7af36d8620
--- /dev/null
+++ b/src/content/reference/en/p5 copy/freeGeometry.mdx	
@@ -0,0 +1,152 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L748
+title: freeGeometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Clears a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object from
+  the graphics
+
+  processing unit (GPU) memory.</p>
+
+  <p><a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can contain
+  lots of data
+
+  about their vertices, surface normals, colors, and so on. Complex 3D shapes
+
+  can use lots of memory which is a limited resource in many GPUs. Calling
+
+  <code>freeGeometry()</code> can improve performance by freeing a
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object’s resources from
+  GPU memory.
+
+  <code>freeGeometry()</code> works with <a
+  href="/reference/p5/p5.Geometry">p5.Geometry</a> objects
+
+  created with <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a>,
+
+  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, and
+
+  <a href="/reference/p5/loadModel/">loadModel()</a>.</p>
+
+  <p>The parameter, <code>geometry</code>, is the <a
+  href="/reference/p5/p5.Geometry">p5.Geometry</a>
+
+  object to be freed.</p>
+
+  <p>Note: A <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object can
+  still be drawn
+
+  after its resources are cleared from GPU memory. It may take longer to draw
+
+  the first time it’s redrawn.</p>
+
+  <p>Note: <code>freeGeometry()</code> can only be used in WebGL mode.</p>
+line: 748
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Create a p5.Geometry object.
+      beginGeometry();
+      cone();
+      let shape = endGeometry();
+
+      // Draw the shape.
+      model(shape);
+
+      // Free the shape's resources.
+      freeGeometry(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let button;
+    let particles;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a button to reset the particle system.
+      button = createButton('Reset');
+
+      // Call resetModel() when the user presses the button.
+      button.mousePressed(resetModel);
+
+      // Add the original set of particles.
+      resetModel();
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the particles.
+      noStroke();
+
+      // Draw the particles.
+      model(particles);
+    }
+
+    function resetModel() {
+      // If the p5.Geometry object has already been created,
+      // free those resources.
+      if (particles) {
+        freeGeometry(particles);
+      }
+
+      // Create a new p5.Geometry object with random spheres.
+      particles = buildGeometry(createParticles);
+    }
+
+    function createParticles() {
+      for (let i = 0; i < 60; i += 1) {
+        // Calculate random coordinates.
+        let x = randomGaussian(0, 20);
+        let y = randomGaussian(0, 20);
+        let z = randomGaussian(0, 20);
+
+        push();
+        // Translate to the particle's coordinates.
+        translate(x, y, z);
+        // Draw the particle.
+        sphere(5);
+        pop();
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: geometry
+    description: |
+      <p>3D shape whose resources should be freed.</p>
+    type: p5.Geometry
+chainable: false
+---
+
+
+# freeGeometry
diff --git a/src/content/reference/en/p5 copy/freqToMidi.mdx b/src/content/reference/en/p5 copy/freqToMidi.mdx
new file mode 100644
index 0000000000..12c6e1eff9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/freqToMidi.mdx	
@@ -0,0 +1,29 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L825
+title: freqToMidi
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the closest MIDI note value for
+  a given frequency.</p>
+line: 825
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: frequency
+    description: |
+      <p>A freqeuncy, for example, the "A"
+                                 above Middle C is 440Hz</p>
+    type: Number
+return:
+  description: MIDI note value
+  type: Number
+chainable: false
+---
+
+
+# freqToMidi
diff --git a/src/content/reference/en/p5 copy/frustum.mdx b/src/content/reference/en/p5 copy/frustum.mdx
new file mode 100644
index 0000000000..01ffd87883
--- /dev/null
+++ b/src/content/reference/en/p5 copy/frustum.mdx	
@@ -0,0 +1,175 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L522
+title: frustum
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets the frustum of the current camera in a 3D sketch.</p>
+
+  <p>In a frustum projection, shapes that are further from the camera appear
+
+  smaller than shapes that are near the camera. This technique, called
+
+  foreshortening, creates realistic 3D scenes.</p>
+
+  <p><code>frustum()</code> changes the default camera’s perspective by changing
+  its
+
+  viewing frustum. The frustum is the volume of space that’s visible to the
+
+  camera. The frustum’s shape is a pyramid with its top cut off. The camera
+
+  is placed where the top of the pyramid should be and points towards the
+
+  base of the pyramid. It views everything within the frustum.</p>
+
+  <p>The first four parameters, <code>left</code>, <code>right</code>,
+  <code>bottom</code>, and <code>top</code>, set the
+
+  coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+  <code>frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
+  wide
+
+  and 400 pixels tall. By default, these coordinates are set based on the
+
+  sketch’s width and height, as in
+
+  <code>ortho(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>
+
+  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
+  distance of the
+
+  frustum’s near and far plane from the camera. For example, calling
+
+  <code>ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s
+  200 pixels
+
+  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
+
+  pixels from the camera. By default, near is set to <code>0.1 * 800</code>,
+  which is
+
+  1/10th the default distance between the camera and the origin.
+  <code>far</code> is set
+
+  to <code>10 * 800</code>, which is 10 times the default distance between the
+  camera
+
+  and the origin.</p>
+
+  <p>Note: <code>frustum()</code> can only be used in WebGL mode.</p>
+line: 522
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A row of white cubes on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Apply the default frustum projection.
+      frustum();
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust the frustum.
+      // Center it.
+      // Set its width and height to 20 pixels.
+      // Place its near plane 300 pixels from the camera.
+      // Place its far plane 350 pixels from the camera.
+      frustum(-10, 10, -10, 10, 300, 350);
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: left
+    description: >
+      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: right
+    description: >
+      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: bottom
+    description: >
+      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: top
+    description: >
+      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
+      20</code>.</p>
+    type: Number
+    optional: true
+  - name: near
+    description: >
+      <p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
+      800</code>.</p>
+    type: Number
+    optional: true
+  - name: far
+    description: >
+      <p>z-coordinate of the frustum’s far plane. Defaults to <code>10 *
+      800</code>.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# frustum
diff --git a/src/content/reference/en/p5 copy/fullscreen.mdx b/src/content/reference/en/p5 copy/fullscreen.mdx
new file mode 100644
index 0000000000..1c6b2eb7fe
--- /dev/null
+++ b/src/content/reference/en/p5 copy/fullscreen.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L950
+title: fullscreen
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Toggles full-screen mode or returns the current mode.</p>
+
+  <p>Calling <code>fullscreen(true)</code> makes the sketch full-screen. Calling
+
+  <code>fullscreen(false)</code> makes the sketch its original size.</p>
+
+  <p>Calling <code>fullscreen()</code> without an argument returns
+  <code>true</code> if the sketch
+
+  is in full-screen mode and <code>false</code> if not.</p>
+
+  <p>Note: Due to browser restrictions, <code>fullscreen()</code> can only be
+  called with
+
+  user input such as a mouse press.</p>
+line: 950
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      describe('A gray canvas that switches between default and full-screen display when clicked.');
+    }
+
+    // If the mouse is pressed,
+    // toggle full-screen mode.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        let fs = fullscreen();
+        fullscreen(!fs);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: val
+    description: |
+      <p>whether the sketch should be in fullscreen mode.</p>
+    type: Boolean
+    optional: true
+return:
+  description: current fullscreen state.
+  type: Boolean
+chainable: false
+---
+
+
+# fullscreen
diff --git a/src/content/reference/en/p5 copy/function.mdx b/src/content/reference/en/p5 copy/function.mdx
new file mode 100644
index 0000000000..e213633c86
--- /dev/null
+++ b/src/content/reference/en/p5 copy/function.mdx	
@@ -0,0 +1,19 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L317
+title: function
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions/\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();\n</code></pre>\n<p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n</code></pre>\n<p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code></pre>\n<p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n  let answer = 2 * x;\n  return answer;\n}\n</code></pre>\n<p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n</code></pre>\n"
+line: 317
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function.\n  drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function and pass values for\n  // its position and size.\n  drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('The message \"Hello, \U0001F30D!\" written on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Create a greeting.\n  let greeting = createGreeting('\U0001F30D');\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(16);\n\n  // Display the greeting.\n  text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n  let message = `Hello, ${name}!`;\n  return message;\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# function
diff --git a/src/content/reference/en/p5 copy/get.mdx b/src/content/reference/en/p5 copy/get.mdx
new file mode 100644
index 0000000000..42cbb8e7f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/get.mdx	
@@ -0,0 +1,178 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L820
+title: get
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Gets a pixel or a region of pixels from the canvas.</p>
+
+  <p><code>get()</code> is easy to use but it's not as fast as
+
+  <a href="/reference/p5/pixels/">pixels</a>. Use <a
+  href="/reference/p5/pixels/">pixels</a>
+
+  to read many pixel values.</p>
+
+  <p>The version of <code>get()</code> with no parameters returns the entire
+  canvas.</p>
+
+  <p>The version of <code>get()</code> with two parameters interprets them as
+
+  coordinates. It returns an array with the <code>[R, G, B, A]</code> values of
+  the
+
+  pixel at the given point.</p>
+
+  <p>The version of <code>get()</code> with four parameters interprets them as
+  coordinates
+
+  and dimensions. It returns a subsection of the canvas as a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two parameters
+  are the
+
+  coordinates for the upper-left corner of the subsection. The last two
+
+  parameters are the width and height of the subsection.</p>
+
+  <p>Use <a href="/reference/p5.Image/get/">p5.Image.get()</a> to work directly
+  with
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> objects.</p>
+line: 820
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Get the entire canvas.
+      let c = get();
+
+      // Display half the canvas.
+      image(c, 50, 0);
+
+      describe('Two identical mountain landscapes shown side-by-side.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Get the color of a pixel.
+      let c = get(50, 90);
+
+      // Style the square with the pixel's color.
+      fill(c);
+      noStroke();
+
+      // Display the square.
+      square(25, 25, 50);
+
+      describe('A mountain landscape with an olive green square in its center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      // Get a region of the image.
+      let c = get(0, 0, 50, 50);
+
+      // Display the region.
+      image(c, 50, 50);
+
+      describe('A mountain landscape drawn on top of another mountain landscape.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+overloads:
+  - line: 820
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the pixel.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the pixel.</p>
+        type: Number
+      - name: w
+        description: |
+          <p>width of the subsection to be returned.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>height of the subsection to be returned.</p>
+        type: Number
+    return:
+      description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
+      type: p5.Image
+  - line: 931
+    params: []
+    return:
+      description: whole canvas as a <a href="#/p5.Image">p5.Image</a>.
+      type: p5.Image
+  - line: 935
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+    return:
+      description: 'color of the pixel at (x, y) in array format `[R, G, B, A]`.'
+      type: 'Number[]'
+chainable: false
+---
+
+
+# get
diff --git a/src/content/reference/en/p5 copy/getAudioContext.mdx b/src/content/reference/en/p5 copy/getAudioContext.mdx
new file mode 100644
index 0000000000..c7291c5cdf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getAudioContext.mdx	
@@ -0,0 +1,56 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L159
+title: getAudioContext
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >-
+  <p>Returns the Audio Context for this sketch. Useful for users
+
+  who would like to dig deeper into the <a target="_blank"
+  href="http://webaudio.github.io/web-audio-api/">Web Audio API
+
+  </a>.</p>
+
+
+  <p>Some browsers require users to startAudioContext
+
+  with a user gesture, such as touchStarted in the example below.</p>
+line: 159
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+     function draw() {
+       background(255);
+       textAlign(CENTER);
+
+       if (getAudioContext().state !== 'running') {
+         text('click to start audio', width/2, height/2);
+       } else {
+         text('audio is enabled', width/2, height/2);
+       }
+     }
+
+     function touchStarted() {
+       if (getAudioContext().state !== 'running') {
+         getAudioContext().resume();
+       }
+       var synth = new p5.MonoSynth();
+       synth.play('A4', 0.5, 0, 0.2);
+     }
+
+    </div></code>
+class: p5
+return:
+  description: AudioContext for this sketch
+  type: Object
+chainable: false
+---
+
+
+# getAudioContext
diff --git a/src/content/reference/en/p5 copy/getItem.mdx b/src/content/reference/en/p5 copy/getItem.mdx
new file mode 100644
index 0000000000..5747f67366
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getItem.mdx	
@@ -0,0 +1,151 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L164
+title: getItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Returns a value in the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs.</p>
+
+  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
+  values in
+
+  <code>localStorage</code> and <code>getItem()</code> makes it easy to retrieve
+  them.</p>
+
+  <p>The first parameter, <code>key</code>, is the name of the value to be
+  stored as a
+
+  string.</p>
+
+  <p>The second parameter, <code>value</code>, is the value to be retrieved a
+  string. For
+
+  example, calling <code>getItem('size')</code> retrieves the value with the key
+  <code>size</code>.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 164
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe('The text "Feist: 1234" written in black on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an object.
+      let p = { x: 50, y: 50 };
+
+      // Store the object.
+      storeItem('position', p);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let p = getItem('position');
+
+      // Draw the circle.
+      circle(p.x, p.y, 30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let c = color('deeppink');
+
+      // Store the object.
+      storeItem('color', c);
+
+      describe('A pink circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let c = getItem('color');
+
+      // Style the circle.
+      fill(c);
+
+      // Draw the circle.
+      circle(50, 50, 30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: key
+    description: |
+      <p>name of the value.</p>
+    type: String
+return:
+  description: stored item.
+  type: String|Number|Boolean|Object|Array
+chainable: false
+---
+
+
+# getItem
diff --git a/src/content/reference/en/p5 copy/getOutputVolume.mdx b/src/content/reference/en/p5 copy/getOutputVolume.mdx
new file mode 100644
index 0000000000..6542c5edb6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getOutputVolume.mdx	
@@ -0,0 +1,25 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L726
+title: getOutputVolume
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a number representing the output volume for sound
+  in this sketch.</p>
+line: 726
+isConstructor: false
+itemtype: method
+class: p5
+return:
+  description: |-
+    Output volume for sound in this sketch.
+                     Should be between 0.0 (silence) and 1.0.
+  type: Number
+chainable: false
+---
+
+
+# getOutputVolume
diff --git a/src/content/reference/en/p5 copy/getTargetFrameRate.mdx b/src/content/reference/en/p5 copy/getTargetFrameRate.mdx
new file mode 100644
index 0000000000..10e3c74a4b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getTargetFrameRate.mdx	
@@ -0,0 +1,48 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L447
+title: getTargetFrameRate
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Returns the target frame rate.</p>
+  <p>The value is either the system frame rate or the last value passed to
+  <a href="/reference/p5/frameRate/">frameRate()</a>.</p>
+line: 447
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('The number 20 written in black on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the frame rate to 20.
+      frameRate(20);
+
+      // Get the target frame rate and
+      // display it.
+      let fps = getTargetFrameRate();
+      text(fps, 43, 54);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: _targetFrameRate
+  type: Number
+chainable: false
+---
+
+
+# getTargetFrameRate
diff --git a/src/content/reference/en/p5 copy/getURL.mdx b/src/content/reference/en/p5 copy/getURL.mdx
new file mode 100644
index 0000000000..01ccdc8e11
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getURL.mdx	
@@ -0,0 +1,46 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1149
+title: getURL
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the sketch's current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/"
+  target="_blank">URL</a>
+
+  as a <code>String</code>.</p>
+line: 1149
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL
+      // and display it.
+      let url = getURL();
+      textWrap(CHAR);
+      text(url, 0, 40, 100);
+
+      describe('The URL "https://p5js.org/reference/p5/getURL" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: url
+  type: String
+chainable: false
+---
+
+
+# getURL
diff --git a/src/content/reference/en/p5 copy/getURLParams.mdx b/src/content/reference/en/p5 copy/getURLParams.mdx
new file mode 100644
index 0000000000..c08c77f23f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getURLParams.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1208
+title: getURLParams
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters"
+  target="_blank">URL parameters</a>
+
+  in an <code>Object</code>.</p>
+
+  <p>For example, calling <code>getURLParams()</code> in a sketch hosted at the
+  URL
+
+  <code>https://p5js.org?year=2014&month=May&day=15</code> returns
+
+  <code>{ year: 2014, month: 'May', day: 15 }</code>.</p>
+line: 1208
+isConstructor: false
+itemtype: method
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class='norender notest'>
+    <code>
+    // Imagine this sketch is hosted at the following URL:
+    // https://p5js.org?year=2014&month=May&day=15
+
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL
+      // parameters and display
+      // them.
+      let params = getURLParams();
+      text(params.day, 10, 20);
+      text(params.month, 10, 40);
+      text(params.year, 10, 60);
+
+      describe('The text "15", "May", and "2014" written in black on separate lines.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: URL params
+  type: Object
+chainable: false
+---
+
+
+# getURLParams
diff --git a/src/content/reference/en/p5 copy/getURLPath.mdx b/src/content/reference/en/p5 copy/getURLPath.mdx
new file mode 100644
index 0000000000..e71b7746ad
--- /dev/null
+++ b/src/content/reference/en/p5 copy/getURLPath.mdx	
@@ -0,0 +1,58 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1175
+title: getURLPath
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Returns the current
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource"
+  target="_blank">URL</a>
+
+  path as an <code>Array</code> of <code>String</code>s.</p>
+
+  <p>For example, consider a sketch hosted at the URL
+
+  <code>https://example.com/sketchbook</code>. Calling <code>getURLPath()</code>
+  returns
+
+  <code>['sketchbook']</code>. For a sketch hosted at the URL
+
+  <code>https://example.com/sketchbook/monday</code>, <code>getURLPath()</code>
+  returns
+
+  <code>['sketchbook', 'monday']</code>.</p>
+line: 1175
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Get the sketch's URL path
+      // and display the first
+      // part.
+      let path = getURLPath();
+      text(path[0], 25, 54);
+
+      describe('The word "reference" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: path components.
+  type: 'String[]'
+chainable: false
+---
+
+
+# getURLPath
diff --git a/src/content/reference/en/p5 copy/green.mdx b/src/content/reference/en/p5 copy/green.mdx
new file mode 100644
index 0000000000..72634492fb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/green.mdx	
@@ -0,0 +1,159 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L692
+title: green
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the green value of a color.</p>
+
+  <p><code>green()</code> extracts the green value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>green()</code> returns a color's green value in the range
+  0
+
+  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  RGB, it
+
+  returns the green value in the given range.</p>
+line: 692
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let c = color(175, 100, 220);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 100.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [175, 100, 220];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 100.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgb(175, 100, 220)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 100.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Create a p5.Color object using RGB values.
+      let c = color(69, 39, 86);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'greenValue' to 39.
+      let greenValue = green(c);
+
+      // Draw the right rectangle.
+      fill(0, greenValue, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is dark green.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the green value.
+  type: Number
+chainable: false
+---
+
+
+# green
diff --git a/src/content/reference/en/p5 copy/gridOutput.mdx b/src/content/reference/en/p5 copy/gridOutput.mdx
new file mode 100644
index 0000000000..c80c3efaf2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/gridOutput.mdx	
@@ -0,0 +1,189 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L161
+title: gridOutput
+module: Environment
+submodule: Environment
+file: src/accessibility/outputs.js
+description: >
+  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
+
+  <p><code>gridOutput()</code> adds a general description, table of shapes, and
+  list of
+
+  shapes to the web page. The general description includes the canvas size,
+
+  canvas color, and number of shapes. For example,
+
+  <code>gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1
+  square</code>.</p>
+
+  <p><code>gridOutput()</code> uses its table of shapes as a grid. Each shape in
+  the grid
+
+  is placed in a cell whose row and column correspond to the shape's location
+
+  on the canvas. The grid cells describe the color and type of shape at that
+
+  location. For example, <code>red circle</code>. These descriptions can be
+  selected
+
+  individually to get more details. This is different from
+
+  <a href="/reference/p5/textOutput/">textOutput()</a>, which uses its table as
+  a list.</p>
+
+  <p>A list of shapes follows the table. The list describes the color, type,
+
+  location, and area of each shape. For example,
+
+  <code>red circle, location = middle, area = 3 %</code>.</p>
+
+  <p>The <code>display</code> parameter is optional. It determines how the
+  description is
+
+  displayed. If <code>LABEL</code> is passed, as in
+  <code>gridOutput(LABEL)</code>, the description
+
+  will be visible in a div element next to the canvas. Using <code>LABEL</code>
+  creates
+
+  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
+
+  development. If <code>FALLBACK</code> is passed, as in
+  <code>gridOutput(FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+
+  <p><code>gridOutput()</code> generates descriptions in English only. Text
+  drawn with
+
+  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
+  mode
+
+  and 3D shapes are not supported.</p>
+
+  <p>Use <a href="/reference/p5/describe/">describe()</a> and
+
+  <a href="/reference/p5/describeElement/">describeElement()</a> for more
+  control
+
+  over canvas descriptions.</p>
+line: 161
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Add the grid description.
+      gridOutput();
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Add the grid description and
+      // display it for debugging.
+      gridOutput(LABEL);
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the grid description.
+      gridOutput();
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the grid description and
+      // display it for debugging.
+      gridOutput(LABEL);
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: display
+    description: |
+      <p>either FALLBACK or LABEL.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# gridOutput
diff --git a/src/content/reference/en/p5 copy/height.mdx b/src/content/reference/en/p5 copy/height.mdx
new file mode 100644
index 0000000000..f6321218df
--- /dev/null
+++ b/src/content/reference/en/p5 copy/height.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L881
+title: height
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the height of the canvas in
+  pixels.</p>
+
+  <p><code>height</code>'s default value is 100. Calling
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
+
+  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
+
+  <code>height</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
+  sets its value to
+
+  0.</p>
+line: 881
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 54);
+
+      describe('The number 100 written in black on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 50);
+
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 27);
+
+      describe('The number 50 written in black on a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the canvas' height.
+      text(height, 42, 54);
+
+      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+    }
+
+    // If the mouse is pressed, reisze
+    // the canvas and display its new
+    // height.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        resizeCanvas(100, 50);
+        background(200);
+        text(height, 42, 27);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# height
diff --git a/src/content/reference/en/p5 copy/hex.mdx b/src/content/reference/en/p5 copy/hex.mdx
new file mode 100644
index 0000000000..5475af324a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/hex.mdx	
@@ -0,0 +1,166 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L818
+title: hex
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Number</code> to a <code>String</code> with its
+  hexadecimal value.</p>
+
+  <p><code>hex()</code> converts a number to a string with its hexadecimal
+  number value.
+
+  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+
+  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+
+  number <code>11</code> (eleven) in base-10 is written as the letter
+  <code>B</code> in hex.</p>
+
+  <p>The first parameter, <code>n</code>, is the number to convert. For example,
+  <code>hex(20)</code>,
+
+  returns the string <code>'00000014'</code>. If an array is passed, as in
+
+  <code>hex([1, 10, 100])</code>, an array of hexadecimal strings is
+  returned.</p>
+
+  <p>The second parameter, <code>digits</code>, is optional. If a number is
+  passed, as in
+
+  <code>hex(20, 2)</code>, it sets the number of hexadecimal digits to display.
+  For
+
+  example, calling <code>hex(20, 2)</code> returns the string
+  <code>'14'</code>.</p>
+line: 818
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 20;
+
+      // Convert the number to a hex string.
+      let converted = hex(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "20 = 00000014" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 20;
+
+      // Convert the number to a hex string.
+      // Only display two hex digits.
+      let converted = hex(original, 2);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "20 = 14" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = [1, 10, 100];
+
+      // Convert the numbers to hex strings.
+      // Only use two hex digits.
+      let converted = hex(original, 2);
+
+      // Style the text.
+      textAlign(RIGHT, CENTER);
+      textSize(16);
+
+      // Iterate over the converted values.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${ original[i]} = ${converted[i]}`, 75, y);
+      }
+
+      describe(
+        'The text "1 = 01", "10 = 0A", and "100 = 64" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted hexadecimal value.
+  type: String
+overloads:
+  - line: 818
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: Number
+      - name: digits
+        description: |
+          <p>number of digits to include.</p>
+        type: Number
+        optional: true
+    return:
+      description: converted hexadecimal value.
+      type: String
+  - line: 926
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: 'Number[]'
+      - name: digits
+        description: ''
+        type: Number
+        optional: true
+    return:
+      description: converted hexadecimal values.
+      type: 'String[]'
+chainable: false
+---
+
+
+# hex
diff --git a/src/content/reference/en/p5 copy/hour.mdx b/src/content/reference/en/p5 copy/hour.mdx
new file mode 100644
index 0000000000..802a809d72
--- /dev/null
+++ b/src/content/reference/en/p5 copy/hour.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L44
+title: hour
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current hour as a number from 0–23.</p>
+line: 44
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current hour.
+      let h = hour();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the hour.
+      text(`Current hour: ${h}`, 20, 50, 60);
+
+      describe(`The text 'Current hour: ${h}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current hour between 0 and 23.
+  type: Integer
+chainable: false
+---
+
+
+# hour
diff --git a/src/content/reference/en/p5 copy/httpDo.mdx b/src/content/reference/en/p5 copy/httpDo.mdx
new file mode 100644
index 0000000000..52d6553248
--- /dev/null
+++ b/src/content/reference/en/p5 copy/httpDo.mdx	
@@ -0,0 +1,150 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1208
+title: httpDo
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text.<br><br>
+
+  For more advanced use, you may also pass in the path as the first argument
+
+  and a object as the second argument, the signature follows the one specified
+
+  in the Fetch API specification.
+
+  This method is suitable for fetching files up to size of 64MB when "GET" is
+  used.</br></br></p>
+line: 1208
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Examples use USGS Earthquake API:
+    // https://earthquake.usgs.gov/fdsnws/event/1/#methods
+
+    // displays an animation of all USGS earthquakes
+    let earthquakes;
+    let eqFeatureIndex = 0;
+
+    function preload() {
+      let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+      httpDo(
+        url,
+        {
+          method: 'GET',
+          // Other Request options, like special headers for apis
+          headers: { authorization: 'Bearer secretKey' }
+        },
+        function(res) {
+          earthquakes = res;
+        }
+      );
+    }
+
+    function draw() {
+      // wait until the data is loaded
+      if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
+        return;
+      }
+      clear();
+
+      let feature = earthquakes.features[eqFeatureIndex];
+      let mag = feature.properties.mag;
+      let rad = mag / 11 * ((width + height) / 2);
+      fill(255, 0, 0, 100);
+      ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
+
+      if (eqFeatureIndex >= earthquakes.features.length) {
+        eqFeatureIndex = 0;
+      } else {
+        eqFeatureIndex += 1;
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+overloads:
+  - line: 1208
+    params:
+      - name: path
+        description: |
+          <p>name of the file or url to load</p>
+        type: String
+      - name: method
+        description: |
+          <p>either "GET", "POST", or "PUT",
+                                             defaults to "GET"</p>
+        type: String
+        optional: true
+      - name: datatype
+        description: |
+          <p>"json", "jsonp", "xml", or "text"</p>
+        type: String
+        optional: true
+      - name: data
+        description: |
+          <p>param data passed sent with request</p>
+        type: Object
+        optional: true
+      - name: callback
+        description: |
+          <p>function to be executed after
+                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+                                             as first argument</p>
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: |
+          <p>function to be executed if
+                                             there is an error, response is passed
+                                             in as first argument</p>
+        type: Function
+        optional: true
+    return:
+      description: |-
+        A promise that resolves with the data when the operation
+                          completes successfully or rejects with the error after
+                          one occurs.
+      type: Promise
+  - line: 1279
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: options
+        description: >
+          <p>Request object options as documented in the
+                                             "fetch" API
+          <a
+          href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API">reference</a></p>
+        type: Object
+      - name: callback
+        description: ''
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+chainable: false
+---
+
+
+# httpDo
diff --git a/src/content/reference/en/p5 copy/httpGet.mdx b/src/content/reference/en/p5 copy/httpGet.mdx
new file mode 100644
index 0000000000..9e8591e059
--- /dev/null
+++ b/src/content/reference/en/p5 copy/httpGet.mdx	
@@ -0,0 +1,140 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1043
+title: httpGet
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP GET request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text. This is equivalent
+  to
+
+  calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
+
+  a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+
+  which can be used to initialize typed arrays (such as Uint8Array).</p>
+line: 1043
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    // Examples use USGS Earthquake API:
+    //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
+    let earthquakes;
+    function preload() {
+      // Get the most recent earthquake in the database
+      let url =
+       'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
+        'format=geojson&limit=1&orderby=time';
+      httpGet(url, 'jsonp', false, function(response) {
+        // when the HTTP request completes, populate the variable that holds the
+        // earthquake data used in the visualization.
+        earthquakes = response;
+      });
+    }
+
+    function draw() {
+      if (!earthquakes) {
+        // Wait until the earthquake data has loaded before drawing.
+        return;
+      }
+      background(200);
+      // Get the magnitude and name of the earthquake out of the loaded JSON
+      let earthquakeMag = earthquakes.features[0].properties.mag;
+      let earthquakeName = earthquakes.features[0].properties.place;
+      ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
+      textAlign(CENTER);
+      text(earthquakeName, 0, height - 30, width, 30);
+      noLoop();
+    }
+    </code></div>
+class: p5
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+overloads:
+  - line: 1043
+    params:
+      - name: path
+        description: |
+          <p>name of the file or url to load</p>
+        type: String
+      - name: datatype
+        description: |
+          <p>"json", "jsonp", "binary", "arrayBuffer",
+                                             "xml", or "text"</p>
+        type: String
+        optional: true
+      - name: data
+        description: |
+          <p>param data passed sent with request</p>
+        type: Object|Boolean
+        optional: true
+      - name: callback
+        description: |
+          <p>function to be executed after
+                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+                                             as first argument</p>
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: |
+          <p>function to be executed if
+                                             there is an error, response is passed
+                                             in as first argument</p>
+        type: Function
+        optional: true
+    return:
+      description: |-
+        A promise that resolves with the data when the operation
+                          completes successfully or rejects with the error after
+                          one occurs.
+      type: Promise
+  - line: 1097
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: data
+        description: ''
+        type: Object|Boolean
+      - name: callback
+        description: ''
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+  - line: 1105
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: callback
+        description: ''
+        type: Function
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+chainable: false
+---
+
+
+# httpGet
diff --git a/src/content/reference/en/p5 copy/httpPost.mdx b/src/content/reference/en/p5 copy/httpPost.mdx
new file mode 100644
index 0000000000..39f4fc75a0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/httpPost.mdx	
@@ -0,0 +1,165 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1119
+title: httpPost
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Method for executing an HTTP POST request. If data type is not specified,
+
+  p5 will try to guess based on the URL, defaulting to text. This is equivalent
+  to
+
+  calling <code>httpDo(path, 'POST')</code>.</p>
+line: 1119
+isConstructor: false
+itemtype: method
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Examples use jsonplaceholder.typicode.com for a Mock Data API
+
+
+    let url = 'https://jsonplaceholder.typicode.com/posts';
+
+    let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very
+    cool.' };
+
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+    }
+
+
+    function mousePressed() {
+      httpPost(url, 'json', postData, function(result) {
+        strokeWeight(2);
+        text(result.body, mouseX, mouseY);
+      });
+    }
+
+    </code>
+
+    </div>
+
+
+    <div><code>
+
+    let url = 'ttps://invalidURL'; // A bad URL that will cause errors
+
+    let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
+
+
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+    }
+
+
+    function mousePressed() {
+      httpPost(
+        url,
+        'json',
+        postData,
+        function(result) {
+          // ... won't be called
+        },
+        function(error) {
+          strokeWeight(2);
+          text(error.toString(), mouseX, mouseY);
+        }
+      );
+    }
+
+    </code></div>
+class: p5
+return:
+  description: |-
+    A promise that resolves with the data when the operation
+                      completes successfully or rejects with the error after
+                      one occurs.
+  type: Promise
+overloads:
+  - line: 1119
+    params:
+      - name: path
+        description: |
+          <p>name of the file or url to load</p>
+        type: String
+      - name: datatype
+        description: |
+          <p>"json", "jsonp", "xml", or "text".
+                                             If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.</p>
+        type: String
+        optional: true
+      - name: data
+        description: |
+          <p>param data passed sent with request</p>
+        type: Object|Boolean
+        optional: true
+      - name: callback
+        description: |
+          <p>function to be executed after
+                                             <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
+                                             as first argument</p>
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: |
+          <p>function to be executed if
+                                             there is an error, response is passed
+                                             in as first argument</p>
+        type: Function
+        optional: true
+    return:
+      description: |-
+        A promise that resolves with the data when the operation
+                          completes successfully or rejects with the error after
+                          one occurs.
+      type: Promise
+  - line: 1186
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: data
+        description: ''
+        type: Object|Boolean
+      - name: callback
+        description: ''
+        type: Function
+        optional: true
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+  - line: 1194
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: callback
+        description: ''
+        type: Function
+      - name: errorCallback
+        description: ''
+        type: Function
+        optional: true
+    return:
+      description: ''
+      type: Promise
+chainable: false
+---
+
+
+# httpPost
diff --git a/src/content/reference/en/p5 copy/hue.mdx b/src/content/reference/en/p5 copy/hue.mdx
new file mode 100644
index 0000000000..6baca2b9ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/hue.mdx	
@@ -0,0 +1,145 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L828
+title: hue
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the hue value of a color.</p>
+
+  <p><code>hue()</code> extracts the hue value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>Hue describes a color's position on the color wheel. By default,
+  <code>hue()</code>
+
+  returns a color's HSL hue in the range 0 to 360. If the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
+  returns the hue
+
+  value in the given mode.</p>
+line: 828
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a p5.Color object.
+      let c = color(0, 50, 100);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 20, 35, 60);
+
+      // Set 'hueValue' to 0.
+      let hueValue = hue(c);
+
+      // Draw the right rectangle.
+      fill(hueValue);
+      rect(50, 20, 35, 60);
+
+      describe(
+        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a color array.
+      let c = [0, 50, 100];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 20, 35, 60);
+
+      // Set 'hueValue' to 0.
+      let hueValue = hue(c);
+
+      // Draw the right rectangle.
+      fill(hueValue);
+      rect(50, 20, 35, 60);
+
+      describe(
+        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 20, 35, 60);
+
+      // Set 'hueValue' to 0.
+      let hueValue = hue(c);
+
+      // Draw the right rectangle.
+      fill(hueValue);
+      rect(50, 20, 35, 60);
+
+      describe(
+        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the hue value.
+  type: Number
+chainable: false
+---
+
+
+# hue
diff --git a/src/content/reference/en/p5 copy/if.mdx b/src/content/reference/en/p5 copy/if.mdx
new file mode 100644
index 0000000000..88228b3ed0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/if.mdx	
@@ -0,0 +1,268 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L110
+title: if
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A way to choose whether to run a block of code.</p>
+
+  <p><code>if</code> statements are helpful for running a block of code based on
+  a
+
+  condition. For example, an <code>if</code> statement makes it easy to express
+  the
+
+  idea "Draw a circle if the mouse is pressed.":</p>
+
+  <pre><code class="language-js">if (mouseIsPressed === true) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>The statement header begins with the keyword <code>if</code>. The
+  expression in
+
+  parentheses <code>mouseIsPressed === true</code> is a <code>Boolean</code>
+  expression that's
+
+  either <code>true</code> or <code>false</code>. The code between the curly
+  braces <code>{}</code> is the if
+
+  statement's body. The body only runs if the <code>Boolean</code> expression is
+  <code>true</code>.</p>
+
+  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
+  variable is
+
+  always <code>true</code> or <code>false</code>, so the code snippet above
+  could also be written
+
+  as follows:</p>
+
+  <pre><code class="language-js">if (mouseIsPressed) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>An <code>if</code>-<code>else</code> statement adds a block of code that
+  runs if the <code>Boolean</code>
+
+  expression is <code>false</code>. For example, here's an
+  <code>if</code>-<code>else</code> statement that
+
+  expresses the idea "Draw a circle if the mouse is pressed. Otherwise,
+
+  display a message.":</p>
+
+  <pre><code class="language-js">if (mouseIsPressed === true) {
+    // When true.
+    circle(mouseX, mouseY, 20);
+  } else {
+    // When false.
+    text('Click me!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>There are two possible paths, or branches, in this code snippet. The
+
+  program must follow one branch or the other.</p>
+
+  <p>An <code>else</code>-<code>if</code> statement makes it possible to add
+  more branches.
+
+  <code>else</code>-<code>if</code> statements run different blocks of code
+  under different
+
+  conditions. For example, an <code>else</code>-<code>if</code> statement makes
+  it easy to express
+
+  the idea "If the mouse is on the left, paint the canvas white. If the mouse
+
+  is in the middle, paint the canvas gray. Otherwise, paint the canvas
+
+  black.":</p>
+
+  <pre><code class="language-js">if (mouseX < 33) {
+    background(255);
+  } else if (mouseX < 67) {
+    background(200);
+  } else {
+    background(0);
+  }
+
+  </code></pre>
+
+  <p><code>if</code> statements can add as many
+  <code>else</code>-<code>if</code> statements as needed. However,
+
+  there can only be one <code>else</code> statement and it must be last.</p>
+
+  <p><code>if</code> statements can also check for multiple conditions at once.
+  For
+
+  example, the <code>Boolean</code> operator <code>&&</code> (AND) checks
+  whether two expressions
+
+  are both <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
+    text('You pressed the "p" key!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
+  message will
+
+  display.</p>
+
+  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
+  least one of two
+
+  expressions is <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
+  true) {
+    text('You did something!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user presses a key, or presses a mouse button, or both, then a
+
+  message will display.</p>
+
+  <p>The body of an <code>if</code> statement can contain another
+  <code>if</code> statement. This is
+
+  called a "nested <code>if</code> statement." For example, nested
+  <code>if</code> statements make
+
+  it easy to express the idea "If a key is pressed, then check if the key is
+
+  <code>'r'</code>. If it is, then set the fill to red.":</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true) {
+    if (key === 'r') {
+      fill('red');
+    }
+  }
+
+  </code></pre>
+
+  <p>See <a href="/reference/p5/Boolean/">Boolean</a> and <a
+  href="/reference/p5/Number/">Number</a>
+
+  to learn more about these data types and the operations they support.</p>
+line: 110
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click the mouse to show the circle.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (mouseIsPressed === true) {
+        circle(mouseX, mouseY, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse to show different shapes.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (mouseIsPressed === true) {
+        circle(50, 50, 20);
+      } else {
+        ellipse(50, 50, 20, 50);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Move the mouse to change the background color.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A square changes color from white to black as the user moves the mouse from left to right.'
+      );
+    }
+
+    function draw() {
+      if (mouseX < 33) {
+        background(255);
+      } else if (mouseX < 67) {
+        background(200);
+      } else {
+        background(0);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle drawn on a gray background. The circle changes color to red when the user presses the "r" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (keyIsPressed === true) {
+        if (key === 'r') {
+          fill('red');
+        }
+      }
+
+      circle(50, 50, 40);
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# if
diff --git a/src/content/reference/en/p5 copy/image.mdx b/src/content/reference/en/p5 copy/image.mdx
new file mode 100644
index 0000000000..9dbd36fd22
--- /dev/null
+++ b/src/content/reference/en/p5 copy/image.mdx	
@@ -0,0 +1,327 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L888
+title: image
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Draws an image to the canvas.</p>
+
+  <p>The first parameter, <code>img</code>, is the source image to be drawn.
+  <code>img</code> can be
+
+  any of the following objects:</p>
+
+  <ul>
+
+  <li><a href="/reference/p5/p5.Image">p5.Image</a></li>
+
+  <li><a href="/reference/p5/p5.Element">p5.Element</a></li>
+
+  <li><a href="/reference/p5/p5.Texture">p5.Texture</a></li>
+
+  <li><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a></li>
+
+  <li><a
+  href="/reference/p5/p5.FramebufferTexture">p5.FramebufferTexture</a></li>
+
+  </ul>
+
+  <p>The second and third parameters, <code>dx</code> and <code>dy</code>, set
+  the coordinates of the
+
+  destination image's top left corner. See
+
+  <a href="/reference/p5/imageMode/">imageMode()</a> for other ways to position
+  images.</p>
+
+  <p>Here's a diagram that explains how optional parameters work in
+  <code>image()</code>:</p>
+
+  <p><img src="/assets/drawImage.png"/></p>
+
+  <p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are
+  optional. They set the
+
+  the width and height to draw the destination image. By default,
+  <code>image()</code>
+
+  draws the full source image at its original size.</p>
+
+  <p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are
+  also optional.
+
+  These coordinates define the top left corner of a subsection to draw from
+
+  the source image.</p>
+
+  <p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are
+  also optional.
+
+  They define the width and height of a subsection to draw from the source
+
+  image. By default, <code>image()</code> draws the full subsection that begins
+  at
+
+  <code>(sx, sy)</code> and extends to the edges of the source image.</p>
+
+  <p>The ninth parameter, <code>fit</code>, is also optional. It enables a
+  subsection of
+
+  the source image to be drawn without affecting its aspect ratio. If
+
+  <code>CONTAIN</code> is passed, the full subsection will appear within the
+  destination
+
+  rectangle. If <code>COVER</code> is passed, the subsection will completely
+  cover the
+
+  destination rectangle. This may have the effect of zooming into the
+
+  subsection.</p>
+
+  <p>The tenth and eleventh parameters, <code>xAlign</code> and
+  <code>yAlign</code>, are also
+
+  optional. They determine how to align the fitted subsection.
+  <code>xAlign</code> can
+
+  be set to either <code>LEFT</code>, <code>RIGHT</code>, or
+  <code>CENTER</code>. <code>yAlign</code> can be set to
+
+  either <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By
+  default, both <code>xAlign</code> and <code>yAlign</code>
+
+  are set to <code>CENTER</code>.</p>
+line: 888
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image.
+      image(img, 10, 10);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image 50x50.
+      image(img, 0, 0, 50, 50);
+
+      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the center of the image.
+      image(img, 25, 25, 50, 50, 25, 25, 50, 50);
+
+      describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/moonwalk.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image and scale it to fit within the canvas.
+      image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
+
+      describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      // Image is 50 x 50 pixels.
+      img = loadImage('/assets/laDefense50.png');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Draw the image and scale it to cover the canvas.
+      image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
+
+      describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 888
+    params:
+      - name: img
+        description: |
+          <p>image to display.</p>
+        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
+      - name: x
+        description: |
+          <p>x-coordinate of the top-left corner of the image.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the top-left corner of the image.</p>
+        type: Number
+      - name: width
+        description: |
+          <p>width to draw the image.</p>
+        type: Number
+        optional: true
+      - name: height
+        description: |
+          <p>height to draw the image.</p>
+        type: Number
+        optional: true
+  - line: 1074
+    params:
+      - name: img
+        description: ''
+        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
+      - name: dx
+        description: |
+          <p>the x-coordinate of the destination
+                                    rectangle in which to draw the source image</p>
+        type: Number
+      - name: dy
+        description: |
+          <p>the y-coordinate of the destination
+                                    rectangle in which to draw the source image</p>
+        type: Number
+      - name: dWidth
+        description: |
+          <p>the width of the destination rectangle</p>
+        type: Number
+      - name: dHeight
+        description: |
+          <p>the height of the destination rectangle</p>
+        type: Number
+      - name: sx
+        description: |
+          <p>the x-coordinate of the subsection of the source
+          image to draw into the destination rectangle</p>
+        type: Number
+      - name: sy
+        description: |
+          <p>the y-coordinate of the subsection of the source
+          image to draw into the destination rectangle</p>
+        type: Number
+      - name: sWidth
+        description: |
+          <p>the width of the subsection of the
+                                    source image to draw into the destination
+                                    rectangle</p>
+        type: Number
+        optional: true
+      - name: sHeight
+        description: |
+          <p>the height of the subsection of the
+                                     source image to draw into the destination rectangle</p>
+        type: Number
+        optional: true
+      - name: fit
+        description: |
+          <p>either CONTAIN or COVER</p>
+        type: Constant
+        optional: true
+      - name: xAlign
+        description: |
+          <p>either LEFT, RIGHT or CENTER default is CENTER</p>
+        type: Constant
+        optional: true
+      - name: yAlign
+        description: |
+          <p>either TOP, BOTTOM or CENTER default is CENTER</p>
+        type: Constant
+        optional: true
+chainable: false
+---
+
+
+# image
diff --git a/src/content/reference/en/p5 copy/imageLight.mdx b/src/content/reference/en/p5 copy/imageLight.mdx
new file mode 100644
index 0000000000..70b001f3e5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/imageLight.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L956
+title: imageLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates an ambient light from an image.</p>
+
+  <p><code>imageLight()</code> simulates a light shining from all directions.
+  The effect is
+
+  like placing the sketch at the center of a giant sphere that uses the image
+
+  as its texture. The image's diffuse light will be affected by
+
+  <a href="/reference/p5/fill/">fill()</a> and the specular reflections will be
+
+  affected by <a href="/reference/p5/specularMaterial/">specularMaterial()</a>
+  and
+
+  <a href="/reference/p5/shininess/">shininess()</a>.</p>
+
+  <p>The parameter, <code>img</code>, is the <a
+  href="/reference/p5/p5.Image">p5.Image</a> object to
+
+  use as the light source.</p>
+line: 956
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
+    }
+
+    function draw() {
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the image as a panorama (360˚ background).
+      panorama(img);
+
+      // Add a soft ambient light.
+      ambientLight(50);
+
+      // Add light from the image.
+      imageLight(img);
+
+      // Style the sphere.
+      specularMaterial(20);
+      shininess(100);
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: img
+    description: |
+      <p>image to use as the light source.</p>
+    type: p5.image
+chainable: false
+---
+
+
+# imageLight
diff --git a/src/content/reference/en/p5 copy/imageMode.mdx b/src/content/reference/en/p5 copy/imageMode.mdx
new file mode 100644
index 0000000000..f7d41c6d54
--- /dev/null
+++ b/src/content/reference/en/p5 copy/imageMode.mdx	
@@ -0,0 +1,129 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1395
+title: imageMode
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Changes the location from which images are drawn when
+
+  <a href="/reference/p5/image/">image()</a> is called.</p>
+
+  <p>By default, the first
+
+  two parameters of <a href="/reference/p5/image/">image()</a> are the x- and
+
+  y-coordinates of the image's upper-left corner. The next parameters are
+
+  its width and height. This is the same as calling
+  <code>imageMode(CORNER)</code>.</p>
+
+  <p><code>imageMode(CORNERS)</code> also uses the first two parameters of
+
+  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
+  image's
+
+  top-left corner. The third and fourth parameters are the coordinates of its
+
+  bottom-right corner.</p>
+
+  <p><code>imageMode(CENTER)</code> uses the first two parameters of
+
+  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
+  image's
+
+  center. The next parameters are its width and height.</p>
+line: 1395
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use CORNER mode.
+      imageMode(CORNER);
+
+      // Display the image.
+      image(img, 10, 10, 50, 50);
+
+      describe('A square image of a brick wall is drawn at the top left of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use CORNERS mode.
+      imageMode(CORNERS);
+
+      // Display the image.
+      image(img, 10, 10, 90, 40);
+
+      describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use CENTER mode.
+      imageMode(CENTER);
+
+      // Display the image.
+      image(img, 50, 50, 80, 80);
+
+      describe('A square image of a brick wall is drawn on a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either CORNER, CORNERS, or CENTER.</p>
+    type: Constant
+chainable: false
+---
+
+
+# imageMode
diff --git a/src/content/reference/en/p5 copy/input.mdx b/src/content/reference/en/p5 copy/input.mdx
new file mode 100644
index 0000000000..83f71feabc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/input.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L405
+title: input
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Calls a function when the element receives input.</p>
+
+  <p><code>myElement.input()</code> is often used to with text inputs and
+  sliders. Calling
+
+  <code>myElement.input(false)</code> disables the function.</p>
+line: 405
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a slider and place it beneath the canvas.
+      slider = createSlider(0, 255, 200);
+      slider.position(0, 100);
+
+      // Call repaint() when the slider changes.
+      slider.input(repaint);
+
+      describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');
+    }
+
+    // Paint the background using slider's value.
+    function repaint() {
+      let g = slider.value();
+      background(g);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let input;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an input and place it beneath the canvas.
+      input = createInput('');
+      input.position(0, 100);
+
+      // Call repaint() when input is detected.
+      input.input(repaint);
+
+      describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');
+    }
+
+    // Paint the background gray and display the input's value.
+    function repaint() {
+      background(200);
+      let msg = input.value();
+      text(msg, 5, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fxn
+    description: |
+      <p>function to call when input is detected within
+                                     the element.
+                                     <code>false</code> disables the function.</p>
+    type: Function|Boolean
+chainable: true
+---
+
+
+# input
diff --git a/src/content/reference/en/p5 copy/int.mdx b/src/content/reference/en/p5 copy/int.mdx
new file mode 100644
index 0000000000..5d5fe8826a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/int.mdx	
@@ -0,0 +1,169 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L92
+title: int
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Boolean</code>, <code>String</code>, or decimal
+  <code>Number</code> to an integer.</p>
+
+  <p><code>int()</code> converts values to integers. Integers are positive or
+  negative
+
+  numbers without decimals. If the original value has decimals, as in -34.56,
+
+  they're removed to produce an integer such as -34.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a Boolean, as in
+
+  <code>int(false)</code> or <code>int(true)</code>, then the number 0
+  (<code>false</code>) or 1 (<code>true</code>) will
+
+  be returned. If <code>n</code> is a string or number, as in
+  <code>int('45')</code> or
+
+  <code>int(67.89)</code>, then an integer will be returned. If an array is
+  passed, as
+
+  in <code>int([12.34, 56.78])</code>, then an array of integers will be
+  returned.</p>
+
+  <p>Note: If a value can't be converted to a number, as in
+  <code>int('giraffe')</code>,
+
+  then the value <code>NaN</code> (not a number) will be returned.</p>
+line: 92
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a Boolean variable.
+      let original = false;
+
+      // Convert the Boolean to an integer.
+      let converted = int(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "false : 0" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = '12.34';
+
+      // Convert the string to an integer.
+      let converted = int(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and converted values.
+      text(`${original} ≈ ${converted}`, 50, 50);
+
+      describe('The text "12.34 ≈ 12" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a decimal number variable.
+      let original = 12.34;
+
+      // Convert the decimal number to an integer.
+      let converted = int(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and converted values.
+      text(`${original} ≈ ${converted}`, 50, 50);
+
+      describe('The text "12.34 ≈ 12" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let original = ['60', '30', '15'];
+
+      // Convert the strings to integers.
+      let diameters = int(original);
+
+      for (let d of diameters) {
+        // Draw a circle.
+        circle(50, 50, d);
+      }
+
+      describe('Three white, concentric circles on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 92
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String|Boolean|Number
+    return:
+      description: converted number.
+      type: Number
+  - line: 211
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: Array
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# int
diff --git a/src/content/reference/en/p5 copy/isLooping.mdx b/src/content/reference/en/p5 copy/isLooping.mdx
new file mode 100644
index 0000000000..622fd77d9b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/isLooping.mdx	
@@ -0,0 +1,65 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L224
+title: isLooping
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Returns <code>true</code> if the draw loop is running and
+  <code>false</code> if not.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
+
+  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
+
+  restarted by calling <a href="/reference/p5/loop/">loop()</a>.</p>
+
+  <p>The <code>isLooping()</code> function can be used to check whether a sketch
+  is
+
+  looping, as in <code>isLooping() === true</code>.</p>
+line: 224
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle at the mouse's position.
+      circle(mouseX, mouseY, 20);
+    }
+
+    // Toggle the draw loop when the user double-clicks.
+    function doubleClicked() {
+      if (isLooping() === true) {
+        noLoop();
+      } else {
+        loop();
+      }
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: ''
+  type: Boolean
+chainable: false
+---
+
+
+# isLooping
diff --git a/src/content/reference/en/p5 copy/join.mdx b/src/content/reference/en/p5 copy/join.mdx
new file mode 100644
index 0000000000..23222a6db4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/join.mdx	
@@ -0,0 +1,70 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L15
+title: join
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Combines an array of strings into one string.</p>
+
+  <p>The first parameter, <code>list</code>, is the array of strings to
+  join.</p>
+
+  <p>The second parameter, <code>separator</code>, is the character(s) that
+  should be used
+
+  to separate the combined strings. For example, calling
+
+  <code>join(myWords, ' : ')</code> would return a string of words each
+  separated by a
+
+  colon and spaces.</p>
+line: 15
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let myWords = ['one', 'two', 'three'];
+
+      // Create a combined string
+      let combined = join(myWords, ' : ');
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+
+      // Display the combined string.
+      text(combined, 50, 50);
+
+      describe('The text "one : two : three" written in black on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>array of strings to combine.</p>
+    type: Array
+  - name: separator
+    description: |
+      <p>character(s) to place between strings when they're combined.</p>
+    type: String
+return:
+  description: combined string.
+  type: String
+chainable: false
+---
+
+
+# join
diff --git a/src/content/reference/en/p5 copy/key.mdx b/src/content/reference/en/p5 copy/key.mdx
new file mode 100644
index 0000000000..63fc144fa3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/key.mdx	
@@ -0,0 +1,106 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L102
+title: key
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A <code>String</code> system variable that contains the value of the last
+  key typed.</p>
+
+  <p>The key variable is helpful for checking whether an
+
+  <a href="https://en.wikipedia.org/wiki/ASCII#Printable_characters"
+  target="_blank">ASCII</a>
+
+  key has been typed. For example, the expression <code>key === "a"</code>
+  evaluates to
+
+  <code>true</code> if the <code>a</code> key was typed and <code>false</code>
+  if not. <code>key</code> doesn’t update
+
+  for special keys such as <code>LEFT_ARROW</code> and <code>ENTER</code>. Use
+  keyCode instead for
+
+  special keys. The <a href="/reference/p5/keyIsDown/">keyIsDown()</a> function
+  should
+
+  be used to check for multiple different key presses at the same time.</p>
+line: 102
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The last key pressed is displayed at the center.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the last key pressed.
+      text(key, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses the keys "w", "a", "s", or "d". It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if a key is pressed.
+      if (keyIsPressed === true) {
+        if (key === 'w') {
+          y -= 1;
+        } else if (key === 's') {
+          y += 1;
+        } else if (key === 'a') {
+          x -= 1;
+        } else if (key === 'd') {
+          x += 1;
+        }
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle at (x, y).
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# key
diff --git a/src/content/reference/en/p5 copy/keyCode.mdx b/src/content/reference/en/p5 copy/keyCode.mdx
new file mode 100644
index 0000000000..808526b788
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyCode.mdx	
@@ -0,0 +1,128 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L184
+title: keyCode
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A <code>Number</code> system variable that contains the code of the last
+  key typed.</p>
+
+  <p>All keys have a <code>keyCode</code>. For example, the <code>a</code> key
+  has the <code>keyCode</code> 65.
+
+  The <code>keyCode</code> variable is helpful for checking whether a special
+  key has
+
+  been typed. For example, the following conditional checks whether the enter
+
+  key has been typed:</p>
+
+  <pre><code class="language-js">if (keyCode === 13) {
+    // Code to run if the enter key was pressed.
+  }
+
+  </code></pre>
+
+  <p>The same code can be written more clearly using the system variable
+  <code>ENTER</code>
+
+  which has a value of 13:</p>
+
+  <pre><code class="language-js">if (keyCode === ENTER) {
+    // Code to run if the enter key was pressed.
+  }
+
+  </code></pre>
+
+  <p>The system variables <code>BACKSPACE</code>, <code>DELETE</code>,
+  <code>ENTER</code>, <code>RETURN</code>, <code>TAB</code>,
+
+  <code>ESCAPE</code>, <code>SHIFT</code>, <code>CONTROL</code>,
+  <code>OPTION</code>, <code>ALT</code>, <code>UP_ARROW</code>,
+  <code>DOWN_ARROW</code>,
+
+  <code>LEFT_ARROW</code>, and <code>RIGHT_ARROW</code> are all helpful
+  shorthands the key codes of
+
+  special keys. Key codes can be found on websites such as
+
+  <a href="http://keycode.info/">keycode.info</a>.</p>
+line: 184
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The last key pressed and its code are displayed at the center.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the last key pressed and its code.
+      text(`${key} : ${keyCode}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if an arrow key is pressed.
+      if (keyIsPressed === true) {
+        if (keyCode === UP_ARROW) {
+          y -= 1;
+        } else if (keyCode === DOWN_ARROW) {
+          y += 1;
+        } else if (keyCode === LEFT_ARROW) {
+          x -= 1;
+        } else if (keyCode === RIGHT_ARROW) {
+          x += 1;
+        }
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle at (x, y).
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+type: Integer
+---
+
+
+# keyCode
diff --git a/src/content/reference/en/p5 copy/keyIsDown.mdx b/src/content/reference/en/p5 copy/keyIsDown.mdx
new file mode 100644
index 0000000000..8afe4b0bdf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyIsDown.mdx	
@@ -0,0 +1,142 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L811
+title: keyIsDown
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>Returns <code>true</code> if the key it’s checking is pressed and
+  <code>false</code> if not.</p>
+
+  <p><code>keyIsDown()</code> is helpful when checking for multiple different
+  key presses.
+
+  For example, <code>keyIsDown()</code> can be used to check if both
+  <code>LEFT_ARROW</code> and
+
+  <code>UP_ARROW</code> are pressed:</p>
+
+  <pre><code class="language-js">if (keyIsDown(LEFT_ARROW) &&
+  keyIsDown(UP_ARROW)) {
+    // Move diagonally.
+  }
+
+  </code></pre>
+
+  <p><code>keyIsDown()</code> can check for key presses using
+
+  <a href="/reference/p5/keyCode/">keyCode</a> values, as in
+  <code>keyIsDown(37)</code> or
+
+  <code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as
+
+  <a href="https://keycode.info" target="_blank">keycode.info</a>.</p>
+line: 811
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if an arrow key is pressed.
+      if (keyIsDown(LEFT_ARROW) === true) {
+        x -= 1;
+      }
+
+      if (keyIsDown(RIGHT_ARROW) === true) {
+        x += 1;
+      }
+
+      if (keyIsDown(UP_ARROW) === true) {
+        y -= 1;
+      }
+
+      if (keyIsDown(DOWN_ARROW) === true) {
+        y += 1;
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle.
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let x = 50;
+    let y = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe(
+        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
+      );
+    }
+
+    function draw() {
+      // Update x and y if an arrow key is pressed.
+      if (keyIsDown(37) === true) {
+        x -= 1;
+      }
+
+      if (keyIsDown(39) === true) {
+        x += 1;
+      }
+
+      if (keyIsDown(38) === true) {
+        y -= 1;
+      }
+
+      if (keyIsDown(40) === true) {
+        y += 1;
+      }
+
+      // Style the circle.
+      fill(0);
+
+      // Draw the circle.
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: code
+    description: |
+      <p>key to check.</p>
+    type: Number
+return:
+  description: whether the key is down or not.
+  type: Boolean
+chainable: false
+---
+
+
+# keyIsDown
diff --git a/src/content/reference/en/p5 copy/keyIsPressed.mdx b/src/content/reference/en/p5 copy/keyIsPressed.mdx
new file mode 100644
index 0000000000..0b129c49e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyIsPressed.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L10
+title: keyIsPressed
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A <code>Boolean</code> system variable that's <code>true</code> if any key
+  is currently pressed
+
+  and <code>false</code> if not.</p>
+line: 10
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      if (keyIsPressed === true) {
+        fill(0);
+      } else {
+        fill(255);
+      }
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      if (keyIsPressed) {
+        fill(0);
+      } else {
+        fill(255);
+      }
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the word "false" at its center. The word switches to "true" when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the value of keyIsPressed.
+      text(keyIsPressed, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# keyIsPressed
diff --git a/src/content/reference/en/p5 copy/keyPressed.mdx b/src/content/reference/en/p5 copy/keyPressed.mdx
new file mode 100644
index 0000000000..4a4007f09a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyPressed.mdx	
@@ -0,0 +1,192 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L284
+title: keyPressed
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A function that's called once when any key is pressed.</p>
+
+  <p>Declaring the function <code>keyPressed()</code> sets a code block to run
+  once
+
+  automatically when the user presses any key:</p>
+
+  <pre><code class="language-js">function keyPressed() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/key/">key</a> and <a
+  href="/reference/p5/keyCode/">keyCode</a>
+
+  variables will be updated with the most recently typed value when
+
+  <code>keyPressed()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function keyPressed() {
+    if (key === 'c') {
+      // Code to run.
+    }
+
+    if (keyCode === ENTER) {
+      // Code to run.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>keyPressed()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
+  target="_blank">KeyboardEvent</a>
+
+  object with properties that describe the key press event:</p>
+
+  <pre><code class="language-js">function keyPressed(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Browsers may have default behaviors attached to various key events. For
+
+  example, some browsers may jump to the bottom of a web page when the
+
+  <code>SPACE</code> key is pressed. To prevent any default behavior for this
+  event, add
+
+  <code>return false;</code> to the end of the function.</p>
+line: 284
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the background color when the user presses a key.
+    function keyPressed() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square turns black when the user presses the "b" key. It turns white when the user presses the "a" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Reassign value when the user presses the 'a' or 'b' key.
+    function keyPressed() {
+      if (key === 'a') {
+        value = 255;
+      } else if (key === 'b') {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the background color when the user presses an arrow key.
+    function keyPressed() {
+      if (keyCode === LEFT_ARROW) {
+        value = 255;
+      } else if (keyCode === RIGHT_ARROW) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>KeyboardEvent</code> callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+chainable: false
+---
+
+
+# keyPressed
diff --git a/src/content/reference/en/p5 copy/keyReleased.mdx b/src/content/reference/en/p5 copy/keyReleased.mdx
new file mode 100644
index 0000000000..e19da953f1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyReleased.mdx	
@@ -0,0 +1,188 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L474
+title: keyReleased
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A function that's called once when any key is released.</p>
+
+  <p>Declaring the function <code>keyReleased()</code> sets a code block to run
+  once
+
+  automatically when the user releases any key:</p>
+
+  <pre><code class="language-js">function keyReleased() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/key/">key</a> and <a
+  href="/reference/p5/keyCode/">keyCode</a>
+
+  variables will be updated with the most recently released value when
+
+  <code>keyReleased()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function keyReleased() {
+    if (key === 'c') {
+      // Code to run.
+    }
+
+    if (keyCode === ENTER) {
+      // Code to run.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>keyReleased()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
+  target="_blank">KeyboardEvent</a>
+
+  object with properties that describe the key press event:</p>
+
+  <pre><code class="language-js">function keyReleased(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Browsers may have default behaviors attached to various key events. To
+
+  prevent any default behavior for this event, add <code>return false;</code> to
+  the end
+
+  of the function.</p>
+line: 474
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user releases a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle value when the user releases a key.
+    function keyReleased() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes white when the user releases the "w" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Set value to 255 the user releases the 'w' key.
+    function keyReleased() {
+      if (key === 'w') {
+        value = 255;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the background color when the user releases an arrow key.
+    function keyReleased() {
+      if (keyCode === LEFT_ARROW) {
+        value = 255;
+      } else if (keyCode === RIGHT_ARROW) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>KeyboardEvent</code> callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+chainable: false
+---
+
+
+# keyReleased
diff --git a/src/content/reference/en/p5 copy/keyTyped.mdx b/src/content/reference/en/p5 copy/keyTyped.mdx
new file mode 100644
index 0000000000..a591db9e60
--- /dev/null
+++ b/src/content/reference/en/p5 copy/keyTyped.mdx	
@@ -0,0 +1,170 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L655
+title: keyTyped
+module: Events
+submodule: Keyboard
+file: src/events/keyboard.js
+description: >
+  <p>A function that's called once when keys with printable characters are
+  pressed.</p>
+
+  <p>Declaring the function <code>keyTyped()</code> sets a code block to run
+  once
+
+  automatically when the user presses any key with a printable character such
+
+  as <code>a</code> or 1. Modifier keys such as <code>SHIFT</code>,
+  <code>CONTROL</code>, and the arrow keys
+
+  will be ignored:</p>
+
+  <pre><code class="language-js">function keyTyped() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/key/">key</a> and <a
+  href="/reference/p5/keyCode/">keyCode</a>
+
+  variables will be updated with the most recently released value when
+
+  <code>keyTyped()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function keyTyped() {
+    // Check for the "c" character using key.
+    if (key === 'c') {
+      // Code to run.
+    }
+
+    // Check for "c" using keyCode.
+    if (keyCode === 67) {
+      // Code to run.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>keyTyped()</code> is
+  always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
+  target="_blank">KeyboardEvent</a>
+
+  object with properties that describe the key press event:</p>
+
+  <pre><code class="language-js">function keyReleased(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Note: Use the <a href="/reference/p5/keyPressed/">keyPressed()</a> function
+  and
+
+  <a href="/reference/p5/keyCode/">keyCode</a> system variable to respond to
+  modifier
+
+  keys such as <code>ALT</code>.</p>
+
+  <p>Browsers may have default behaviors attached to various key events. To
+
+  prevent any default behavior for this event, add <code>return false;</code> to
+  the end
+
+  of the function.</p>
+line: 655
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+    // Note: Pressing special keys such as SPACE have no effect.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square changes color when the user presses a key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the square's color when the user types a printable key.
+    function keyTyped() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square turns black when the user types the "b" key. It turns white when the user types the "a" key.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Reassign value when the user types the 'a' or 'b' key.
+    function keyTyped() {
+      if (key === 'a') {
+        value = 255;
+      } else if (key === 'b') {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>KeyboardEvent</code> callback argument.</p>
+    type: KeyboardEvent
+    optional: true
+chainable: false
+---
+
+
+# keyTyped
diff --git a/src/content/reference/en/p5 copy/lerp.mdx b/src/content/reference/en/p5 copy/lerp.mdx
new file mode 100644
index 0000000000..84c4b5bc7a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lerp.mdx	
@@ -0,0 +1,122 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L332
+title: lerp
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates a number between two numbers at a specific increment.</p>
+
+  <p>The <code>amt</code> parameter is the amount to interpolate between the two
+  numbers.
+
+  0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is
+
+  half-way in between, and 1.0 is equal to the second number. The
+  <code>lerp()</code>
+
+  function is convenient for creating motion along a straight path and for
+
+  drawing dotted lines.</p>
+
+  <p>If the value of <code>amt</code> is less than 0 or more than 1,
+  <code>lerp()</code> will return a
+
+  number outside of the original interval. For example, calling
+
+  <code>lerp(0, 10, 1.5)</code> will return 15.</p>
+line: 332
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Declare variables for coordinates.
+      let a = 20;
+      let b = 80;
+      let c = lerp(a, b, 0.2);
+      let d = lerp(a, b, 0.5);
+      let e = lerp(a, b, 0.8);
+
+      strokeWeight(5);
+
+      // Draw the original points in black.
+      stroke(0);
+      point(a, 50);
+      point(b, 50);
+
+      // Draw the lerped points in gray.
+      stroke(100);
+      point(c, 50);
+      point(d, 50);
+      point(e, 50);
+
+      describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let x = 50;
+    let y = 50;
+    let targetX = 50;
+    let targetY = 50;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');
+    }
+
+    function draw() {
+      background(220);
+
+      // Move x and y toward the target.
+      x = lerp(x, targetX, 0.05);
+      y = lerp(y, targetY, 0.05);
+
+      // Draw the circle.
+      circle(x, y, 20);
+    }
+
+    // Set x and y when the user clicks the mouse.
+    function mouseClicked() {
+      x = mouseX;
+      y = mouseY;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: start
+    description: |
+      <p>first value.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>second value.</p>
+    type: Number
+  - name: amt
+    description: |
+      <p>number.</p>
+    type: Number
+return:
+  description: lerped value.
+  type: Number
+chainable: false
+---
+
+
+# lerp
diff --git a/src/content/reference/en/p5 copy/lerpColor.mdx b/src/content/reference/en/p5 copy/lerpColor.mdx
new file mode 100644
index 0000000000..d815ba9ddb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lerpColor.mdx	
@@ -0,0 +1,96 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L949
+title: lerpColor
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Blends two colors to find a third color between them.</p>
+
+  <p>The <code>amt</code> parameter specifies the amount to interpolate between
+  the two
+
+  values. 0 is equal to the first color, 0.1 is very near the first color,
+
+  0.5 is halfway between the two colors, and so on. Negative numbers are set
+
+  to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
+
+  <a href="/reference/p5/lerp/">lerp</a>. It's necessary because numbers outside
+  of the
+
+  interval [0, 1] will produce strange and unexpected colors.</p>
+
+  <p>The way that colors are interpolated depends on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 949
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create p5.Color objects to interpolate between.
+      let from = color(218, 165, 32);
+      let to = color(72, 61, 139);
+
+      // Create intermediate colors.
+      let interA = lerpColor(from, to, 0.33);
+      let interB = lerpColor(from, to, 0.66);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(from);
+      rect(10, 20, 20, 60);
+
+      // Draw the left-center rectangle.
+      fill(interA);
+      rect(30, 20, 20, 60);
+
+      // Draw the right-center rectangle.
+      fill(interB);
+      rect(50, 20, 20, 60);
+
+      // Draw the right rectangle.
+      fill(to);
+      rect(70, 20, 20, 60);
+
+      describe(
+        'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: c1
+    description: >
+      <p>interpolate from this color (any value created by the color()
+      function).</p>
+    type: p5.Color
+  - name: c2
+    description: >
+      <p>interpolate to this color (any value created by the color()
+      function).</p>
+    type: p5.Color
+  - name: amt
+    description: |
+      <p>number between 0 and 1.</p>
+    type: Number
+return:
+  description: interpolated color.
+  type: p5.Color
+chainable: false
+---
+
+
+# lerpColor
diff --git a/src/content/reference/en/p5 copy/let.mdx b/src/content/reference/en/p5 copy/let.mdx
new file mode 100644
index 0000000000..f04902a9b0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/let.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L7
+title: let
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>Declares a new variable.</p>
+
+  <p>A variable is a container for a value. For example, a variable might
+
+  contain a creature's x-coordinate as a <code>Number</code> or its name as a
+
+  <code>String</code>. Variables can change value by reassigning them as
+  follows:</p>
+
+  <pre><code class="language-js">// Declare the variable x and assign it the
+  value 10.
+
+  let x = 10;
+
+
+  // Reassign x to 50.
+
+  x = 50;
+
+  </code></pre>
+
+  <p>Variables have block scope. When a variable is declared between curly
+
+  braces <code>{}</code>, it only exists within the block defined by those
+  braces. For
+
+  example, the following code would throw a <code>ReferenceError</code> because
+  <code>x</code> is
+
+  declared within the <code>setup()</code> function's block:</p>
+
+  <pre><code class="language-js">function setup() {
+    createCanvas(100, 100);
+
+    let x = 50;
+  }
+
+
+  function draw() {
+    background(200);
+
+    // x was declared in setup(), so it can't be referenced here.
+    circle(x, 50, 20);
+  }
+
+  </code></pre>
+
+  <p>Variables declared outside of all curly braces <code>{}</code> are in the
+  global
+
+  scope. A variable that's in the global scope can be used and changed
+
+  anywhere in a sketch:</p>
+
+  <pre><code class="language-js">let x = 50;
+
+
+  function setup() {
+    createCanvas(100, 100);
+  }
+
+
+  function draw() {
+    background(200);
+
+    // Change the value of x.
+    x += 10;
+
+    circle(x, 50, 20);
+  }
+
+  </code></pre>
+line: 7
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(220);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(16);\n\n  // Create the message variable.\n  let message = 'Hello, \U0001F30D!';\n\n  // Display the message.\n  text(message, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n  background(220);\n\n  // Change the value of x.\n  x += 1;\n\n  circle(x, 50, 20);\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# let
diff --git a/src/content/reference/en/p5 copy/lightFalloff.mdx b/src/content/reference/en/p5 copy/lightFalloff.mdx
new file mode 100644
index 0000000000..e8b8245064
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lightFalloff.mdx	
@@ -0,0 +1,100 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1161
+title: lightFalloff
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Sets the falloff rate for <a
+  href="/reference/p5/pointLight/">pointLight()</a>
+
+  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
+
+  <p>A light’s falloff describes the intensity of its beam at a distance. For
+
+  example, a lantern has a slow falloff, a flashlight has a medium falloff,
+
+  and a laser pointer has a sharp falloff.</p>
+
+  <p><code>lightFalloff()</code> has three parameters, <code>constant</code>,
+  <code>linear</code>, and
+
+  <code>quadratic</code>. They’re numbers used to calculate falloff at a
+  distance, <code>d</code>,
+
+  as follows:</p>
+
+  <p><code>falloff = 1 / (constant + d * linear + (d * d) *
+  quadratic)</code></p>
+
+  <p>Note: <code>constant</code>, <code>linear</code>, and
+  <code>quadratic</code> should always be set to values
+
+  greater than 0.</p>
+line: 1161
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to change the falloff rate.
+
+    let useFalloff = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Set the light falloff.
+      if (useFalloff === true) {
+        lightFalloff(2, 0, 0);
+      }
+
+      // Add a white point light from the front.
+      pointLight(255, 255, 255, 0, 0, 100);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Change the falloff value when the user double-clicks.
+    function doubleClicked() {
+      useFalloff = true;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: constant
+    description: |
+      <p>constant value for calculating falloff.</p>
+    type: Number
+  - name: linear
+    description: |
+      <p>linear value for calculating falloff.</p>
+    type: Number
+  - name: quadratic
+    description: |
+      <p>quadratic value for calculating falloff.</p>
+    type: Number
+chainable: true
+---
+
+
+# lightFalloff
diff --git a/src/content/reference/en/p5 copy/lightness.mdx b/src/content/reference/en/p5 copy/lightness.mdx
new file mode 100644
index 0000000000..284523dcc8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lightness.mdx	
@@ -0,0 +1,168 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1134
+title: lightness
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the lightness value of a color.</p>
+
+  <p><code>lightness()</code> extracts the HSL lightness value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>lightness()</code> returns a color's HSL lightness in the
+  range 0
+
+  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  HSL, it
+
+  returns the lightness value in the given range.</p>
+line: 1134
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a p5.Color object using HSL values.
+      let c = color(0, 100, 75);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 75.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a color array.
+      let c = [0, 100, 75];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 75.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 75.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color with values in the range 0-255.
+      colorMode(HSL, 255);
+
+      // Create a p5.Color object using HSL values.
+      let c = color(0, 255, 191.5);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'lightValue' to 191.5.
+      let lightValue = lightness(c);
+
+      // Draw the right rectangle.
+      fill(lightValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the lightness value.
+  type: Number
+chainable: false
+---
+
+
+# lightness
diff --git a/src/content/reference/en/p5 copy/lights.mdx b/src/content/reference/en/p5 copy/lights.mdx
new file mode 100644
index 0000000000..a7cf3ba7ae
--- /dev/null
+++ b/src/content/reference/en/p5 copy/lights.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1077
+title: lights
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: |
+  <p>Places an ambient and directional light in the scene.
+  The lights are set to ambientLight(128, 128, 128) and
+  directionalLight(128, 128, 128, 0, 0, -1).</p>
+  <p>Note: lights need to be called (whether directly or indirectly)
+  within draw() to remain persistent in a looping program.
+  Placing them in setup() will cause them to only have an effect
+  the first time through the loop.</p>
+line: 1077
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to turn on the lights.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the lights.
+      if (isLit === true) {
+        lights();
+      }
+
+      // Draw the box.
+      box();
+    }
+
+    // Turn on the lights when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white box drawn against a gray background.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      ambientLight(128, 128, 128);
+      directionalLight(128, 128, 128, 0, 0, -1);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# lights
diff --git a/src/content/reference/en/p5 copy/line.mdx b/src/content/reference/en/p5 copy/line.mdx
new file mode 100644
index 0000000000..b225222235
--- /dev/null
+++ b/src/content/reference/en/p5 copy/line.mdx	
@@ -0,0 +1,194 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L564
+title: line
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a straight line between two points.</p>
+
+  <p>A line's default width is one pixel. The version of <code>line()</code>
+  with four
+
+  parameters draws the line in 2D. To color a line, use the
+
+  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
+  use the
+
+  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A line
+
+  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
+  won't
+
+  affect the line's color.</p>
+
+  <p>The version of <code>line()</code> with six parameters allows the line to
+  be drawn in
+
+  3D space. Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
+line: 564
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      line(30, 20, 85, 75);
+
+      describe(
+        'A black line on a gray canvas running from top-center to bottom-right.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      stroke('magenta');
+      strokeWeight(5);
+
+      line(30, 20, 85, 75);
+
+      describe(
+        'A thick, magenta line on a gray canvas running from top-center to bottom-right.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      line(30, 20, 85, 20);
+
+      // Right.
+      stroke(126);
+      line(85, 20, 85, 75);
+
+      // Bottom.
+      stroke(255);
+      line(85, 75, 30, 75);
+
+      describe(
+        'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
+      );
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      line(-20, -30, 35, 25);
+
+      describe(
+        'A black line on a gray canvas running from top-center to bottom-right.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black line connecting two spheres. The scene spins slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw a line.
+      line(0, 0, 0, 30, 20, -10);
+
+      // Draw the center sphere.
+      sphere(10);
+
+      // Translate to the second point.
+      translate(30, 20, -10);
+
+      // Draw the bottom-right sphere.
+      sphere(10);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 564
+    params:
+      - name: x1
+        description: |
+          <p>the x-coordinate of the first point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>the y-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>the x-coordinate of the second point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>the y-coordinate of the second point.</p>
+        type: Number
+    chainable: 1
+  - line: 696
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>the z-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>the z-coordinate of the second point.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# line
diff --git a/src/content/reference/en/p5 copy/linePerspective.mdx b/src/content/reference/en/p5 copy/linePerspective.mdx
new file mode 100644
index 0000000000..80bf539c73
--- /dev/null
+++ b/src/content/reference/en/p5 copy/linePerspective.mdx	
@@ -0,0 +1,164 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L280
+title: linePerspective
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Enables or disables perspective for lines in 3D sketches.</p>
+
+  <p>In WebGL mode, lines can be drawn with a thinner stroke when they’re
+
+  further from the camera. Doing so gives them a more realistic appearance.</p>
+
+  <p>By default, lines are drawn differently based on the type of perspective
+
+  being used:</p>
+
+  <ul>
+
+  <li><code>perspective()</code> and <code>frustum()</code> simulate a realistic
+  perspective. In
+
+  these modes, stroke weight is affected by the line’s distance from the
+
+  camera. Doing so results in a more natural appearance.
+  <code>perspective()</code> is
+
+  the default mode for 3D sketches.</li>
+
+  <li><code>ortho()</code> doesn’t simulate a realistic perspective. In this
+  mode, stroke
+
+  weights are consistent regardless of the line’s distance from the camera.
+
+  Doing so results in a more predictable and consistent appearance.</li>
+
+  </ul>
+
+  <p><code>linePerspective()</code> can override the default line drawing
+  mode.</p>
+
+  <p>The parameter, <code>enable</code>, is optional. It’s a
+  <code>Boolean</code> value that sets the
+
+  way lines are drawn. If <code>true</code> is passed, as in
+  <code>linePerspective(true)</code>,
+
+  then lines will appear thinner when they are further from the camera. If
+
+  <code>false</code> is passed, as in <code>linePerspective(false)</code>, then
+  lines will have
+
+  consistent stroke weights regardless of their distance from the camera. By
+
+  default, <code>linePerspective()</code> is enabled.</p>
+
+  <p>Calling <code>linePerspective()</code> without passing an argument returns
+  <code>true</code> if
+
+  it's enabled and <code>false</code> if not.</p>
+
+  <p>Note: <code>linePerspective()</code> can only be used in WebGL mode.</p>
+line: 280
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click the canvas to toggle the line perspective.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+
+    // Toggle the line perspective when the user double-clicks.
+    function doubleClicked() {
+      let isEnabled = linePerspective();
+      linePerspective(!isEnabled);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click the canvas to toggle the line perspective.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Use an orthographic projection.
+      ortho();
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+
+    // Toggle the line perspective when the user double-clicks.
+    function doubleClicked() {
+      let isEnabled = linePerspective();
+      linePerspective(!isEnabled);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 280
+    params:
+      - name: enable
+        description: |
+          <p>whether to enable line perspective.</p>
+        type: Boolean
+  - line: 392
+    params: []
+    return:
+      description: whether line perspective is enabled.
+      type: Boolean
+chainable: false
+---
+
+
+# linePerspective
diff --git a/src/content/reference/en/p5 copy/loadBytes.mdx b/src/content/reference/en/p5 copy/loadBytes.mdx
new file mode 100644
index 0000000000..8b02c0683e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadBytes.mdx	
@@ -0,0 +1,56 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L986
+title: loadBytes
+module: IO
+submodule: Input
+file: src/io/files.js
+description: |
+  <p>This method is suitable for fetching files up to size of 64MB.</p>
+line: 986
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    let data;
+
+    function preload() {
+      data = loadBytes('/assets/mammals.xml');
+    }
+
+    function setup() {
+      for (let i = 0; i < 5; i++) {
+        console.log(data.bytes[i].toString(16));
+      }
+      describe('no image displayed');
+    }
+    </code></div>
+class: p5
+params:
+  - name: file
+    description: |
+      <p>name of the file or URL to load</p>
+    type: String
+  - name: callback
+    description: |
+      <p>function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
+                                         completes</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if there
+                                         is an error</p>
+    type: Function
+    optional: true
+return:
+  description: an object whose 'bytes' property will be the loaded buffer
+  type: Object
+chainable: false
+---
+
+
+# loadBytes
diff --git a/src/content/reference/en/p5 copy/loadFont.mdx b/src/content/reference/en/p5 copy/loadFont.mdx
new file mode 100644
index 0000000000..86af4b7123
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadFont.mdx	
@@ -0,0 +1,171 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L16
+title: loadFont
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Loads a font and creates a <a href="/reference/p5/p5.Font">p5.Font</a>
+  object.
+
+  <code>loadFont()</code> can load fonts in either .otf or .ttf format. Loaded
+  fonts can
+
+  be used to style text on the canvas and in HTML elements.</p>
+
+  <p>The first parameter, <code>path</code>, is the path to a font file.
+
+  Paths to local files should be relative. For example,
+
+  <code>'/assets/inconsolata.otf'</code>. The Inconsolata font used in the
+  following
+
+  examples can be downloaded for free
+
+  <a href="https://www.fontsquirrel.com/fonts/inconsolata/"
+  target="_blank">here</a>.
+
+  Paths to remote files should be URLs. For example,
+
+  <code>'https://example.com/inconsolata.otf'</code>. URLs may be blocked due to
+  browser
+
+  security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, it will be called once the font has loaded. The callback function
+
+  may use the new <a href="/reference/p5/p5.Font">p5.Font</a> object if
+  needed.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, it will be called if the font fails to load. The callback function
+
+  may use the error
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/"
+  target="_blank">Event</a>
+
+  object if needed.</p>
+
+  <p>Fonts can take time to load. Calling <code>loadFont()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures fonts load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or
+
+  <a href="/reference/p5/draw/">draw()</a>.</p>
+line: 16
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadFont('/assets/inconsolata.otf', font => {
+        fill('deeppink');
+        textFont(font);
+        textSize(36);
+        text('p5*js', 10, 50);
+
+        describe('The text "p5*js" written in pink on a white background.');
+      });
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      loadFont('/assets/inconsolata.otf', success, failure);
+    }
+
+    function success(font) {
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+
+    function failure(event) {
+      console.error('Oops!', event);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function preload() {
+      loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      let p = createP('p5*js');
+      p.style('color', 'deeppink');
+      p.style('font-family', 'Inconsolata');
+      p.style('font-size', '36px');
+      p.position(10, 50);
+
+      describe('The text "p5*js" written in pink on a white background.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the font to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function called with the
+                                                <a href="#/p5.Font">p5.Font</a> object after it
+                                                loads.</p>
+    type: Function
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function called with the error
+                                                <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
+                                                object if the font fails to load.</p>
+    type: Function
+    optional: true
+return:
+  description: <a href="#/p5.Font">p5.Font</a> object.
+  type: p5.Font
+chainable: false
+---
+
+
+# loadFont
diff --git a/src/content/reference/en/p5 copy/loadImage.mdx b/src/content/reference/en/p5 copy/loadImage.mdx
new file mode 100644
index 0000000000..7e5b8bf0b7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadImage.mdx	
@@ -0,0 +1,137 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L18
+title: loadImage
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Loads an image to create a <a href="/reference/p5/p5.Image">p5.Image</a>
+  object.</p>
+
+  <p><code>loadImage()</code> interprets the first parameter one of three ways.
+  If the path
+
+  to an image file is provided, <code>loadImage()</code> will load it. Paths to
+  local
+
+  files should be relative, such as <code>'/assets/thundercat.jpg'</code>. URLs
+  such as
+
+  <code>'https://example.com/thundercat.jpg'</code> may be blocked due to
+  browser
+
+  security. Raw image data can also be passed as a base64 encoded image in
+
+  the form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>.</p>
+
+  <p>The second parameter is optional. If a function is passed, it will be
+
+  called once the image has loaded. The callback function can optionally use
+
+  the new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+  <p>The third parameter is also optional. If a function is passed, it will be
+
+  called if the image fails to load. The callback function can optionally use
+
+  the event error.</p>
+
+  <p>Images can take time to load. Calling <code>loadImage()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures images load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 18
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Call handleImage() once the image loads.
+      loadImage('/assets/laDefense.jpg', handleImage);
+
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+
+    // Display the image.
+    function handleImage(img) {
+      image(img, 0, 0);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Call handleImage() once the image loads or
+      // call handleError() if an error occurs.
+      loadImage('/assets/laDefense.jpg', handleImage, handleError);
+    }
+
+    // Display the image.
+    function handleImage(img) {
+      image(img, 0, 0);
+
+      describe('Image of the underside of a white umbrella and a gridded ceiling.');
+    }
+
+    // Log the error.
+    function handleError(event) {
+      console.error('Oops!', event);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the image to be loaded or base64 encoded image.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function called with
+                                    <a href="#/p5.Image">p5.Image</a> once it
+                                    loads.</p>
+    type: function(p5.Image)
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function called with event
+                                    error if the image fails to load.</p>
+    type: Function(Event)
+    optional: true
+return:
+  description: the <a href="#/p5.Image">p5.Image</a> object.
+  type: p5.Image
+chainable: false
+---
+
+
+# loadImage
diff --git a/src/content/reference/en/p5 copy/loadJSON.mdx b/src/content/reference/en/p5 copy/loadJSON.mdx
new file mode 100644
index 0000000000..95fd0552b5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadJSON.mdx	
@@ -0,0 +1,288 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L17
+title: loadJSON
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Loads a JSON file to create an <code>Object</code>.</p>
+
+  <p>JavaScript Object Notation
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
+  target="_blank">JSON</a>)
+
+  is a standard format for sending data between applications. The format is
+
+  based on JavaScript objects which have keys and values. JSON files store
+
+  data in an object with strings as keys. Values can be strings, numbers,
+
+  Booleans, arrays, <code>null</code>, or other objects.</p>
+
+  <p>The first parameter, <code>path</code>, is always a string with the path to
+  the file.
+
+  Paths to local files should be relative, as in
+
+  <code>loadJSON('/assets/data.json')</code>. URLs such as
+
+  <code>'https://example.com/data.json'</code> may be blocked due to browser
+  security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, as in <code>loadJSON('/assets/data.json', handleData)</code>, then the
+
+  <code>handleData()</code> function will be called once the data loads. The
+  object
+
+  created from the JSON data will be passed to <code>handleData()</code> as its
+  only argument.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, as in <code>loadJSON('/assets/data.json', handleData,
+  handleFailure)</code>,
+
+  then the <code>handleFailure()</code> function will be called if an error
+  occurs while
+
+  loading. The <code>Error</code> object will be passed to
+  <code>handleFailure()</code> as its only
+
+  argument.</p>
+
+  <p>Note: Data can take time to load. Calling <code>loadJSON()</code> within
+
+  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
+  used in
+
+  <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 17
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the JSON and create an object.
+    function preload() {
+      myData = loadJSON('/assets/data.json');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the circle.
+      fill(myData.color);
+      noStroke();
+
+      // Draw the circle.
+      circle(myData.x, myData.y, myData.d);
+
+      describe('A pink circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the JSON and create an object.
+    function preload() {
+      myData = loadJSON('/assets/data.json');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object and make it transparent.
+      let c = color(myData.color);
+      c.setAlpha(80);
+
+      // Style the circles.
+      fill(c);
+      noStroke();
+
+      // Iterate over the myData.bubbles array.
+      for (let b of myData.bubbles) {
+        // Draw a circle for each bubble.
+        circle(b.x, b.y, b.d);
+      }
+
+      describe('Several pink bubbles floating in a blue sky.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the GeoJSON and create an object.
+    function preload() {
+      myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get data about the most recent earthquake.
+      let quake = myData.features[0].properties;
+
+      // Draw a circle based on the earthquake's magnitude.
+      circle(50, 50, quake.mag * 10);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display the earthquake's location.
+      text(quake.place, 5, 80, 100);
+
+      describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let bigQuake;
+
+    // Load the GeoJSON and preprocess it.
+    function preload() {
+      loadJSON(
+        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+        handleData
+      );
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a circle based on the earthquake's magnitude.
+      circle(50, 50, bigQuake.mag * 10);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display the earthquake's location.
+      text(bigQuake.place, 5, 80, 100);
+
+      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+    }
+
+    // Find the biggest recent earthquake.
+    function handleData(data) {
+      let maxMag = 0;
+      // Iterate over the earthquakes array.
+      for (let quake of data.features) {
+        // Reassign bigQuake if a larger
+        // magnitude quake is found.
+        if (quake.properties.mag > maxMag) {
+          bigQuake = quake.properties;
+        }
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let bigQuake;
+
+    // Load the GeoJSON and preprocess it.
+    function preload() {
+      loadJSON(
+        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
+        handleData,
+        handleError
+      );
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a circle based on the earthquake's magnitude.
+      circle(50, 50, bigQuake.mag * 10);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display the earthquake's location.
+      text(bigQuake.place, 5, 80, 100);
+
+      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
+    }
+
+    // Find the biggest recent earthquake.
+    function handleData(data) {
+      let maxMag = 0;
+      // Iterate over the earthquakes array.
+      for (let quake of data.features) {
+        // Reassign bigQuake if a larger
+        // magnitude quake is found.
+        if (quake.properties.mag > maxMag) {
+          bigQuake = quake.properties;
+        }
+      }
+    }
+
+    // Log any errors to the console.
+    function handleError(error) {
+      console.log('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the JSON file to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: >
+      <p>function to call once the data is loaded. Will be passed the
+      object.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: >
+      <p>function to call if the data fails to load. Will be passed an
+      <code>Error</code> event object.</p>
+    type: Function
+    optional: true
+return:
+  description: object containing the loaded data.
+  type: Object
+chainable: false
+---
+
+
+# loadJSON
diff --git a/src/content/reference/en/p5 copy/loadModel.mdx b/src/content/reference/en/p5 copy/loadModel.mdx
new file mode 100644
index 0000000000..56b2230e1e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadModel.mdx	
@@ -0,0 +1,469 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L13
+title: loadModel
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: >
+  <p>Loads a 3D model to create a
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
+
+  <p><code>loadModel()</code> can load 3D models from OBJ and STL files. Once
+  the model is
+
+  loaded, it can be displayed with the
+
+  <a href="/reference/p5/model/">model()</a> function, as in
+  <code>model(shape)</code>.</p>
+
+  <p>There are three ways to call <code>loadModel()</code> with optional
+  parameters to help
+
+  process the model.</p>
+
+  <p>The first parameter, <code>path</code>, is always a <code>String</code>
+  with the path to the
+
+  file. Paths to local files should be relative, as in
+
+  <code>loadModel('/assets/model.obj')</code>. URLs such as
+
+  <code>'https://example.com/model.obj'</code> may be blocked due to browser
+  security.</p>
+
+  <p>Note: When loading a <code>.obj</code> file that references materials
+  stored in
+
+  <code>.mtl</code> files, p5.js will attempt to load and apply those materials.
+
+  To ensure that the <code>.obj</code> file reads the <code>.mtl</code> file
+  correctly include the
+
+  <code>.mtl</code> file alongside it.</p>
+
+  <p>The first way to call <code>loadModel()</code> has three optional
+  parameters after the
+
+  file path. The first optional parameter, <code>successCallback</code>, is a
+  function
+
+  to call once the model loads. For example,
+
+  <code>loadModel('/assets/model.obj', handleModel)</code> will call the
+  <code>handleModel()</code>
+
+  function once the model loads. The second optional parameter,
+
+  <code>failureCallback</code>, is a function to call if the model fails to
+  load. For
+
+  example, <code>loadModel('/assets/model.obj', handleModel,
+  handleFailure)</code> will
+
+  call the <code>handleFailure()</code> function if an error occurs while
+  loading. The
+
+  third optional parameter, <code>fileType</code>, is the model’s file extension
+  as a
+
+  string. For example,
+
+  <code>loadModel('/assets/model', handleModel, handleFailure, '.obj')</code>
+  will try to
+
+  load the file model as a <code>.obj</code> file.</p>
+
+  <p>The second way to call <code>loadModel()</code> has four optional
+  parameters after the
+
+  file path. The first optional parameter is a <code>Boolean</code> value. If
+  <code>true</code> is
+
+  passed, as in <code>loadModel('/assets/model.obj', true)</code>, then the
+  model will be
+
+  resized to ensure it fits the canvas. The next three parameters are
+
+  <code>successCallback</code>, <code>failureCallback</code>, and
+  <code>fileType</code> as described above.</p>
+
+  <p>The third way to call <code>loadModel()</code> has one optional parameter
+  after the
+
+  file path. The optional parameter, <code>options</code>, is an
+  <code>Object</code> with options,
+
+  as in <code>loadModel('/assets/model.obj', options)</code>. The
+  <code>options</code> object can
+
+  have the following properties:</p>
+
+  <pre><code class="language-js">let options = {
+    // Enables standardized size scaling during loading if set to true.
+    normalize: true,
+
+    // Function to call once the model loads.
+    successCallback: handleModel,
+
+    // Function to call if an error occurs while loading.
+    failureCallback: handleError,
+
+    // Model's file extension.
+    fileType: '.stl',
+
+    // Flips the U texture coordinates of the model.
+    flipU: false,
+
+    // Flips the V texture coordinates of the model.
+    flipV: false
+  };
+
+
+  // Pass the options object to loadModel().
+
+  loadModel('/assets/model.obj', options);
+
+  </code></pre>
+
+  <p>Models can take time to load. Calling <code>loadModel()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures models load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+
+  <p>Note: There’s no support for colored STL files. STL files with color will
+
+  be rendered without color.</p>
+line: 13
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      shape = loadModel('/assets/teapot.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    // Normalize the geometry's size to fit the canvas.
+    function preload() {
+      shape = loadModel('/assets/teapot.obj', true);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/teapot.obj', true, handleModel);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and log the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/wrong.obj', true, handleModel, handleError);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and print the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+
+    // Print an error message if the file doesn't load.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/teapot.obj', true, handleModel, handleError, '.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and print the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+
+    // Print an error message if the file doesn't load.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+    let options = {
+      normalize: true,
+      successCallback: handleModel,
+      failureCallback: handleError,
+      fileType: '.obj'
+    };
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      loadModel('/assets/teapot.obj', options);
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white teapot drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+
+    // Set the shape variable and print the geometry's
+    // ID to the console.
+    function handleModel(data) {
+      shape = data;
+      console.log(shape.gid);
+    }
+
+    // Print an error message if the file doesn't load.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+  type: p5.Geometry
+overloads:
+  - line: 13
+    params:
+      - name: path
+        description: |
+          <p>path of the model to be loaded.</p>
+        type: String
+      - name: normalize
+        description: |
+          <p>if <code>true</code>, scale the model to fit the canvas.</p>
+        type: Boolean
+      - name: successCallback
+        description: |
+          <p>function to call once the model is loaded. Will be passed
+                                                            the <a href="#/p5.Geometry">p5.Geometry</a> object.</p>
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: >
+          <p>function to call if the model fails to load. Will be passed an
+          <code>Error</code> event object.</p>
+        type: Function(Event)
+        optional: true
+      - name: fileType
+        description: >
+          <p>model’s file extension. Either <code>'.obj'</code> or
+          <code>'.stl'</code>.</p>
+        type: String
+        optional: true
+    return:
+      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
+      type: p5.Geometry
+  - line: 324
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: successCallback
+        description: ''
+        type: function(p5.Geometry)
+        optional: true
+      - name: failureCallback
+        description: ''
+        type: Function(Event)
+        optional: true
+      - name: fileType
+        description: ''
+        type: String
+        optional: true
+    return:
+      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
+      type: p5.Geometry
+  - line: 332
+    params:
+      - name: path
+        description: ''
+        type: String
+      - name: options
+        description: |
+          <p>loading options.</p>
+        type: Object
+        optional: true
+        props:
+          - name: successCallback
+            description: ''
+            type: function(p5.Geometry)
+            optional: true
+          - name: failureCallback
+            description: ''
+            type: Function(Event)
+            optional: true
+          - name: fileType
+            description: ''
+            type: String
+            optional: true
+          - name: normalize
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipU
+            description: ''
+            type: Boolean
+            optional: true
+          - name: flipV
+            description: ''
+            type: Boolean
+            optional: true
+    return:
+      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
+      type: p5.Geometry
+chainable: false
+---
+
+
+# loadModel
diff --git a/src/content/reference/en/p5 copy/loadPixels.mdx b/src/content/reference/en/p5 copy/loadPixels.mdx
new file mode 100644
index 0000000000..424a87765f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadPixels.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L946
+title: loadPixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: |
+  <p>Loads the current value of each pixel on the canvas into the
+  <a href="/reference/p5/pixels/">pixels</a> array.</p>
+  <p><code>loadPixels()</code> must be called before reading from or writing to
+  <a href="/reference/p5/pixels/">pixels</a>.</p>
+line: 946
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0, 100, 100);
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Copy the top half of the canvas to the bottom.
+      for (let i = 0; i < halfImage; i += 1) {
+        pixels[i + halfImage] = pixels[i];
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Two identical images of mountain landscapes, one on top of the other.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# loadPixels
diff --git a/src/content/reference/en/p5 copy/loadShader.mdx b/src/content/reference/en/p5 copy/loadShader.mdx
new file mode 100644
index 0000000000..1180e6c487
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadShader.mdx	
@@ -0,0 +1,172 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L12
+title: loadShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Loads vertex and fragment shaders to create a
+
+  <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
+
+  <p>Shaders are programs that run on the graphics processing unit (GPU). They
+
+  can process many pixels at the same time, making them fast for many
+
+  graphics tasks. They’re written in a language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.</p>
+
+  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
+  it can be
+
+  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
+
+  <code>shader(myShader)</code>. A shader program consists of two files, a
+  vertex shader
+
+  and a fragment shader. The vertex shader affects where 3D geometry is drawn
+
+  on the screen and the fragment shader affects color.</p>
+
+  <p><code>loadShader()</code> loads the vertex and fragment shaders from their
+  <code>.vert</code> and
+
+  <code>.frag</code> files. For example, calling
+
+  <code>loadShader('/assets/shader.vert', '/assets/shader.frag')</code> loads
+  both
+
+  required shaders and returns a <a href="/reference/p5/p5.Shader">p5.Shader</a>
+  object.</p>
+
+  <p>The third parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, it will be called once the shader has loaded. The callback function
+
+  can use the new <a href="/reference/p5/p5.Shader">p5.Shader</a> object as its
+
+  parameter.</p>
+
+  <p>The fourth parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, it will be called if the shader fails to load. The callback
+
+  function can use the event error as its parameter.</p>
+
+  <p>Shaders can take time to load. Calling <code>loadShader()</code> in
+
+  <a href="/reference/p5/preload/">preload()</a> ensures shaders load before
+  they're
+
+  used in <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+
+  <p>Note: Shaders can only be used in WebGL mode.</p>
+line: 12
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Compile and apply the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      // Set the shader uniform r to the value 1.5.
+      mandelbrot.setUniform('r', 1.5);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+
+      describe('A black fractal image on a magenta background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates between 0 and 2.
+      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: vertFilename
+    description: |
+      <p>path of the vertex shader to be loaded.</p>
+    type: String
+  - name: fragFilename
+    description: |
+      <p>path of the fragment shader to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function to call once the shader is loaded. Can be passed the
+                                          <a href="#/p5.Shader">p5.Shader</a> object.</p>
+    type: Function
+    optional: true
+  - name: failureCallback
+    description: |
+      <p>function to call if the shader fails to load. Can be passed an
+                                          <code>Error</code> event object.</p>
+    type: Function
+    optional: true
+return:
+  description: new shader created from the vertex and fragment shader files.
+  type: p5.Shader
+chainable: false
+---
+
+
+# loadShader
diff --git a/src/content/reference/en/p5 copy/loadSound.mdx b/src/content/reference/en/p5 copy/loadSound.mdx
new file mode 100644
index 0000000000..be9dd1ac29
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadSound.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L2946
+title: loadSound
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>loadSound() returns a new p5.SoundFile from a specified
+  path. If called during preload(), the p5.SoundFile will be ready
+  to play in time for setup() and draw(). If called outside of
+  preload, the p5.SoundFile will not be ready immediately, so
+  loadSound accepts a callback as the second parameter. Using a
+  <a href="https://github.com/processing/p5.js/wiki/Local-server/">
+  local server</a> is recommended when loading external files.</p>
+line: 2946
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    let mySound;
+    function preload() {
+      soundFormats('mp3', 'ogg');
+      mySound = loadSound('/assets/doorbell');
+    }
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(canvasPressed);
+      background(220);
+      text('tap here to play', 10, 20);
+    }
+
+    function canvasPressed() {
+      // playing a sound file on a user gesture
+      // is equivalent to `userStartAudio()`
+      mySound.play();
+    }
+    </code></div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>Path to the sound file, or an array with
+                                        paths to soundfiles in multiple formats
+                                        i.e. ['sound.ogg', 'sound.mp3'].
+                                        Alternately, accepts an object: either
+                                        from the HTML5 File API, or a p5.File.</p>
+    type: String|Array
+  - name: successCallback
+    description: |
+      <p>Name of a function to call once file loads</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>Name of a function to call if there is
+                                          an error loading the file.</p>
+    type: Function
+    optional: true
+  - name: whileLoading
+    description: |
+      <p>Name of a function to call while file is loading.
+                                     This function will receive the percentage loaded
+                                     so far, from 0.0 to 1.0.</p>
+    type: Function
+    optional: true
+return:
+  description: Returns a p5.SoundFile
+  type: SoundFile
+chainable: false
+---
+
+
+# loadSound
diff --git a/src/content/reference/en/p5 copy/loadStrings.mdx b/src/content/reference/en/p5 copy/loadStrings.mdx
new file mode 100644
index 0000000000..ce011835bc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadStrings.mdx	
@@ -0,0 +1,188 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L309
+title: loadStrings
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Loads a text file to create an <code>Array</code>.</p>
+
+  <p>The first parameter, <code>path</code>, is always a string with the path to
+  the file.
+
+  Paths to local files should be relative, as in
+
+  <code>loadStrings('/assets/data.txt')</code>. URLs such as
+
+  <code>'https://example.com/data.txt'</code> may be blocked due to browser
+  security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, as in <code>loadStrings('/assets/data.txt', handleData)</code>, then
+  the
+
+  <code>handleData()</code> function will be called once the data loads. The
+  array
+
+  created from the text data will be passed to <code>handleData()</code> as its
+  only
+
+  argument.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, as in <code>loadStrings('/assets/data.txt', handleData,
+  handleFailure)</code>,
+
+  then the <code>handleFailure()</code> function will be called if an error
+  occurs while
+
+  loading. The <code>Error</code> object will be passed to
+  <code>handleFailure()</code> as its only
+
+  argument.</p>
+
+  <p>Note: Data can take time to load. Calling <code>loadStrings()</code> within
+
+  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
+  used in
+
+  <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 309
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    let myData;
+
+    // Load the text and create an array.
+    function preload() {
+      myData = loadStrings('/assets/test.txt');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Select a random line from the text.
+      let phrase = random(myData);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display the text.
+      text(phrase, 10, 50, 90);
+
+      describe(`The text "${phrase}" written in black on a gray background.`);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastLine;
+
+    // Load the text and preprocess it.
+    function preload() {
+      loadStrings('/assets/test.txt', handleData);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display the text.
+      text(lastLine, 10, 50, 90);
+
+      describe('The text "I talk like an orange" written in black on a gray background.');
+    }
+
+    // Select the last line from the text.
+    function handleData(data) {
+      lastLine = data[data.length - 1];
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastLine;
+
+    // Load the text and preprocess it.
+    function preload() {
+      loadStrings('/assets/test.txt', handleData, handleError);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display the text.
+      text(lastLine, 10, 50, 90);
+
+      describe('The text "I talk like an orange" written in black on a gray background.');
+    }
+
+    // Select the last line from the text.
+    function handleData(data) {
+      lastLine = data[data.length - 1];
+    }
+
+    // Log any errors to the console.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the text file to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function to call once the data is
+                                           loaded. Will be passed the array.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if the data fails to
+                                         load. Will be passed an <code>Error</code> event
+                                         object.</p>
+    type: Function
+    optional: true
+return:
+  description: new array containing the loaded text.
+  type: 'String[]'
+chainable: false
+---
+
+
+# loadStrings
diff --git a/src/content/reference/en/p5 copy/loadTable.mdx b/src/content/reference/en/p5 copy/loadTable.mdx
new file mode 100644
index 0000000000..d93e40a3da
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadTable.mdx	
@@ -0,0 +1,124 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L505
+title: loadTable
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Reads the contents of a file or URL and creates a <a
+  href="/reference/p5/p5.Table">p5.Table</a> object with
+
+  its values. If a file is specified, it must be located in the sketch's
+
+  "data" folder. The filename parameter can also be a URL to a file found
+
+  online. By default, the file is assumed to be comma-separated (in CSV
+
+  format). Table only looks for a header row if the 'header' option is
+
+  included.</p>
+
+  <p>This method is asynchronous, meaning it may not finish before the next
+
+  line in your sketch is executed. Calling <a
+  href="/reference/p5/loadTable/">loadTable()</a> inside <a
+  href="/reference/p5/preload/">preload()</a>
+
+  guarantees to complete the operation before <a
+  href="/reference/p5/setup/">setup()</a> and <a
+  href="/reference/p5/draw/">draw()</a> are called.
+
+  Outside of <a href="/reference/p5/preload/">preload()</a>, you may supply a
+  callback function to handle the
+
+  object:</p>
+
+  <p>All files loaded and saved use UTF-8 encoding. This method is suitable for
+  fetching files up to size of 64MB.</p>
+line: 505
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // Given the following CSV file called "mammals.csv"
+    // located in the project's "assets" folder:
+    //
+    // id,species,name
+    // 0,Capra hircus,Goat
+    // 1,Panthera pardus,Leopard
+    // 2,Equus zebra,Zebra
+
+    let table;
+
+    function preload() {
+      //my table is comma separated value "csv"
+      //and has a header specifying the columns labels
+      table = loadTable('/assets/mammals.csv', 'csv', 'header');
+      //the file can be remote
+      //table = loadTable("https://p5js.org/reference//assets/mammals.csv",
+      //                  "csv", "header");
+    }
+
+    function setup() {
+      //count the columns
+      print(table.getRowCount() + ' total rows in table');
+      print(table.getColumnCount() + ' total columns in table');
+
+      print(table.getColumn('name'));
+      //["Goat", "Leopard", "Zebra"]
+
+      //cycle through the table
+      for (let r = 0; r < table.getRowCount(); r++)
+        for (let c = 0; c < table.getColumnCount(); c++) {
+          print(table.getString(r, c));
+        }
+      describe(`randomly generated text from a file,
+        for example "i smell like butter"`);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: filename
+    description: |
+      <p>name of the file or URL to load</p>
+    type: String
+  - name: extension
+    description: |
+      <p>parse the table by comma-separated values "csv", semicolon-separated
+                                           values "ssv", or tab-separated values "tsv"</p>
+    type: String
+    optional: true
+  - name: header
+    description: |
+      <p>"header" to indicate table has header row</p>
+    type: String
+    optional: true
+  - name: callback
+    description: |
+      <p>function to be executed after
+                                           <a href="#/p5/loadTable">loadTable()</a> completes. On success, the
+                                           <a href="#/p5.Table">Table</a> object is passed in as the
+                                           first argument.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to be executed if
+                                           there is an error, response is passed
+                                           in as first argument</p>
+    type: Function
+    optional: true
+return:
+  description: <a href="#/p5.Table">Table</a> object containing data
+  type: Object
+chainable: false
+---
+
+
+# loadTable
diff --git a/src/content/reference/en/p5 copy/loadXML.mdx b/src/content/reference/en/p5 copy/loadXML.mdx
new file mode 100644
index 0000000000..859a3c895d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loadXML.mdx	
@@ -0,0 +1,220 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L780
+title: loadXML
+module: IO
+submodule: Input
+file: src/io/files.js
+description: >
+  <p>Loads an XML file to create a <a href="/reference/p5/p5.XML">p5.XML</a>
+  object.</p>
+
+  <p>Extensible Markup Language
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
+  target="_blank">XML</a>)
+
+  is a standard format for sending data between applications. Like HTML, the
+
+  XML format is based on tags and attributes, as in
+
+  <code><time units="s">1234</time></code>.</p>
+
+  <p>The first parameter, <code>path</code>, is always a string with the path to
+  the file.
+
+  Paths to local files should be relative, as in
+
+  <code>loadXML('/assets/data.xml')</code>. URLs such as
+  <code>'https://example.com/data.xml'</code>
+
+  may be blocked due to browser security.</p>
+
+  <p>The second parameter, <code>successCallback</code>, is optional. If a
+  function is
+
+  passed, as in <code>loadXML('/assets/data.xml', handleData)</code>, then the
+
+  <code>handleData()</code> function will be called once the data loads. The
+
+  <a href="/reference/p5/p5.XML">p5.XML</a> object created from the data will be
+  passed
+
+  to <code>handleData()</code> as its only argument.</p>
+
+  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
+  function is
+
+  passed, as in <code>loadXML('/assets/data.xml', handleData,
+  handleFailure)</code>, then
+
+  the <code>handleFailure()</code> function will be called if an error occurs
+  while
+
+  loading. The <code>Error</code> object will be passed to
+  <code>handleFailure()</code> as its only
+
+  argument.</p>
+
+  <p>Note: Data can take time to load. Calling <code>loadXML()</code> within
+
+  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
+  used in
+
+  <a href="/reference/p5/setup/">setup()</a> or <a
+  href="/reference/p5/draw/">draw()</a>.</p>
+line: 780
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let myXML;
+
+    // Load the XML and create a p5.XML object.
+    function preload() {
+      myXML = loadXML('/assets/animals.xml');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get an array with all mammal tags.
+      let mammals = myXML.getChildren('mammal');
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(14);
+
+      // Iterate over the mammals array.
+      for (let i = 0; i < mammals.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Get the mammal's common name.
+        let name = mammals[i].getContent();
+
+        // Display the mammal's name.
+        text(name, 20, y);
+      }
+
+      describe(
+        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastMammal;
+
+    // Load the XML and create a p5.XML object.
+    function preload() {
+      loadXML('/assets/animals.xml', handleData);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display the content of the last mammal element.
+      text(lastMammal, 50, 50);
+
+      describe('The word "Zebra" written in black on a gray background.');
+    }
+
+    // Get the content of the last mammal element.
+    function handleData(data) {
+      // Get an array with all mammal elements.
+      let mammals = data.getChildren('mammal');
+
+      // Get the content of the last mammal.
+      lastMammal = mammals[mammals.length - 1].getContent();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let lastMammal;
+
+    // Load the XML and preprocess it.
+    function preload() {
+      loadXML('/assets/animals.xml', handleData, handleError);
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display the content of the last mammal element.
+      text(lastMammal, 50, 50);
+
+      describe('The word "Zebra" written in black on a gray background.');
+    }
+
+    // Get the content of the last mammal element.
+    function handleData(data) {
+      // Get an array with all mammal elements.
+      let mammals = data.getChildren('mammal');
+
+      // Get the content of the last mammal.
+      lastMammal = mammals[mammals.length - 1].getContent();
+    }
+
+    // Log any errors to the console.
+    function handleError(error) {
+      console.error('Oops!', error);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: path
+    description: |
+      <p>path of the XML file to be loaded.</p>
+    type: String
+  - name: successCallback
+    description: |
+      <p>function to call once the data is
+                                           loaded. Will be passed the
+                                           <a href="#/p5.XML">p5.XML</a> object.</p>
+    type: Function
+    optional: true
+  - name: errorCallback
+    description: |
+      <p>function to call if the data fails to
+                                         load. Will be passed an <code>Error</code> event
+                                         object.</p>
+    type: Function
+    optional: true
+return:
+  description: |-
+    XML data loaded into a <a href="#/p5.XML">p5.XML</a>
+                     object.
+  type: p5.XML
+chainable: false
+---
+
+
+# loadXML
diff --git a/src/content/reference/en/p5 copy/log.mdx b/src/content/reference/en/p5 copy/log.mdx
new file mode 100644
index 0000000000..c84c6d5a4b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/log.mdx	
@@ -0,0 +1,79 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L423
+title: log
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the natural logarithm (the base-e logarithm) of a number.</p>
+
+  <p><code>log()</code> expects the <code>n</code> parameter to be a value
+  greater than 0 because
+
+  the natural logarithm is defined that way.</p>
+line: 423
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = log(50);
+      circle(33, 33, d);
+
+      // Bottom-right.
+      d = log(500000000);
+      circle(67, 67, d);
+
+      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that get higher slowly from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate coordinates.
+      let x = frameCount;
+      let y = 15 * log(x);
+
+      // Draw a point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number greater than 0.</p>
+    type: Number
+return:
+  description: natural logarithm of n.
+  type: Number
+chainable: false
+---
+
+
+# log
diff --git a/src/content/reference/en/p5 copy/loop.mdx b/src/content/reference/en/p5 copy/loop.mdx
new file mode 100644
index 0000000000..a73432d2c1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/loop.mdx	
@@ -0,0 +1,111 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L127
+title: loop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Resumes the draw loop after <a href="/reference/p5/noLoop/">noLoop()</a>
+  has been
+
+  called.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
+
+  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
+
+  restarted by calling <code>loop()</code>.</p>
+
+  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
+  to check
+
+  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
+line: 127
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe(
+        'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's x-coordinate.
+      let x = frameCount;
+
+      // Draw the circle.
+      circle(x, 50, 20);
+    }
+
+    // Resume the draw loop when the user double-clicks.
+    function doubleClicked() {
+      loop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let startButton;
+    let stopButton;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the button elements and place them
+      // beneath the canvas.
+      startButton = createButton('▶');
+      startButton.position(0, 100);
+      startButton.size(50, 20);
+      stopButton = createButton('◾');
+      stopButton.position(50, 100);
+      stopButton.size(50, 20);
+
+      // Set functions to call when the buttons are pressed.
+      startButton.mousePressed(loop);
+      stopButton.mousePressed(noLoop);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe(
+        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# loop
diff --git a/src/content/reference/en/p5 copy/mag.mdx b/src/content/reference/en/p5 copy/mag.mdx
new file mode 100644
index 0000000000..4d46565b07
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mag.mdx	
@@ -0,0 +1,84 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L481
+title: mag
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the magnitude, or length, of a vector.</p>
+
+  <p>A vector can be thought of in different ways. In one view, a vector is a
+
+  point in space. The vector's components, <code>x</code> and <code>y</code>,
+  are the point's
+
+  coordinates <code>(x, y)</code>. A vector's magnitude is the distance from the
+  origin
+
+  <code>(0, 0)</code> to <code>(x, y)</code>. <code>mag(x, y)</code> is a
+  shortcut for calling
+
+  <code>dist(0, 0, x, y)</code>.</p>
+
+  <p>A vector can also be thought of as an arrow pointing in space. This view is
+
+  helpful for programming motion. See <a
+  href="/reference/p5/p5.Vector">p5.Vector</a> for
+
+  more details.</p>
+
+  <p>Use <a href="/reference/p5.Vector/mag/">p5.Vector.mag()</a> to calculate
+  the
+
+  magnitude of a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+line: 481
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the vector's components.
+      let x = 30;
+      let y = 40;
+
+      // Calculate the magnitude.
+      let m = mag(x, y);
+
+      // Style the text.
+      textSize(16);
+
+      // Display the vector and its magnitude.
+      line(0, 0, x, y);
+      text(m, x, y);
+
+      describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>first component.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>second component.</p>
+    type: Number
+return:
+  description: magnitude of vector.
+  type: Number
+chainable: false
+---
+
+
+# mag
diff --git a/src/content/reference/en/p5 copy/map.mdx b/src/content/reference/en/p5 copy/map.mdx
new file mode 100644
index 0000000000..a94e6e4dd7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/map.mdx	
@@ -0,0 +1,119 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L534
+title: map
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Re-maps a number from one range to another.</p>
+
+  <p>For example, calling <code>map(2, 0, 10, 0, 100)</code> returns 20. The
+  first three
+
+  arguments set the original value to 2 and the original range from 0 to 10.
+
+  The last two arguments set the target range from 0 to 100. 20's position
+
+  in the target range [0, 100] is proportional to 2's position in the
+
+  original range [0, 10].</p>
+
+  <p>The sixth parameter, <code>withinBounds</code>, is optional. By default,
+  <code>map()</code> can
+
+  return values outside of the target range. For example,
+
+  <code>map(11, 0, 10, 0, 100)</code> returns 110. Passing <code>true</code> as
+  the sixth parameter
+
+  constrains the remapped value to the target range. For example,
+
+  <code>map(11, 0, 10, 0, 100, true)</code> returns 100.</p>
+line: 534
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the top line.
+      line(0, 25, mouseX, 25);
+
+      // Remap mouseX from [0, 100] to [0, 50].
+      let x = map(mouseX, 0, 100, 0, 50);
+
+      // Draw the bottom line.
+      line(0, 75, x, 75);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A circle changes color from black to white as the mouse moves from left to right.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Remap mouseX from [0, 100] to [0, 255]
+      let c = map(mouseX, 0, 100, 0, 255);
+
+      // Style the circle.
+      fill(c);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>the value to be remapped.</p>
+    type: Number
+  - name: start1
+    description: |
+      <p>lower bound of the value's current range.</p>
+    type: Number
+  - name: stop1
+    description: |
+      <p>upper bound of the value's current range.</p>
+    type: Number
+  - name: start2
+    description: |
+      <p>lower bound of the value's target range.</p>
+    type: Number
+  - name: stop2
+    description: |
+      <p>upper bound of the value's target range.</p>
+    type: Number
+  - name: withinBounds
+    description: |
+      <p>constrain the value to the newly mapped range.</p>
+    type: Boolean
+    optional: true
+return:
+  description: remapped number.
+  type: Number
+chainable: false
+---
+
+
+# map
diff --git a/src/content/reference/en/p5 copy/match.mdx b/src/content/reference/en/p5 copy/match.mdx
new file mode 100644
index 0000000000..c93425e96d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/match.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L60
+title: match
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Applies a regular expression to a string and returns an array with the
+
+  first match.</p>
+
+  <p><code>match()</code> uses regular expressions (regex) to match patterns in
+  text. For
+
+  example, the regex <code>abc</code> can be used to search a string for the
+  exact
+
+  sequence of characters <code>abc</code>. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
+  target="_blank">MDN</a>.
+
+  for more information about regexes.</p>
+
+  <p>The first parameter, <code>str</code>, is the string to search.</p>
+
+  <p>The second parameter, <code>regex</code>, is a string with the regular
+  expression to
+
+  apply. For example, calling <code>match('Hello, p5*js!', '[a-z][0-9]')</code>
+  would
+
+  return the array <code>['p5']</code>.</p>
+
+  <p>Note: If no matches are found, <code>null</code> is returned.</p>
+line: 60
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'Hello, p5*js!';
+
+      // Match the characters that are lowercase
+      // letters followed by digits.
+      let matches = match(string, '[a-z][0-9]');
+
+      // Print the matches array to the console:
+      // ['p5']
+      print(matches);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the matches.
+      text(matches, 50, 50);
+
+      describe('The text "p5" written in black on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: str
+    description: |
+      <p>string to search.</p>
+    type: String
+  - name: regexp
+    description: |
+      <p>regular expression to match.</p>
+    type: String
+return:
+  description: match if found.
+  type: 'String[]'
+chainable: false
+---
+
+
+# match
diff --git a/src/content/reference/en/p5 copy/matchAll.mdx b/src/content/reference/en/p5 copy/matchAll.mdx
new file mode 100644
index 0000000000..371d596b61
--- /dev/null
+++ b/src/content/reference/en/p5 copy/matchAll.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L119
+title: matchAll
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Applies a regular expression to a string and returns an array of
+  matches.</p>
+
+  <p><code>match()</code> uses regular expressions (regex) to match patterns in
+  text. For
+
+  example, the regex <code>abc</code> can be used to search a string for the
+  exact
+
+  sequence of characters <code>abc</code>. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
+  target="_blank">MDN</a>.
+
+  for more information about regexes. <code>matchAll()</code> is different from
+
+  <a href="/reference/p5/match/">match()</a> because it returns every match, not
+  just
+
+  the first.</p>
+
+  <p>The first parameter, <code>str</code>, is the string to search.</p>
+
+  <p>The second parameter, <code>regex</code>, is a string with the regular
+  expression to
+
+  apply. For example, calling
+
+  <code>matchAll('p5*js is easier than abc123', '[a-z][0-9]')</code> would
+  return the
+
+  2D array <code>[['p5'], ['c1']]</code>.</p>
+
+  <p>Note: If no matches are found, an empty array <code>[]</code> is
+  returned.</p>
+line: 119
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'p5*js is easier than abc123';
+
+      // Match the character sequences that are
+      // lowercase letters followed by digits.
+      let matches = matchAll(string, '[a-z][0-9]');
+
+      // Print the matches array to the console:
+      // [['p5'], ['c1']]
+      print(matches);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Iterate over the matches array.
+      for (let i = 0; i < matches.length; i += 1) {
+
+        // Calculate the y-coordainate.
+        let y = (i + 1) * 33;
+
+        // Display the match.
+        text(matches[i], 50, y);
+      }
+
+      describe(
+        'The text "p5" and "c1" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: str
+    description: |
+      <p>string to search.</p>
+    type: String
+  - name: regexp
+    description: |
+      <p>regular expression to match.</p>
+    type: String
+return:
+  description: matches found.
+  type: 'String[]'
+chainable: false
+---
+
+
+# matchAll
diff --git a/src/content/reference/en/p5 copy/max.mdx b/src/content/reference/en/p5 copy/max.mdx
new file mode 100644
index 0000000000..0dd0ee142c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/max.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L618
+title: max
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Returns the largest value in a sequence of numbers.</p>
+
+  <p>The version of <code>max()</code> with one parameter interprets it as an
+  array of
+
+  numbers and returns the largest number.</p>
+
+  <p>The version of <code>max()</code> with two or more parameters interprets
+  them as
+
+  individual numbers and returns the largest number.</p>
+line: 618
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the maximum of 10, 5, and 20.
+      let m = max(10, 5, 20);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the max.
+      text(m, 50, 50);
+
+      describe('The number 20 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let numbers = [10, 5, 20];
+
+      // Calculate the maximum of the array.
+      let m = max(numbers);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the max.
+      text(m, 50, 50);
+
+      describe('The number 20 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: maximum number.
+  type: Number
+overloads:
+  - line: 618
+    params:
+      - name: n0
+        description: |
+          <p>first number to compare.</p>
+        type: Number
+      - name: n1
+        description: |
+          <p>second number to compare.</p>
+        type: Number
+    return:
+      description: maximum number.
+      type: Number
+  - line: 680
+    params:
+      - name: nums
+        description: |
+          <p>numbers to compare.</p>
+        type: 'Number[]'
+    return:
+      description: ''
+      type: Number
+chainable: false
+---
+
+
+# max
diff --git a/src/content/reference/en/p5 copy/metalness.mdx b/src/content/reference/en/p5 copy/metalness.mdx
new file mode 100644
index 0000000000..ef378bc2a9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/metalness.mdx	
@@ -0,0 +1,142 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L3069
+title: metalness
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the amount of "metalness" of a
+
+  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
+
+  <p><code>metalness()</code> can make materials appear more metallic. It
+  affects the way
+
+  materials reflect light sources including
+
+  affects the way materials reflect light sources including
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>,
+
+  <a href="/reference/p5/spotLight/">spotLight()</a>, and
+
+  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
+
+  <p>The parameter, <code>metallic</code>, is a number that sets the amount of
+  metalness.
+
+  <code>metallic</code> must be greater than 1, which is its default value.
+  Higher
+
+  values, such as <code>metalness(100)</code>, make specular materials appear
+  more
+
+  metallic.</p>
+line: 3069
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn on an ambient light.
+      ambientLight(200);
+
+      // Get the mouse's coordinates.
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Turn on a white point light that follows the mouse.
+      pointLight(255, 255, 255, mx, my, 50);
+
+      // Style the spheres.
+      noStroke();
+      fill(30, 30, 255);
+      specularMaterial(255);
+      shininess(20);
+
+      // Draw the left sphere with low metalness.
+      translate(-25, 0, 0);
+      metalness(1);
+      sphere(20);
+
+      // Draw the right sphere with high metalness.
+      translate(50, 0, 0);
+      metalness(50);
+      sphere(20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(100 ,100 ,WEBGL);
+
+      describe(
+        'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'
+      );
+    }
+
+    function draw() {
+      // Add the panorama.
+      panorama(img);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Use the image as a light source.
+      imageLight(img);
+
+      // Style the spheres.
+      noStroke();
+      specularMaterial(50);
+      shininess(200);
+
+      // Draw the left sphere with low metalness.
+      translate(-25, 0, 0);
+      metalness(1);
+      sphere(20);
+
+      // Draw the right sphere with high metalness.
+      translate(50, 0, 0);
+      metalness(50);
+      sphere(20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: metallic
+    description: |
+      <p>amount of metalness.</p>
+    type: Number
+chainable: false
+---
+
+
+# metalness
diff --git a/src/content/reference/en/p5 copy/midiToFreq.mdx b/src/content/reference/en/p5 copy/midiToFreq.mdx
new file mode 100644
index 0000000000..ada29d80ea
--- /dev/null
+++ b/src/content/reference/en/p5 copy/midiToFreq.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L841
+title: midiToFreq
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns the frequency value of a MIDI note value.
+  General MIDI treats notes as integers where middle C
+  is 60, C# is 61, D is 62 etc. Useful for generating
+  musical frequencies with oscillators.</p>
+line: 841
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    let midiNotes = [60, 64, 67, 72];
+    let noteIndex = 0;
+    let midiVal, freq;
+
+    function setup() {
+      let cnv = createCanvas(100, 100);
+      cnv.mousePressed(startSound);
+      osc = new p5.TriOsc();
+      env = new p5.Envelope();
+    }
+
+    function draw() {
+      background(220);
+      text('tap to play', 10, 20);
+      if (midiVal) {
+        text('MIDI: ' + midiVal, 10, 40);
+        text('Freq: ' + freq, 10, 60);
+      }
+    }
+
+    function startSound() {
+      // see also: userStartAudio();
+      osc.start();
+
+      midiVal = midiNotes[noteIndex % midiNotes.length];
+      freq = midiToFreq(midiVal);
+      osc.freq(freq);
+      env.ramp(osc, 0, 1.0, 0);
+
+      noteIndex++;
+    }
+    </code></div>
+class: p5
+params:
+  - name: midiNote
+    description: |
+      <p>The number of a MIDI note</p>
+    type: Number
+return:
+  description: Frequency value of the given MIDI note
+  type: Number
+chainable: false
+---
+
+
+# midiToFreq
diff --git a/src/content/reference/en/p5 copy/millis.mdx b/src/content/reference/en/p5 copy/millis.mdx
new file mode 100644
index 0000000000..18f1ac06d0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/millis.mdx	
@@ -0,0 +1,147 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L112
+title: millis
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: >
+  <p>Returns the number of milliseconds since a sketch started running.</p>
+
+  <p><code>millis()</code> keeps track of how long a sketch has been running in
+
+  milliseconds (thousandths of a second). This information is often
+
+  helpful for timing events and animations.</p>
+
+  <p>If a sketch has a
+
+  <a href="/reference/p5/setup/">setup()</a> function, then
+  <code>millis()</code> begins tracking
+
+  time before the code in <a href="/reference/p5/setup/">setup()</a> runs. If a
+
+  sketch includes a <a href="/reference/p5/preload/">preload()</a> function,
+  then
+
+  <code>millis()</code> begins tracking time as soon as the code in
+
+  <a href="/reference/p5/preload/">preload()</a> starts running.</p>
+line: 112
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the number of milliseconds the sketch has run.
+      let ms = millis();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(10);
+      textFont('Courier New');
+
+      // Display how long it took setup() to be called.
+      text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
+
+      describe(
+        `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Get the number of seconds the sketch has run.
+      let s = millis() / 1000;
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(10);
+      textFont('Courier New');
+
+      // Display how long the sketch has run.
+      text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle oscillates left and right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Get the number of seconds the sketch has run.
+      let s = millis() / 1000;
+
+      // Calculate an x-coordinate.
+      let x = 30 * sin(s) + 50;
+
+      // Draw the circle.
+      circle(x, 50, 30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Load the GeoJSON.
+    function preload() {
+      loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the number of milliseconds the sketch has run.
+      let ms = millis();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(11);
+
+      // Display how long it took to load the data.
+      text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
+
+      describe(
+        `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: number of milliseconds since starting the sketch.
+  type: Number
+chainable: false
+---
+
+
+# millis
diff --git a/src/content/reference/en/p5 copy/min.mdx b/src/content/reference/en/p5 copy/min.mdx
new file mode 100644
index 0000000000..67af3b37f1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/min.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L695
+title: min
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Returns the smallest value in a sequence of numbers.</p>
+
+  <p>The version of <code>min()</code> with one parameter interprets it as an
+  array of
+
+  numbers and returns the smallest number.</p>
+
+  <p>The version of <code>min()</code> with two or more parameters interprets
+  them as
+
+  individual numbers and returns the smallest number.</p>
+line: 695
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the minimum of 10, 5, and 20.
+      let m = min(10, 5, 20);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the min.
+      text(m, 50, 50);
+
+      describe('The number 5 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let numbers = [10, 5, 20];
+
+      // Calculate the minimum of the array.
+      let m = min(numbers);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the min.
+      text(m, 50, 50);
+
+      describe('The number 5 written in the middle of a gray square.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: minimum number.
+  type: Number
+overloads:
+  - line: 695
+    params:
+      - name: n0
+        description: |
+          <p>first number to compare.</p>
+        type: Number
+      - name: n1
+        description: |
+          <p>second number to compare.</p>
+        type: Number
+    return:
+      description: minimum number.
+      type: Number
+  - line: 757
+    params:
+      - name: nums
+        description: |
+          <p>numbers to compare.</p>
+        type: 'Number[]'
+    return:
+      description: ''
+      type: Number
+chainable: false
+---
+
+
+# min
diff --git a/src/content/reference/en/p5 copy/minute.mdx b/src/content/reference/en/p5 copy/minute.mdx
new file mode 100644
index 0000000000..3ac966c800
--- /dev/null
+++ b/src/content/reference/en/p5 copy/minute.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L78
+title: minute
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current minute as a number from 0–59.</p>
+line: 78
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current minute.
+      let m = minute();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the minute.
+      text(`Current minute: ${m}`, 10, 50, 80);
+
+      describe(`The text 'Current minute: ${m}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current minute between 0 and 59.
+  type: Integer
+chainable: false
+---
+
+
+# minute
diff --git a/src/content/reference/en/p5 copy/model.mdx b/src/content/reference/en/p5 copy/model.mdx
new file mode 100644
index 0000000000..e925350407
--- /dev/null
+++ b/src/content/reference/en/p5 copy/model.mdx	
@@ -0,0 +1,155 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L991
+title: model
+module: Shape
+submodule: 3D Models
+file: src/webgl/loading.js
+description: >
+  <p>Draws a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to the
+  canvas.</p>
+
+  <p>The parameter, <code>model</code>, is the
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to draw.
+
+  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can be built with
+
+  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, or
+
+  <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
+
+  <a href="/reference/p5/endGeometry/">endGeometry()</a>. They can also be
+  loaded from
+
+  a file with <a href="/reference/p5/loadGeometry/">loadGeometry()</a>.</p>
+
+  <p>Note: <code>model()</code> can only be used in WebGL mode.</p>
+line: 991
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createShape);
+
+      describe('A white cone drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+    }
+
+    // Create p5.Geometry object from a single cone.
+    function createShape() {
+      cone();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      shape = buildGeometry(createArrow);
+
+      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the arrows.
+      noStroke();
+
+      // Draw the p5.Geometry object.
+      model(shape);
+
+      // Translate and rotate the coordinate system.
+      translate(30, 0, 0);
+      rotateZ(frameCount * 0.01);
+
+      // Draw the p5.Geometry object again.
+      model(shape);
+    }
+
+    function createArrow() {
+      // Add shapes to the p5.Geometry object.
+      push();
+      rotateX(PI);
+      cone(10);
+      translate(0, -10, 0);
+      cylinder(3, 20);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let shape;
+
+    // Load the file and create a p5.Geometry object.
+    function preload() {
+      shape = loadModel('/assets/octahedron.obj');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white octahedron drawn against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the shape.
+      model(shape);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: model
+    description: |
+      <p>3D shape to be drawn.</p>
+    type: p5.Geometry
+chainable: false
+---
+
+
+# model
diff --git a/src/content/reference/en/p5 copy/month.mdx b/src/content/reference/en/p5 copy/month.mdx
new file mode 100644
index 0000000000..d2e248235c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/month.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L242
+title: month
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current month as a number from 1–12.</p>
+line: 242
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current month.
+      let m = month();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the month.
+      text(`Current month: ${m}`, 10, 50, 80);
+
+      describe(`The text 'Current month: ${m}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current month between 1 and 12.
+  type: Integer
+chainable: false
+---
+
+
+# month
diff --git a/src/content/reference/en/p5 copy/mouseButton.mdx b/src/content/reference/en/p5 copy/mouseButton.mdx
new file mode 100644
index 0000000000..82128f97a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseButton.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L687
+title: mouseButton
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A String system variable that contains the value of the last mouse button
+
+  pressed.</p>
+
+  <p>The <code>mouseButton</code> variable is either <code>LEFT</code>,
+  <code>RIGHT</code>, or <code>CENTER</code>,
+
+  depending on which button was pressed last.</p>
+
+  <p>Note: Different browsers may track <code>mouseButton</code> differently.
+  See
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons/"
+  target="_blank">MDN</a>
+
+  for more information.</p>
+line: 687
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with black text at its center. The text changes from 0 to either "left" or "right" when the user clicks a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse button.
+      text(mouseButton, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        "A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      if (mouseIsPressed === true) {
+        if (mouseButton === LEFT) {
+          circle(50, 50, 50);
+        }
+        if (mouseButton === RIGHT) {
+          square(25, 25, 50);
+        }
+        if (mouseButton === CENTER) {
+          triangle(23, 75, 50, 20, 78, 75);
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Constant
+---
+
+
+# mouseButton
diff --git a/src/content/reference/en/p5 copy/mouseClicked.mdx b/src/content/reference/en/p5 copy/mouseClicked.mdx
new file mode 100644
index 0000000000..80bd80b0a2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseClicked.mdx	
@@ -0,0 +1,196 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1443
+title: mouseClicked
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once after a mouse button is pressed and
+  released.</p>
+
+  <p>Declaring the function <code>mouseClicked()</code> sets a code block to run
+
+  automatically when the user releases a mouse button after having pressed
+
+  it:</p>
+
+  <pre><code class="language-js">function mouseClicked() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseClicked()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseClicked() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseClicked()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse click event:</p>
+
+  <pre><code class="language-js">function mouseClicked(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mouseClicked()</code> will run when a user’s
+  touch
+
+  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
+  If
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
+  touch
+
+  ends and <code>mouseClicked()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
+
+  <a href="/reference/p5/mouseReleased/">mouseReleased()</a>,
+
+  and <code>mouseClicked()</code> are all related.
+
+  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
+  user
+
+  clicks the mouse. <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
+  runs as
+
+  soon as the user releases the mouse click. <code>mouseClicked()</code> runs
+
+  immediately after <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
+line: 1443
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle the square's color when the user clicks.
+    function mouseClicked() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the circle.
+      fill('orange');
+      stroke('royalblue');
+      strokeWeight(10);
+
+      describe(
+        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+      );
+    }
+
+    function draw() {
+      background(220);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+
+    // Set the stroke color and weight as soon as the user clicks.
+    function mousePressed() {
+      stroke('deeppink');
+      strokeWeight(3);
+    }
+
+    // Set the stroke and fill colors as soon as the user releases
+    // the mouse.
+    function mouseReleased() {
+      stroke('royalblue');
+
+      // This is never visible because fill() is called
+      // in mouseClicked() which runs immediately after
+      // mouseReleased();
+      fill('limegreen');
+    }
+
+    // Set the fill color and stroke weight after
+    // mousePressed() and mouseReleased() are called.
+    function mouseClicked() {
+      fill('orange');
+      strokeWeight(10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseClicked
diff --git a/src/content/reference/en/p5 copy/mouseDragged.mdx b/src/content/reference/en/p5 copy/mouseDragged.mdx
new file mode 100644
index 0000000000..26fea21fe9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseDragged.mdx	
@@ -0,0 +1,130 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L982
+title: mouseDragged
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called when the mouse moves while a button is
+  pressed.</p>
+
+  <p>Declaring the function <code>mouseDragged()</code> sets a code block to run
+
+  automatically when the user clicks and drags the mouse:</p>
+
+  <pre><code class="language-js">function mouseDragged() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseDragged()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseDragged() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseDragged()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse drag event:</p>
+
+  <pre><code class="language-js">function mouseDragged(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mouseDragged()</code> will run when a user
+  moves a touch
+
+  point if <a href="/reference/p5/touchMoved/">touchMoved()</a> isn’t declared.
+  If
+
+  <a href="/reference/p5/touchMoved/">touchMoved()</a> is declared, then
+
+  <a href="/reference/p5/touchMoved/">touchMoved()</a> will run when a user
+  moves a
+
+  touch point and <code>mouseDragged()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+line: 982
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mouseDragged() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseDragged
diff --git a/src/content/reference/en/p5 copy/mouseIsPressed.mdx b/src/content/reference/en/p5 copy/mouseIsPressed.mdx
new file mode 100644
index 0000000000..37109eb364
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseIsPressed.mdx	
@@ -0,0 +1,73 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L755
+title: mouseIsPressed
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Boolean</code> system variable that's <code>true</code> if the
+  mouse is pressed and
+
+  <code>false</code> if not.</p>
+line: 755
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the word "false" at its center. The word changes to "true" when the user presses a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouseIsPressed variable.
+      text(mouseIsPressed, 25, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      if (mouseIsPressed === true) {
+        fill(0);
+      } else {
+        fill(255);
+      }
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Boolean
+---
+
+
+# mouseIsPressed
diff --git a/src/content/reference/en/p5 copy/mouseMoved.mdx b/src/content/reference/en/p5 copy/mouseMoved.mdx
new file mode 100644
index 0000000000..14928fdc5e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseMoved.mdx	
@@ -0,0 +1,118 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L896
+title: mouseMoved
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called when the mouse moves.</p>
+
+  <p>Declaring the function <code>mouseMoved()</code> sets a code block to run
+
+  automatically when the user moves the mouse without clicking any mouse
+
+  buttons:</p>
+
+  <pre><code class="language-js">function mouseMoved() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseMoved()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseMoved() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseMoved()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse move event:</p>
+
+  <pre><code class="language-js">function mouseMoved(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+line: 896
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mouseMoved() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseMoved
diff --git a/src/content/reference/en/p5 copy/mousePressed.mdx b/src/content/reference/en/p5 copy/mousePressed.mdx
new file mode 100644
index 0000000000..81181859c1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mousePressed.mdx	
@@ -0,0 +1,193 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1098
+title: mousePressed
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when a mouse button is pressed.</p>
+
+  <p>Declaring the function <code>mousePressed()</code> sets a code block to run
+
+  automatically when the user presses a mouse button:</p>
+
+  <pre><code class="language-js">function mousePressed() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mousePressed()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mousePressed() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mousePressed()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse press event:</p>
+
+  <pre><code class="language-js">function mousePressed(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mousePressed()</code> will run when a user’s
+  touch
+
+  begins if <a href="/reference/p5/touchStarted/">touchStarted()</a> isn’t
+  declared. If
+
+  <a href="/reference/p5/touchStarted/">touchStarted()</a> is declared, then
+
+  <a href="/reference/p5/touchStarted/">touchStarted()</a> will run when a
+  user’s touch
+
+  begins and <code>mousePressed()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: <code>mousePressed()</code>, <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a>,
+
+  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
+
+  <code>mousePressed()</code> runs as soon as the user clicks the mouse.
+
+  <a href="/reference/p5/mouseReleased/">mouseReleased()</a> runs as soon as the
+  user
+
+  releases the mouse click. <a
+  href="/reference/p5/mouseClicked/">mouseClicked()</a>
+
+  runs immediately after <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
+line: 1098
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mousePressed() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the circle.
+      fill('orange');
+      stroke('royalblue');
+      strokeWeight(10);
+
+      describe(
+        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+      );
+    }
+
+    function draw() {
+      background(220);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+
+    // Set the stroke color and weight as soon as the user clicks.
+    function mousePressed() {
+      stroke('deeppink');
+      strokeWeight(3);
+    }
+
+    // Set the stroke and fill colors as soon as the user releases
+    // the mouse.
+    function mouseReleased() {
+      stroke('royalblue');
+
+      // This is never visible because fill() is called
+      // in mouseClicked() which runs immediately after
+      // mouseReleased();
+      fill('limegreen');
+    }
+
+    // Set the fill color and stroke weight after
+    // mousePressed() and mouseReleased() are called.
+    function mouseClicked() {
+      fill('orange');
+      strokeWeight(10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mousePressed
diff --git a/src/content/reference/en/p5 copy/mouseReleased.mdx b/src/content/reference/en/p5 copy/mouseReleased.mdx
new file mode 100644
index 0000000000..6f52911162
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseReleased.mdx	
@@ -0,0 +1,195 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1270
+title: mouseReleased
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when a mouse button is released.</p>
+
+  <p>Declaring the function <code>mouseReleased()</code> sets a code block to
+  run
+
+  automatically when the user releases a mouse button after having pressed
+
+  it:</p>
+
+  <pre><code class="language-js">function mouseReleased() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseReleased()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseReleased() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional.
+  <code>mouseReleased()</code> is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse release event:</p>
+
+  <pre><code class="language-js">function mouseReleased(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <code>mouseReleased()</code> will run when a user’s
+  touch
+
+  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
+  If
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
+  touch
+
+  ends and <code>mouseReleased()</code> won’t.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
+  <code>mouseReleased()</code>,
+
+  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
+
+  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
+  user
+
+  clicks the mouse. <code>mouseReleased()</code> runs as soon as the user
+  releases the
+
+  mouse click. <a href="/reference/p5/mouseClicked/">mouseClicked()</a> runs
+
+  immediately after <code>mouseReleased()</code>.</p>
+line: 1270
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function mouseReleased() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the circle.
+      fill('orange');
+      stroke('royalblue');
+      strokeWeight(10);
+
+      describe(
+        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
+      );
+    }
+
+    function draw() {
+      background(220);
+
+      // Draw the circle.
+      circle(50, 50, 20);
+    }
+
+    // Set the stroke color and weight as soon as the user clicks.
+    function mousePressed() {
+      stroke('deeppink');
+      strokeWeight(3);
+    }
+
+    // Set the stroke and fill colors as soon as the user releases
+    // the mouse.
+    function mouseReleased() {
+      stroke('royalblue');
+
+      // This is never visible because fill() is called
+      // in mouseClicked() which runs immediately after
+      // mouseReleased();
+      fill('limegreen');
+    }
+
+    // Set the fill color and stroke weight after
+    // mousePressed() and mouseReleased() are called.
+    function mouseClicked() {
+      fill('orange');
+      strokeWeight(10);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>MouseEvent</code> argument.</p>
+    type: MouseEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseReleased
diff --git a/src/content/reference/en/p5 copy/mouseWheel.mdx b/src/content/reference/en/p5 copy/mouseWheel.mdx
new file mode 100644
index 0000000000..a659ea3cec
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseWheel.mdx	
@@ -0,0 +1,162 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1746
+title: mouseWheel
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A function that's called once when the mouse wheel moves.</p>
+
+  <p>Declaring the function <code>mouseWheel()</code> sets a code block to run
+
+  automatically when the user scrolls with the mouse wheel:</p>
+
+  <pre><code class="language-js">function mouseWheel() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The mouse system variables, such as <a
+  href="/reference/p5/mouseX/">mouseX</a> and
+
+  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
+  recent
+
+  value when <code>mouseWheel()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function mouseWheel() {
+    if (mouseX < 50) {
+      // Code to run if the mouse is on the left.
+    }
+
+    if (mouseY > 50) {
+      // Code to run if the mouse is near the bottom.
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, <code>event</code>, is optional. <code>mouseWheel()</code>
+  is always passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
+  target="_blank">MouseEvent</a>
+
+  object with properties that describe the mouse scroll event:</p>
+
+  <pre><code class="language-js">function mouseWheel(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>The <code>event</code> object has many properties including
+  <code>delta</code>, a <code>Number</code>
+
+  containing the distance that the user scrolled. For example,
+  <code>event.delta</code>
+
+  might have the value 5 when the user scrolls up. <code>event.delta</code> is
+  positive
+
+  if the user scrolls up and negative if they scroll down. The signs are
+
+  opposite on macOS with "natural" scrolling enabled.</p>
+
+  <p>Browsers may have default behaviors attached to various mouse events. For
+
+  example, some browsers highlight text when the user moves the mouse while
+
+  pressing a mouse button. To prevent any default behavior for this event,
+
+  add <code>return false;</code> to the end of the function.</p>
+
+  <p>Note: On Safari, <code>mouseWheel()</code> may only work as expected if
+
+  <code>return false;</code> is added at the end of the function.</p>
+line: 1746
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let circleSize = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle
+      circle(50, 50, circleSize);
+    }
+
+    // Increment circleSize when the user scrolls the mouse wheel.
+    function mouseWheel() {
+      circleSize += 1;
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let direction = '';
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Draw an arrow that points where
+      // the mouse last scrolled.
+      text(direction, 50, 50);
+    }
+
+    // Change direction when the user scrolls the mouse wheel.
+    function mouseWheel(event) {
+      if (event.delta > 0) {
+        direction = '▲';
+      } else {
+        direction = '▼';
+      }
+      // Uncomment to prevent any default behavior.
+      // return false;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>WheelEvent</code> argument.</p>
+    type: WheelEvent
+    optional: true
+chainable: false
+---
+
+
+# mouseWheel
diff --git a/src/content/reference/en/p5 copy/mouseX.mdx b/src/content/reference/en/p5 copy/mouseX.mdx
new file mode 100644
index 0000000000..7c0ba7f4a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseX.mdx	
@@ -0,0 +1,124 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L119
+title: mouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
+  position.</p>
+
+  <p><code>mouseX</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. For example, if the mouse is 50 pixels from
+
+  the left edge of the canvas, then <code>mouseX</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>mouseX</code> will hold
+  the
+
+  x-coordinate of the most recent touch point.</p>
+line: 119
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A vertical black line moves left and right following the mouse's x-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a vertical line that follows the mouse's x-coordinate.
+      line(mouseX, 0, mouseX, 100);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A vertical black line moves left and right following the mouse's x-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let mx = mouseX - 50;
+
+      // Draw the line.
+      line(mx, -50, mx, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    // Load a font for WebGL mode.
+    function preload() {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      textFont(font);
+      fill(0);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# mouseX
diff --git a/src/content/reference/en/p5 copy/mouseY.mdx b/src/content/reference/en/p5 copy/mouseY.mdx
new file mode 100644
index 0000000000..dc268025a4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/mouseY.mdx	
@@ -0,0 +1,124 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L226
+title: mouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's vertical
+  position.</p>
+
+  <p><code>mouseY</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. For example, if the mouse is 50 pixels from
+
+  the top edge of the canvas, then <code>mouseY</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>mouseY</code> will hold
+  the
+
+  y-coordinate of the most recent touch point.</p>
+line: 226
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A horizontal black line moves up and down following the mouse's y-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a horizontal line that follows the mouse's y-coordinate.
+      line(0, mouseY, 100, mouseY);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A horizontal black line moves up and down following the mouse's y-position.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let my = mouseY - 50;
+
+      // Draw the line.
+      line(-50, my, 50, my);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    // Load a font for WebGL mode.
+    function preload() {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      textFont(font);
+      fill(0);
+
+      // Display the mouse's coordinates.
+      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# mouseY
diff --git a/src/content/reference/en/p5 copy/movedX.mdx b/src/content/reference/en/p5 copy/movedX.mdx
new file mode 100644
index 0000000000..454b577166
--- /dev/null
+++ b/src/content/reference/en/p5 copy/movedX.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L12
+title: movedX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
+  movement.</p>
+
+  <p><code>movedX</code> tracks how many pixels the mouse moves left or right
+  between
+
+  frames. <code>movedX</code> will have a negative value if the mouse moves left
+  between
+
+  frames and a positive value if it moves right. <code>movedX</code> can be
+  calculated
+
+  as <code>mouseX - pmouseX</code>.</p>
+
+  <p>Note: <code>movedX</code> continues updating even when
+
+  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
+  active.
+
+  But keep in mind that during an active pointer lock, mouseX and pmouseX
+
+  are locked, so <code>movedX</code> is based on
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
+  MouseEvent's movementX value</a>
+
+  (which may behave differently in different browsers when the user
+
+  is zoomed in or out).</p>
+line: 12
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The text ">>" appears when the user moves the mouse to the right. The text "<<" appears when the user moves the mouse to the left.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display >> when movedX is positive and
+      // << when it's negative.
+      if (movedX > 0) {
+        text('>>', 50, 50);
+      } else if (movedX < 0) {
+        text('<<', 50, 50);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# movedX
diff --git a/src/content/reference/en/p5 copy/movedY.mdx b/src/content/reference/en/p5 copy/movedY.mdx
new file mode 100644
index 0000000000..00f4a28d5b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/movedY.mdx	
@@ -0,0 +1,78 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L62
+title: movedY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's vertical
+  movement.</p>
+
+  <p><code>movedY</code> tracks how many pixels the mouse moves up or down
+  between
+
+  frames. <code>movedY</code> will have a negative value if the mouse moves up
+  between
+
+  frames and a positive value if it moves down. <code>movedY</code> can be
+  calculated
+
+  as <code>mouseY - pmouseY</code>.</p>
+
+  <p>Note: <code>movedY</code> continues updating even when
+
+  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
+  active.
+
+  But keep in mind that during an active pointer lock, mouseX and pmouseX
+
+  are locked, so <code>movedX</code> is based on
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
+  MouseEvent's movementX value</a>
+
+  (which may behave differently in different browsers when the user
+
+  is zoomed in or out).</p>
+line: 62
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. The text "▲" appears when the user moves the mouse upward. The text "▼" appears when the user moves the mouse downward.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display ▼ when movedY is positive and
+      // ▲ when it's negative.
+      if (movedY > 0) {
+        text('▼', 50, 50);
+      } else if (movedY < 0) {
+        text('▲', 50, 50);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# movedY
diff --git a/src/content/reference/en/p5 copy/nf.mdx b/src/content/reference/en/p5 copy/nf.mdx
new file mode 100644
index 0000000000..ab64244d9f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nf.mdx	
@@ -0,0 +1,159 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L199
+title: nf
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a <code>Number</code> into a <code>String</code> with a given
+  number of digits.</p>
+
+  <p><code>nf()</code> converts numbers such as <code>123.45</code> into strings
+  formatted with a set
+
+  number of digits, as in <code>'123.4500'</code>.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nf(123.45)</code> returns the string
+  <code>'123.45'</code>. If an array of
+
+  numbers is passed, as in <code>nf([123.45, 67.89])</code>, an array of
+  formatted
+
+  strings will be returned.</p>
+
+  <p>The second parameter, <code>left</code>, is optional. If a number is
+  passed, as in
+
+  <code>nf(123.45, 4)</code>, it sets the minimum number of digits to include to
+  the
+
+  left of the decimal place. If <code>left</code> is larger than the number of
+  digits in
+
+  <code>num</code>, then unused digits will be set to 0. For example, calling
+
+  <code>nf(123.45, 4)</code> returns the string <code>'0123.45'</code>.</p>
+
+  <p>The third parameter, <code>right</code>, is also optional. If a number is
+  passed, as
+
+  in <code>nf(123.45, 4, 1)</code>, it sets the minimum number of digits to
+  include to
+
+  the right of the decimal place. If <code>right</code> is smaller than the
+  number of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places. For example, calling <code>nf(123.45, 4, 1)</code> returns the
+  string
+
+  <code>'0123.5'</code>. If right is larger than the number of decimal places in
+  <code>num</code>,
+
+  then unused decimal places will be set to 0. For example, calling
+
+  <code>nf(123.45, 4, 3)</code> returns the string <code>'0123.450'</code>.</p>
+
+  <p>When the number is negative, for example, calling <code>nf(-123.45, 5,
+  2)</code>
+
+  returns the string <code>'-00123.45'</code>.</p>
+line: 199
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(16);
+
+      // Create a number variable.
+      let number = 123.45;
+
+      // Display the number as a string.
+      let formatted = nf(number);
+      text(formatted, 20, 20);
+
+      let negative = nf(-number, 4, 2);
+      text(negative, 20, 40);
+
+      // Display the number with four digits
+      // to the left of the decimal.
+      let left = nf(number, 4);
+      text(left, 20, 60);
+
+      // Display the number with four digits
+      // to the left of the decimal and one
+      // to the right.
+      let right = nf(number, 4, 1);
+      text(right, 20, 80);
+
+      describe(
+        'The numbers "123.45", "-0123.45", "0123.45", and "0123.5" written on four separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 199
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number|String
+      - name: left
+        description: |
+          <p>number of digits to include to the left of
+                                         the decimal point.</p>
+        type: Integer|String
+        optional: true
+      - name: right
+        description: |
+          <p>number of digits to include to the right
+                                          of the decimal point.</p>
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 276
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: 'Number[]'
+      - name: left
+        description: ''
+        type: Integer|String
+        optional: true
+      - name: right
+        description: ''
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nf
diff --git a/src/content/reference/en/p5 copy/nfc.mdx b/src/content/reference/en/p5 copy/nfc.mdx
new file mode 100644
index 0000000000..ba49f689fa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nfc.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L322
+title: nfc
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a <code>Number</code> into a <code>String</code> with commas to
+  mark units of 1,000.</p>
+
+  <p><code>nfc()</code> converts numbers such as 12345 into strings formatted
+  with commas
+
+  to mark the thousands place, as in <code>'12,345'</code>.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nfc(12345)</code> returns the string
+  <code>'12,345'</code>.</p>
+
+  <p>The second parameter, <code>right</code>, is optional. If a number is
+  passed, as in
+
+  <code>nfc(12345, 1)</code>, it sets the minimum number of digits to include to
+  the
+
+  right of the decimal place. If <code>right</code> is smaller than the number
+  of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places. For example, calling <code>nfc(12345.67, 1)</code> returns the
+  string
+
+  <code>'12,345.7'</code>. If <code>right</code> is larger than the number of
+  decimal places in
+
+  <code>num</code>, then unused decimal places will be set to 0. For example,
+  calling
+
+  <code>nfc(12345.67, 3)</code> returns the string
+  <code>'12,345.670'</code>.</p>
+line: 322
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(16);
+
+      // Create a number variable.
+      let number = 12345;
+
+      // Display the number as a string.
+      let commas = nfc(number);
+      text(commas, 15, 33);
+
+      // Display the number with four digits
+      // to the left of the decimal.
+      let decimals = nfc(number, 2);
+      text(decimals, 15, 67);
+
+      describe(
+        'The numbers "12,345" and "12,345.00" written on separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let numbers = [12345, 6789];
+
+      // Convert the numbers to formatted strings.
+      let formatted = nfc(numbers);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Iterate over the array.
+      for (let i = 0; i < formatted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 33;
+
+        // Display the original and formatted numbers.
+        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "12345 : 12,345" and "6789 : 6,789" written on two separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 322
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number|String
+      - name: right
+        description: |
+          <p>number of digits to include to the right
+                                           of the decimal point.</p>
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 411
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: 'Number[]'
+      - name: right
+        description: ''
+        type: Integer|String
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nfc
diff --git a/src/content/reference/en/p5 copy/nfp.mdx b/src/content/reference/en/p5 copy/nfp.mdx
new file mode 100644
index 0000000000..dbd80ca5d7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nfp.mdx	
@@ -0,0 +1,188 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L447
+title: nfp
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a <code>Number</code> into a <code>String</code> with a plus or
+  minus sign.</p>
+
+  <p><code>nfp()</code> converts numbers such as 123 into strings formatted with
+  a <code>+</code> or
+
+  <code>-</code> symbol to mark whether they're positive or negative, as in
+  <code>'+123'</code>.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nfp(123.45)</code> returns the string
+  <code>'+123.45'</code>. If an array
+
+  of numbers is passed, as in <code>nfp([123.45, -6.78])</code>, an array of
+  formatted
+
+  strings will be returned.</p>
+
+  <p>The second parameter, <code>left</code>, is optional. If a number is
+  passed, as in
+
+  <code>nfp(123.45, 4)</code>, it sets the minimum number of digits to include
+  to the
+
+  left of the decimal place. If <code>left</code> is larger than the number of
+  digits in
+
+  <code>num</code>, then unused digits will be set to 0. For example, calling
+
+  <code>nfp(123.45, 4)</code> returns the string <code>'+0123.45'</code>.</p>
+
+  <p>The third parameter, <code>right</code>, is also optional. If a number is
+  passed, as
+
+  in <code>nfp(123.45, 4, 1)</code>, it sets the minimum number of digits to
+  include to
+
+  the right of the decimal place. If <code>right</code> is smaller than the
+  number of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places.  For example, calling <code>nfp(123.45, 4, 1)</code> returns
+  the
+
+  string <code>'+0123.5'</code>. If <code>right</code> is larger than the number
+  of decimal places
+
+  in <code>num</code>, then unused decimal places will be set to 0.  For
+  example,
+
+  calling <code>nfp(123.45, 4, 3)</code> returns the string
+  <code>'+0123.450'</code>.</p>
+line: 447
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create number variables.
+      let positive = 123;
+      let negative = -123;
+
+      // Convert the positive number to a formatted string.
+      let p = nfp(positive);
+
+      // Convert the negative number to a formatted string
+      // with four digits to the left of the decimal
+      // and two digits to the right of the decimal.
+      let n = nfp(negative, 4, 2);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Display the original and formatted numbers.
+      text(`${positive} : ${p}`, 50, 33);
+      text(`${negative} : ${n}`, 50, 67);
+
+      describe(
+        'The text "123 : +123" and "-123 : -123.00" written on separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create number variables.
+      let numbers = [123, -4.56];
+
+      // Convert the numbers to formatted strings
+      // with four digits to the left of the decimal
+      // and one digit to the right of the decimal.
+      let formatted = nfp(numbers, 4, 1);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Iterate over the array.
+      for (let i = 0; i < formatted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 33;
+
+        // Display the original and formatted numbers.
+        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "123 : +0123.0" and "-4.56 : 00-4.6" written on separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 447
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number
+      - name: left
+        description: |
+          <p>number of digits to include to the left of the
+                                  decimal point.</p>
+        type: Integer
+        optional: true
+      - name: right
+        description: |
+          <p>number of digits to include to the right of the
+                                   decimal point.</p>
+        type: Integer
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 552
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: 'Number[]'
+      - name: left
+        description: ''
+        type: Integer
+        optional: true
+      - name: right
+        description: ''
+        type: Integer
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nfp
diff --git a/src/content/reference/en/p5 copy/nfs.mdx b/src/content/reference/en/p5 copy/nfs.mdx
new file mode 100644
index 0000000000..80c144e391
--- /dev/null
+++ b/src/content/reference/en/p5 copy/nfs.mdx	
@@ -0,0 +1,176 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L573
+title: nfs
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Converts a positive <code>Number</code> into a <code>String</code> with an
+  extra space in front.</p>
+
+  <p><code>nfs()</code> converts positive numbers such as 123.45 into strings
+  formatted
+
+  with an extra space in front, as in ' 123.45'. Doing so can be helpful for
+
+  aligning positive and negative numbers.</p>
+
+  <p>The first parameter, <code>num</code>, is the number to convert to a
+  string. For
+
+  example, calling <code>nfs(123.45)</code> returns the string <code>'
+  123.45'</code>.</p>
+
+  <p>The second parameter, <code>left</code>, is optional. If a number is
+  passed, as in
+
+  <code>nfs(123.45, 4)</code>, it sets the minimum number of digits to include
+  to the
+
+  left of the decimal place. If <code>left</code> is larger than the number of
+  digits in
+
+  <code>num</code>, then unused digits will be set to 0. For example, calling
+
+  <code>nfs(123.45, 4)</code> returns the string <code>' 0123.45'</code>.</p>
+
+  <p>The third parameter, <code>right</code>, is also optional. If a number is
+  passed, as
+
+  in <code>nfs(123.45, 4, 1)</code>, it sets the minimum number of digits to
+  include to
+
+  the right of the decimal place. If <code>right</code> is smaller than the
+  number of
+
+  decimal places in <code>num</code>, then <code>num</code> will be rounded to
+  the given number of
+
+  decimal places.  For example, calling <code>nfs(123.45, 4, 1)</code> returns
+  the
+
+  string <code>' 0123.5'</code>. If <code>right</code> is larger than the number
+  of decimal places
+
+  in <code>num</code>, then unused decimal places will be set to 0.  For
+  example,
+
+  calling <code>nfs(123.45, 4, 3)</code> returns the string <code>'
+  0123.450'</code>.</p>
+line: 573
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create number variables.
+      let positive = 123;
+      let negative = -123;
+
+      // Convert the positive number to a formatted string.
+      let formatted = nfs(positive);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display the negative number and the formatted positive number.
+      text(negative, 50, 33);
+      text(formatted, 50, 67);
+
+      describe(
+        'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let number = 123.45;
+
+      // Convert the positive number to a formatted string.
+      // Use four digits to the left of the decimal and
+      // one digit to the right.
+      let formatted = nfs(number, 4, 1);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Display a negative version of the number and
+      // the formatted positive version.
+      text('-0123.5', 50, 33);
+      text(formatted, 50, 67);
+
+      describe(
+        'The numbers "-0123.5" and "0123.5" written on separate lines. The numbers align vertically. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: formatted string.
+  type: String
+overloads:
+  - line: 573
+    params:
+      - name: num
+        description: |
+          <p>number to format.</p>
+        type: Number
+      - name: left
+        description: |
+          <p>number of digits to include to the left of the
+                                  decimal point.</p>
+        type: Integer
+        optional: true
+      - name: right
+        description: |
+          <p>number of digits to include to the right of the
+                                   decimal point.</p>
+        type: Integer
+        optional: true
+    return:
+      description: formatted string.
+      type: String
+  - line: 669
+    params:
+      - name: nums
+        description: |
+          <p>numbers to format.</p>
+        type: Array
+      - name: left
+        description: ''
+        type: Integer
+        optional: true
+      - name: right
+        description: ''
+        type: Integer
+        optional: true
+    return:
+      description: formatted strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# nfs
diff --git a/src/content/reference/en/p5 copy/noCanvas.mdx b/src/content/reference/en/p5 copy/noCanvas.mdx
new file mode 100644
index 0000000000..08fcdda5e5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noCanvas.mdx	
@@ -0,0 +1,36 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L346
+title: noCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Removes the default canvas.</p>
+
+  <p>By default, a 100×100 pixels canvas is created without needing to call
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.
+  <code>noCanvas()</code> removes the
+
+  default canvas for sketches that don't need it.</p>
+line: 346
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      noCanvas();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noCanvas
diff --git a/src/content/reference/en/p5 copy/noCursor.mdx b/src/content/reference/en/p5 copy/noCursor.mdx
new file mode 100644
index 0000000000..37ac72c0cf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noCursor.mdx	
@@ -0,0 +1,38 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L482
+title: noCursor
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: |
+  <p>Hides the cursor from view.</p>
+line: 482
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Hide the cursor.
+      noCursor();
+    }
+
+    function draw() {
+      background(200);
+
+      circle(mouseX, mouseY, 10);
+
+      describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noCursor
diff --git a/src/content/reference/en/p5 copy/noDebugMode.mdx b/src/content/reference/en/p5 copy/noDebugMode.mdx
new file mode 100644
index 0000000000..19d36eba2b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noDebugMode.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L725
+title: noDebugMode
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: >
+  <p>Turns off <a href="/reference/p5/debugMode/">debugMode()</a> in a 3D
+  sketch.</p>
+line: 725
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Enable debug mode.
+      debugMode();
+
+      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.  box(20, 40);
+    }
+
+    // Disable debug mode when the user double-clicks.
+    function doubleClicked() {
+      noDebugMode();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noDebugMode
diff --git a/src/content/reference/en/p5 copy/noErase.mdx b/src/content/reference/en/p5 copy/noErase.mdx
new file mode 100644
index 0000000000..e959433b77
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noErase.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1716
+title: noErase
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Ends erasing that was started with <a
+  href="/reference/p5/erase/">erase()</a>.</p>
+
+  <p>The <a href="/reference/p5/fill/">fill()</a>, <a
+  href="/reference/p5/stroke/">stroke()</a>, and
+
+  <a href="/reference/p5/blendMode/">blendMode()</a> settings will return to
+  what they
+
+  were prior to calling <a href="/reference/p5/erase/">erase()</a>.</p>
+line: 1716
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(235, 145, 15);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(30, 45, 220);
+      rect(30, 10, 10, 80);
+
+      // Erase a circle.
+      erase();
+      circle(50, 50, 60);
+      noErase();
+
+      // Draw the right rectangle.
+      rect(70, 10, 10, 80);
+
+      describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noErase
diff --git a/src/content/reference/en/p5 copy/noFill.mdx b/src/content/reference/en/p5 copy/noFill.mdx
new file mode 100644
index 0000000000..67a3979778
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noFill.mdx	
@@ -0,0 +1,73 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1257
+title: noFill
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Disables setting the fill color for shapes.</p>
+
+  <p>Calling <code>noFill()</code> is the same as making the fill completely
+  transparent,
+
+  as in <code>fill(0, 0)</code>. If both <a
+  href="/reference/p5/noStroke/">noStroke()</a> and
+
+  <code>noFill()</code> are called, nothing will be drawn to the screen.</p>
+line: 1257
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the top square.
+      square(32, 10, 35);
+
+      // Draw the bottom square.
+      noFill();
+      square(32, 55, 35);
+
+      describe('A white square on above an empty square. Both squares have black outlines.');
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A purple cube wireframe spinning on a black canvas.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the box.
+      noFill();
+      stroke(100, 100, 240);
+
+      // Rotate the coordinates.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Draw the box.
+      box(45);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noFill
diff --git a/src/content/reference/en/p5 copy/noLights.mdx b/src/content/reference/en/p5 copy/noLights.mdx
new file mode 100644
index 0000000000..1f85888bf6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noLights.mdx	
@@ -0,0 +1,79 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1687
+title: noLights
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Removes all lights from the sketch.</p>
+
+  <p>Calling <code>noLights()</code> removes any lights created with
+
+  <a href="/reference/p5/lights/">lights()</a>,
+
+  <a href="/reference/p5/ambientLight/">ambientLight()</a>,
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>, or
+
+  <a href="/reference/p5/spotLight/">spotLight()</a>. These functions may be
+  called
+
+  after <code>noLights()</code> to create a new lighting scheme.</p>
+line: 1687
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw the top sphere.
+      push();
+      translate(0, -25, 0);
+      sphere(20);
+      pop();
+
+      // Turn off the lights.
+      noLights();
+
+      // Add a red directional light that points into the screen.
+      directionalLight(255, 0, 0, 0, 0, -1);
+
+      // Draw the bottom sphere.
+      push();
+      translate(0, 25, 0);
+      sphere(20);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noLights
diff --git a/src/content/reference/en/p5 copy/noLoop.mdx b/src/content/reference/en/p5 copy/noLoop.mdx
new file mode 100644
index 0000000000..fe1897a8cb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noLoop.mdx	
@@ -0,0 +1,139 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L9
+title: noLoop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Stops the code in <a href="/reference/p5/draw/">draw()</a> from running
+  repeatedly.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <code>noLoop()</code> stops <a
+  href="/reference/p5/draw/">draw()</a> from
+
+  repeating. The draw loop can be restarted by calling
+
+  <a href="/reference/p5/loop/">loop()</a>. <a
+  href="/reference/p5/draw/">draw()</a> can be run
+
+  once by calling <a href="/reference/p5/redraw/">redraw()</a>.</p>
+
+  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
+  to check
+
+  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
+line: 9
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe('A white half-circle on the left edge of a gray square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's x-coordinate.
+      let x = frameCount;
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, 50, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click to stop the draw loop.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, y, 20);
+    }
+
+    // Stop the draw loop when the user double-clicks.
+    function doubleClicked() {
+      noLoop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let startButton;
+    let stopButton;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create the button elements and place them
+      // beneath the canvas.
+      startButton = createButton('▶');
+      startButton.position(0, 100);
+      startButton.size(50, 20);
+      stopButton = createButton('◾');
+      stopButton.position(50, 100);
+      stopButton.size(50, 20);
+
+      // Set functions to call when the buttons are pressed.
+      startButton.mousePressed(loop);
+      stopButton.mousePressed(noLoop);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe(
+        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the circle.
+      // Normally, the circle would move from left to right.
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noLoop
diff --git a/src/content/reference/en/p5 copy/noSmooth.mdx b/src/content/reference/en/p5 copy/noSmooth.mdx
new file mode 100644
index 0000000000..a1af76d10d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noSmooth.mdx	
@@ -0,0 +1,92 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L100
+title: noSmooth
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Draws certain features with jagged (aliased) edges.</p>
+
+  <p><a href="/reference/p5/smooth/">smooth()</a> is active by default. In 2D
+  mode,
+
+  <code>noSmooth()</code> is helpful for scaling up images without blurring. The
+
+  functions don't affect shapes or fonts.</p>
+
+  <p>In WebGL mode, <code>noSmooth()</code> causes all shapes to be drawn with
+  jagged
+
+  (aliased) edges. The functions don't affect images or fonts.</p>
+line: 100
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let heart;
+
+    // Load a pixelated heart image from an image data string.
+    function preload() {
+      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Antialiased hearts.
+      image(heart, 10, 10);
+      image(heart, 20, 10, 16, 16);
+      image(heart, 40, 10, 32, 32);
+
+      // Aliased hearts.
+      noSmooth();
+      image(heart, 10, 60);
+      image(heart, 20, 60, 16, 16);
+      image(heart, 40, 60, 32, 32);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A white circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Disable smoothing.
+      noSmooth();
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A pixelated white circle on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noSmooth
diff --git a/src/content/reference/en/p5 copy/noStroke.mdx b/src/content/reference/en/p5 copy/noStroke.mdx
new file mode 100644
index 0000000000..7c4fe80960
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noStroke.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1317
+title: noStroke
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Disables drawing points, lines, and the outlines of shapes.</p>
+
+  <p>Calling <code>noStroke()</code> is the same as making the stroke completely
+  transparent,
+
+  as in <code>stroke(0, 0)</code>. If both <code>noStroke()</code> and
+
+  <a href="/reference/p5/noFill/">noFill()</a> are called, nothing will be drawn
+  to the
+
+  screen.</p>
+line: 1317
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      noStroke();
+      square(20, 20, 60);
+
+      describe('A white square with no outline.');
+    }
+    </code>
+    </div>
+
+    <div modernizr='webgl'>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A pink cube with no edge outlines spinning on a black canvas.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the box.
+      noStroke();
+      fill(240, 150, 150);
+
+      // Rotate the coordinates.
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Draw the box.
+      box(45);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# noStroke
diff --git a/src/content/reference/en/p5 copy/noTint.mdx b/src/content/reference/en/p5 copy/noTint.mdx
new file mode 100644
index 0000000000..e3b0aeea19
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noTint.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1345
+title: noTint
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Removes the current tint set by <a
+  href="/reference/p5/tint/">tint()</a>.</p>
+
+  <p><code>noTint()</code> restores images to their original colors.</p>
+line: 1345
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left.
+      // Tint with a CSS color string.
+      tint('red');
+      image(img, 0, 0);
+
+      // Right.
+      // Remove the tint.
+      noTint();
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# noTint
diff --git a/src/content/reference/en/p5 copy/noise.mdx b/src/content/reference/en/p5 copy/noise.mdx
new file mode 100644
index 0000000000..1b67f49cb9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noise.mdx	
@@ -0,0 +1,282 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L36
+title: noise
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Returns random numbers that can be tuned to feel organic.</p>
+
+  <p>Values returned by <a href="/reference/p5/random/">random()</a> and
+
+  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> can change by
+  large
+
+  amounts between function calls. By contrast, values returned by
+  <code>noise()</code>
+
+  can be made "smooth". Calls to <code>noise()</code> with similar inputs will
+  produce
+
+  similar outputs. <code>noise()</code> is used to create textures, motion,
+  shapes,
+
+  terrains, and so on. Ken Perlin invented <code>noise()</code> while animating
+  the
+
+  original <em>Tron</em> film in the 1980s.</p>
+
+  <p><code>noise()</code> always returns values between 0 and 1. It returns the
+  same value
+
+  for a given input while a sketch is running. <code>noise()</code> produces
+  different
+
+  results each time a sketch runs. The
+
+  <a href="/reference/p5/noiseSeed/">noiseSeed()</a> function can be used to
+  generate
+
+  the same sequence of Perlin noise values each time a sketch runs.</p>
+
+  <p>The character of the noise can be adjusted in two ways. The first way is to
+
+  scale the inputs. <code>noise()</code> interprets inputs as coordinates. The
+  sequence
+
+  of noise values will be smoother when the input coordinates are closer. The
+
+  second way is to use the <a
+  href="/reference/p5/noiseDetail/">noiseDetail()</a>
+
+  function.</p>
+
+  <p>The version of <code>noise()</code> with one parameter computes noise
+  values in one
+
+  dimension. This dimension can be thought of as space, as in
+  <code>noise(x)</code>, or
+
+  time, as in <code>noise(t)</code>.</p>
+
+  <p>The version of <code>noise()</code> with two parameters computes noise
+  values in two
+
+  dimensions. These dimensions can be thought of as space, as in
+
+  <code>noise(x, y)</code>, or space and time, as in <code>noise(x,
+  t)</code>.</p>
+
+  <p>The version of <code>noise()</code> with three parameters computes noise
+  values in
+
+  three dimensions. These dimensions can be thought of as space, as in
+
+  <code>noise(x, y, z)</code>, or space and time, as in <code>noise(x, y,
+  t)</code>.</p>
+line: 36
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black dot moves randomly on a gray square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 100 * noise(0.005 * frameCount);
+      let y = 100 * noise(0.005 * frameCount + 10000);
+
+      // Draw the point.
+      strokeWeight(5);
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black dot moves randomly on a gray square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.005;
+
+      // Scale the input coordinate.
+      let nt = noiseScale * frameCount;
+
+      // Compute the noise values.
+      let x = noiseLevel * noise(nt);
+      let y = noiseLevel * noise(nt + 10000);
+
+      // Draw the point.
+      strokeWeight(5);
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A hilly terrain drawn in gray against a black sky.');
+    }
+
+    function draw() {
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.02;
+
+      // Scale the input coordinate.
+      let x = frameCount;
+      let nx = noiseScale * x;
+
+      // Compute the noise value.
+      let y = noiseLevel * noise(nx);
+
+      // Draw the line.
+      line(x, 0, x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A calm sea drawn in gray against a black sky.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.002;
+
+      // Iterate from left to right.
+      for (let x = 0; x < width; x += 1) {
+        // Scale the input coordinates.
+        let nx = noiseScale * x;
+        let nt = noiseScale * frameCount;
+
+        // Compute the noise value.
+        let y = noiseLevel * noise(nx, nt);
+
+        // Draw the line.
+        line(x, 0, x, y);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the noise level and scale.
+      let noiseLevel = 255;
+      let noiseScale = 0.01;
+
+      // Iterate from top to bottom.
+      for (let y = 0; y < height; y += 1) {
+        // Iterate from left to right.
+        for (let x = 0; x < width; x += 1) {
+          // Scale the input coordinates.
+          let nx = noiseScale * x;
+          let ny = noiseScale * y;
+
+          // Compute the noise value.
+          let c = noiseLevel * noise(nx, ny);
+
+          // Draw the point.
+          stroke(c);
+          point(x, y);
+        }
+      }
+
+      describe('A gray cloudy pattern.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray cloudy pattern that changes.');
+    }
+
+    function draw() {
+      // Set the noise level and scale.
+      let noiseLevel = 255;
+      let noiseScale = 0.009;
+
+      // Iterate from top to bottom.
+      for (let y = 0; y < height; y += 1) {
+        // Iterate from left to right.
+        for (let x = 0; x < width; x += 1) {
+          // Scale the input coordinates.
+          let nx = noiseScale * x;
+          let ny = noiseScale * y;
+          let nt = noiseScale * frameCount;
+
+          // Compute the noise value.
+          let c = noiseLevel * noise(nx, ny, nt);
+
+          // Draw the point.
+          stroke(c);
+          point(x, y);
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate in noise space.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate in noise space.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z-coordinate in noise space.</p>
+    type: Number
+    optional: true
+return:
+  description: Perlin noise value at specified coordinates.
+  type: Number
+chainable: false
+---
+
+
+# noise
diff --git a/src/content/reference/en/p5 copy/noiseDetail.mdx b/src/content/reference/en/p5 copy/noiseDetail.mdx
new file mode 100644
index 0000000000..973ac515ab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noiseDetail.mdx	
@@ -0,0 +1,100 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L331
+title: noiseDetail
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Adjusts the character of the noise produced by the
+
+  <a href="/reference/p5/noise/">noise()</a> function.</p>
+
+  <p>Perlin noise values are created by adding layers of noise together. The
+
+  noise layers, called octaves, are similar to harmonics in music. Lower
+
+  octaves contribute more to the output signal. They define the overall
+
+  intensity of the noise. Higher octaves create finer-grained details.</p>
+
+  <p>By default, noise values are created by combining four octaves. Each higher
+
+  octave contributes half as much (50% less) compared to its predecessor.
+
+  <code>noiseDetail()</code> changes the number of octaves and the falloff
+  amount. For
+
+  example, calling <code>noiseDetail(6, 0.25)</code> ensures that
+
+  <a href="/reference/p5/noise/">noise()</a> will use six octaves. Each higher
+  octave
+
+  will contribute 25% as much (75% less) compared to its predecessor. Falloff
+
+  values between 0 and 1 are valid. However, falloff values greater than 0.5
+
+  might result in noise values greater than 1.</p>
+line: 331
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Set the noise level and scale.
+      let noiseLevel = 255;
+      let noiseScale = 0.02;
+
+      // Iterate from top to bottom.
+      for (let y = 0; y < height; y += 1) {
+        // Iterate from left to right.
+        for (let x = 0; x < width / 2; x += 1) {
+          // Scale the input coordinates.
+          let nx = noiseScale * x;
+          let ny = noiseScale * y;
+
+          // Compute the noise value with six octaves
+          // and a low falloff factor.
+          noiseDetail(6, 0.25);
+          let c = noiseLevel * noise(nx, ny);
+
+          // Draw the left side.
+          stroke(c);
+          point(x, y);
+
+          // Compute the noise value with four octaves
+          // and a high falloff factor.
+          noiseDetail(4, 0.5);
+          c = noiseLevel * noise(nx, ny);
+
+          // Draw the right side.
+          stroke(c);
+          point(x + 50, y);
+        }
+      }
+
+      describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: lod
+    description: |
+      <p>number of octaves to be used by the noise.</p>
+    type: Number
+  - name: falloff
+    description: |
+      <p>falloff factor for each octave.</p>
+    type: Number
+chainable: false
+---
+
+
+# noiseDetail
diff --git a/src/content/reference/en/p5 copy/noiseSeed.mdx b/src/content/reference/en/p5 copy/noiseSeed.mdx
new file mode 100644
index 0000000000..a1f2ce6fbd
--- /dev/null
+++ b/src/content/reference/en/p5 copy/noiseSeed.mdx	
@@ -0,0 +1,68 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L405
+title: noiseSeed
+module: Math
+submodule: Noise
+file: src/math/noise.js
+description: >
+  <p>Sets the seed value for the <a href="/reference/p5/noise/">noise()</a>
+  function.</p>
+
+  <p>By default, <a href="/reference/p5/noise/">noise()</a> produces different
+  results
+
+  each time a sketch is run. Calling <code>noiseSeed()</code> with a constant
+  argument,
+
+  such as <code>noiseSeed(99)</code>, makes <a
+  href="/reference/p5/noise/">noise()</a> produce the
+
+  same results each time a sketch is run.</p>
+line: 405
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the noise seed for consistent results.
+      noiseSeed(99);
+
+      describe('A black rectangle that grows randomly, first to the right and then to the left.');
+    }
+
+    function draw() {
+      // Set the noise level and scale.
+      let noiseLevel = 100;
+      let noiseScale = 0.005;
+
+      // Scale the input coordinate.
+      let nt = noiseScale * frameCount;
+
+      // Compute the noise value.
+      let x = noiseLevel * noise(nt);
+
+      // Draw the line.
+      line(x, 0, x, height);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: seed
+    description: |
+      <p>seed value.</p>
+    type: Number
+chainable: false
+---
+
+
+# noiseSeed
diff --git a/src/content/reference/en/p5 copy/norm.mdx b/src/content/reference/en/p5 copy/norm.mdx
new file mode 100644
index 0000000000..d52a73e4c5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/norm.mdx	
@@ -0,0 +1,69 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L772
+title: norm
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Maps a number from one range to a value between 0 and 1.</p>
+
+  <p>For example, <code>norm(2, 0, 10)</code> returns 0.2. 2's position in the
+  original
+
+  range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
+
+  is the same as calling <code>map(2, 0, 10, 0, 1)</code>.</p>
+
+  <p>Numbers outside of the original range are not constrained between 0 and 1.
+
+  Out-of-range values are often intentional and useful.</p>
+line: 772
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use RGB color with values from 0 to 1.
+      colorMode(RGB, 1);
+
+      describe('A square changes color from black to red as the mouse moves from left to right.');
+    }
+
+    function draw() {
+      // Calculate the redValue.
+      let redValue = norm(mouseX, 0, 100);
+
+      // Paint the background.
+      background(redValue, 0, 0);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>incoming value to be normalized.</p>
+    type: Number
+  - name: start
+    description: |
+      <p>lower bound of the value's current range.</p>
+    type: Number
+  - name: stop
+    description: |
+      <p>upper bound of the value's current range.</p>
+    type: Number
+return:
+  description: normalized number.
+  type: Number
+chainable: false
+---
+
+
+# norm
diff --git a/src/content/reference/en/p5 copy/normal.mdx b/src/content/reference/en/p5 copy/normal.mdx
new file mode 100644
index 0000000000..a109745b80
--- /dev/null
+++ b/src/content/reference/en/p5 copy/normal.mdx	
@@ -0,0 +1,250 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L2097
+title: normal
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Sets the normal vector for vertices in a custom 3D shape.</p>
+
+  <p>3D shapes created with <a href="/reference/p5/beginShape/">beginShape()</a>
+  and
+
+  <a href="/reference/p5/endShape/">endShape()</a> are made by connecting sets
+  of
+
+  points called vertices. Each vertex added with
+
+  <a href="/reference/p5/vertex/">vertex()</a> has a normal vector that points
+  away
+
+  from it. The normal vector controls how light reflects off the shape.</p>
+
+  <p><code>normal()</code> can be called two ways with different parameters to
+  define the
+
+  normal vector's components.</p>
+
+  <p>The first way to call <code>normal()</code> has three parameters,
+  <code>x</code>, <code>y</code>, and <code>z</code>.
+
+  If <code>Number</code>s are passed, as in <code>normal(1, 2, 3)</code>, they
+  set the x-, y-, and
+
+  z-components of the normal vector.</p>
+
+  <p>The second way to call <code>normal()</code> has one parameter,
+  <code>vector</code>. If a
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object is passed, as in
+
+  <code>normal(myVector)</code>, its components will be used to set the normal
+  vector.</p>
+
+  <p><code>normal()</code> changes the normal vector of vertices added to a
+  custom shape
+
+  with <a href="/reference/p5/vertex/">vertex()</a>. <code>normal()</code> must
+  be called between
+
+  the <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions, just like
+
+  <a href="/reference/p5/vertex/">vertex()</a>. The normal vector set by calling
+
+  <code>normal()</code> will affect all following vertices until
+  <code>normal()</code> is called
+
+  again:</p>
+
+  <pre><code class="language-js">beginShape();
+
+
+  // Set the vertex normal.
+
+  normal(-0.4, -0.4, 0.8);
+
+
+  // Add a vertex.
+
+  vertex(-30, -30, 0);
+
+
+  // Set the vertex normal.
+
+  normal(0, 0, 1);
+
+
+  // Add vertices.
+
+  vertex(30, -30, 0);
+
+  vertex(30, 30, 0);
+
+
+  // Set the vertex normal.
+
+  normal(0.4, -0.4, 0.8);
+
+
+  // Add a vertex.
+
+  vertex(-30, 30, 0);
+
+
+  endShape();
+
+  </code></pre>
+line: 2097
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the shape.
+      normalMaterial();
+      noStroke();
+
+      // Draw the shape.
+      beginShape();
+      vertex(-30, -30, 0);
+      vertex(30, -30, 0);
+      vertex(30, 30, 0);
+      vertex(-30, 30, 0);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the shape.
+      normalMaterial();
+      noStroke();
+
+      // Draw the shape.
+      // Use normal() to set vertex normals.
+      beginShape();
+      normal(-0.4, -0.4, 0.8);
+      vertex(-30, -30, 0);
+
+      normal(0, 0, 1);
+      vertex(30, -30, 0);
+      vertex(30, 30, 0);
+
+      normal(0.4, -0.4, 0.8);
+      vertex(-30, 30, 0);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the shape.
+      normalMaterial();
+      noStroke();
+
+      // Create p5.Vector objects.
+      let n1 = createVector(-0.4, -0.4, 0.8);
+      let n2 = createVector(0, 0, 1);
+      let n3 = createVector(0.4, -0.4, 0.8);
+
+      // Draw the shape.
+      // Use normal() to set vertex normals.
+      beginShape();
+      normal(n1);
+      vertex(-30, -30, 0);
+
+      normal(n2);
+      vertex(30, -30, 0);
+      vertex(30, 30, 0);
+
+      normal(n3);
+      vertex(-30, 30, 0);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2097
+    params:
+      - name: vector
+        description: |
+          <p>vertex normal as a <a href="#/p5.Vector">p5.Vector</a> object.</p>
+        type: p5.Vector
+    chainable: 1
+  - line: 2272
+    params:
+      - name: x
+        description: |
+          <p>x-component of the vertex normal.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-component of the vertex normal.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-component of the vertex normal.</p>
+        type: Number
+    chainable: 1
+chainable: true
+---
+
+
+# normal
diff --git a/src/content/reference/en/p5 copy/normalMaterial.mdx b/src/content/reference/en/p5 copy/normalMaterial.mdx
new file mode 100644
index 0000000000..0652b349d4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/normalMaterial.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2365
+title: normalMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the current material as a normal material.</p>
+
+  <p>A normal material sets surfaces facing the x-axis to red, those facing the
+
+  y-axis to green, and those facing the z-axis to blue. Normal material isn't
+
+  affected by light. It’s often used as a placeholder material when
+  debugging.</p>
+
+  <p>Note: <code>normalMaterial()</code> can only be used in WebGL mode.</p>
+line: 2365
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor torus drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the torus.
+      normalMaterial();
+
+      // Draw the torus.
+      torus(30);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# normalMaterial
diff --git a/src/content/reference/en/p5 copy/orbitControl.mdx b/src/content/reference/en/p5 copy/orbitControl.mdx
new file mode 100644
index 0000000000..be2fd25452
--- /dev/null
+++ b/src/content/reference/en/p5 copy/orbitControl.mdx	
@@ -0,0 +1,203 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L11
+title: orbitControl
+module: 3D
+submodule: Interaction
+file: src/webgl/interaction.js
+description: >
+  <p>Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
+
+  touchscreen.</p>
+
+  <p>3D sketches are viewed through an imaginary camera. Calling
+
+  <code>orbitControl()</code> within the <a
+  href="/reference/p5/draw/">draw()</a> function allows
+
+  the user to change the camera’s position:</p>
+
+  <pre><code class="language-js">function draw() {
+    background(200);
+
+    // Enable orbiting with the mouse.
+    orbitControl();
+
+    // Rest of sketch.
+  }
+
+  </code></pre>
+
+  <p>Left-clicking and dragging or swipe motion will rotate the camera position
+
+  about the center of the sketch. Right-clicking and dragging or multi-swipe
+
+  will pan the camera position without rotation. Using the mouse wheel
+
+  (scrolling) or pinch in/out will move the camera further or closer from the
+
+  center of the sketch.</p>
+
+  <p>The first three parameters, <code>sensitivityX</code>,
+  <code>sensitivityY</code>, and
+
+  <code>sensitivityZ</code>, are optional. They’re numbers that set the sketch’s
+
+  sensitivity to movement along each axis. For example, calling
+
+  <code>orbitControl(1, 2, -1)</code> keeps movement along the x-axis at its
+  default
+
+  value, makes the sketch twice as sensitive to movement along the y-axis,
+
+  and reverses motion along the z-axis. By default, all sensitivity values
+
+  are 1.</p>
+
+  <p>The fourth parameter, <code>options</code>, is also optional. It’s an
+  object that
+
+  changes the behavior of orbiting. For example, calling
+
+  <code>orbitControl(1, 1, 1, options)</code> keeps the default sensitivity
+  values while
+
+  changing the behaviors set with <code>options</code>. The object can have the
+
+  following properties:</p>
+
+  <pre><code class="language-js">let options = {
+    // Setting this to false makes mobile interactions smoother by
+    // preventing accidental interactions with the page while orbiting.
+    // By default, it's true.
+    disableTouchActions: true,
+
+    // Setting this to true makes the camera always rotate in the
+    // direction the mouse/touch is moving.
+    // By default, it's false.
+    freeRotation: false
+  };
+
+
+  orbitControl(1, 1, 1, options);
+
+  </code></pre>
+line: 11
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      // Make the interactions 3X sensitive.
+      orbitControl(3, 3, 3);
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(30, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create an options object.
+      let options = {
+        disableTouchActions: false,
+        freeRotation: true
+      };
+
+      // Enable orbiting with the mouse.
+      // Prevent accidental touch actions on touchscreen devices
+      // and enable free rotation.
+      orbitControl(1, 1, 1, options);
+
+      // Style the box.
+      normalMaterial();
+
+      // Draw the box.
+      box(30, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: sensitivityX
+    description: |
+      <p>sensitivity to movement along the x-axis. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: sensitivityY
+    description: |
+      <p>sensitivity to movement along the y-axis. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: sensitivityZ
+    description: |
+      <p>sensitivity to movement along the z-axis. Defaults to 1.</p>
+    type: Number
+    optional: true
+  - name: options
+    description: |
+      <p>object with two optional properties, <code>disableTouchActions</code>
+                                 and <code>freeRotation</code>. Both are <code>Boolean</code>s. <code>disableTouchActions</code>
+                                 defaults to <code>true</code> and <code>freeRotation</code> defaults to <code>false</code>.</p>
+    type: Object
+    optional: true
+chainable: true
+---
+
+
+# orbitControl
diff --git a/src/content/reference/en/p5 copy/ortho.mdx b/src/content/reference/en/p5 copy/ortho.mdx
new file mode 100644
index 0000000000..5fb384ba48
--- /dev/null
+++ b/src/content/reference/en/p5 copy/ortho.mdx	
@@ -0,0 +1,168 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L412
+title: ortho
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets an orthographic projection for the current camera in a 3D sketch.</p>
+
+  <p>In an orthographic projection, shapes with the same size always appear the
+
+  same size, regardless of whether they are near or far from the camera.</p>
+
+  <p><code>ortho()</code> changes the camera’s perspective by changing its
+  viewing frustum
+
+  from a truncated pyramid to a rectangular prism. The camera is placed in
+
+  front of the frustum and views everything between the frustum’s near plane
+
+  and its far plane. <code>ortho()</code> has six optional parameters to define
+  the
+
+  frustum.</p>
+
+  <p>The first four parameters, <code>left</code>, <code>right</code>,
+  <code>bottom</code>, and <code>top</code>, set the
+
+  coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+  <code>ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
+  wide and
+
+  400 pixels tall. By default, these coordinates are set based on the
+
+  sketch’s width and height, as in
+
+  <code>ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>
+
+  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
+  distance of the
+
+  frustum’s near and far plane from the camera. For example, calling
+
+  <code>ortho(-100, 100, 200, 200, 50, 1000)</code> creates a frustum that’s 200
+  pixels
+
+  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
+
+  pixels from the camera. By default, <code>near</code> and <code>far</code> are
+  set to 0 and
+
+  <code>max(width, height) + 800</code>, respectively.</p>
+
+  <p>Note: <code>ortho()</code> can only be used in WebGL mode.</p>
+line: 412
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Apply an orthographic projection.
+      ortho();
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Apply an orthographic projection.
+      // Center the frustum.
+      // Set its width and height to 20.
+      // Place its near plane 300 pixels from the camera.
+      // Place its far plane 350 pixels from the camera.
+      ortho(-10, 10, -10, 10, 300, 350);
+
+      // Translate the origin toward the camera.
+      translate(-10, 10, 600);
+
+      // Rotate the coordinate system.
+      rotateY(-0.1);
+      rotateX(-0.1);
+
+      // Draw the row of boxes.
+      for (let i = 0; i < 6; i += 1) {
+        translate(0, 0, -40);
+        box(10);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: left
+    description: >
+      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: right
+    description: >
+      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: bottom
+    description: >
+      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: top
+    description: >
+      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
+      2</code>.</p>
+    type: Number
+    optional: true
+  - name: near
+    description: |
+      <p>z-coordinate of the frustum’s near plane. Defaults to 0.</p>
+    type: Number
+    optional: true
+  - name: far
+    description: >
+      <p>z-coordinate of the frustum’s far plane. Defaults to <code>max(width,
+      height) + 800</code>.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# ortho
diff --git a/src/content/reference/en/p5 copy/outputVolume.mdx b/src/content/reference/en/p5 copy/outputVolume.mdx
new file mode 100644
index 0000000000..fe618922fb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/outputVolume.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L738
+title: outputVolume
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |-
+  <p>Scale the output of all sound in this sketch</p>
+  Scaled between 0.0 (silence) and 1.0 (full volume).
+  1.0 is the maximum amplitude of a digital sound, so multiplying
+  by greater than 1.0 may cause digital distortion. To
+  fade, provide a <code>rampTime</code> parameter. For more
+  complex fades, see the Envelope class.
+
+  <p>Alternately, you can pass in a signal source such as an
+  oscillator to modulate the amplitude with an audio signal.</p>
+  <p><b>How This Works</b>: When you load the p5.sound module, it
+  creates a single instance of p5sound. All sound objects in this
+  module output to p5sound before reaching your computer's output.
+  So if you change the amplitude of p5sound, it impacts all of the
+  sound in this module.</p>
+
+  <p>If no value is provided, returns a Web Audio API Gain Node</p>
+line: 738
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: volume
+    description: |
+      <p>Volume (amplitude) between 0.0
+                                         and 1.0 or modulating signal/oscillator</p>
+    type: Number|Object
+  - name: rampTime
+    description: |
+      <p>Fade for t seconds</p>
+    type: Number
+    optional: true
+  - name: timeFromNow
+    description: |
+      <p>Schedule this event to happen at
+                                     t seconds in the future</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# outputVolume
diff --git a/src/content/reference/en/p5 copy/p5.Camera.mdx b/src/content/reference/en/p5 copy/p5.Camera.mdx
new file mode 100644
index 0000000000..cc2090e329
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Camera.mdx	
@@ -0,0 +1,659 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L723
+title: p5.Camera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>A class to describe a camera for viewing a 3D sketch.</p>
+
+  <p>Each <code>p5.Camera</code> object represents a camera that views a section
+  of 3D
+
+  space. It stores information about the camera’s position, orientation, and
+
+  projection.</p>
+
+  <p>In WebGL mode, the default camera is a <code>p5.Camera</code> object that
+  can be
+
+  controlled with the <a href="/reference/p5/camera/">camera()</a>,
+
+  <a href="/reference/p5/perspective/">perspective()</a>,
+
+  <a href="/reference/p5/ortho/">ortho()</a>, and
+
+  <a href="/reference/p5/frustum/">frustum()</a> functions. Additional cameras
+  can be
+
+  created with <a href="/reference/p5/createCamera/">createCamera()</a> and
+  activated
+
+  with <a href="/reference/p5/setCamera/">setCamera()</a>.</p>
+
+  <p>Note: <code>p5.Camera</code>’s methods operate in two coordinate
+  systems:</p>
+
+  <ul>
+
+  <li>The “world” coordinate system describes positions in terms of their
+
+  relationship to the origin along the x-, y-, and z-axes. For example,
+
+  calling <code>myCamera.setPosition()</code> places the camera in 3D space
+  using
+
+  "world" coordinates.</li>
+
+  <li>The "local" coordinate system describes positions from the camera's point
+
+  of view: left-right, up-down, and forward-backward. For example, calling
+
+  <code>myCamera.move()</code> moves the camera along its own axes.</li>
+
+  </ul>
+line: 723
+isConstructor: true
+params:
+  - name: rendererGL
+    description: |
+      <p>instance of WebGL renderer</p>
+    type: RendererGL
+example:
+  - |-
+
+    <div>
+    <code>
+    let cam;
+    let delta = 0.001;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Camera object.
+      cam = createCamera();
+
+      // Place the camera at the top-center.
+      cam.setPosition(0, -400, 800);
+
+      // Point the camera at the origin.
+      cam.lookAt(0, 0, 0);
+
+      describe(
+        'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn the camera left and right, called "panning".
+      cam.pan(delta);
+
+      // Switch directions every 120 frames.
+      if (frameCount % 120 === 0) {
+        delta *= -1;
+      }
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click to toggle between cameras.
+
+    let cam1;
+    let cam2;
+    let isDefaultCamera = true;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the first camera.
+      // Keep its default settings.
+      cam1 = createCamera();
+
+      // Create the second camera.
+      // Place it at the top-left.
+      // Point it at the origin.
+      cam2 = createCamera();
+      cam2.setPosition(400, -400, 800);
+      cam2.lookAt(0, 0, 0);
+
+      // Set the current camera to cam1.
+      setCamera(cam1);
+
+      describe(
+        'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the box.
+      box();
+    }
+
+    // Toggle the current camera when the user double-clicks.
+    function doubleClicked() {
+      if (isDefaultCamera === true) {
+        setCamera(cam2);
+        isDefaultCamera = false;
+      } else {
+        setCamera(cam1);
+        isDefaultCamera = true;
+      }
+    }
+    </code>
+    </div>
+methods:
+  perspective:
+    description: >
+      <p>Sets a perspective projection for the camera.</p>
+
+      <p>In a perspective projection, shapes that are further from the camera
+      appear
+
+      smaller than shapes that are near the camera. This technique, called
+
+      foreshortening, creates realistic 3D scenes. It’s applied by default in
+      new
+
+      <code>p5.Camera</code> objects.</p>
+
+      <p><code>myCamera.perspective()</code> changes the camera’s perspective by
+      changing its
+
+      viewing frustum. The frustum is the volume of space that’s visible to the
+
+      camera. The frustum’s shape is a pyramid with its top cut off. The camera
+
+      is placed where the top of the pyramid should be and points towards the
+
+      base of the pyramid. It views everything within the frustum.</p>
+
+      <p>The first parameter, <code>fovy</code>, is the camera’s vertical field
+      of view. It’s
+
+      an angle that describes how tall or narrow a view the camera has. For
+
+      example, calling <code>myCamera.perspective(0.5)</code> sets the camera’s
+      vertical
+
+      field of view to 0.5 radians. By default, <code>fovy</code> is calculated
+      based on the
+
+      sketch’s height and the camera’s default z-coordinate, which is 800. The
+
+      formula for the default <code>fovy</code> is <code>2 * atan(height / 2 /
+      800)</code>.</p>
+
+      <p>The second parameter, <code>aspect</code>, is the camera’s aspect
+      ratio. It’s a number
+
+      that describes the ratio of the top plane’s width to its height. For
+
+      example, calling <code>myCamera.perspective(0.5, 1.5)</code> sets the
+      camera’s field
+
+      of view to 0.5 radians and aspect ratio to 1.5, which would make shapes
+
+      appear thinner on a square canvas. By default, <code>aspect</code> is set
+      to
+
+      <code>width / height</code>.</p>
+
+      <p>The third parameter, <code>near</code>, is the distance from the camera
+      to the near
+
+      plane. For example, calling <code>myCamera.perspective(0.5, 1.5,
+      100)</code> sets the
+
+      camera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places
+
+      the near plane 100 pixels from the camera. Any shapes drawn less than 100
+
+      pixels from the camera won’t be visible. By default, <code>near</code> is
+      set to
+
+      <code>0.1 * 800</code>, which is 1/10th the default distance between the
+      camera and
+
+      the origin.</p>
+
+      <p>The fourth parameter, <code>far</code>, is the distance from the camera
+      to the far
+
+      plane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100,
+      10000)</code>
+
+      sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,
+
+      places the near plane 100 pixels from the camera, and places the far plane
+
+      10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels
+
+      from the camera won’t be visible. By default, <code>far</code> is set to
+      <code>10 * 800</code>,
+
+      which is 10 times the default distance between the camera and the
+      origin.</p>
+    path: p5.Camera/perspective
+  ortho:
+    description: >
+      <p>Sets an orthographic projection for the camera.</p>
+
+      <p>In an orthographic projection, shapes with the same size always appear
+      the
+
+      same size, regardless of whether they are near or far from the camera.</p>
+
+      <p><code>myCamera.ortho()</code> changes the camera’s perspective by
+      changing its viewing
+
+      frustum from a truncated pyramid to a rectangular prism. The frustum is
+      the
+
+      volume of space that’s visible to the camera. The camera is placed in
+      front
+
+      of the frustum and views everything within the frustum.
+      <code>myCamera.ortho()</code>
+
+      has six optional parameters to define the viewing frustum.</p>
+
+      <p>The first four parameters, <code>left</code>, <code>right</code>,
+      <code>bottom</code>, and <code>top</code>, set the
+
+      coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+      <code>myCamera.ortho(-100, 100, 200, -200)</code> creates a frustum that’s
+      200 pixels
+
+      wide and 400 pixels tall. By default, these dimensions are set based on
+
+      the sketch’s width and height, as in
+
+      <code>myCamera.ortho(-width / 2, width / 2, -height / 2, height /
+      2)</code>.</p>
+
+      <p>The last two parameters, <code>near</code> and <code>far</code>, set
+      the distance of the
+
+      frustum’s near and far plane from the camera. For example, calling
+
+      <code>myCamera.ortho(-100, 100, 200, -200, 50, 1000)</code> creates a
+      frustum that’s
+
+      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
+
+      ends 1,000 pixels from the camera. By default, <code>near</code> and
+      <code>far</code> are set to
+
+      0 and <code>max(width, height) + 800</code>, respectively.</p>
+    path: p5.Camera/ortho
+  frustum:
+    description: >
+      <p>Sets the camera's frustum.</p>
+
+      <p>In a frustum projection, shapes that are further from the camera appear
+
+      smaller than shapes that are near the camera. This technique, called
+
+      foreshortening, creates realistic 3D scenes.</p>
+
+      <p><code>myCamera.frustum()</code> changes the camera’s perspective by
+      changing its
+
+      viewing frustum. The frustum is the volume of space that’s visible to the
+
+      camera. The frustum’s shape is a pyramid with its top cut off. The camera
+
+      is placed where the top of the pyramid should be and points towards the
+
+      base of the pyramid. It views everything within the frustum.</p>
+
+      <p>The first four parameters, <code>left</code>, <code>right</code>,
+      <code>bottom</code>, and <code>top</code>, set the
+
+      coordinates of the frustum’s sides, bottom, and top. For example, calling
+
+      <code>myCamera.frustum(-100, 100, 200, -200)</code> creates a frustum
+      that’s 200
+
+      pixels wide and 400 pixels tall. By default, these coordinates are set
+
+      based on the sketch’s width and height, as in
+
+      <code>myCamera.frustum(-width / 20, width / 20, height / 20, -height /
+      20)</code>.</p>
+
+      <p>The last two parameters, <code>near</code> and <code>far</code>, set
+      the distance of the
+
+      frustum’s near and far plane from the camera. For example, calling
+
+      <code>myCamera.frustum(-100, 100, 200, -200, 50, 1000)</code> creates a
+      frustum that’s
+
+      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
+      ends
+
+      1,000 pixels from the camera. By default, near is set to <code>0.1 *
+      800</code>, which
+
+      is 1/10th the default distance between the camera and the origin.
+      <code>far</code> is
+
+      set to <code>10 * 800</code>, which is 10 times the default distance
+      between the
+
+      camera and the origin.</p>
+    path: p5.Camera/frustum
+  roll:
+    description: >
+      <p>Rotates the camera in a clockwise/counter-clockwise direction.</p>
+
+      <p>Rolling rotates the camera without changing its orientation. The
+      rotation
+
+      happens in the camera’s "local" space.</p>
+
+      <p>The parameter, <code>angle</code>, is the angle the camera should
+      rotate. Passing a
+
+      positive angle, as in <code>myCamera.roll(0.001)</code>, rotates the
+      camera in counter-clockwise direction.
+
+      Passing a negative angle, as in <code>myCamera.roll(-0.001)</code>,
+      rotates the
+
+      camera in clockwise direction.</p>
+
+      <p>Note: Angles are interpreted based on the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Camera/roll
+  pan:
+    description: >
+      <p>Rotates the camera left and right.</p>
+
+      <p>Panning rotates the camera without changing its position. The rotation
+
+      happens in the camera’s "local" space.</p>
+
+      <p>The parameter, <code>angle</code>, is the angle the camera should
+      rotate. Passing a
+
+      positive angle, as in <code>myCamera.pan(0.001)</code>, rotates the camera
+      to the
+
+      right. Passing a negative angle, as in <code>myCamera.pan(-0.001)</code>,
+      rotates the
+
+      camera to the left.</p>
+
+      <p>Note: Angles are interpreted based on the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Camera/pan
+  tilt:
+    description: >
+      <p>Rotates the camera up and down.</p>
+
+      <p>Tilting rotates the camera without changing its position. The rotation
+
+      happens in the camera’s "local" space.</p>
+
+      <p>The parameter, <code>angle</code>, is the angle the camera should
+      rotate. Passing a
+
+      positive angle, as in <code>myCamera.tilt(0.001)</code>, rotates the
+      camera down.
+
+      Passing a negative angle, as in <code>myCamera.tilt(-0.001)</code>,
+      rotates the camera
+
+      up.</p>
+
+      <p>Note: Angles are interpreted based on the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Camera/tilt
+  lookAt:
+    description: >
+      <p>Points the camera at a location.</p>
+
+      <p><code>myCamera.lookAt()</code> changes the camera’s orientation without
+      changing its
+
+      position.</p>
+
+      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
+      the coordinates in "world" space
+
+      where the camera should point. For example, calling
+
+      <code>myCamera.lookAt(10, 20, 30)</code> points the camera at the
+      coordinates
+
+      <code>(10, 20, 30)</code>.</p>
+    path: p5.Camera/lookAt
+  camera:
+    description: >
+      <p>Sets the position and orientation of the camera.</p>
+
+      <p><code>myCamera.camera()</code> allows objects to be viewed from
+      different angles. It
+
+      has nine parameters that are all optional.</p>
+
+      <p>The first three parameters, <code>x</code>, <code>y</code>, and
+      <code>z</code>, are the coordinates of the
+
+      camera’s position in "world" space. For example, calling
+
+      <code>myCamera.camera(0, 0, 0)</code> places the camera at the origin
+      <code>(0, 0, 0)</code>. By
+
+      default, the camera is placed at <code>(0, 0, 800)</code>.</p>
+
+      <p>The next three parameters, <code>centerX</code>, <code>centerY</code>,
+      and <code>centerZ</code> are the
+
+      coordinates of the point where the camera faces in "world" space. For
+
+      example, calling <code>myCamera.camera(0, 0, 0, 10, 20, 30)</code> places
+      the camera
+
+      at the origin <code>(0, 0, 0)</code> and points it at <code>(10, 20,
+      30)</code>. By default, the
+
+      camera points at the origin <code>(0, 0, 0)</code>.</p>
+
+      <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
+      <code>upZ</code> are the components of
+
+      the "up" vector in "local" space. The "up" vector orients the camera’s
+
+      y-axis. For example, calling
+
+      <code>myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the
+      camera at the
+
+      origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
+      sets the "up" vector
+
+      to <code>(0, -1, 0)</code> which is like holding it upside-down. By
+      default, the "up"
+
+      vector is <code>(0, 1, 0)</code>.</p>
+    path: p5.Camera/camera
+  move:
+    description: >
+      <p>Moves the camera along its "local" axes without changing its
+      orientation.</p>
+
+      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
+      the distances the camera should
+
+      move. For example, calling <code>myCamera.move(10, 20, 30)</code> moves
+      the camera 10
+
+      pixels to the right, 20 pixels down, and 30 pixels backward in its "local"
+
+      space.</p>
+    path: p5.Camera/move
+  setPosition:
+    description: >
+      <p>Sets the camera’s position in "world" space without changing its
+
+      orientation.</p>
+
+      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
+      the coordinates where the camera
+
+      should be placed. For example, calling <code>myCamera.setPosition(10, 20,
+      30)</code>
+
+      places the camera at coordinates <code>(10, 20, 30)</code> in "world"
+      space.</p>
+    path: p5.Camera/setPosition
+  set:
+    description: >
+      <p>Sets the camera’s position, orientation, and projection by copying
+      another
+
+      camera.</p>
+
+      <p>The parameter, <code>cam</code>, is the <code>p5.Camera</code> object
+      to copy. For example, calling
+
+      <code>cam2.set(cam1)</code> will set <code>cam2</code> using
+      <code>cam1</code>’s configuration.</p>
+    path: p5.Camera/set
+  slerp:
+    description: >
+      <p>Sets the camera’s position and orientation to values that are
+      in-between
+
+      those of two other cameras.</p>
+
+      <p><code>myCamera.slerp()</code> uses spherical linear interpolation to
+      calculate a
+
+      position and orientation that’s in-between two other cameras. Doing so is
+
+      helpful for transitioning smoothly between two perspectives.</p>
+
+      <p>The first two parameters, <code>cam0</code> and <code>cam1</code>, are
+      the <code>p5.Camera</code> objects
+
+      that should be used to set the current camera.</p>
+
+      <p>The third parameter, <code>amt</code>, is the amount to interpolate
+      between <code>cam0</code> and
+
+      <code>cam1</code>. 0.0 keeps the camera’s position and orientation equal
+      to <code>cam0</code>’s,
+
+      0.5 sets them halfway between <code>cam0</code>’s and <code>cam1</code>’s
+      , and 1.0 sets the
+
+      position and orientation equal to <code>cam1</code>’s.</p>
+
+      <p>For example, calling <code>myCamera.slerp(cam0, cam1, 0.1)</code> sets
+      cam’s position
+
+      and orientation very close to <code>cam0</code>’s. Calling
+
+      <code>myCamera.slerp(cam0, cam1, 0.9)</code> sets cam’s position and
+      orientation very
+
+      close to <code>cam1</code>’s.</p>
+
+      <p>Note: All of the cameras must use the same projection.</p>
+    path: p5.Camera/slerp
+properties:
+  eyeX:
+    description: |
+      <p>The camera’s x-coordinate.</p>
+      <p>By default, the camera’s x-coordinate is set to 0 in "world" space.</p>
+    path: p5.Camera/eyeX
+  eyeY:
+    description: |
+      <p>The camera’s y-coordinate.</p>
+      <p>By default, the camera’s y-coordinate is set to 0 in "world" space.</p>
+    path: p5.Camera/eyeY
+  eyeZ:
+    description: >
+      <p>The camera’s z-coordinate.</p>
+
+      <p>By default, the camera’s z-coordinate is set to 800 in "world"
+      space.</p>
+    path: p5.Camera/eyeZ
+  centerX:
+    description: >
+      <p>The x-coordinate of the place where the camera looks.</p>
+
+      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
+      "world" space, so
+
+      <code>myCamera.centerX</code> is 0.</p>
+    path: p5.Camera/centerX
+  centerY:
+    description: >
+      <p>The y-coordinate of the place where the camera looks.</p>
+
+      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
+      "world" space, so
+
+      <code>myCamera.centerY</code> is 0.</p>
+    path: p5.Camera/centerY
+  centerZ:
+    description: >
+      <p>The y-coordinate of the place where the camera looks.</p>
+
+      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
+      "world" space, so
+
+      <code>myCamera.centerZ</code> is 0.</p>
+    path: p5.Camera/centerZ
+  upX:
+    description: >
+      <p>The x-component of the camera's "up" vector.</p>
+
+      <p>The camera's "up" vector orients its y-axis. By default, the "up"
+      vector is
+
+      <code>(0, 1, 0)</code>, so its x-component is 0 in "local" space.</p>
+    path: p5.Camera/upX
+  upY:
+    description: >
+      <p>The y-component of the camera's "up" vector.</p>
+
+      <p>The camera's "up" vector orients its y-axis. By default, the "up"
+      vector is
+
+      <code>(0, 1, 0)</code>, so its y-component is 1 in "local" space.</p>
+    path: p5.Camera/upY
+  upZ:
+    description: >
+      <p>The z-component of the camera's "up" vector.</p>
+
+      <p>The camera's "up" vector orients its y-axis. By default, the "up"
+      vector is
+
+      <code>(0, 1, 0)</code>, so its z-component is 0 in "local" space.</p>
+    path: p5.Camera/upZ
+chainable: false
+---
+
+
+# p5.Camera
diff --git a/src/content/reference/en/p5 copy/p5.Color.mdx b/src/content/reference/en/p5 copy/p5.Color.mdx
new file mode 100644
index 0000000000..b804e5ee95
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Color.mdx	
@@ -0,0 +1,116 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/p5.Color.js#L318
+title: p5.Color
+module: Color
+submodule: Creating & Reading
+file: src/color/p5.Color.js
+description: >
+  <p>A class to describe a color.</p>
+
+  <p>Each <code>p5.Color</code> object stores the color mode
+
+  and level maxes that were active during its construction. These values are
+
+  used to interpret the arguments passed to the object's constructor. They
+
+  also determine output formatting such as when
+
+  <a href="/reference/p5/saturation/">saturation()</a> is called.</p>
+
+  <p>Color is stored internally as an array of ideal RGBA values in floating
+
+  point form, normalized from 0 to 1. These values are used to calculate the
+
+  closest screen colors, which are RGBA levels from 0 to 255. Screen colors
+
+  are sent to the renderer.</p>
+
+  <p>When different color representations are calculated, the results are cached
+
+  for performance. These values are normalized, floating-point numbers.</p>
+
+  <p>Note: <a href="/reference/p5/color/">color()</a> is the recommended way to
+  create an
+
+  instance of this class.</p>
+line: 318
+isConstructor: true
+params:
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+  - name: vals
+    description: |
+      <p>an array containing the color values
+                                               for red, green, blue and alpha channel
+                                               or CSS color.</p>
+    type: 'Number[]|String'
+methods:
+  toString:
+    description: >
+      <p>Returns the color formatted as a <code>String</code>.</p>
+
+      <p>Calling <code>myColor.toString()</code> can be useful for debugging, as
+      in
+
+      <code>print(myColor.toString())</code>. It's also helpful for using p5.js
+      with other
+
+      libraries.</p>
+
+      <p>The parameter, <code>format</code>, is optional. If a format string is
+      passed, as in
+
+      <code>myColor.toString('#rrggbb')</code>, it will determine how the color
+      string is
+
+      formatted. By default, color strings are formatted as <code>'rgba(r, g, b,
+      a)'</code>.</p>
+    path: p5.Color/toString
+  setRed:
+    description: >
+      <p>Sets the red component of a color.</p>
+
+      <p>The range depends on the <a
+      href="/reference/p5/colorMode/">colorMode()</a>. In the
+
+      default RGB mode it's between 0 and 255.</p>
+    path: p5.Color/setRed
+  setGreen:
+    description: >
+      <p>Sets the green component of a color.</p>
+
+      <p>The range depends on the <a
+      href="/reference/p5/colorMode/">colorMode()</a>. In the
+
+      default RGB mode it's between 0 and 255.</p>
+    path: p5.Color/setGreen
+  setBlue:
+    description: >
+      <p>Sets the blue component of a color.</p>
+
+      <p>The range depends on the <a
+      href="/reference/p5/colorMode/">colorMode()</a>. In the
+
+      default RGB mode it's between 0 and 255.</p>
+    path: p5.Color/setBlue
+  setAlpha:
+    description: >
+      <p>Sets the alpha (transparency) value of a color.</p>
+
+      <p>The range depends on the
+
+      <a href="/reference/p5/colorMode/">colorMode()</a>. In the default RGB
+      mode it's
+
+      between 0 and 255.</p>
+    path: p5.Color/setAlpha
+chainable: false
+---
+
+
+# p5.Color
diff --git a/src/content/reference/en/p5 copy/p5.Element.mdx b/src/content/reference/en/p5 copy/p5.Element.mdx
new file mode 100644
index 0000000000..c07b10ae79
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Element.mdx	
@@ -0,0 +1,545 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Element.js#L9
+title: p5.Element
+module: DOM
+submodule: DOM
+file: src/core/p5.Element.js
+description: >
+  <p>A class to describe an
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/"
+  target="_blank">HTML element</a>.</p>
+
+  <p>Sketches can use many elements. Common elements include the drawing canvas,
+
+  buttons, sliders, webcam feeds, and so on.</p>
+
+  <p>All elements share the methods of the <code>p5.Element</code> class.
+  They're created
+
+  with functions such as <a
+  href="/reference/p5/createCanvas/">createCanvas()</a> and
+
+  <a href="/reference/p5/createButton/">createButton()</a>.</p>
+line: 9
+isConstructor: true
+params:
+  - name: elt
+    description: |
+      <p>wrapped DOM element.</p>
+    type: HTMLElement
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a button element and
+      // place it beneath the canvas.
+      let btn = createButton('change');
+      btn.position(0, 100);
+
+      // Call randomColor() when
+      // the button is pressed.
+      btn.mousePressed(randomColor);
+
+      describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
+    }
+
+    // Paint the background either
+    // red, yellow, blue, or green.
+    function randomColor() {
+      let c = random(['red', 'yellow', 'blue', 'green']);
+      background(c);
+    }
+    </code>
+    </div>
+methods:
+  parent:
+    description: >
+      <p>Attaches the element to a parent element.</p>
+
+      <p>For example, a <code><div></div></code> element may be used as a box to
+
+      hold two pieces of text, a header and a paragraph. The
+
+      <code><div></div></code> is the parent element of both the header and
+
+      paragraph.</p>
+
+      <p>The parameter <code>parent</code> can have one of three types.
+      <code>parent</code> can be a
+
+      string with the parent element's ID, as in
+
+      <code>myElement.parent('container')</code>. It can also be another
+
+      <a href="/reference/p5/p5.Element">p5.Element</a> object, as in
+
+      <code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be
+      an <code>HTMLElement</code>
+
+      object, as in <code>myElement.parent(anotherElement)</code>.</p>
+
+      <p>Calling <code>myElement.parent()</code> without an argument returns the
+      element's
+
+      parent.</p>
+    path: p5.Element/parent
+  id:
+    description: >
+      <p>Sets the element's ID using a given string.</p>
+
+      <p>Calling <code>myElement.id()</code> without an argument returns its ID
+      as a string.</p>
+    path: p5.Element/id
+  class:
+    description: >
+      <p>Adds a
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class/"
+      target="_blank">class attribute</a>
+
+      to the element using a given string.</p>
+
+      <p>Calling <code>myElement.class()</code> without an argument returns a
+      string with its current classes.</p>
+    path: p5.Element/class
+  mousePressed:
+    description: >
+      <p>Calls a function when the mouse is pressed over the element.</p>
+
+      <p>Calling <code>myElement.mousePressed(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: p5.Element/mousePressed
+  doubleClicked:
+    description: >
+      <p>Calls a function when the mouse is pressed twice over the element.</p>
+
+      <p>Calling <code>myElement.doubleClicked(false)</code> disables the
+      function.</p>
+    path: p5.Element/doubleClicked
+  mouseWheel:
+    description: >
+      <p>Calls a function when the mouse wheel scrolls over the element.</p>
+
+      <p>The callback function, <code>fxn</code>, is passed an
+      <code>event</code> object. <code>event</code> has
+
+      two numeric properties, <code>deltaY</code> and <code>deltaX</code>.
+      <code>event.deltaY</code> is
+
+      negative if the mouse wheel rotates away from the user. It's positive if
+
+      the mouse wheel rotates toward the user. <code>event.deltaX</code> is
+      positive if
+
+      the mouse wheel moves to the right. It's negative if the mouse wheel moves
+
+      to the left.</p>
+
+      <p>Calling <code>myElement.mouseWheel(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseWheel
+  mouseReleased:
+    description: >
+      <p>Calls a function when the mouse is released over the element.</p>
+
+      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: p5.Element/mouseReleased
+  mouseClicked:
+    description: >
+      <p>Calls a function when the mouse is pressed and released over the
+      element.</p>
+
+      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
+      function.</p>
+
+      <p>Note: Some mobile browsers may also trigger this event when the element
+
+      receives a quick tap.</p>
+    path: p5.Element/mouseClicked
+  mouseMoved:
+    description: >
+      <p>Calls a function when the mouse moves over the element.</p>
+
+      <p>Calling <code>myElement.mouseMoved(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseMoved
+  mouseOver:
+    description: >
+      <p>Calls a function when the mouse moves onto the element.</p>
+
+      <p>Calling <code>myElement.mouseOver(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseOver
+  mouseOut:
+    description: >
+      <p>Calls a function when the mouse moves off the element.</p>
+
+      <p>Calling <code>myElement.mouseOut(false)</code> disables the
+      function.</p>
+    path: p5.Element/mouseOut
+  touchStarted:
+    description: >
+      <p>Calls a function when the element is touched.</p>
+
+      <p>Calling <code>myElement.touchStarted(false)</code> disables the
+      function.</p>
+
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: p5.Element/touchStarted
+  touchMoved:
+    description: >
+      <p>Calls a function when the user touches the element and moves.</p>
+
+      <p>Calling <code>myElement.touchMoved(false)</code> disables the
+      function.</p>
+
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: p5.Element/touchMoved
+  touchEnded:
+    description: >
+      <p>Calls a function when the user stops touching the element.</p>
+
+      <p>Calling <code>myElement.touchMoved(false)</code> disables the
+      function.</p>
+
+      <p>Note: Touch functions only work on mobile devices.</p>
+    path: p5.Element/touchEnded
+  dragOver:
+    description: >
+      <p>Calls a function when a file is dragged over the element.</p>
+
+      <p>Calling <code>myElement.dragOver(false)</code> disables the
+      function.</p>
+    path: p5.Element/dragOver
+  dragLeave:
+    description: >
+      <p>Calls a function when a file is dragged off the element.</p>
+
+      <p>Calling <code>myElement.dragLeave(false)</code> disables the
+      function.</p>
+    path: p5.Element/dragLeave
+  addClass:
+    description: |
+      <p>Adds a class to the element.</p>
+    path: p5.Element/addClass
+  removeClass:
+    description: |
+      <p>Removes a class from the element.</p>
+    path: p5.Element/removeClass
+  hasClass:
+    description: |
+      <p>Checks if a class is already applied to element.</p>
+    path: p5.Element/hasClass
+  toggleClass:
+    description: |
+      <p>Toggles whether a class is applied to the element.</p>
+    path: p5.Element/toggleClass
+  child:
+    description: >
+      <p>Attaches the element as a child of another element.</p>
+
+      <p><code>myElement.child()</code> accepts either a string ID, DOM node, or
+
+      <a href="/reference/p5/p5.Element">p5.Element</a>. For example,
+
+      <code>myElement.child(otherElement)</code>. If no argument is provided, an
+      array of
+
+      children DOM nodes is returned.</p>
+    path: p5.Element/child
+  center:
+    description: >
+      <p>Centers the element either vertically, horizontally, or both.</p>
+
+      <p><code>center()</code> will center the element relative to its parent or
+      according to
+
+      the page's body if the element has no parent.</p>
+
+      <p>If no argument is passed, as in <code>myElement.center()</code> the
+      element is aligned
+
+      both vertically and horizontally.</p>
+    path: p5.Element/center
+  html:
+    description: >
+      <p>Sets the inner HTML of the element, replacing any existing HTML.</p>
+
+      <p>The second parameter, <code>append</code>, is optional. If
+      <code>true</code> is passed, as in
+
+      <code>myElement.html('hi', true)</code>, the HTML is appended instead of
+      replacing
+
+      existing HTML.</p>
+
+      <p>If no arguments are passed, as in <code>myElement.html()</code>, the
+      element's inner
+
+      HTML is returned.</p>
+    path: p5.Element/html
+  position:
+    description: >
+      <p>Sets the element's position.</p>
+
+      <p>The first two parameters, <code>x</code> and <code>y</code>, set the
+      element's position relative
+
+      to the top-left corner of the web page.</p>
+
+      <p>The third parameter, <code>positionType</code>, is optional. It sets
+      the element's
+
+      <a target="_blank"
+      href="https://developer.mozilla.org/en-US/docs/Web/CSS/position/">positioning
+      scheme</a>.
+
+      <code>positionType</code> is a string that can be either
+      <code>'static'</code>, <code>'fixed'</code>,
+
+      <code>'relative'</code>, <code>'sticky'</code>, <code>'initial'</code>, or
+      <code>'inherit'</code>.</p>
+
+      <p>If no arguments passed, as in <code>myElement.position()</code>, the
+      method returns
+
+      the element's position in an object, as in <code>{ x: 0, y: 0
+      }</code>.</p>
+    path: p5.Element/position
+  style:
+    description: >
+      <p>Applies a style to the element by adding a
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax/"
+      target="_blank">CSS declaration</a>.</p>
+
+      <p>The first parameter, <code>property</code>, is a string. If the name of
+      a style
+
+      property is passed, as in <code>myElement.style('color')</code>, the
+      method returns
+
+      the current value as a string or <code>null</code> if it hasn't been set.
+      If a
+
+      <code>property:style</code> string is passed, as in
+
+      <code>myElement.style('color:deeppink')</code>, the method sets the style
+      <code>property</code>
+
+      to <code>value</code>.</p>
+
+      <p>The second parameter, <code>value</code>, is optional. It sets the
+      property's value.
+
+      <code>value</code> can be a string, as in
+
+      <code>myElement.style('color', 'deeppink')</code>, or a
+
+      <a href="/reference/p5/p5.Color">p5.Color</a> object, as in
+
+      <code>myElement.style('color', myColor)</code>.</p>
+    path: p5.Element/style
+  attribute:
+    description: >
+      <p>Adds an
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes"
+      target="_blank">attribute</a>
+
+      to the element.</p>
+
+      <p>This method is useful for advanced tasks. Most commonly-used
+      attributes,
+
+      such as <code>id</code>, can be set with their dedicated methods. For
+      example,
+
+      <code>nextButton.id('next')</code> sets an element's <code>id</code>
+      attribute. Calling
+
+      <code>nextButton.attribute('id', 'next')</code> has the same effect.</p>
+
+      <p>The first parameter, <code>attr</code>, is the attribute's name as a
+      string. Calling
+
+      <code>myElement.attribute('align')</code> returns the attribute's current
+      value as a
+
+      string or <code>null</code> if it hasn't been set.</p>
+
+      <p>The second parameter, <code>value</code>, is optional. It's a string
+      used to set the
+
+      attribute's value. For example, calling
+
+      <code>myElement.attribute('align', 'center')</code> sets the element's
+      horizontal
+
+      alignment to <code>center</code>.</p>
+    path: p5.Element/attribute
+  removeAttribute:
+    description: >
+      <p>Removes an attribute from the element.</p>
+
+      <p>The parameter <code>attr</code> is the attribute's name as a string.
+      For example,
+
+      calling <code>myElement.removeAttribute('align')</code> removes its
+      <code>align</code>
+
+      attribute if it's been set.</p>
+    path: p5.Element/removeAttribute
+  value:
+    description: >
+      <p>Returns or sets the element's value.</p>
+
+      <p>Calling <code>myElement.value()</code> returns the element's current
+      value.</p>
+
+      <p>The parameter, <code>value</code>, is an optional number or string. If
+      provided,
+
+      as in <code>myElement.value(123)</code>, it's used to set the element's
+      value.</p>
+    path: p5.Element/value
+  show:
+    description: |
+      <p>Shows the current element.</p>
+    path: p5.Element/show
+  hide:
+    description: |
+      <p>Hides the current element.</p>
+    path: p5.Element/hide
+  size:
+    description: >
+      <p>Sets the element's width and height.</p>
+
+      <p>Calling <code>myElement.size()</code> without an argument returns the
+      element's size
+
+      as an object with the properties <code>width</code> and
+      <code>height</code>. For example,
+       <code>{ width: 20, height: 10 }</code>.</p>
+      <p>The first parameter, <code>width</code>, is optional. It's a number
+      used to set the
+
+      element's width. Calling <code>myElement.size(10)</code></p>
+
+      <p>The second parameter, 'height<code>, is also optional. It's a number
+      used to set the element's height. For example, calling
+      </code>myElement.size(20, 10)` sets the element's width to 20 pixels and
+      height
+
+      to 10 pixels.</p>
+
+      <p>The constant <code>AUTO</code> can be used to adjust one dimension at a
+      time while
+
+      maintaining the aspect ratio, which is <code>width / height</code>. For
+      example,
+
+      consider an element that's 200 pixels wide and 100 pixels tall. Calling
+
+      <code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and
+      height to 10
+
+      pixels.</p>
+
+      <p>Note: In the case of elements that need to load data, such as images,
+      wait
+
+      to call <code>myElement.size()</code> until after the data loads.</p>
+    path: p5.Element/size
+  remove:
+    description: |
+      <p>Removes the element, stops all audio/video streams, and removes all
+      callback functions.</p>
+    path: p5.Element/remove
+  drop:
+    description: >
+      <p>Calls a function when the user drops a file on the element.</p>
+
+      <p>The first parameter, <code>callback</code>, is a function to call once
+      the file loads.
+
+      The callback function should have one parameter, <code>file</code>, that's
+      a
+
+      <a href="/reference/p5/p5.File">p5.File</a> object. If the user drops
+      multiple files on
+
+      the element, <code>callback</code>, is called once for each file.</p>
+
+      <p>The second parameter, <code>fxn</code>, is a function to call when the
+      browser detects
+
+      one or more dropped files. The callback function should have one
+
+      parameter, <code>event</code>, that's a
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/">DragEvent</a>.</p>
+    path: p5.Element/drop
+  draggable:
+    description: >
+      <p>Makes the element draggable.</p>
+
+      <p>The parameter, <code>elmnt</code>, is optional. If another
+
+      <a href="/reference/p5/p5.Element">p5.Element</a> object is passed, as in
+
+      <code>myElement.draggable(otherElement)</code>, the other element will
+      become draggable.</p>
+    path: p5.Element/draggable
+properties:
+  elt:
+    description: >
+      <p>The element's underlying <code>HTMLElement</code> object.</p>
+
+      <p>The
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
+      target="_blank">HTMLElement</a>
+
+      object's properties and methods can be used directly.</p>
+    path: p5.Element/elt
+  width:
+    description: |
+      <p>A <code>Number</code> property that stores the element's width.</p>
+    path: p5.Element/width
+  height:
+    description: |
+      <p>A <code>Number</code> property that stores the element's height.</p>
+    path: p5.Element/height
+chainable: false
+---
+
+
+# p5.Element
diff --git a/src/content/reference/en/p5 copy/p5.File.mdx b/src/content/reference/en/p5 copy/p5.File.mdx
new file mode 100644
index 0000000000..78675c7a98
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.File.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L5482
+title: p5.File
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: |
+  <p>A class to describe a file.</p>
+  <p><code>p5.File</code> objects are used by
+  <a href="/reference/p5.Element/drop/">myElement.drop()</a> and
+  created by
+  <a href="/reference/p5/createFileInput/">createFileInput</a>.</p>
+line: 5482
+isConstructor: true
+params:
+  - name: file
+    description: |
+      <p>wrapped file.</p>
+    type: File
+example:
+  - |-
+
+    <div>
+    <code>
+    // Use the file input to load a
+    // file and display its info.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a file input and place it beneath the canvas.
+      // Call displayInfo() when the file loads.
+      let input = createFileInput(displayInfo);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
+    }
+
+    // Display the p5.File's info once it loads.
+    function displayInfo(file) {
+      background(200);
+
+      // Display the p5.File's name.
+      text(file.name, 10, 10, 80, 40);
+
+      // Display the p5.File's type and subtype.
+      text(`${file.type}/${file.subtype}`, 10, 70);
+
+      // Display the p5.File's size in bytes.
+      text(file.size, 10, 90);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Use the file input to select an image to
+    // load and display.
+    let img;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a file input and place it beneath the canvas.
+      // Call handleImage() when the file image loads.
+      let input = createFileInput(handleImage);
+      input.position(0, 100);
+
+      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the image if it's ready.
+      if (img) {
+        image(img, 0, 0, width, height);
+      }
+    }
+
+    // Use the p5.File's data once it loads.
+    function handleImage(file) {
+      // Check the p5.File's type.
+      if (file.type === 'image') {
+        // Create an image using using the p5.File's data.
+        img = createImg(file.data, '');
+
+        // Hide the image element so it doesn't appear twice.
+        img.hide();
+      } else {
+        img = null;
+      }
+    }
+    </code>
+    </div>
+properties:
+  file:
+    description: >
+      <p>Underlying
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/File/"
+      target="_blank">File</a>
+
+      object. All <code>File</code> properties and methods are accessible.</p>
+    path: p5.File/file
+  type:
+    description: >
+      <p>The file
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
+      target="_blank">MIME type</a>
+
+      as a string.</p>
+
+      <p>For example, <code>'image'</code> and <code>'text'</code> are both MIME
+      types.</p>
+    path: p5.File/type
+  subtype:
+    description: >
+      <p>The file subtype as a string.</p>
+
+      <p>For example, a file with an <code>'image'</code>
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
+      target="_blank">MIME type</a>
+
+      may have a subtype such as <code>png</code> or <code>jpeg</code>.</p>
+    path: p5.File/subtype
+  name:
+    description: |
+      <p>The file name as a string.</p>
+    path: p5.File/name
+  size:
+    description: |
+      <p>The number of bytes in the file.</p>
+    path: p5.File/size
+  data:
+    description: |
+      <p>A string containing the file's data.</p>
+      <p>Data can be either image data, text contents, or a parsed object in the
+      case of JSON and <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
+    path: p5.File/data
+chainable: false
+---
+
+
+# p5.File
diff --git a/src/content/reference/en/p5 copy/p5.Font.mdx b/src/content/reference/en/p5 copy/p5.Font.mdx
new file mode 100644
index 0000000000..615d0406ee
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Font.mdx	
@@ -0,0 +1,146 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/p5.Font.js#L13
+title: p5.Font
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/p5.Font.js
+description: |
+  <p>A class to describe fonts.</p>
+line: 13
+isConstructor: true
+params:
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance.</p>
+    type: P5
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Creates a p5.Font object.
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Style the text.
+      fill('deeppink');
+      textFont(font);
+      textSize(36);
+
+      // Display the text.
+      text('p5*js', 10, 50);
+
+      describe('The text "p5*js" written in pink on a gray background.');
+    }
+    </code>
+    </div>
+methods:
+  textBounds:
+    description: >
+      <p>Returns the bounding box for a string of text written using the
+      font.</p>
+
+      <p>The bounding box is the smallest rectangle that can contain a string of
+
+      text. <code>font.textBounds()</code> returns an object with the bounding
+      box's
+
+      location and size. For example, calling <code>font.textBounds('p5*js', 5,
+      20)</code>
+
+      returns an object in the format
+
+      <code>{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }</code>. The <code>x</code> and
+      <code>y</code> properties are
+
+      always the coordinates of the bounding box's top-left corner.</p>
+
+      <p>The first parameter, <code>str</code>, is a string of text. The second
+      and third
+
+      parameters, <code>x</code> and <code>y</code>, are the text's position. By
+      default, they set the
+
+      coordinates of the bounding box's bottom-left corner. See
+
+      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
+      text.</p>
+
+      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
+      font size used to
+
+      determine the bounding box. By default, <code>font.textBounds()</code>
+      will use the
+
+      current <a href="/reference/p5/textSize/">textSize()</a>.</p>
+    path: p5.Font/textBounds
+  textToPoints:
+    description: >
+      <p>Returns an array of points outlining a string of text written using the
+
+      font.</p>
+
+      <p>Each point object in the array has three properties that describe the
+
+      point's location and orientation, called its path angle. For example,
+
+      <code>{ x: 10, y: 20, alpha: 450 }</code>.</p>
+
+      <p>The first parameter, <code>str</code>, is a string of text. The second
+      and third
+
+      parameters, <code>x</code> and <code>y</code>, are the text's position. By
+      default, they set the
+
+      coordinates of the bounding box's bottom-left corner. See
+
+      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
+      text.</p>
+
+      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
+      text's font
+
+      size. By default, <code>font.textToPoints()</code> will use the current
+
+      <a href="/reference/p5/textSize/">textSize()</a>.</p>
+
+      <p>The fifth parameter, <code>options</code>, is also optional.
+      <code>font.textToPoints()</code>
+
+      expects an object with the following properties:</p>
+
+      <p><code>sampleFactor</code> is the ratio of the text's path length to the
+      number of
+
+      samples. It defaults to 0.1. Higher values produce more points along the
+
+      path and are more precise.</p>
+
+      <p><code>simplifyThreshold</code> removes collinear points if it's set to
+      a number other
+
+      than 0. The value represents the threshold angle to use when determining
+
+      whether two edges are collinear.</p>
+    path: p5.Font/textToPoints
+properties:
+  font:
+    description: |
+      <p>The font's underlying
+      <a href="https://opentype.js.org/" target="_blank">opentype.js</a>
+      font object.</p>
+    path: p5.Font/font
+chainable: false
+---
+
+
+# p5.Font
diff --git a/src/content/reference/en/p5 copy/p5.Framebuffer.mdx b/src/content/reference/en/p5 copy/p5.Framebuffer.mdx
new file mode 100644
index 0000000000..8100f48199
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Framebuffer.mdx	
@@ -0,0 +1,443 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Framebuffer.js#L76
+title: p5.Framebuffer
+module: Rendering
+file: src/webgl/p5.Framebuffer.js
+description: >
+  <p>A class to describe a high-performance drawing surface for textures.</p>
+
+  <p>Each <code>p5.Framebuffer</code> object provides a dedicated drawing
+  surface called
+
+  a <em>framebuffer</em>. They're similar to
+
+  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects but can run much
+  faster.
+
+  Performance is improved because the framebuffer shares the same WebGL
+
+  context as the canvas used to create it.</p>
+
+  <p><code>p5.Framebuffer</code> objects have all the drawing features of the
+  main
+
+  canvas. Drawing instructions meant for the framebuffer must be placed
+
+  between calls to
+
+  <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
+
+  <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>. The resulting
+  image
+
+  can be applied as a texture by passing the <code>p5.Framebuffer</code> object
+  to the
+
+  <a href="/reference/p5/texture/">texture()</a> function, as in
+  <code>texture(myBuffer)</code>.
+
+  It can also be displayed on the main canvas by passing it to the
+
+  <a href="/reference/p5/image/">image()</a> function, as in
+  <code>image(myBuffer, 0, 0)</code>.</p>
+
+  <p>Note: <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a> is
+  the
+
+  recommended way to create an instance of this class.</p>
+line: 76
+isConstructor: true
+params:
+  - name: target
+    description: |
+      <p>sketch instance or
+                                     <a href="#/p5.Graphics">p5.Graphics</a>
+                                     object.</p>
+    type: p5.Graphics|p5
+  - name: settings
+    description: |
+      <p>configuration options.</p>
+    type: Object
+    optional: true
+methods:
+  resize:
+    description: >
+      <p>Resizes the framebuffer to a given width and height.</p>
+
+      <p>The parameters, <code>width</code> and <code>height</code>, set the
+      dimensions of the
+
+      framebuffer. For example, calling <code>myBuffer.resize(300, 500)</code>
+      resizes
+
+      the framebuffer to 300×500 pixels, then sets <code>myBuffer.width</code>
+      to 300
+
+      and <code>myBuffer.height</code> 500.</p>
+    path: p5.Framebuffer/resize
+  pixelDensity:
+    description: >
+      <p>Sets the framebuffer's pixel density or returns its current
+      density.</p>
+
+      <p>Computer displays are grids of little lights called pixels. A display's
+
+      pixel density describes how many pixels it packs into an area. Displays
+
+      with smaller pixels have a higher pixel density and create sharper
+
+      images.</p>
+
+      <p>The parameter, <code>density</code>, is optional. If a number is
+      passed, as in
+
+      <code>myBuffer.pixelDensity(1)</code>, it sets the framebuffer's pixel
+      density. By
+
+      default, the framebuffer's pixel density will match that of the canvas
+
+      where it was created. All canvases default to match the display's pixel
+
+      density.</p>
+
+      <p>Calling <code>myBuffer.pixelDensity()</code> without an argument
+      returns its current
+
+      pixel density.</p>
+    path: p5.Framebuffer/pixelDensity
+  autoSized:
+    description: >
+      <p>Toggles the framebuffer's autosizing mode or returns the current
+      mode.</p>
+
+      <p>By default, the framebuffer automatically resizes to match the canvas
+
+      that created it. Calling <code>myBuffer.autoSized(false)</code> disables
+      this
+
+      behavior and calling <code>myBuffer.autoSized(true)</code> re-enables
+      it.</p>
+
+      <p>Calling <code>myBuffer.autoSized()</code> without an argument returns
+      <code>true</code> if
+
+      the framebuffer automatically resizes and <code>false</code> if not.</p>
+    path: p5.Framebuffer/autoSized
+  createCamera:
+    description: >
+      <p>Creates a new
+
+      <a href="/reference/p5/p5.Camera">p5.Camera</a> object to use with the
+      framebuffer.</p>
+
+      <p>The new camera is initialized with a default position <code>(0, 0,
+      800)</code> and a
+
+      default perspective projection. Its properties can be controlled with
+
+      <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
+      <code>myCamera.lookAt(0, 0, 0)</code>.</p>
+
+      <p>Framebuffer cameras should be created between calls to
+
+      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
+
+      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> like so:</p>
+
+      <pre><code class="language-js">let myCamera;
+
+
+      myBuffer.begin();
+
+
+      // Create the camera for the framebuffer.
+
+      myCamera = myBuffer.createCamera();
+
+
+      myBuffer.end();
+
+      </code></pre>
+
+      <p>Calling <a href="/reference/p5/setCamera/">setCamera()</a> updates the
+
+      framebuffer's projection using the camera.
+
+      <a href="/reference/p5/resetMatrix/">resetMatrix()</a> must also be called
+      for the
+
+      view to change properly:</p>
+
+      <pre><code class="language-js">myBuffer.begin();
+
+
+      // Set the camera for the framebuffer.
+
+      setCamera(myCamera);
+
+
+      // Reset all transformations.
+
+      resetMatrix();
+
+
+      // Draw stuff...
+
+
+      myBuffer.end();
+
+      </code></pre>
+    path: p5.Framebuffer/createCamera
+  remove:
+    description: >
+      <p>Deletes the framebuffer from GPU memory.</p>
+
+      <p>Calling <code>myBuffer.remove()</code> frees the GPU memory used by the
+      framebuffer.
+
+      The framebuffer also uses a bit of memory on the CPU which can be freed
+
+      like so:</p>
+
+      <pre><code class="language-js">// Delete the framebuffer from GPU memory.
+
+      myBuffer.remove();
+
+
+      // Delete the framebuffer from CPU memory.
+
+      myBuffer = undefined;
+
+      </code></pre>
+
+      <p>Note: All variables that reference the framebuffer must be assigned
+
+      the value <code>undefined</code> to delete the framebuffer from CPU
+      memory. If any
+
+      variable still refers to the framebuffer, then it won't be garbage
+
+      collected.</p>
+    path: p5.Framebuffer/remove
+  begin:
+    description: >
+      <p>Begins drawing shapes to the framebuffer.</p>
+
+      <p><code>myBuffer.begin()</code> and <a
+      href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>
+
+      allow shapes to be drawn to the framebuffer. <code>myBuffer.begin()</code>
+      begins
+
+      drawing to the framebuffer and
+
+      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> stops drawing
+      to the
+
+      framebuffer. Changes won't be visible until the framebuffer is displayed
+
+      as an image or texture.</p>
+    path: p5.Framebuffer/begin
+  end:
+    description: >
+      <p>Stops drawing shapes to the framebuffer.</p>
+
+      <p><a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
+      <code>myBuffer.end()</code>
+
+      allow shapes to be drawn to the framebuffer.
+
+      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> begins
+      drawing to
+
+      the framebuffer and <code>myBuffer.end()</code> stops drawing to the
+      framebuffer.
+
+      Changes won't be visible until the framebuffer is displayed as an image
+
+      or texture.</p>
+    path: p5.Framebuffer/end
+  draw:
+    description: >
+      <p>Draws to the framebuffer by calling a function that contains drawing
+
+      instructions.</p>
+
+      <p>The parameter, <code>callback</code>, is a function with the drawing
+      instructions
+
+      for the framebuffer. For example, calling
+      <code>myBuffer.draw(myFunction)</code>
+
+      will call a function named <code>myFunction()</code> to draw to the
+      framebuffer.
+
+      Doing so has the same effect as the following:</p>
+
+      <pre><code class="language-js">myBuffer.begin();
+
+      myFunction();
+
+      myBuffer.end();
+
+      </code></pre>
+    path: p5.Framebuffer/draw
+  loadPixels:
+    description: >
+      <p>Loads the current value of each pixel in the framebuffer into its
+
+      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
+
+      <p><code>myBuffer.loadPixels()</code> must be called before reading from
+      or writing to
+
+      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>.</p>
+    path: p5.Framebuffer/loadPixels
+  get:
+    description: >
+      <p>Gets a pixel or a region of pixels from the framebuffer.</p>
+
+      <p><code>myBuffer.get()</code> is easy to use but it's not as fast as
+
+      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>. Use
+
+      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a> to read
+      many pixel
+
+      values.</p>
+
+      <p>The version of <code>myBuffer.get()</code> with no parameters returns
+      the entire
+
+      framebuffer as a a <a href="/reference/p5/p5.Image">p5.Image</a>
+      object.</p>
+
+      <p>The version of <code>myBuffer.get()</code> with two parameters
+      interprets them as
+
+      coordinates. It returns an array with the <code>[R, G, B, A]</code> values
+      of the
+
+      pixel at the given point.</p>
+
+      <p>The version of <code>myBuffer.get()</code> with four parameters
+      interprets them as
+
+      coordinates and dimensions. It returns a subsection of the framebuffer as
+
+      a <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two
+      parameters are
+
+      the coordinates for the upper-left corner of the subsection. The last two
+
+      parameters are the width and height of the subsection.</p>
+    path: p5.Framebuffer/get
+  updatePixels:
+    description: >
+      <p>Updates the framebuffer with the RGBA values in the
+
+      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
+
+      <p><code>myBuffer.updatePixels()</code> only needs to be called after
+      changing values
+
+      in the <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>
+      array. Such
+
+      changes can be made directly after calling
+
+      <a
+      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>.</p>
+    path: p5.Framebuffer/updatePixels
+properties:
+  pixels:
+    description: >
+      <p>An array containing the color of each pixel in the framebuffer.</p>
+
+      <p><a
+      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>
+      must be
+
+      called before accessing the <code>myBuffer.pixels</code> array.
+
+      <a
+      href="/reference/p5.Framebuffer/updatePixels/">myBuffer.updatePixels()</a>
+
+      must be called after any changes are made.</p>
+
+      <p>Note: Updating pixels via this property is slower than drawing to the
+
+      framebuffer directly. Consider using a
+
+      <a href="/reference/p5/p5.Shader">p5.Shader</a> object instead of looping
+      over
+
+      <code>myBuffer.pixels</code>.</p>
+    path: p5.Framebuffer/pixels
+  color:
+    description: >
+      <p>An object that stores the framebuffer's color data.</p>
+
+      <p>Each framebuffer uses a
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
+      target="_blank">WebGLTexture</a>
+
+      object internally to store its color data. The <code>myBuffer.color</code>
+      property
+
+      makes it possible to pass this data directly to other functions. For
+
+      example, calling <code>texture(myBuffer.color)</code> or
+
+      <code>myShader.setUniform('colorTexture', myBuffer.color)</code>  may be
+      helpful for
+
+      advanced use cases.</p>
+
+      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
+
+      images and videos. It's easy to flip a framebuffer's y-coordinates as
+
+      needed when applying it as a texture. For example, calling
+
+      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
+      framebuffer.</p>
+    path: p5.Framebuffer/color
+  depth:
+    description: >
+      <p>An object that stores the framebuffer's depth data.</p>
+
+      <p>Each framebuffer uses a
+
+      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
+      target="_blank">WebGLTexture</a>
+
+      object internally to store its depth data. The <code>myBuffer.depth</code>
+      property
+
+      makes it possible to pass this data directly to other functions. For
+
+      example, calling <code>texture(myBuffer.depth)</code> or
+
+      <code>myShader.setUniform('depthTexture', myBuffer.depth)</code>  may be
+      helpful for
+
+      advanced use cases.</p>
+
+      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
+
+      images and videos. It's easy to flip a framebuffer's y-coordinates as
+
+      needed when applying it as a texture. For example, calling
+
+      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
+      framebuffer.</p>
+    path: p5.Framebuffer/depth
+chainable: false
+---
+
+
+# p5.Framebuffer
diff --git a/src/content/reference/en/p5 copy/p5.Geometry.mdx b/src/content/reference/en/p5 copy/p5.Geometry.mdx
new file mode 100644
index 0000000000..0faa7daf7a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Geometry.mdx	
@@ -0,0 +1,793 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Geometry.js#L13
+title: p5.Geometry
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/p5.Geometry.js
+description: >
+  <p>A class to describe a 3D shape.</p>
+
+  <p>Each <code>p5.Geometry</code> object represents a 3D shape as a set of
+  connected
+
+  points called <em>vertices</em>. All 3D shapes are made by connecting vertices
+  to
+
+  form triangles that are stitched together. Each triangular patch on the
+
+  geometry's surface is called a <em>face</em>. The geometry stores information
+
+  about its vertices and faces for use with effects such as lighting and
+
+  texture mapping.</p>
+
+  <p>The first parameter, <code>detailX</code>, is optional. If a number is
+  passed, as in
+
+  <code>new p5.Geometry(24)</code>, it sets the number of triangle subdivisions
+  to use
+
+  along the geometry's x-axis. By default, <code>detailX</code> is 1.</p>
+
+  <p>The second parameter, <code>detailY</code>, is also optional. If a number
+  is passed,
+
+  as in <code>new p5.Geometry(24, 16)</code>, it sets the number of triangle
+
+  subdivisions to use along the geometry's y-axis. By default,
+  <code>detailX</code> is
+
+  1.</p>
+
+  <p>The third parameter, <code>callback</code>, is also optional. If a function
+  is passed,
+
+  as in <code>new p5.Geometry(24, 16, createShape)</code>, it will be called
+  once to add
+
+  vertices to the new 3D shape.</p>
+line: 13
+isConstructor: true
+params:
+  - name: detailX
+    description: |
+      <p>number of vertices along the x-axis.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of vertices along the y-axis.</p>
+    type: Integer
+    optional: true
+  - name: callback
+    description: |
+      <p>function to call once the geometry is created.</p>
+    type: Function
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Geometry object.
+      myGeometry = new p5.Geometry();
+
+      // Create p5.Vector objects to position the vertices.
+      let v0 = createVector(-40, 0, 0);
+      let v1 = createVector(0, -40, 0);
+      let v2 = createVector(40, 0, 0);
+
+      // Add the vertices to the p5.Geometry object's vertices array.
+      myGeometry.vertices.push(v0, v1, v2);
+
+      describe('A white triangle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Geometry object using a callback function.
+      myGeometry = new p5.Geometry(1, 1, createShape);
+
+      describe('A white triangle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+
+    function createShape() {
+      // Create p5.Vector objects to position the vertices.
+      let v0 = createVector(-40, 0, 0);
+      let v1 = createVector(0, -40, 0);
+      let v2 = createVector(40, 0, 0);
+
+      // "this" refers to the p5.Geometry object being created.
+
+      // Add the vertices to the p5.Geometry object's vertices array.
+      this.vertices.push(v0, v1, v2);
+
+      // Add an array to list which vertices belong to the face.
+      // Vertices are listed in clockwise "winding" order from
+      // left to top to right.
+      this.faces.push([0, 1, 2]);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Geometry object using a callback function.
+      myGeometry = new p5.Geometry(1, 1, createShape);
+
+      describe('A white triangle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+
+    function createShape() {
+      // Create p5.Vector objects to position the vertices.
+      let v0 = createVector(-40, 0, 0);
+      let v1 = createVector(0, -40, 0);
+      let v2 = createVector(40, 0, 0);
+
+      // "this" refers to the p5.Geometry object being created.
+
+      // Add the vertices to the p5.Geometry object's vertices array.
+      this.vertices.push(v0, v1, v2);
+
+      // Add an array to list which vertices belong to the face.
+      // Vertices are listed in clockwise "winding" order from
+      // left to top to right.
+      this.faces.push([0, 1, 2]);
+
+      // Compute the surface normals to help with lighting.
+      this.computeNormals();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.
+    // https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/
+    // CC-BY-SA 4.0
+
+    let myGeometry;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the p5.Geometry object.
+      // Set detailX to 48 and detailY to 2.
+      // >>> try changing them.
+      myGeometry = new p5.Geometry(48, 2, createShape);
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the p5.Geometry object.
+      strokeWeight(0.2);
+
+      // Draw the p5.Geometry object.
+      model(myGeometry);
+    }
+
+    function createShape() {
+      // "this" refers to the p5.Geometry object being created.
+
+      // Define the Möbius strip with a few parameters.
+      let spread = 0.1;
+      let radius = 30;
+      let stripWidth = 15;
+      let xInterval = 4 * PI / this.detailX;
+      let yOffset = -stripWidth / 2;
+      let yInterval = stripWidth / this.detailY;
+
+      for (let j = 0; j <= this.detailY; j += 1) {
+        // Calculate the "vertical" point along the strip.
+        let v = yOffset + yInterval * j;
+
+        for (let i = 0; i <= this.detailX; i += 1) {
+          // Calculate the angle of rotation around the strip.
+          let u = i * xInterval;
+
+          // Calculate the coordinates of the vertex.
+          let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;
+          let y = (radius + v * cos(u / 2)) * sin(u);
+          if (u < TWO_PI) {
+            y += sin(u) * spread;
+          } else {
+            y -= sin(u) * spread;
+          }
+          let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;
+
+          // Create a p5.Vector object to position the vertex.
+          let vert = createVector(x, y, z);
+
+          // Add the vertex to the p5.Geometry object's vertices array.
+          this.vertices.push(vert);
+        }
+      }
+
+      // Compute the faces array.
+      this.computeFaces();
+
+      // Compute the surface normals to help with lighting.
+      this.computeNormals();
+    }
+    </code>
+    </div>
+methods:
+  calculateBoundingBox:
+    description: >
+      <p>Calculates the position and size of the smallest box that contains the
+      geometry.</p>
+
+      <p>A bounding box is the smallest rectangular prism that contains the
+      entire
+
+      geometry. It's defined by the box's minimum and maximum coordinates along
+
+      each axis, as well as the size (length) and offset (center).</p>
+
+      <p>Calling <code>myGeometry.calculateBoundingBox()</code> returns an
+      object with four
+
+      properties that describe the bounding box:</p>
+
+      <pre><code class="language-js">// Get myGeometry's bounding box.
+
+      let bbox = myGeometry.calculateBoundingBox();
+
+
+      // Print the bounding box to the console.
+
+      console.log(bbox);
+
+
+      // {
+
+      //  // The minimum coordinate along each axis.
+
+      //  min: { x: -1, y: -2, z: -3 },
+
+      //
+
+      //  // The maximum coordinate along each axis.
+
+      //  max: { x: 1, y: 2, z: 3},
+
+      //
+
+      //  // The size (length) along each axis.
+
+      //  size: { x: 2, y: 4, z: 6},
+
+      //
+
+      //  // The offset (center) along each axis.
+
+      //  offset: { x: 0, y: 0, z: 0}
+
+      // }
+
+      </code></pre>
+    path: p5.Geometry/calculateBoundingBox
+  clearColors:
+    description: >
+      <p>Removes the geometry’s internal colors.</p>
+
+      <p><code>p5.Geometry</code> objects can be created with "internal colors"
+      assigned to
+
+      vertices or the entire shape. When a geometry has internal colors,
+
+      <a href="/reference/p5/fill/">fill()</a> has no effect. Calling
+
+      <code>myGeometry.clearColors()</code> allows the
+
+      <a href="/reference/p5/fill/">fill()</a> function to apply color to the
+      geometry.</p>
+    path: p5.Geometry/clearColors
+  saveObj:
+    description: >
+      <p>The <code>saveObj()</code> function exports <code>p5.Geometry</code>
+      objects as
+
+      3D models in the Wavefront .obj file format.
+
+      This way, you can use the 3D shapes you create in p5.js in other software
+
+      for rendering, animation, 3D printing, or more.</p>
+
+      <p>The exported .obj file will include the faces and vertices of the
+      <code>p5.Geometry</code>,
+
+      as well as its texture coordinates and normals, if it has them.</p>
+    path: p5.Geometry/saveObj
+  saveStl:
+    description: >
+      <p>The <code>saveStl()</code> function exports <code>p5.Geometry</code>
+      objects as
+
+      3D models in the STL stereolithography file format.
+
+      This way, you can use the 3D shapes you create in p5.js in other software
+
+      for rendering, animation, 3D printing, or more.</p>
+
+      <p>The exported .stl file will include the faces, vertices, and normals of
+      the <code>p5.Geometry</code>.</p>
+
+      <p>By default, this method saves a text-based .stl file. Alternatively,
+      you can save a more compact
+
+      but less human-readable binary .stl file by passing <code>{ binary: true
+      }</code> as a second parameter.</p>
+    path: p5.Geometry/saveStl
+  flipU:
+    description: >
+      <p>Flips the geometry’s texture u-coordinates.</p>
+
+      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
+      the geometry
+
+      needs a way to map the points on its surface to the pixels in a
+      rectangular
+
+      image that's used as a texture. The geometry's vertex at coordinates
+
+      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
+      <code>(u, v)</code>.</p>
+
+      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
+      stores the
+
+      <code>(u, v)</code> coordinates for each vertex in the order it was added
+      to the
+
+      geometry. Calling <code>myGeometry.flipU()</code> flips a geometry's
+      u-coordinates
+
+      so that the texture appears mirrored horizontally.</p>
+
+      <p>For example, a plane's four vertices are added clockwise starting from
+      the
+
+      top-left corner. Here's how calling <code>myGeometry.flipU()</code> would
+      change a
+
+      plane's texture coordinates:</p>
+
+      <pre><code class="language-js">// Print the original texture coordinates.
+
+      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
+
+      console.log(myGeometry.uvs);
+
+
+      // Flip the u-coordinates.
+
+      myGeometry.flipU();
+
+
+      // Print the flipped texture coordinates.
+
+      // Output: [1, 0, 0, 0, 1, 1, 0, 1]
+
+      console.log(myGeometry.uvs);
+
+
+      // Notice the swaps:
+
+      // Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]
+
+      // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
+
+      </code></pre>
+    path: p5.Geometry/flipU
+  flipV:
+    description: >
+      <p>Flips the geometry’s texture v-coordinates.</p>
+
+      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
+      the geometry
+
+      needs a way to map the points on its surface to the pixels in a
+      rectangular
+
+      image that's used as a texture. The geometry's vertex at coordinates
+
+      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
+      <code>(u, v)</code>.</p>
+
+      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
+      stores the
+
+      <code>(u, v)</code> coordinates for each vertex in the order it was added
+      to the
+
+      geometry. Calling <code>myGeometry.flipV()</code> flips a geometry's
+      v-coordinates
+
+      so that the texture appears mirrored vertically.</p>
+
+      <p>For example, a plane's four vertices are added clockwise starting from
+      the
+
+      top-left corner. Here's how calling <code>myGeometry.flipV()</code> would
+      change a
+
+      plane's texture coordinates:</p>
+
+      <pre><code class="language-js">// Print the original texture coordinates.
+
+      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
+
+      console.log(myGeometry.uvs);
+
+
+      // Flip the v-coordinates.
+
+      myGeometry.flipV();
+
+
+      // Print the flipped texture coordinates.
+
+      // Output: [0, 1, 1, 1, 0, 0, 1, 0]
+
+      console.log(myGeometry.uvs);
+
+
+      // Notice the swaps:
+
+      // Left vertices: [0, 0] <--> [1, 0]
+
+      // Right vertices: [1, 0] <--> [1, 1]
+
+      </code></pre>
+    path: p5.Geometry/flipV
+  computeFaces:
+    description: >
+      <p>Computes the geometry's faces using its vertices.</p>
+
+      <p>All 3D shapes are made by connecting sets of points called
+      <em>vertices</em>. A
+
+      geometry's surface is formed by connecting vertices to form triangles that
+
+      are stitched together. Each triangular patch on the geometry's surface is
+
+      called a <em>face</em>. <code>myGeometry.computeFaces()</code> performs
+      the math needed to
+
+      define each face based on the distances between vertices.</p>
+
+      <p>The geometry's vertices are stored as <a
+      href="/reference/p5/p5.Vector">p5.Vector</a>
+
+      objects in the <a
+      href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a>
+
+      array. The geometry's first vertex is the
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
+      <code>myGeometry.vertices[0]</code>,
+
+      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
+      is
+
+      <code>myGeometry.vertices[2]</code>, and so on.</p>
+
+      <p>Calling <code>myGeometry.computeFaces()</code> fills the
+
+      <a href="/reference/p5.Geometry/faces/">myGeometry.faces</a> array with
+      three-element
+
+      arrays that list the vertices that form each face. For example, a geometry
+
+      made from a rectangle has two faces because a rectangle is made by joining
+
+      two triangles. <a
+      href="/reference/p5.Geometry/faces/">myGeometry.faces</a> for a
+
+      rectangle would be the two-dimensional array
+
+      <code>[[0, 1, 2], [2, 1, 3]]</code>. The first face,
+      <code>myGeometry.faces[0]</code>, is the
+
+      array <code>[0, 1, 2]</code> because it's formed by connecting
+
+      <code>myGeometry.vertices[0]</code>,
+      <code>myGeometry.vertices[1]</code>,and
+
+      <code>myGeometry.vertices[2]</code>. The second face,
+      <code>myGeometry.faces[1]</code>, is the
+
+      array <code>[2, 1, 3]</code> because it's formed by connecting
+
+      <code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>,
+      and
+
+      <code>myGeometry.vertices[3]</code>.</p>
+
+      <p>Note: <code>myGeometry.computeFaces()</code> only works when geometries
+      have four or more vertices.</p>
+    path: p5.Geometry/computeFaces
+  computeNormals:
+    description: >
+      <p>Calculates the normal vector for each vertex on the geometry.</p>
+
+      <p>All 3D shapes are made by connecting sets of points called
+      <em>vertices</em>. A
+
+      geometry's surface is formed by connecting vertices to create triangles
+
+      that are stitched together. Each triangular patch on the geometry's
+
+      surface is called a <em>face</em>.
+      <code>myGeometry.computeNormals()</code> performs the
+
+      math needed to orient each face. Orientation is important for lighting
+
+      and other effects.</p>
+
+      <p>A face's orientation is defined by its <em>normal vector</em> which
+      points out
+
+      of the face and is normal (perpendicular) to the surface. Calling
+
+      <code>myGeometry.computeNormals()</code> first calculates each face's
+      normal vector.
+
+      Then it calculates the normal vector for each vertex by averaging the
+
+      normal vectors of the faces surrounding the vertex. The vertex normals
+
+      are stored as <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in
+      the
+
+      <a
+      href="/reference/p5.Geometry/vertexNormals/">myGeometry.vertexNormals</a>
+      array.</p>
+
+      <p>The first parameter, <code>shadingType</code>, is optional. Passing the
+      constant
+
+      <code>FLAT</code>, as in <code>myGeometry.computeNormals(FLAT)</code>,
+      provides neighboring
+
+      faces with their own copies of the vertices they share. Surfaces appear
+
+      tiled with flat shading. Passing the constant <code>SMOOTH</code>, as in
+
+      <code>myGeometry.computeNormals(SMOOTH)</code>, makes neighboring faces
+      reuse their
+
+      shared vertices. Surfaces appear smoother with smooth shading. By
+
+      default, <code>shadingType</code> is <code>FLAT</code>.</p>
+
+      <p>The second parameter, <code>options</code>, is also optional. If an
+      object with a
+
+      <code>roundToPrecision</code> property is passed, as in
+
+      <code>myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })</code>,
+      it sets the
+
+      number of decimal places to use for calculations. By default,
+
+      <code>roundToPrecision</code> uses 3 decimal places.</p>
+    path: p5.Geometry/computeNormals
+  normalize:
+    description: >
+      <p>Transforms the geometry's vertices to fit snugly within a 100×100×100
+      box
+
+      centered at the origin.</p>
+
+      <p>Calling <code>myGeometry.normalize()</code> translates the geometry's
+      vertices so that
+
+      they're centered at the origin <code>(0, 0, 0)</code>. Then it scales the
+      vertices so
+
+      that they fill a 100×100×100 box. As a result, small geometries will grow
+
+      and large geometries will shrink.</p>
+
+      <p>Note: <code>myGeometry.normalize()</code> only works when called in the
+
+      <a href="/reference/p5/setup/">setup()</a> function.</p>
+    path: p5.Geometry/normalize
+properties:
+  vertices:
+    description: >
+      <p>An array with the geometry's vertices.</p>
+
+      <p>The geometry's vertices are stored as
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
+      <code>myGeometry.vertices</code>
+
+      array. The geometry's first vertex is the
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
+      <code>myGeometry.vertices[0]</code>,
+
+      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
+      is
+
+      <code>myGeometry.vertices[2]</code>, and so on.</p>
+    path: p5.Geometry/vertices
+  vertexNormals:
+    description: >
+      <p>An array with the vectors that are normal to the geometry's
+      vertices.</p>
+
+      <p>A face's orientation is defined by its <em>normal vector</em> which
+      points out
+
+      of the face and is normal (perpendicular) to the surface. Calling
+
+      <code>myGeometry.computeNormals()</code> first calculates each face's
+      normal
+
+      vector. Then it calculates the normal vector for each vertex by
+
+      averaging the normal vectors of the faces surrounding the vertex. The
+
+      vertex normals are stored as <a
+      href="/reference/p5/p5.Vector">p5.Vector</a>
+
+      objects in the <code>myGeometry.vertexNormals</code> array.</p>
+    path: p5.Geometry/vertexNormals
+  faces:
+    description: >
+      <p>An array that lists which of the geometry's vertices form each of its
+
+      faces.</p>
+
+      <p>All 3D shapes are made by connecting sets of points called
+      <em>vertices</em>. A
+
+      geometry's surface is formed by connecting vertices to form triangles
+
+      that are stitched together. Each triangular patch on the geometry's
+
+      surface is called a <em>face</em>.</p>
+
+      <p>The geometry's vertices are stored as
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
+
+      <a href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a> array.
+      The
+
+      geometry's first vertex is the <a
+      href="/reference/p5/p5.Vector">p5.Vector</a>
+
+      object at <code>myGeometry.vertices[0]</code>, its second vertex is
+
+      <code>myGeometry.vertices[1]</code>, its third vertex is
+      <code>myGeometry.vertices[2]</code>,
+
+      and so on.</p>
+
+      <p>For example, a geometry made from a rectangle has two faces because a
+
+      rectangle is made by joining two triangles. <code>myGeometry.faces</code>
+      for a
+
+      rectangle would be the two-dimensional array <code>[[0, 1, 2], [2, 1,
+      3]]</code>.
+
+      The first face, <code>myGeometry.faces[0]</code>, is the array <code>[0,
+      1, 2]</code> because
+
+      it's formed by connecting <code>myGeometry.vertices[0]</code>,
+
+      <code>myGeometry.vertices[1]</code>,and
+      <code>myGeometry.vertices[2]</code>. The second face,
+
+      <code>myGeometry.faces[1]</code>, is the array <code>[2, 1, 3]</code>
+      because it's formed by
+
+      connecting <code>myGeometry.vertices[2]</code>,
+      <code>myGeometry.vertices[1]</code>,and
+
+      <code>myGeometry.vertices[3]</code>.</p>
+    path: p5.Geometry/faces
+  uvs:
+    description: >
+      <p>An array that lists the texture coordinates for each of the geometry's
+
+      vertices.</p>
+
+      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
+      the geometry
+
+      needs a way to map the points on its surface to the pixels in a
+
+      rectangular image that's used as a texture. The geometry's vertex at
+
+      coordinates <code>(x, y, z)</code> maps to the texture image's pixel at
+      coordinates
+
+      <code>(u, v)</code>.</p>
+
+      <p>The <code>myGeometry.uvs</code> array stores the <code>(u, v)</code>
+      coordinates for each
+
+      vertex in the order it was added to the geometry. For example, the
+
+      first vertex, <code>myGeometry.vertices[0]</code>, has its <code>(u,
+      v)</code> coordinates
+
+      stored at <code>myGeometry.uvs[0]</code> and
+      <code>myGeometry.uvs[1]</code>.</p>
+    path: p5.Geometry/uvs
+chainable: false
+---
+
+
+# p5.Geometry
diff --git a/src/content/reference/en/p5 copy/p5.Graphics.mdx b/src/content/reference/en/p5 copy/p5.Graphics.mdx
new file mode 100644
index 0000000000..d0b7c3aff8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Graphics.mdx	
@@ -0,0 +1,261 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Graphics.js#L10
+title: p5.Graphics
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Graphics.js
+description: >
+  <p>A class to describe a drawing surface that's separate from the main
+  canvas.</p>
+
+  <p>Each <code>p5.Graphics</code> object provides a dedicated drawing surface
+  called a
+
+  <em>graphics buffer</em>. Graphics buffers are helpful when drawing should
+  happen
+
+  offscreen. For example, separate scenes can be drawn offscreen and
+
+  displayed only when needed.</p>
+
+  <p><code>p5.Graphics</code> objects have nearly all the drawing features of
+  the main
+
+  canvas. For example, calling the method <code>myGraphics.circle(50, 50,
+  20)</code>
+
+  draws to the graphics buffer. The resulting image can be displayed on the
+
+  main canvas by passing the <code>p5.Graphics</code> object to the
+
+  <a href="/reference/p5/image/">image()</a> function, as in
+  <code>image(myGraphics, 0, 0)</code>.</p>
+
+  <p>Note: <a href="/reference/p5/createGraphics/">createGraphics()</a> is the
+  recommended
+
+  way to create an instance of this class.</p>
+line: 10
+isConstructor: true
+params:
+  - name: width
+    description: |
+      <p>width of the graphics buffer in pixels.</p>
+    type: Number
+  - name: height
+    description: |
+      <p>height of the graphics buffer in pixels.</p>
+    type: Number
+  - name: renderer
+    description: |
+      <p>renderer to use, either P2D or WEBGL.</p>
+    type: Constant
+  - name: pInst
+    description: |
+      <p>sketch instance.</p>
+    type: P5
+    optional: true
+  - name: canvas
+    description: |
+      <p>existing <code>&lt;canvas&gt;</code> element to use.</p>
+    type: HTMLCanvasElement
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Graphics object.
+      pg = createGraphics(50, 50);
+
+      // Draw to the p5.Graphics object.
+      pg.background(100);
+      pg.circle(25, 25, 20);
+
+      describe('A dark gray square with a white circle at its center drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Display the p5.Graphics object.
+      image(pg, 25, 25);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the canvas to display the graphics buffer.
+
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Graphics object.
+      pg = createGraphics(50, 50);
+
+      describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the background color.
+      let bg = frameCount % 255;
+
+      // Draw to the p5.Graphics object.
+      pg.background(bg);
+
+      // Display the p5.Graphics object while
+      // the user presses the mouse.
+      if (mouseIsPressed === true) {
+        image(pg, 25, 25);
+      }
+    }
+    </code>
+    </div>
+methods:
+  reset:
+    description: >
+      <p>Resets the graphics buffer's transformations and lighting.</p>
+
+      <p>By default, the main canvas resets certain transformation and lighting
+
+      values each time <a href="/reference/p5/draw/">draw()</a> executes.
+      <code>p5.Graphics</code>
+
+      objects must reset these values manually by calling
+      <code>myGraphics.reset()</code>.</p>
+    path: p5.Graphics/reset
+  remove:
+    description: >
+      <p>Removes the graphics buffer from the web page.</p>
+
+      <p>Calling <code>myGraphics.remove()</code> removes the graphics buffer's
+
+      <code><canvas></code> element from the web page. The graphics buffer also
+      uses
+
+      a bit of memory on the CPU that can be freed like so:</p>
+
+      <pre><code class="language-js">// Remove the graphics buffer from the web
+      page.
+
+      myGraphics.remove();
+
+
+      // Delete the graphics buffer from CPU memory.
+
+      myGraphics = undefined;
+
+      </code></pre>
+
+      <p>Note: All variables that reference the graphics buffer must be assigned
+
+      the value <code>undefined</code> to delete the graphics buffer from CPU
+      memory. If any
+
+      variable still refers to the graphics buffer, then it won't be garbage
+
+      collected.</p>
+    path: p5.Graphics/remove
+  createFramebuffer:
+    description: >
+      <p>Creates a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+      object with
+
+      the same WebGL context as the graphics buffer.</p>
+
+      <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
+      separate drawing
+
+      surfaces that can be used as textures in WebGL mode. They're similar to
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally
+      run much
+
+      faster when used as textures. Creating a
+
+      <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object in the
+      same context
+
+      as the graphics buffer makes this speedup possible.</p>
+
+      <p>The parameter, <code>options</code>, is optional. An object can be
+      passed to configure
+
+      the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
+      available
+
+      properties are:</p>
+
+      <ul>
+
+      <li><code>format</code>: data format of the texture, either
+      <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or
+      <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li>
+
+      <li><code>channels</code>: whether to store <code>RGB</code> or
+      <code>RGBA</code> color channels. Default is to match the graphics buffer
+      which is <code>RGBA</code>.</li>
+
+      <li><code>depth</code>: whether to include a depth buffer. Default is
+      <code>true</code>.</li>
+
+      <li><code>depthFormat</code>: data format of depth information, either
+      <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
+      <code>FLOAT</code>.</li>
+
+      <li><code>stencil</code>: whether to include a stencil buffer for masking.
+      <code>depth</code> must be <code>true</code> for this feature to work.
+      Defaults to the value of <code>depth</code> which is
+      <code>true</code>.</li>
+
+      <li><code>antialias</code>: whether to perform anti-aliasing. If set to
+      <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will
+      be used by default. The number of samples can also be set, as in <code>{
+      antialias: 4 }</code>. Default is to match <a
+      href="/reference/p5/setAttributes/">setAttributes()</a> which is
+      <code>false</code> (<code>true</code> in Safari).</li>
+
+      <li><code>width</code>: width of the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
+      to always match the graphics buffer width.</li>
+
+      <li><code>height</code>: height of the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
+      to always match the graphics buffer height.</li>
+
+      <li><code>density</code>: pixel density of the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
+      to always match the graphics buffer pixel density.</li>
+
+      <li><code>textureFiltering</code>: how to read values from the <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
+      <code>LINEAR</code> (nearby pixels will be interpolated) or
+      <code>NEAREST</code> (no interpolation). Generally, use
+      <code>LINEAR</code> when using the texture as an image and
+      <code>NEAREST</code> if reading the texture as data. Default is
+      <code>LINEAR</code>.</li>
+
+      </ul>
+
+      <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
+      attributes are set, they won't
+
+      automatically match the graphics buffer and must be changed manually.</p>
+    path: p5.Graphics/createFramebuffer
+chainable: false
+---
+
+
+# p5.Graphics
diff --git a/src/content/reference/en/p5 copy/p5.Image.mdx b/src/content/reference/en/p5 copy/p5.Image.mdx
new file mode 100644
index 0000000000..63e2a668fe
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Image.mdx	
@@ -0,0 +1,519 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/p5.Image.js#L21
+title: p5.Image
+module: Image
+submodule: Image
+file: src/image/p5.Image.js
+description: >
+  <p>A class to describe an image.</p>
+
+  <p>Images are rectangular grids of pixels that can be displayed and
+  modified.</p>
+
+  <p>Existing images can be loaded by calling
+
+  <a href="/reference/p5/loadImage/">loadImage()</a>. Blank images can be
+  created by
+
+  calling <a href="/reference/p5/createImage/">createImage()</a>.
+  <code>p5.Image</code> objects
+
+  have methods for common tasks such as applying filters and modifying
+
+  pixel values.</p>
+line: 21
+isConstructor: true
+params:
+  - name: width
+    description: ''
+    type: Number
+  - name: height
+    description: ''
+    type: Number
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      describe('An image of a brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Apply the GRAY filter.
+      img.filter(GRAY);
+
+      // Display the image.
+      image(img, 0, 0);
+
+      describe('A grayscale image of a brick wall.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Image object.
+      let img = createImage(66, 66);
+
+      // Load the image's pixels.
+      img.loadPixels();
+
+      // Set the pixels to black.
+      for (let x = 0; x < img.width; x += 1) {
+        for (let y = 0; y < img.height; y += 1) {
+          img.set(x, y, 0);
+        }
+      }
+
+      // Update the image.
+      img.updatePixels();
+
+      // Display the image.
+      image(img, 17, 17);
+
+      describe('A black square drawn in the middle of a gray square.');
+    }
+    </code>
+    </div>
+methods:
+  pixelDensity:
+    description: |
+      <p>Gets or sets the pixel density for high pixel density displays.</p>
+      <p>By default, the density will be set to 1.</p>
+      <p>Call this method with no arguments to get the default density, or pass
+      in a number to set the density. If a non-positive number is provided,
+      it defaults to 1.</p>
+    path: p5.Image/pixelDensity
+  loadPixels:
+    description: >
+      <p>Loads the current value of each pixel in the image into the
+      <code>img.pixels</code>
+
+      array.</p>
+
+      <p><code>img.loadPixels()</code> must be called before reading or
+      modifying pixel
+
+      values.</p>
+    path: p5.Image/loadPixels
+  updatePixels:
+    description: >
+      <p>Updates the canvas with the RGBA values in the
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a> array.</p>
+
+      <p><code>img.updatePixels()</code> only needs to be called after changing
+      values in
+
+      the <a href="/reference/p5.Image/pixels/">img.pixels</a> array. Such
+      changes can be
+
+      made directly after calling
+
+      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a> or by
+      calling
+
+      <a href="/reference/p5.Image/set/">img.set()</a>.</p>
+
+      <p>The optional parameters <code>x</code>, <code>y</code>,
+      <code>width</code>, and <code>height</code> define a
+
+      subsection of the image to update. Doing so can improve performance in
+
+      some cases.</p>
+
+      <p>If the image was loaded from a GIF, then calling
+      <code>img.updatePixels()</code>
+
+      will update the pixels in current frame.</p>
+    path: p5.Image/updatePixels
+  get:
+    description: >
+      <p>Gets a pixel or a region of pixels from the image.</p>
+
+      <p><code>img.get()</code> is easy to use but it's not as fast as
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a> to read many pixel
+      values.</p>
+
+      <p>The version of <code>img.get()</code> with no parameters returns the
+      entire image.</p>
+
+      <p>The version of <code>img.get()</code> with two parameters, as in
+      <code>img.get(10, 20)</code>,
+
+      interprets them as coordinates. It returns an array with the
+
+      <code>[R, G, B, A]</code> values of the pixel at the given point.</p>
+
+      <p>The version of <code>img.get()</code> with four parameters, as in
+
+      <code>img,get(10, 20, 50, 90)</code>, interprets them as
+
+      coordinates and dimensions. The first two parameters are the coordinates
+
+      of the upper-left corner of the subsection. The last two parameters are
+
+      the width and height of the subsection. It returns a subsection of the
+
+      canvas in a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+      <p>Use <code>img.get()</code> instead of <a
+      href="/reference/p5/get/">get()</a> to work directly
+
+      with images.</p>
+    path: p5.Image/get
+  set:
+    description: >
+      <p>Sets the color of one or more pixels within an image.</p>
+
+      <p><code>img.set()</code> is easy to use but it's not as fast as
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
+
+      <a href="/reference/p5.Image/pixels/">img.pixels</a> to set many pixel
+      values.</p>
+
+      <p><code>img.set()</code> interprets the first two parameters as x- and
+      y-coordinates. It
+
+      interprets the last parameter as a grayscale value, a <code>[R, G, B,
+      A]</code> pixel
+
+      array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or another
+
+      <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
+
+      <p><a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> must
+      be called
+
+      after using <code>img.set()</code> for changes to appear.</p>
+    path: p5.Image/set
+  resize:
+    description: >
+      <p>Resizes the image to a given width and height.</p>
+
+      <p>The image's original aspect ratio can be kept by passing 0 for either
+
+      <code>width</code> or <code>height</code>. For example, calling
+      <code>img.resize(50, 0)</code> on an image
+
+      that was 500 × 300 pixels will resize it to 50 × 30 pixels.</p>
+    path: p5.Image/resize
+  copy:
+    description: >
+      <p>Copies pixels from a source image to this image.</p>
+
+      <p>The first parameter, <code>srcImage</code>, is an optional
+
+      <a href="/reference/p5/p5.Image">p5.Image</a> object to copy. If a source
+      image isn't
+
+      passed, then <code>img.copy()</code> can copy a region of this image to
+      another
+
+      region.</p>
+
+      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+      <code>sw</code>, and <code>sh</code> determine the region
+
+      to copy from the source image. <code>(sx, sy)</code> is the top-left
+      corner of the
+
+      region. <code>sw</code> and <code>sh</code> are the region's width and
+      height.</p>
+
+      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+      <code>dw</code>, and <code>dh</code> determine the region
+
+      of this image to copy into. <code>(dx, dy)</code> is the top-left corner
+      of the
+
+      region. <code>dw</code> and <code>dh</code> are the region's width and
+      height.</p>
+
+      <p>Calling <code>img.copy()</code> will scale pixels from the source
+      region if it isn't
+
+      the same size as the destination region.</p>
+    path: p5.Image/copy
+  mask:
+    description: >
+      <p>Masks part of the image with another.</p>
+
+      <p><code>img.mask()</code> uses another <a
+      href="/reference/p5/p5.Image">p5.Image</a> object's
+
+      alpha channel as the alpha channel for this image. Masks are cumulative
+
+      and can't be removed once applied. If the mask has a different
+
+      pixel density from this image, the mask will be scaled.</p>
+    path: p5.Image/mask
+  filter:
+    description: >
+      <p>Applies an image filter to the image.</p>
+
+      <p>The preset options are:</p>
+
+      <p><code>INVERT</code>
+
+      Inverts the colors in the image. No parameter is used.</p>
+
+      <p><code>GRAY</code>
+
+      Converts the image to grayscale. No parameter is used.</p>
+
+      <p><code>THRESHOLD</code>
+
+      Converts the image to black and white. Pixels with a grayscale value
+
+      above a given threshold are converted to white. The rest are converted to
+
+      black. The threshold must be between 0.0 (black) and 1.0 (white). If no
+
+      value is specified, 0.5 is used.</p>
+
+      <p><code>OPAQUE</code>
+
+      Sets the alpha channel to be entirely opaque. No parameter is used.</p>
+
+      <p><code>POSTERIZE</code>
+
+      Limits the number of colors in the image. Each color channel is limited to
+
+      the number of colors specified. Values between 2 and 255 are valid, but
+
+      results are most noticeable with lower values. The default value is 4.</p>
+
+      <p><code>BLUR</code>
+
+      Blurs the image. The level of blurring is specified by a blur radius.
+      Larger
+
+      values increase the blur. The default value is 4. A gaussian blur is used
+
+      in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code>
+      mode.</p>
+
+      <p><code>ERODE</code>
+
+      Reduces the light areas. No parameter is used.</p>
+
+      <p><code>DILATE</code>
+
+      Increases the light areas. No parameter is used.</p>
+    path: p5.Image/filter
+  blend:
+    description: >
+      <p>Copies a region of pixels from another image into this one.</p>
+
+      <p>The first parameter, <code>srcImage</code>, is the
+
+      <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
+
+      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
+      <code>sw</code>, and <code>sh</code> determine the region
+
+      to blend from the source image. <code>(sx, sy)</code> is the top-left
+      corner of the
+
+      region. <code>sw</code> and <code>sh</code> are the regions width and
+      height.</p>
+
+      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
+      <code>dw</code>, and <code>dh</code> determine the region
+
+      of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner
+      of the
+
+      region. <code>dw</code> and <code>dh</code> are the regions width and
+      height.</p>
+
+      <p>The tenth parameter, <code>blendMode</code>, sets the effect used to
+      blend the images'
+
+      colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
+      <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
+
+      <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
+      <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
+
+      <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
+      <code>ADD</code>, or <code>NORMAL</code>.</p>
+    path: p5.Image/blend
+  save:
+    description: >
+      <p>Saves the image to a file.</p>
+
+      <p>By default, <code>img.save()</code> saves the image as a PNG image
+      called
+
+      <code>untitled.png</code>.</p>
+
+      <p>The first parameter, <code>filename</code>, is optional. It's a string
+      that sets the
+
+      file's name. If a file extension is included, as in
+
+      <code>img.save('drawing.png')</code>, then the image will be saved using
+      that
+
+      format.</p>
+
+      <p>The second parameter, <code>extension</code>, is also optional. It sets
+      the files format.
+
+      Either <code>'png'</code> or <code>'jpg'</code> can be used. For example,
+      <code>img.save('drawing', 'jpg')</code>
+
+      saves the canvas to a file called <code>drawing.jpg</code>.</p>
+
+      <p>Note: The browser will either save the file immediately or prompt the
+      user
+
+      with a dialogue window.</p>
+
+      <p>The image will only be downloaded as an animated GIF if it was loaded
+
+      from a GIF file. See <a href="/reference/p5/saveGif/">saveGif()</a> to
+      create new
+
+      GIFs.</p>
+    path: p5.Image/save
+  reset:
+    description: |
+      <p>Restarts an animated GIF at its first frame.</p>
+    path: p5.Image/reset
+  getCurrentFrame:
+    description: |
+      <p>Gets the index of the current frame in an animated GIF.</p>
+    path: p5.Image/getCurrentFrame
+  setFrame:
+    description: |
+      <p>Sets the current frame in an animated GIF.</p>
+    path: p5.Image/setFrame
+  numFrames:
+    description: |
+      <p>Returns the number of frames in an animated GIF.</p>
+    path: p5.Image/numFrames
+  play:
+    description: |
+      <p>Plays an animated GIF that was paused with
+      <a href="/reference/p5.Image/pause/">img.pause()</a>.</p>
+    path: p5.Image/play
+  pause:
+    description: |
+      <p>Pauses an animated GIF.</p>
+      <p>The GIF can be resumed by calling
+      <a href="/reference/p5.Image/play/">img.play()</a>.</p>
+    path: p5.Image/pause
+  delay:
+    description: >
+      <p>Changes the delay between frames in an animated GIF.</p>
+
+      <p>The first parameter, <code>delay</code>, is the length of the delay in
+      milliseconds.</p>
+
+      <p>The second parameter, <code>index</code>, is optional. If provided,
+      only the frame
+
+      at <code>index</code> will have its delay modified. All other frames will
+      keep
+
+      their default delay.</p>
+    path: p5.Image/delay
+properties:
+  width:
+    description: |
+      <p>The image's width in pixels.</p>
+    path: p5.Image/width
+  height:
+    description: |
+      <p>The image's height in pixels.</p>
+    path: p5.Image/height
+  pixels:
+    description: >
+      <p>An array containing the color of each pixel in the image.</p>
+
+      <p>Colors are stored as numbers representing red, green, blue, and alpha
+
+      (RGBA) values. <code>img.pixels</code> is a one-dimensional array for
+      performance
+
+      reasons.</p>
+
+      <p>Each pixel occupies four elements in the pixels array, one for each
+
+      RGBA value. For example, the pixel at coordinates (0, 0) stores its
+
+      RGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>,
+      <code>img.pixels[2]</code>,
+
+      and <code>img.pixels[3]</code>, respectively. The next pixel at
+      coordinates (1, 0)
+
+      stores its RGBA values at <code>img.pixels[4]</code>,
+      <code>img.pixels[5]</code>,
+
+      <code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The
+      <code>img.pixels</code> array
+
+      for a 100×100 <a href="/reference/p5/p5.Image">p5.Image</a> object has
+
+      100 × 100 × 4 = 40,000 elements.</p>
+
+      <p>Accessing the RGBA values for a pixel in the image requires a little
+
+      math as shown in the examples below. The
+
+      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a>
+
+      method must be called before accessing the <code>img.pixels</code> array.
+      The
+
+      <a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> method
+      must be
+
+      called after any changes are made.</p>
+    path: p5.Image/pixels
+chainable: false
+---
+
+
+# p5.Image
diff --git a/src/content/reference/en/p5 copy/p5.MediaElement.mdx b/src/content/reference/en/p5 copy/p5.MediaElement.mdx
new file mode 100644
index 0000000000..ee05412502
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.MediaElement.mdx	
@@ -0,0 +1,258 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L4099
+title: p5.MediaElement
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>A class to handle audio and video.</p>
+
+  <p><code>p5.MediaElement</code> extends <a
+  href="/reference/p5/p5.Element">p5.Element</a> with
+
+  methods to handle audio and video. <code>p5.MediaElement</code> objects are
+  created by
+
+  calling <a href="/reference/p5/createVideo/">createVideo</a>,
+
+  <a href="/reference/p5/createAudio/">createAudio</a>, and
+
+  <a href="/reference/p5/createCapture/">createCapture</a>.</p>
+line: 4099
+isConstructor: true
+params:
+  - name: elt
+    description: |
+      <p>DOM node that is wrapped</p>
+    type: String
+example:
+  - |-
+
+    <div class='notest'>
+    <code>
+    let capture;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.MediaElement using createCapture().
+      capture = createCapture(VIDEO);
+      capture.hide();
+
+      describe('A webcam feed with inverted colors.');
+    }
+
+    function draw() {
+      // Display the video stream and invert the colors.
+      image(capture, 0, 0, width, width * capture.height / capture.width);
+      filter(INVERT);
+    }
+    </code>
+    </div>
+methods:
+  play:
+    description: |
+      <p>Plays audio or video from a media element.</p>
+    path: p5.MediaElement/play
+  stop:
+    description: >
+      <p>Stops a media element and sets its current time to 0.</p>
+
+      <p>Calling <code>media.play()</code> will restart playing audio/video from
+      the beginning.</p>
+    path: p5.MediaElement/stop
+  pause:
+    description: >
+      <p>Pauses a media element.</p>
+
+      <p>Calling <code>media.play()</code> will resume playing audio/video from
+      the moment it paused.</p>
+    path: p5.MediaElement/pause
+  loop:
+    description: |
+      <p>Plays the audio/video repeatedly in a loop.</p>
+    path: p5.MediaElement/loop
+  noLoop:
+    description: |
+      <p>Stops the audio/video from playing in a loop.</p>
+      <p>The media will stop when it finishes playing.</p>
+    path: p5.MediaElement/noLoop
+  autoplay:
+    description: >
+      <p>Sets the audio/video to play once it's loaded.</p>
+
+      <p>The parameter, <code>shouldAutoplay</code>, is optional. Calling
+
+      <code>media.autoplay()</code> without an argument causes the media to play
+
+      automatically. If <code>true</code> is passed, as in
+      <code>media.autoplay(true)</code>, the
+
+      media will automatically play. If <code>false</code> is passed, as in
+
+      <code>media.autoPlay(false)</code>, it won't play automatically.</p>
+    path: p5.MediaElement/autoplay
+  volume:
+    description: >
+      <p>Sets the audio/video volume.</p>
+
+      <p>Calling <code>media.volume()</code> without an argument returns the
+      current volume
+
+      as a number in the range 0 (off) to 1 (maximum).</p>
+
+      <p>The parameter, <code>val</code>, is optional. It's a number that sets
+      the volume
+
+      from 0 (off) to 1 (maximum). For example, calling
+      <code>media.volume(0.5)</code>
+
+      sets the volume to half of its maximum.</p>
+    path: p5.MediaElement/volume
+  speed:
+    description: >
+      <p>Sets the audio/video playback speed.</p>
+
+      <p>The parameter, <code>val</code>, is optional. It's a number that sets
+      the playback
+
+      speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
+
+      plays it at double speed, and so on. -1 plays the media at normal speed
+
+      in reverse.</p>
+
+      <p>Calling <code>media.speed()</code> returns the current speed as a
+      number.</p>
+
+      <p>Note: Not all browsers support backward playback. Even if they do,
+
+      playback might not be smooth.</p>
+    path: p5.MediaElement/speed
+  time:
+    description: >
+      <p>Sets the media element's playback time.</p>
+
+      <p>The parameter, <code>time</code>, is optional. It's a number that
+      specifies the
+
+      time, in seconds, to jump to when playback begins.</p>
+
+      <p>Calling <code>media.time()</code> without an argument returns the
+      number of seconds
+
+      the audio/video has played.</p>
+
+      <p>Note: Time resets to 0 when looping media restarts.</p>
+    path: p5.MediaElement/time
+  duration:
+    description: |
+      <p>Returns the audio/video's duration in seconds.</p>
+    path: p5.MediaElement/duration
+  onended:
+    description: >
+      <p>Calls a function when the audio/video reaches the end of its
+      playback.</p>
+
+      <p>The element is passed as an argument to the callback function.</p>
+
+      <p>Note: The function won't be called if the media is looping.</p>
+    path: p5.MediaElement/onended
+  connect:
+    description: >
+      <p>Sends the element's audio to an output.</p>
+
+      <p>The parameter, <code>audioNode</code>, can be an <code>AudioNode</code>
+      or an object from the
+
+      <code>p5.sound</code> library.</p>
+
+      <p>If no element is provided, as in <code>myElement.connect()</code>, the
+      element
+
+      connects to the main output. All connections are removed by the
+
+      <code>.disconnect()</code> method.</p>
+
+      <p>Note: This method is meant to be used with the p5.sound.js addon
+      library.</p>
+    path: p5.MediaElement/connect
+  disconnect:
+    description: >
+      <p>Disconnect all Web Audio routing, including to the main output.</p>
+
+      <p>This is useful if you want to re-route the output through audio
+      effects,
+
+      for example.</p>
+    path: p5.MediaElement/disconnect
+  showControls:
+    description: >
+      <p>Show the default
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
+      target="_blank">HTMLMediaElement</a>
+
+      controls.</p>
+
+      <p>Note: The controls vary between web browsers.</p>
+    path: p5.MediaElement/showControls
+  hideControls:
+    description: >
+      <p>Hide the default
+
+      <a
+      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
+      target="_blank">HTMLMediaElement</a>
+
+      controls.</p>
+    path: p5.MediaElement/hideControls
+  addCue:
+    description: >
+      <p>Schedules a function to call when the audio/video reaches a specific
+      time
+
+      during its playback.</p>
+
+      <p>The first parameter, <code>time</code>, is the time, in seconds, when
+      the function
+
+      should run. This value is passed to <code>callback</code> as its first
+      argument.</p>
+
+      <p>The second parameter, <code>callback</code>, is the function to call at
+      the specified
+
+      cue time.</p>
+
+      <p>The third parameter, <code>value</code>, is optional and can be any
+      type of value.
+
+      <code>value</code> is passed to <code>callback</code>.</p>
+
+      <p>Calling <code>media.addCue()</code> returns an ID as a string. This is
+      useful for
+
+      removing the cue later.</p>
+    path: p5.MediaElement/addCue
+  removeCue:
+    description: |
+      <p>Removes a callback based on its ID.</p>
+    path: p5.MediaElement/removeCue
+  clearCues:
+    description: |
+      <p>Removes all functions scheduled with <code>media.addCue()</code>.</p>
+    path: p5.MediaElement/clearCues
+properties:
+  src:
+    description: |
+      <p>Path to the media element's source as a string.</p>
+    path: p5.MediaElement/src
+chainable: false
+---
+
+
+# p5.MediaElement
diff --git a/src/content/reference/en/p5 copy/p5.NumberDict.mdx b/src/content/reference/en/p5 copy/p5.NumberDict.mdx
new file mode 100644
index 0000000000..d385eb1468
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.NumberDict.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L415
+title: p5.NumberDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>A simple Dictionary class for Numbers.</p>
+line: 415
+isConstructor: true
+methods:
+  add:
+    description: |
+      <p>Add the given number to the value currently stored at the given key.
+      The sum then replaces the value previously stored in the Dictionary.</p>
+    path: p5.NumberDict/add
+  sub:
+    description: >
+      <p>Subtract the given number from the value currently stored at the given
+      key.
+
+      The difference then replaces the value previously stored in the
+      Dictionary.</p>
+    path: p5.NumberDict/sub
+  mult:
+    description: >
+      <p>Multiply the given number with the value currently stored at the given
+      key.
+
+      The product then replaces the value previously stored in the
+      Dictionary.</p>
+    path: p5.NumberDict/mult
+  div:
+    description: >
+      <p>Divide the given number with the value currently stored at the given
+      key.
+
+      The quotient then replaces the value previously stored in the
+      Dictionary.</p>
+    path: p5.NumberDict/div
+  minValue:
+    description: |
+      <p>Return the lowest number currently stored in the Dictionary.</p>
+    path: p5.NumberDict/minValue
+  maxValue:
+    description: |
+      <p>Return the highest number currently stored in the Dictionary.</p>
+    path: p5.NumberDict/maxValue
+  minKey:
+    description: |
+      <p>Return the lowest key currently used in the Dictionary.</p>
+    path: p5.NumberDict/minKey
+  maxKey:
+    description: |
+      <p>Return the highest key currently used in the Dictionary.</p>
+    path: p5.NumberDict/maxKey
+chainable: false
+---
+
+
+# p5.NumberDict
diff --git a/src/content/reference/en/p5 copy/p5.PrintWriter.mdx b/src/content/reference/en/p5 copy/p5.PrintWriter.mdx
new file mode 100644
index 0000000000..7662b4f910
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.PrintWriter.mdx	
@@ -0,0 +1,35 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1565
+title: p5.PrintWriter
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>A class to describe a print stream.</p>
+
+  <p>Each <code>p5.PrintWriter</code> object provides a way to save a sequence
+  of text
+
+  data, called the <em>print stream</em>, to the user's computer. It's a
+  low-level
+
+  object that enables precise control of text output. Functions such as
+
+  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
+
+  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
+  file
+
+  saving.</p>
+
+  <p>Note: <a href="/reference/p5/createWriter/">createWriter()</a> is the
+  recommended way
+
+  to make an instance of this class.</p>
+line: 1565
+---
+
+
+# p5.PrintWriter
diff --git a/src/content/reference/en/p5 copy/p5.Renderer.mdx b/src/content/reference/en/p5 copy/p5.Renderer.mdx
new file mode 100644
index 0000000000..5fa9dd1cd1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Renderer.mdx	
@@ -0,0 +1,34 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Renderer.js#L10
+title: p5.Renderer
+module: Rendering
+submodule: Rendering
+file: src/core/p5.Renderer.js
+description: |
+  <p>Main graphics and rendering context, as well as the base API
+  implementation for p5.js "core". To be used as the superclass for
+  Renderer2D and Renderer3D classes, respectively.</p>
+line: 10
+isConstructor: true
+params:
+  - name: elt
+    description: |
+      <p>DOM node that is wrapped</p>
+    type: HTMLElement
+  - name: pInst
+    description: |
+      <p>pointer to p5 instance</p>
+    type: P5
+    optional: true
+  - name: isMainCanvas
+    description: |
+      <p>whether we're using it as main canvas</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# p5.Renderer
diff --git a/src/content/reference/en/p5 copy/p5.Shader.mdx b/src/content/reference/en/p5 copy/p5.Shader.mdx
new file mode 100644
index 0000000000..1730091ac1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Shader.mdx	
@@ -0,0 +1,433 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Shader.js#L11
+title: p5.Shader
+module: 3D
+submodule: Material
+file: src/webgl/p5.Shader.js
+description: >
+  <p>A class to describe a shader program.</p>
+
+  <p>Each <code>p5.Shader</code> object contains a shader program that runs on
+  the graphics
+
+  processing unit (GPU). Shaders can process many pixels or vertices at the
+
+  same time, making them fast for many graphics tasks. They’re written in a
+
+  language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.</p>
+
+  <p>A shader program consists of two files, a vertex shader and a fragment
+
+  shader. The vertex shader affects where 3D geometry is drawn on the screen
+
+  and the fragment shader affects color. Once the <code>p5.Shader</code> object
+  is
+
+  created, it can be used with the <a href="/reference/p5/shader/">shader()</a>
+
+  function, as in <code>shader(myShader)</code>.</p>
+
+  <p>A shader can optionally describe <em>hooks,</em> which are functions in
+  GLSL that
+
+  users may choose to provide to customize the behavior of the shader. For the
+
+  vertex or the fragment shader, users can pass in an object where each key is
+
+  the type and name of a hook function, and each value is a string with the
+
+  parameter list and default implementation of the hook. For example, to let
+  users
+
+  optionally run code at the start of the vertex shader, the options object
+  could
+
+  include:</p>
+
+  <pre><code class="language-js">{
+    vertex: {
+      'void beforeVertex': '() {}'
+    }
+  }
+
+  </code></pre>
+
+  <p>Then, in your vertex shader source, you can run a hook by calling a
+  function
+
+  with the same name prefixed by <code>HOOK_</code>:</p>
+
+  <pre><code class="language-glsl">void main() {
+    HOOK_beforeVertex();
+    // Add the rest of your shader code here!
+  }
+
+  </code></pre>
+
+  <p>Note: <a href="/reference/p5/createShader/">createShader()</a>,
+
+  <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, and
+
+  <a href="/reference/p5/loadShader/">loadShader()</a> are the recommended ways
+  to
+
+  create an instance of this class.</p>
+line: 11
+isConstructor: true
+params:
+  - name: renderer
+    description: |
+      <p>WebGL context for this shader.</p>
+    type: p5.RendererGL
+  - name: vertSrc
+    description: |
+      <p>source code for the vertex shader program.</p>
+    type: String
+  - name: fragSrc
+    description: |
+      <p>source code for the fragment shader program.</p>
+    type: String
+  - name: options
+    description: >
+      <p>An optional object describing how this shader can
+
+      be augmented with hooks. It can include:</p>
+
+      <ul>
+
+      <li><code>vertex</code>: An object describing the available vertex shader
+      hooks.</li>
+
+      <li><code>fragment</code>: An object describing the available frament
+      shader hooks.</li>
+
+      </ul>
+    type: Object
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+
+    void main() {
+      // Set each pixel's RGBA value to yellow.
+      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let myShader = createShader(vertSrc, fragSrc);
+
+      // Apply the p5.Shader object.
+      shader(myShader);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A yellow square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates between 0 and 2.
+      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+    </code>
+    </div>
+methods:
+  inspectHooks:
+    description: >
+      <p>Logs the hooks available in this shader, and their current
+      implementation.</p>
+
+      <p>Each shader may let you override bits of its behavior. Each bit is
+      called
+
+      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
+      affects the
+
+      position of vertices, or in the <em>fragment</em> shader, if it affects
+      the pixel
+
+      color. This method logs those values to the console, letting you know what
+
+      you are able to use in a call to
+
+      <a href="/reference/p5.Shader/modify/"><code>modify()</code></a>.</p>
+
+      <p>For example, this shader will produce the following output:</p>
+
+      <pre><code class="language-js">myShader = baseMaterialShader().modify({
+        declarations: 'uniform float time;',
+        'vec3 getWorldPosition': `(vec3 pos) {
+          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+          return pos;
+        }`
+      });
+
+      myShader.inspectHooks();
+
+      </code></pre>
+
+      <pre><code>==== Vertex shader hooks: ====
+
+      void beforeVertex() {}
+
+      vec3 getLocalPosition(vec3 position) { return position; }
+
+      [MODIFIED] vec3 getWorldPosition(vec3 pos) {
+            pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
+            return pos;
+          }
+      vec3 getLocalNormal(vec3 normal) { return normal; }
+
+      vec3 getWorldNormal(vec3 normal) { return normal; }
+
+      vec2 getUV(vec2 uv) { return uv; }
+
+      vec4 getVertexColor(vec4 color) { return color; }
+
+      void afterVertex() {}
+
+
+      ==== Fragment shader hooks: ====
+
+      void beforeFragment() {}
+
+      Inputs getPixelInputs(Inputs inputs) { return inputs; }
+
+      vec4 combineColors(ColorComponents components) {
+                      vec4 color = vec4(0.);
+                      color.rgb += components.diffuse * components.baseColor;
+                      color.rgb += components.ambient * components.ambientColor;
+                      color.rgb += components.specular * components.specularColor;
+                      color.rgb += components.emissive;
+                      color.a = components.opacity;
+                      return color;
+                    }
+      vec4 getFinalColor(vec4 color) { return color; }
+
+      void afterFragment() {}
+
+      </code></pre>
+    path: p5.Shader/inspectHooks
+  modify:
+    description: >
+      <p>Returns a new shader, based on the original, but with custom snippets
+
+      of shader code replacing default behaviour.</p>
+
+      <p>Each shader may let you override bits of its behavior. Each bit is
+      called
+
+      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
+      affects the
+
+      position of vertices, or in the <em>fragment</em> shader, if it affects
+      the pixel
+
+      color. You can inspect the different hooks available by calling
+
+      <a
+      href="/reference/p5.Shader/inspectHooks/"><code>yourShader.inspectHooks()</code></a>.
+      You can
+
+      also read the reference for the default material, normal material, color,
+      line, and point shaders to
+
+      see what hooks they have available.</p>
+
+      <p><code>modify()</code> takes one parameter, <code>hooks</code>, an
+      object with the hooks you want
+
+      to override. Each key of the <code>hooks</code> object is the name
+
+      of a hook, and the value is a string with the GLSL code for your hook.</p>
+
+      <p>If you supply functions that aren't existing hooks, they will get added
+      at the start of
+
+      the shader as helper functions so that you can use them in your hooks.</p>
+
+      <p>To add new <a href="/reference/p5.Shader/setUniform/">uniforms</a> to
+      your shader, you can pass in a <code>uniforms</code> object containing
+
+      the type and name of the uniform as the key, and a default value or
+      function returning
+
+      a default value as its value. These will be automatically set when the
+      shader is set
+
+      with <code>shader(yourShader)</code>.</p>
+
+      <p>You can also add a <code>declarations</code> key, where the value is a
+      GLSL string declaring
+
+      custom uniform variables, globals, and functions shared
+
+      between hooks. To add declarations just in a vertex or fragment shader,
+      add
+
+      <code>vertexDeclarations</code> and <code>fragmentDeclarations</code>
+      keys.</p>
+    path: p5.Shader/modify
+  copyToContext:
+    description: >
+      <p>Copies the shader from one drawing context to another.</p>
+
+      <p>Each <code>p5.Shader</code> object must be compiled by calling
+
+      <a href="/reference/p5/shader/">shader()</a> before it can run.
+      Compilation happens
+
+      in a drawing context which is usually the main canvas or an instance of
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>. A shader can only be
+      used in the
+
+      context where it was compiled. The <code>copyToContext()</code> method
+      compiles the
+
+      shader again and copies it to another drawing context where it can be
+
+      reused.</p>
+
+      <p>The parameter, <code>context</code>, is the drawing context where the
+      shader will be
+
+      used. The shader can be copied to an instance of
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>, as in
+
+      <code>myShader.copyToContext(pg)</code>. The shader can also be copied
+      from a
+
+      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object to the main
+      canvas using
+
+      the <code>window</code> variable, as in
+      <code>myShader.copyToContext(window)</code>.</p>
+
+      <p>Note: A <a href="/reference/p5/p5.Shader">p5.Shader</a> object created
+      with
+
+      <a href="/reference/p5/createShader/">createShader()</a>,
+
+      <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, or
+
+      <a href="/reference/p5/loadShader/">loadShader()</a>
+
+      can be used directly with a <a
+      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
+
+      object created with
+
+      <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a>. Both
+      objects
+
+      have the same context as the main canvas.</p>
+    path: p5.Shader/copyToContext
+  setUniform:
+    description: >
+      <p>Sets the shader’s uniform (global) variables.</p>
+
+      <p>Shader programs run on the computer’s graphics processing unit (GPU).
+
+      They live in part of the computer’s memory that’s completely separate
+
+      from the sketch that runs them. Uniforms are global variables within a
+
+      shader program. They provide a way to pass values from a sketch running
+
+      on the CPU to a shader program running on the GPU.</p>
+
+      <p>The first parameter, <code>uniformName</code>, is a string with the
+      uniform’s name.
+
+      For the shader above, <code>uniformName</code> would be
+      <code>'r'</code>.</p>
+
+      <p>The second parameter, <code>data</code>, is the value that should be
+      used to set the
+
+      uniform. For example, calling <code>myShader.setUniform('r', 0.5)</code>
+      would set
+
+      the <code>r</code> uniform in the shader above to <code>0.5</code>. data
+      should match the
+
+      uniform’s type. Numbers, strings, booleans, arrays, and many types of
+
+      images can all be passed to a shader with <code>setUniform()</code>.</p>
+    path: p5.Shader/setUniform
+chainable: false
+---
+
+
+# p5.Shader
diff --git a/src/content/reference/en/p5 copy/p5.StringDict.mdx b/src/content/reference/en/p5 copy/p5.StringDict.mdx
new file mode 100644
index 0000000000..5ca466e5d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.StringDict.mdx	
@@ -0,0 +1,15 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L397
+title: p5.StringDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>A simple Dictionary class for Strings.</p>
+line: 397
+---
+
+
+# p5.StringDict
diff --git a/src/content/reference/en/p5 copy/p5.Table.mdx b/src/content/reference/en/p5 copy/p5.Table.mdx
new file mode 100644
index 0000000000..41ad72b0d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Table.mdx	
@@ -0,0 +1,213 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.Table.js#L33
+title: p5.Table
+module: IO
+submodule: Table
+file: src/io/p5.Table.js
+description: >
+  <p><a href="/reference/p5/p5.Table">Table</a> objects store data with multiple
+  rows and columns, much
+
+  like in a traditional spreadsheet. Tables can be generated from
+
+  scratch, dynamically, or using data from an existing file.</p>
+line: 33
+isConstructor: true
+params:
+  - name: rows
+    description: |
+      <p>An array of p5.TableRow objects</p>
+    type: 'p5.TableRow[]'
+    optional: true
+methods:
+  addRow:
+    description: >
+      <p>Use <a href="/reference/p5/addRow/">addRow()</a> to add a new row of
+      data to a <a href="/reference/p5/p5.Table">p5.Table</a> object. By
+      default,
+
+      an empty row is created. Typically, you would store a reference to
+
+      the new row in a TableRow object (see newRow in the example above),
+
+      and then set individual values using <a
+      href="/reference/p5/set/">set()</a>.</p>
+
+      <p>If a <a href="/reference/p5/p5.TableRow">p5.TableRow</a> object is
+      included as a parameter, then that row is
+
+      duplicated and added to the table.</p>
+    path: p5.Table/addRow
+  removeRow:
+    description: |
+      <p>Removes a row from the table object.</p>
+    path: p5.Table/removeRow
+  getRow:
+    description: >
+      <p>Returns a reference to the specified <a
+      href="/reference/p5/p5.TableRow">p5.TableRow</a>. The reference
+
+      can then be used to get and set values of the selected row.</p>
+    path: p5.Table/getRow
+  getRows:
+    description: >
+      <p>Gets all rows from the table. Returns an array of <a
+      href="/reference/p5/p5.TableRow">p5.TableRow</a>s.</p>
+    path: p5.Table/getRows
+  findRow:
+    description: |
+      <p>Finds the first row in the Table that contains the value
+      provided, and returns a reference to that row. Even if
+      multiple rows are possible matches, only the first matching
+      row is returned. The column to search may be specified by
+      either its ID or title.</p>
+    path: p5.Table/findRow
+  findRows:
+    description: |
+      <p>Finds the rows in the Table that contain the value
+      provided, and returns references to those rows. Returns an
+      Array, so for must be used to iterate through all the rows,
+      as shown in the example above. The column to search may be
+      specified by either its ID or title.</p>
+    path: p5.Table/findRows
+  matchRow:
+    description: |
+      <p>Finds the first row in the Table that matches the regular
+      expression provided, and returns a reference to that row.
+      Even if multiple rows are possible matches, only the first
+      matching row is returned. The column to search may be
+      specified by either its ID or title.</p>
+    path: p5.Table/matchRow
+  matchRows:
+    description: |
+      <p>Finds the rows in the Table that match the regular expression provided,
+      and returns references to those rows. Returns an array, so for must be
+      used to iterate through all the rows, as shown in the example. The
+      column to search may be specified by either its ID or title.</p>
+    path: p5.Table/matchRows
+  getColumn:
+    description: |
+      <p>Retrieves all values in the specified column, and returns them
+      as an array. The column may be specified by either its ID or title.</p>
+    path: p5.Table/getColumn
+  clearRows:
+    description: |
+      <p>Removes all rows from a Table. While all rows are removed,
+      columns and column titles are maintained.</p>
+    path: p5.Table/clearRows
+  addColumn:
+    description: >
+      <p>Use <a href="/reference/p5/addColumn/">addColumn()</a> to add a new
+      column to a <a href="/reference/p5/p5.Table">Table</a> object.
+
+      Typically, you will want to specify a title, so the column
+
+      may be easily referenced later by name. (If no title is
+
+      specified, the new column's title will be null.)</p>
+    path: p5.Table/addColumn
+  getColumnCount:
+    description: |
+      <p>Returns the total number of columns in a Table.</p>
+    path: p5.Table/getColumnCount
+  getRowCount:
+    description: |
+      <p>Returns the total number of rows in a Table.</p>
+    path: p5.Table/getRowCount
+  removeTokens:
+    description: |
+      <p>Removes any of the specified characters (or "tokens").</p>
+      <p>If no column is specified, then the values in all columns and
+      rows are processed. A specific column may be referenced by
+      either its ID or title.</p>
+    path: p5.Table/removeTokens
+  trim:
+    description: |
+      <p>Trims leading and trailing whitespace, such as spaces and tabs,
+      from String table values. If no column is specified, then the
+      values in all columns and rows are trimmed. A specific column
+      may be referenced by either its ID or title.</p>
+    path: p5.Table/trim
+  removeColumn:
+    description: >
+      <p>Use <a href="/reference/p5/removeColumn/">removeColumn()</a> to remove
+      an existing column from a Table
+
+      object. The column to be removed may be identified by either
+
+      its title (a String) or its index value (an int).
+
+      removeColumn(0) would remove the first column, removeColumn(1)
+
+      would remove the second column, and so on.</p>
+    path: p5.Table/removeColumn
+  set:
+    description: |
+      <p>Stores a value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: p5.Table/set
+  setNum:
+    description: |
+      <p>Stores a Float value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: p5.Table/setNum
+  setString:
+    description: |
+      <p>Stores a String value in the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified
+      by either its ID or title.</p>
+    path: p5.Table/setString
+  get:
+    description: |
+      <p>Retrieves a value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: p5.Table/get
+  getNum:
+    description: |
+      <p>Retrieves a Float value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: p5.Table/getNum
+  getString:
+    description: |
+      <p>Retrieves a String value from the Table's specified row and column.
+      The row is specified by its ID, while the column may be specified by
+      either its ID or title.</p>
+    path: p5.Table/getString
+  getObject:
+    description: |
+      <p>Retrieves all table data and returns as an object. If a column name is
+      passed in, each row object will be stored with that attribute as its
+      title.</p>
+    path: p5.Table/getObject
+  getArray:
+    description: >
+      <p>Retrieves all table data and returns it as a multidimensional
+      array.</p>
+    path: p5.Table/getArray
+properties:
+  columns:
+    description: >
+      <p>An array containing the names of the columns in the table, if the
+      "header" the table is
+
+      loaded with the "header" parameter.</p>
+    path: p5.Table/columns
+  rows:
+    description: >
+      <p>An array containing the <a
+      href="/reference/p5/p5.Table">p5.TableRow</a> objects that make up the
+
+      rows of the table. The same result as calling <a
+      href="/reference/p5/getRows/">getRows()</a></p>
+    path: p5.Table/rows
+chainable: false
+---
+
+
+# p5.Table
diff --git a/src/content/reference/en/p5 copy/p5.TableRow.mdx b/src/content/reference/en/p5 copy/p5.TableRow.mdx
new file mode 100644
index 0000000000..00081f9654
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.TableRow.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.TableRow.js#L9
+title: p5.TableRow
+module: IO
+submodule: Table
+file: src/io/p5.TableRow.js
+description: |
+  <p>A TableRow object represents a single row of data values,
+  stored in columns, from a table.</p>
+  <p>A Table Row contains both an ordered array, and an unordered
+  JSON object.</p>
+line: 9
+isConstructor: true
+params:
+  - name: str
+    description: |
+      <p>optional: populate the row with a
+                                  string of values, separated by the
+                                  separator</p>
+    type: String
+    optional: true
+  - name: separator
+    description: |
+      <p>comma separated values (csv) by default</p>
+    type: String
+    optional: true
+methods:
+  set:
+    description: |
+      <p>Stores a value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/set
+  setNum:
+    description: |
+      <p>Stores a Float value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/setNum
+  setString:
+    description: |
+      <p>Stores a String value in the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/setString
+  get:
+    description: |
+      <p>Retrieves a value from the TableRow's specified column.
+      The column may be specified by either its ID or title.</p>
+    path: p5.TableRow/get
+  getNum:
+    description: |
+      <p>Retrieves a Float value from the TableRow's specified
+      column. The column may be specified by either its ID or
+      title.</p>
+    path: p5.TableRow/getNum
+  getString:
+    description: |
+      <p>Retrieves an String value from the TableRow's specified
+      column. The column may be specified by either its ID or
+      title.</p>
+    path: p5.TableRow/getString
+chainable: false
+---
+
+
+# p5.TableRow
diff --git a/src/content/reference/en/p5 copy/p5.TypedDict.mdx b/src/content/reference/en/p5 copy/p5.TypedDict.mdx
new file mode 100644
index 0000000000..2bcb7b5752
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.TypedDict.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L82
+title: p5.TypedDict
+module: Data
+submodule: Dictionary
+file: src/data/p5.TypedDict.js
+description: |
+  <p>Base class for all p5.Dictionary types. Specifically
+   typed Dictionary classes inherit from this class.</p>
+line: 82
+isConstructor: true
+methods:
+  size:
+    description: >
+      <p>Returns the number of key-value pairs currently stored in the
+      Dictionary.</p>
+    path: p5.TypedDict/size
+  hasKey:
+    description: |
+      <p>Returns true if the given key exists in the Dictionary,
+      otherwise returns false.</p>
+    path: p5.TypedDict/hasKey
+  get:
+    description: |
+      <p>Returns the value stored at the given key.</p>
+    path: p5.TypedDict/get
+  set:
+    description: >
+      <p>Updates the value associated with the given key in case it already
+      exists
+
+      in the Dictionary. Otherwise a new key-value pair is added.</p>
+    path: p5.TypedDict/set
+  create:
+    description: |
+      <p>Creates a new key-value pair in the Dictionary.</p>
+    path: p5.TypedDict/create
+  clear:
+    description: |
+      <p>Removes all previously stored key-value pairs from the Dictionary.</p>
+    path: p5.TypedDict/clear
+  remove:
+    description: >
+      <p>Removes the key-value pair stored at the given key from the
+      Dictionary.</p>
+    path: p5.TypedDict/remove
+  print:
+    description: >
+      <p>Logs the set of items currently stored in the Dictionary to the
+      console.</p>
+    path: p5.TypedDict/print
+  saveTable:
+    description: |
+      <p>Converts the Dictionary into a CSV file for local download.</p>
+    path: p5.TypedDict/saveTable
+  saveJSON:
+    description: |
+      <p>Converts the Dictionary into a JSON file for local download.</p>
+    path: p5.TypedDict/saveJSON
+chainable: false
+---
+
+
+# p5.TypedDict
diff --git a/src/content/reference/en/p5 copy/p5.Vector.mdx b/src/content/reference/en/p5 copy/p5.Vector.mdx
new file mode 100644
index 0000000000..ff67d7562c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.Vector.mdx	
@@ -0,0 +1,673 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/p5.Vector.js#L11
+title: p5.Vector
+module: Math
+submodule: Vector
+file: src/math/p5.Vector.js
+description: >
+  <p>A class to describe a two or three-dimensional vector.</p>
+
+  <p>A vector can be thought of in different ways. In one view, a vector is like
+
+  an arrow pointing in space. Vectors have both magnitude (length) and
+
+  direction.</p>
+
+  <p><code>p5.Vector</code> objects are often used to program motion because
+  they simplify
+
+  the math. For example, a moving ball has a position and a velocity.
+
+  Position describes where the ball is in space. The ball's position vector
+
+  extends from the origin to the ball's center. Velocity describes the ball's
+
+  speed and the direction it's moving. If the ball is moving straight up, its
+
+  velocity vector points straight up. Adding the ball's velocity vector to
+
+  its position vector moves it, as in <code>pos.add(vel)</code>. Vector math
+  relies on
+
+  methods inside the <code>p5.Vector</code> class.</p>
+
+  <p>Note: <a href="/reference/p5/createVector/">createVector()</a> is the
+  recommended way
+
+  to make an instance of this class.</p>
+line: 11
+isConstructor: true
+params:
+  - name: x
+    description: |
+      <p>x component of the vector.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y component of the vector.</p>
+    type: Number
+    optional: true
+  - name: z
+    description: |
+      <p>z component of the vector.</p>
+    type: Number
+    optional: true
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create p5.Vector objects.
+      let p1 = createVector(25, 25);
+      let p2 = createVector(75, 75);
+
+      // Style the points.
+      strokeWeight(5);
+
+      // Draw the first point using a p5.Vector.
+      point(p1);
+
+      // Draw the second point using a p5.Vector's components.
+      point(p2.x, p2.y);
+
+      describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pos;
+    let vel;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create p5.Vector objects.
+      pos = createVector(50, 100);
+      vel = createVector(0, -1);
+
+      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Add velocity to position.
+      pos.add(vel);
+
+      // If the dot reaches the top of the canvas,
+      // restart from the bottom.
+      if (pos.y < 0) {
+        pos.y = 100;
+      }
+
+      // Draw the dot.
+      strokeWeight(5);
+      point(pos);
+    }
+    </code>
+    </div>
+methods:
+  toString:
+    description: >
+      <p>Returns a string representation of a vector.</p>
+
+      <p>Calling <code>toString()</code> is useful for printing vectors to the
+      console while
+
+      debugging.</p>
+    path: p5.Vector/toString
+  set:
+    description: >
+      <p>Sets the vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components.</p>
+
+      <p><code>set()</code> can use separate numbers, as in <code>v.set(1, 2,
+      3)</code>, a
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.set(v2)</code>, or an
+
+      array of numbers, as in <code>v.set([1, 2, 3])</code>.</p>
+
+      <p>If a value isn't provided for a component, it will be set to 0. For
+
+      example, <code>v.set(4, 5)</code> sets <code>v.x</code> to 4,
+      <code>v.y</code> to 5, and <code>v.z</code> to 0.
+
+      Calling <code>set()</code> with no arguments, as in <code>v.set()</code>,
+      sets all the vector's
+
+      components to 0.</p>
+    path: p5.Vector/set
+  copy:
+    description: >
+      <p>Returns a copy of the <a href="/reference/p5/p5.Vector">p5.Vector</a>
+      object.</p>
+    path: p5.Vector/copy
+  add:
+    description: >
+      <p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components.</p>
+
+      <p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2,
+      3)</code>,
+
+      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.add(v2)</code>, or
+
+      an array of numbers, as in <code>v.add([1, 2, 3])</code>.</p>
+
+      <p>If a value isn't provided for a component, it won't change. For
+
+      example, <code>v.add(4, 5)</code> adds 4 to <code>v.x</code>, 5 to
+      <code>v.y</code>, and 0 to <code>v.z</code>.
+
+      Calling <code>add()</code> with no arguments, as in <code>v.add()</code>,
+      has no effect.</p>
+
+      <p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
+      v1)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/add
+  rem:
+    description: >
+      <p>Performs modulo (remainder) division with a vector's <code>x</code>,
+      <code>y</code>, and <code>z</code>
+
+      components.</p>
+
+      <p><code>rem()</code> can use separate numbers, as in <code>v.rem(1, 2,
+      3)</code>,
+
+      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.rem(v2)</code>, or
+
+      an array of numbers, as in <code>v.rem([1, 2, 3])</code>.</p>
+
+      <p>If only one value is provided, as in <code>v.rem(2)</code>, then all
+      the components
+
+      will be set to their values modulo 2. If two values are provided, as in
+
+      <code>v.rem(2, 3)</code>, then <code>v.z</code> won't change. Calling
+      <code>rem()</code> with no
+
+      arguments, as in <code>v.rem()</code>, has no effect.</p>
+
+      <p>The static version of <code>rem()</code>, as in <code>p5.Vector.rem(v2,
+      v1)</code>, returns a
+
+      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
+      change the
+
+      originals.</p>
+    path: p5.Vector/rem
+  sub:
+    description: >
+      <p>Subtracts from a vector's <code>x</code>, <code>y</code>, and
+      <code>z</code> components.</p>
+
+      <p><code>sub()</code> can use separate numbers, as in <code>v.sub(1, 2,
+      3)</code>, another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.sub(v2)</code>, or an array
+
+      of numbers, as in <code>v.sub([1, 2, 3])</code>.</p>
+
+      <p>If a value isn't provided for a component, it won't change. For
+
+      example, <code>v.sub(4, 5)</code> subtracts 4 from <code>v.x</code>, 5
+      from <code>v.y</code>, and 0 from <code>v.z</code>.
+
+      Calling <code>sub()</code> with no arguments, as in <code>v.sub()</code>,
+      has no effect.</p>
+
+      <p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2,
+      v1)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/sub
+  mult:
+    description: >
+      <p>Multiplies a vector's <code>x</code>, <code>y</code>, and
+      <code>z</code> components.</p>
+
+      <p><code>mult()</code> can use separate numbers, as in <code>v.mult(1, 2,
+      3)</code>, another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.mult(v2)</code>, or an array
+
+      of numbers, as in <code>v.mult([1, 2, 3])</code>.</p>
+
+      <p>If only one value is provided, as in <code>v.mult(2)</code>, then all
+      the components
+
+      will be multiplied by 2. If a value isn't provided for a component, it
+
+      won't change. For example, <code>v.mult(4, 5)</code> multiplies
+      <code>v.x</code> by 4, <code>v.y</code> by 5,
+
+      and <code>v.z</code> by 1. Calling <code>mult()</code> with no arguments,
+      as in <code>v.mult()</code>, has
+
+      no effect.</p>
+
+      <p>The static version of <code>mult()</code>, as in
+      <code>p5.Vector.mult(v, 2)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/mult
+  div:
+    description: >
+      <p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code>
+      components.</p>
+
+      <p><code>div()</code> can use separate numbers, as in <code>v.div(1, 2,
+      3)</code>, another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
+      <code>v.div(v2)</code>, or an array
+
+      of numbers, as in <code>v.div([1, 2, 3])</code>.</p>
+
+      <p>If only one value is provided, as in <code>v.div(2)</code>, then all
+      the components
+
+      will be divided by 2. If a value isn't provided for a component, it
+
+      won't change. For example, <code>v.div(4, 5)</code> divides
+      <code>v.x</code> by, <code>v.y</code> by 5,
+
+      and <code>v.z</code> by 1. Calling <code>div()</code> with no arguments,
+      as in <code>v.div()</code>, has
+
+      no effect.</p>
+
+      <p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v,
+      2)</code>, returns a new
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
+      the
+
+      originals.</p>
+    path: p5.Vector/div
+  mag:
+    description: >
+      <p>Calculates the magnitude (length) of the vector.</p>
+
+      <p>Use <a href="/reference/p5/mag/">mag()</a> to calculate the magnitude
+      of a 2D vector
+
+      using components as in <code>mag(x, y)</code>.</p>
+    path: p5.Vector/mag
+  magSq:
+    description: |
+      <p>Calculates the magnitude (length) of the vector squared.</p>
+    path: p5.Vector/magSq
+  dot:
+    description: >
+      <p>Calculates the dot product of two vectors.</p>
+
+      <p>The dot product is a number that describes the overlap between two
+      vectors.
+
+      Visually, the dot product can be thought of as the "shadow" one vector
+
+      casts on another. The dot product's magnitude is largest when two vectors
+
+      point in the same or opposite directions. Its magnitude is 0 when two
+
+      vectors form a right angle.</p>
+
+      <p>The version of <code>dot()</code> with one parameter interprets it as
+      another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+
+      <p>The version of <code>dot()</code> with multiple parameters interprets
+      them as the
+
+      <code>x</code>, <code>y</code>, and <code>z</code> components of another
+      vector.</p>
+
+      <p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1,
+      v2)</code>, is the same
+
+      as calling <code>v1.dot(v2)</code>.</p>
+    path: p5.Vector/dot
+  cross:
+    description: >
+      <p>Calculates the cross product of two vectors.</p>
+
+      <p>The cross product is a vector that points straight out of the plane
+      created
+
+      by two vectors. The cross product's magnitude is the area of the
+      parallelogram
+
+      formed by the original two vectors.</p>
+
+      <p>The static version of <code>cross()</code>, as in
+      <code>p5.Vector.cross(v1, v2)</code>, is the same
+
+      as calling <code>v1.cross(v2)</code>.</p>
+    path: p5.Vector/cross
+  dist:
+    description: >
+      <p>Calculates the distance between two points represented by vectors.</p>
+
+      <p>A point's coordinates can be represented by the components of a vector
+
+      that extends from the origin to the point.</p>
+
+      <p>The static version of <code>dist()</code>, as in
+      <code>p5.Vector.dist(v1, v2)</code>, is the same
+
+      as calling <code>v1.dist(v2)</code>.</p>
+
+      <p>Use <a href="/reference/p5/dist/">dist()</a> to calculate the distance
+      between points
+
+      using coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>
+    path: p5.Vector/dist
+  normalize:
+    description: >
+      <p>Scales the components of a <a
+      href="/reference/p5/p5.Vector">p5.Vector</a> object so
+
+      that its magnitude is 1.</p>
+
+      <p>The static version of <code>normalize()</code>,  as in
+      <code>p5.Vector.normalize(v)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/normalize
+  limit:
+    description: >
+      <p>Limits a vector's magnitude to a maximum value.</p>
+
+      <p>The static version of <code>limit()</code>, as in
+      <code>p5.Vector.limit(v, 5)</code>, returns a
+
+      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
+      change the
+
+      original.</p>
+    path: p5.Vector/limit
+  setMag:
+    description: >
+      <p>Sets a vector's magnitude to a given value.</p>
+
+      <p>The static version of <code>setMag()</code>, as in
+      <code>p5.Vector.setMag(v, 10)</code>, returns
+
+      a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
+      change the
+
+      original.</p>
+    path: p5.Vector/setMag
+  heading:
+    description: >
+      <p>Calculates the angle a 2D vector makes with the positive x-axis.</p>
+
+      <p>By convention, the positive x-axis has an angle of 0. Angles increase
+      in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>heading()</code> returns angles
+
+      in the units of the current <a
+      href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+      <p>The static version of <code>heading()</code>, as in
+      <code>p5.Vector.heading(v)</code>, works the
+
+      same way.</p>
+    path: p5.Vector/heading
+  setHeading:
+    description: >
+      <p>Rotates a 2D vector to a specific angle without changing its
+      magnitude.</p>
+
+      <p>By convention, the positive x-axis has an angle of 0. Angles increase
+      in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>setHeading()</code> uses
+
+      the units of the current <a
+      href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Vector/setHeading
+  rotate:
+    description: >
+      <p>Rotates a 2D vector by an angle without changing its magnitude.</p>
+
+      <p>By convention, the positive x-axis has an angle of 0. Angles increase
+      in
+
+      the clockwise direction.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>rotate()</code> uses
+
+      the units of the current <a
+      href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+      <p>The static version of <code>rotate()</code>, as in
+      <code>p5.Vector.rotate(v, PI)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/rotate
+  angleBetween:
+    description: >
+      <p>Calculates the angle between two vectors.</p>
+
+      <p>The angles returned are signed, which means that
+
+      <code>v1.angleBetween(v2) === -v2.angleBetween(v1)</code>.</p>
+
+      <p>If the vector was created with
+
+      <a href="/reference/p5/createVector/">createVector()</a>,
+      <code>angleBetween()</code> returns
+
+      angles in the units of the current
+
+      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+    path: p5.Vector/angleBetween
+  lerp:
+    description: >
+      <p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code>
+      components that are proportionally the
+
+      same distance between two vectors.</p>
+
+      <p>The <code>amt</code> parameter is the amount to interpolate between the
+      old vector and
+
+      the new vector. 0.0 keeps all components equal to the old vector's, 0.5 is
+
+      halfway between, and 1.0 sets all components equal to the new
+      vector's.</p>
+
+      <p>The static version of <code>lerp()</code>, as in
+      <code>p5.Vector.lerp(v0, v1, 0.5)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/lerp
+  slerp:
+    description: >
+      <p>Calculates a new heading and magnitude that are between two
+      vectors.</p>
+
+      <p>The <code>amt</code> parameter is the amount to interpolate between the
+      old vector and
+
+      the new vector. 0.0 keeps the heading and magnitude equal to the old
+
+      vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
+
+      magnitude equal to the new vector's.</p>
+
+      <p><code>slerp()</code> differs from <a
+      href="/reference/p5.Vector/lerp/">lerp()</a> because
+
+      it interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets
+      <code>v0</code>'s
+
+      magnitude to a value halfway between its original magnitude and
+      <code>v1</code>'s.
+
+      Calling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>
+
+      <p>The static version of <code>slerp()</code>, as in
+      <code>p5.Vector.slerp(v0, v1, 0.5)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/slerp
+  reflect:
+    description: >
+      <p>Reflects a vector about a line in 2D or a plane in 3D.</p>
+
+      <p>The orientation of the line or plane is described by a normal vector
+      that
+
+      points away from the shape.</p>
+
+      <p>The static version of <code>reflect()</code>, as in
+      <code>p5.Vector.reflect(v, n)</code>,
+
+      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
+      doesn't change
+
+      the original.</p>
+    path: p5.Vector/reflect
+  array:
+    description: |
+      <p>Returns the vector's components as an array of numbers.</p>
+    path: p5.Vector/array
+  equals:
+    description: >
+      <p>Checks whether all the vector's components are equal to another
+      vector's.</p>
+
+      <p><code>equals()</code> returns <code>true</code> if the vector's
+      components are all the same as another
+
+      vector's and <code>false</code> if not.</p>
+
+      <p>The version of <code>equals()</code> with one parameter interprets it
+      as another
+
+      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+
+      <p>The version of <code>equals()</code> with multiple parameters
+      interprets them as the
+
+      components of another vector. Any missing parameters are assigned the
+      value
+
+      0.</p>
+
+      <p>The static version of <code>equals()</code>, as in
+      <code>p5.Vector.equals(v0, v1)</code>,
+
+      interprets both parameters as <a
+      href="/reference/p5/p5.Vector">p5.Vector</a> objects.</p>
+    path: p5.Vector/equals
+  fromAngle:
+    description: |
+      <p>Creates a new 2D vector from an angle.</p>
+    path: p5.Vector/fromAngle
+  fromAngles:
+    description: |
+      <p>Creates a new 3D vector from a pair of ISO spherical angles.</p>
+    path: p5.Vector/fromAngles
+  random2D:
+    description: |
+      <p>Creates a new 2D unit vector with a random heading.</p>
+    path: p5.Vector/random2D
+  random3D:
+    description: |
+      <p>Creates a new 3D unit vector with a random heading.</p>
+    path: p5.Vector/random3D
+  clampToZero:
+    description: >
+      <p>Replaces the components of a <a
+      href="/reference/p5/p5.Vector">p5.Vector</a> that are very close to zero
+      with zero.</p>
+
+      <p>In computers, handling numbers with decimals can give slightly
+      imprecise answers due to the way those numbers are represented.
+
+      This can make it hard to check if a number is zero, as it may be close but
+      not exactly zero.
+
+      This method rounds very close numbers to zero to make those checks
+      easier</p>
+
+      <p><a
+      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON/">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON</a></p>
+    path: p5.Vector/clampToZero
+properties:
+  x:
+    description: |
+      <p>The x component of the vector</p>
+    path: p5.Vector/x
+  'y':
+    description: |
+      <p>The y component of the vector</p>
+    path: p5.Vector/y
+  z:
+    description: |
+      <p>The z component of the vector</p>
+    path: p5.Vector/z
+chainable: false
+---
+
+
+# p5.Vector
diff --git a/src/content/reference/en/p5 copy/p5.XML.mdx b/src/content/reference/en/p5 copy/p5.XML.mdx
new file mode 100644
index 0000000000..71904fded2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.XML.mdx	
@@ -0,0 +1,321 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.XML.js#L9
+title: p5.XML
+module: IO
+submodule: Input
+file: src/io/p5.XML.js
+description: >
+  <p>A class to describe an XML object.</p>
+
+  <p>Each <code>p5.XML</code> object provides an easy way to interact with XML
+  data.
+
+  Extensible Markup Language
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
+  target="_blank">XML</a>)
+
+  is a standard format for sending data between applications. Like HTML, the
+
+  XML format is based on tags and attributes, as in
+
+  <code><time units="s">1234</time></code>.</p>
+
+  <p>Note: Use <a href="/reference/p5/loadXML/">loadXML()</a> to load external
+  XML files.</p>
+line: 9
+isConstructor: true
+example:
+  - |-
+
+    <div>
+    <code>
+    let myXML;
+
+    // Load the XML and create a p5.XML object.
+    function preload() {
+      myXML = loadXML('/assets/animals.xml');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get an array with all mammal tags.
+      let mammals = myXML.getChildren('mammal');
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(14);
+
+      // Iterate over the mammals array.
+      for (let i = 0; i < mammals.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Get the mammal's common name.
+        let name = mammals[i].getContent();
+
+        // Display the mammal's name.
+        text(name, 20, y);
+      }
+
+      describe(
+        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+methods:
+  getParent:
+    description: >
+      <p>Returns the element's parent element as a new <a
+      href="/reference/p5/p5.XML">p5.XML</a>
+
+      object.</p>
+    path: p5.XML/getParent
+  getName:
+    description: >
+      <p>Returns the element's name as a <code>String</code>.</p>
+
+      <p>An XML element's name is given by its tag. For example, the element
+
+      <code><language>JavaScript</language></code> has the name
+      <code>language</code>.</p>
+    path: p5.XML/getName
+  setName:
+    description: >
+      <p>Sets the element's tag name.</p>
+
+      <p>An XML element's name is given by its tag. For example, the element
+
+      <code><language>JavaScript</language></code> has the name
+      <code>language</code>.</p>
+
+      <p>The parameter, <code>name</code>, is the element's new name as a
+      string. For example,
+
+      calling <code>myXML.setName('planet')</code> will make the element's new
+      tag name
+
+      <code><planet></planet></code>.</p>
+    path: p5.XML/setName
+  hasChildren:
+    description: >
+      <p>Returns <code>true</code> if the element has child elements and
+      <code>false</code> if not.</p>
+    path: p5.XML/hasChildren
+  listChildren:
+    description: |
+      <p>Returns an array with the names of the element's child elements as
+      <code>String</code>s.</p>
+    path: p5.XML/listChildren
+  getChildren:
+    description: >
+      <p>Returns an array with the element's child elements as new
+
+      <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
+
+      <p>The parameter, <code>name</code>, is optional. If a string is passed,
+      as in
+
+      <code>myXML.getChildren('cat')</code>, then the method will only return
+      child elements
+
+      with the tag <code><cat></code>.</p>
+    path: p5.XML/getChildren
+  getChild:
+    description: >
+      <p>Returns the first matching child element as a new
+
+      <a href="/reference/p5/p5.XML">p5.XML</a> object.</p>
+
+      <p>The parameter, <code>name</code>, is optional. If a string is passed,
+      as in
+
+      <code>myXML.getChild('cat')</code>, then the first child element with the
+      tag
+
+      <code><cat></code> will be returned. If a number is passed, as in
+
+      <code>myXML.getChild(1)</code>, then the child element at that index will
+      be returned.</p>
+    path: p5.XML/getChild
+  addChild:
+    description: >
+      <p>Adds a new child element and returns a reference to it.</p>
+
+      <p>The parameter, <code>child</code>, is the <a
+      href="/reference/p5/p5.XML">p5.XML</a> object to add
+
+      as a child element. For example, calling
+      <code>myXML.addChild(otherXML)</code> inserts
+
+      <code>otherXML</code> as a child element of <code>myXML</code>.</p>
+    path: p5.XML/addChild
+  removeChild:
+    description: >
+      <p>Removes the first matching child element.</p>
+
+      <p>The parameter, <code>name</code>, is the child element to remove. If a
+      string is
+
+      passed, as in <code>myXML.removeChild('cat')</code>, then the first child
+      element
+
+      with the tag <code><cat></code> will be removed. If a number is passed, as
+      in
+
+      <code>myXML.removeChild(1)</code>, then the child element at that index
+      will be
+
+      removed.</p>
+    path: p5.XML/removeChild
+  getAttributeCount:
+    description: |
+      <p>Returns the number of attributes the element has.</p>
+    path: p5.XML/getAttributeCount
+  listAttributes:
+    description: >
+      <p>Returns an <code>Array</code> with the names of the element's
+      attributes.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/listAttributes
+  hasAttribute:
+    description: >
+      <p>Returns <code>true</code> if the element has a given attribute and
+      <code>false</code> if not.</p>
+
+      <p>The parameter, <code>name</code>, is a string with the name of the
+      attribute being
+
+      checked.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/hasAttribute
+  getNum:
+    description: >
+      <p>Return an attribute's value as a <code>Number</code>.</p>
+
+      <p>The first parameter, <code>name</code>, is a string with the name of
+      the attribute
+
+      being checked. For example, calling <code>myXML.getNum('id')</code>
+      returns the
+
+      element's <code>id</code> attribute as a number.</p>
+
+      <p>The second parameter, <code>defaultValue</code>, is optional. If a
+      number is passed,
+
+      as in <code>myXML.getNum('id', -1)</code>, it will be returned if the
+      attribute
+
+      doesn't exist or can't be converted to a number.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/getNum
+  getString:
+    description: >
+      <p>Return an attribute's value as a string.</p>
+
+      <p>The first parameter, <code>name</code>, is a string with the name of
+      the attribute
+
+      being checked. For example, calling <code>myXML.getString('color')</code>
+      returns the
+
+      element's <code>id</code> attribute as a string.</p>
+
+      <p>The second parameter, <code>defaultValue</code>, is optional. If a
+      string is passed,
+
+      as in <code>myXML.getString('color', 'deeppink')</code>, it will be
+      returned if the
+
+      attribute doesn't exist.</p>
+
+      <p>Note: Use
+
+      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
+
+      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
+      attribute's value.</p>
+    path: p5.XML/getString
+  setAttribute:
+    description: >
+      <p>Sets an attribute to a given value.</p>
+
+      <p>The first parameter, <code>name</code>, is a string with the name of
+      the attribute
+
+      being set.</p>
+
+      <p>The second parameter, <code>value</code>, is the attribute's new value.
+      For example,
+
+      calling <code>myXML.setAttribute('id', 123)</code> sets the
+      <code>id</code> attribute to the
+
+      value 123.</p>
+    path: p5.XML/setAttribute
+  getContent:
+    description: >
+      <p>Returns the element's content as a <code>String</code>.</p>
+
+      <p>The parameter, <code>defaultValue</code>, is optional. If a string is
+      passed, as in
+
+      <code>myXML.getContent('???')</code>, it will be returned if the element
+      has no
+
+      content.</p>
+    path: p5.XML/getContent
+  setContent:
+    description: >
+      <p>Sets the element's content.</p>
+
+      <p>An element's content is the text between its tags. For example, the
+      element
+
+      <code><language>JavaScript</language></code> has the content
+      <code>JavaScript</code>.</p>
+
+      <p>The parameter, <code>content</code>, is a string with the element's new
+      content.</p>
+    path: p5.XML/setContent
+  serialize:
+    description: >
+      <p>Returns the element as a <code>String</code>.</p>
+
+      <p><code>myXML.serialize()</code> is useful for sending the element over
+      the network or
+
+      saving it to a file.</p>
+    path: p5.XML/serialize
+chainable: false
+---
+
+
+# p5.XML
diff --git a/src/content/reference/en/p5 copy/p5.mdx b/src/content/reference/en/p5 copy/p5.mdx
new file mode 100644
index 0000000000..c51b8f8bff
--- /dev/null
+++ b/src/content/reference/en/p5 copy/p5.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L12
+title: p5
+module: IO
+submodule: Output
+file: src/core/main.js
+description: >
+  <p>This is the p5 instance constructor.</p>
+
+  <p>A p5 instance holds all the properties and methods related to
+
+  a p5 sketch.  It expects an incoming sketch closure and it can also
+
+  take an optional node parameter for attaching the generated p5 canvas
+
+  to a node.  The sketch closure takes the newly created p5 instance as
+
+  its sole argument and may optionally set <a
+  href="/reference/p5/preload/">preload()</a>,
+
+  <a href="/reference/p5/setup/">setup()</a>, and/or
+
+  <a href="/reference/p5/draw/">draw()</a> properties on it for running a
+  sketch.</p>
+
+  <p>A p5 sketch can run in "global" or "instance" mode:
+
+  "global"   - all properties and methods are attached to the window
+
+  "instance" - all properties and methods are bound to this p5 object</p>
+line: 12
+isConstructor: true
+params:
+  - name: sketch
+    description: |
+      <p>a closure that can set optional <a href="#/p5/preload">preload()</a>,
+                                   <a href="#/p5/setup">setup()</a>, and/or <a href="#/p5/draw">draw()</a> properties on the
+                                   given p5 instance</p>
+    type: Function(p5)
+  - name: node
+    description: |
+      <p>element to attach canvas to</p>
+    type: HTMLElement
+    optional: true
+chainable: false
+---
+
+
+# p5
diff --git a/src/content/reference/en/p5 copy/pAccelerationX.mdx b/src/content/reference/en/p5 copy/pAccelerationX.mdx
new file mode 100644
index 0000000000..ab1f3e49d1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pAccelerationX.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L90
+title: pAccelerationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationX always contains the acceleration of the
+  device along the x axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 90
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# pAccelerationX
diff --git a/src/content/reference/en/p5 copy/pAccelerationY.mdx b/src/content/reference/en/p5 copy/pAccelerationY.mdx
new file mode 100644
index 0000000000..188ae8f77c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pAccelerationY.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L100
+title: pAccelerationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationY always contains the acceleration of the
+  device along the y axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 100
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# pAccelerationY
diff --git a/src/content/reference/en/p5 copy/pAccelerationZ.mdx b/src/content/reference/en/p5 copy/pAccelerationZ.mdx
new file mode 100644
index 0000000000..f291e6b707
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pAccelerationZ.mdx	
@@ -0,0 +1,21 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L110
+title: pAccelerationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable pAccelerationZ always contains the acceleration of the
+  device along the z axis in the frame previous to the current frame. Value
+  is represented as meters per second squared.</p>
+line: 110
+isConstructor: false
+itemtype: property
+class: p5
+type: Number
+---
+
+
+# pAccelerationZ
diff --git a/src/content/reference/en/p5 copy/pRotationX.mdx b/src/content/reference/en/p5 copy/pRotationX.mdx
new file mode 100644
index 0000000000..03d80f8ae5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pRotationX.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L234
+title: pRotationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable pRotationX always contains the rotation of the
+
+  device along the x axis in the frame previous to the current frame.
+
+  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
+  DEGREES,
+
+  the value will be -180 to 180. If it is set to RADIANS, the value will
+
+  be -PI to PI.</p>
+
+  <p>pRotationX can also be used with rotationX to determine the rotate
+
+  direction of the device along the X-axis.</p>
+line: 234
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationX - pRotationX < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    // Simple range conversion to make things simpler.
+    // This is not absolutely necessary but the logic
+    // will be different in that case.
+
+    let rX = rotationX + 180;
+    let pRX = pRotationX + 180;
+
+    if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
+      rotateDirection = 'clockwise';
+    } else if (rX - pRX < 0 || rX - pRX > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pRotationX
diff --git a/src/content/reference/en/p5 copy/pRotationY.mdx b/src/content/reference/en/p5 copy/pRotationY.mdx
new file mode 100644
index 0000000000..3a15f47f43
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pRotationY.mdx	
@@ -0,0 +1,62 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L278
+title: pRotationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable pRotationY always contains the rotation of the
+
+  device along the y axis in the frame previous to the current frame.
+
+  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
+  DEGREES,
+
+  the value will be -90 to 90. If it is set to RADIANS, the value will
+
+  be -PI/2 to PI/2.</p>
+
+  <p>pRotationY can also be used with rotationY to determine the rotate
+
+  direction of the device along the Y-axis.</p>
+line: 278
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationY - pRotationY < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    // Simple range conversion to make things simpler.
+    // This is not absolutely necessary but the logic
+    // will be different in that case.
+
+    let rY = rotationY + 180;
+    let pRY = pRotationY + 180;
+
+    if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
+      rotateDirection = 'clockwise';
+    } else if (rY - pRY < 0 || rY - pRY > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pRotationY
diff --git a/src/content/reference/en/p5 copy/pRotationZ.mdx b/src/content/reference/en/p5 copy/pRotationZ.mdx
new file mode 100644
index 0000000000..4ae6d5e63f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pRotationZ.mdx	
@@ -0,0 +1,58 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L321
+title: pRotationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The system variable pRotationZ always contains the rotation of the
+
+  device along the z axis in the frame previous to the current frame.
+
+  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
+  DEGREES,
+
+  the value will be 0 to 360. If it is set to RADIANS, the value will
+
+  be 0 to 2*PI.</p>
+
+  <p>pRotationZ can also be used with rotationZ to determine the rotate
+
+  direction of the device along the Z-axis.</p>
+line: 321
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    // A simple if statement looking at whether
+    // rotationZ - pRotationZ < 0 is true or not will be
+    // sufficient for determining the rotate direction
+    // in most cases.
+
+    // Some extra logic is needed to account for cases where
+    // the angles wrap around.
+    let rotateDirection = 'clockwise';
+
+    if (
+      (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
+      rotationZ - pRotationZ < -270
+    ) {
+      rotateDirection = 'clockwise';
+    } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
+      rotateDirection = 'counter-clockwise';
+    }
+    print(rotateDirection);
+    describe('no image to display.');
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pRotationZ
diff --git a/src/content/reference/en/p5 copy/paletteLerp.mdx b/src/content/reference/en/p5 copy/paletteLerp.mdx
new file mode 100644
index 0000000000..54e8c9f885
--- /dev/null
+++ b/src/content/reference/en/p5 copy/paletteLerp.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1079
+title: paletteLerp
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Blends multiple colors to find a color between them.</p>
+
+  <p>The <code>amt</code> parameter specifies the amount to interpolate between
+  the color
+
+  stops which are colors at each <code>amt</code> value "location" with
+  <code>amt</code> values
+
+  that are between 2 color stops interpolating between them based on its
+  relative
+
+  distance to both.</p>
+
+  <p>The way that colors are interpolated depends on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 1079
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(400, 400);
+    }
+
+    function draw() {
+      // The background goes from white to red to green to blue fill
+      background(paletteLerp([
+        ['white', 0],
+        ['red', 0.05],
+        ['green', 0.25],
+        ['blue', 1]
+      ], millis() / 10000 % 1));
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: colors_stops
+    description: |
+      <p>color stops to interpolate from</p>
+    type: '[p5.Color, Number][]'
+  - name: amt
+    description: |
+      <p>number to use to interpolate relative to color stops</p>
+    type: Number
+return:
+  description: interpolated color.
+  type: p5.Color
+chainable: false
+---
+
+
+# paletteLerp
diff --git a/src/content/reference/en/p5 copy/panorama.mdx b/src/content/reference/en/p5 copy/panorama.mdx
new file mode 100644
index 0000000000..97ee1fd9ca
--- /dev/null
+++ b/src/content/reference/en/p5 copy/panorama.mdx	
@@ -0,0 +1,76 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1021
+title: panorama
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates an immersive 3D background.</p>
+
+  <p><code>panorama()</code> transforms images containing 360˚ content, such as
+  maps or
+
+  HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
+
+  space requires changing the camera's perspective with functions such as
+
+  <a href="/reference/p5/orbitControl/">orbitControl()</a> or
+
+  <a href="/reference/p5/camera/">camera()</a>.</p>
+line: 1021
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="notest">
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/outdoor_spheremap.jpg');
+    }
+
+    function setup() {
+      createCanvas(100 ,100 ,WEBGL);
+
+      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
+    }
+
+    function draw() {
+      // Add the panorama.
+      panorama(img);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Use the image as a light source.
+      imageLight(img);
+
+      // Style the sphere.
+      noStroke();
+      specularMaterial(50);
+      shininess(200);
+      metalness(100);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: img
+    description: |
+      <p>360˚ image to use as the background.</p>
+    type: p5.Image
+chainable: false
+---
+
+
+# panorama
diff --git a/src/content/reference/en/p5 copy/perspective.mdx b/src/content/reference/en/p5 copy/perspective.mdx
new file mode 100644
index 0000000000..21cca35746
--- /dev/null
+++ b/src/content/reference/en/p5 copy/perspective.mdx	
@@ -0,0 +1,194 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L148
+title: perspective
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets a perspective projection for the current camera in a 3D sketch.</p>
+
+  <p>In a perspective projection, shapes that are further from the camera appear
+
+  smaller than shapes that are near the camera. This technique, called
+
+  foreshortening, creates realistic 3D scenes. It’s applied by default in
+
+  WebGL mode.</p>
+
+  <p><code>perspective()</code> changes the camera’s perspective by changing its
+  viewing
+
+  frustum. The frustum is the volume of space that’s visible to the camera.
+
+  Its shape is a pyramid with its top cut off. The camera is placed where
+
+  the top of the pyramid should be and views everything between the frustum’s
+
+  top (near) plane and its bottom (far) plane.</p>
+
+  <p>The first parameter, <code>fovy</code>, is the camera’s vertical field of
+  view. It’s
+
+  an angle that describes how tall or narrow a view the camera has. For
+
+  example, calling <code>perspective(0.5)</code> sets the camera’s vertical
+  field of
+
+  view to 0.5 radians. By default, <code>fovy</code> is calculated based on the
+  sketch’s
+
+  height and the camera’s default z-coordinate, which is 800. The formula for
+
+  the default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>
+
+  <p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio.
+  It’s a number
+
+  that describes the ratio of the top plane’s width to its height. For
+
+  example, calling <code>perspective(0.5, 1.5)</code> sets the camera’s field of
+  view to
+
+  0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner
+
+  on a square canvas. By default, aspect is set to <code>width /
+  height</code>.</p>
+
+  <p>The third parameter, <code>near</code>, is the distance from the camera to
+  the near
+
+  plane. For example, calling <code>perspective(0.5, 1.5, 100)</code> sets the
+  camera’s
+
+  field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
+
+  plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
+
+  from the camera won’t be visible. By default, near is set to <code>0.1 *
+  800</code>,
+
+  which is 1/10th the default distance between the camera and the origin.</p>
+
+  <p>The fourth parameter, <code>far</code>, is the distance from the camera to
+  the far
+
+  plane. For example, calling <code>perspective(0.5, 1.5, 100, 10000)</code>
+  sets the
+
+  camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
+
+  near plane 100 pixels from the camera, and places the far plane 10,000
+
+  pixels from the camera. Any shapes drawn more than 10,000 pixels from the
+
+  camera won’t be visible. By default, far is set to <code>10 * 800</code>,
+  which is 10
+
+  times the default distance between the camera and the origin.</p>
+
+  <p>Note: <code>perspective()</code> can only be used in WebGL mode.</p>
+line: 148
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to squeeze the box.
+
+    let isSqueezed = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Place the camera at the top-right.
+      camera(400, -400, 800);
+
+      if (isSqueezed === true) {
+        // Set fovy to 0.2.
+        // Set aspect to 1.5.
+        perspective(0.2, 1.5);
+      }
+
+      // Draw the box.
+      box();
+    }
+
+    // Change the camera's perspective when the user double-clicks.
+    function doubleClicked() {
+      isSqueezed = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Place the camera at the top-right.
+      camera(400, -400, 800);
+
+      // Set fovy to 0.2.
+      // Set aspect to 1.5.
+      // Set near to 600.
+      // Set far to 1200.
+      perspective(0.2, 1.5, 600, 1200);
+
+      // Move the origin away from the camera.
+      let x = -frameCount;
+      let y = frameCount;
+      let z = -2 * frameCount;
+      translate(x, y, z);
+
+      // Draw the box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: fovy
+    description: |
+      <p>camera frustum vertical field of view. Defaults to
+                                <code>2 * atan(height / 2 / 800)</code>.</p>
+    type: Number
+    optional: true
+  - name: aspect
+    description: |
+      <p>camera frustum aspect ratio. Defaults to
+                                <code>width / height</code>.</p>
+    type: Number
+    optional: true
+  - name: near
+    description: |
+      <p>distance from the camera to the near clipping plane.
+                                Defaults to <code>0.1 * 800</code>.</p>
+    type: Number
+    optional: true
+  - name: far
+    description: |
+      <p>distance from the camera to the far clipping plane.
+                                Defaults to <code>10 * 800</code>.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# perspective
diff --git a/src/content/reference/en/p5 copy/pixelDensity.mdx b/src/content/reference/en/p5 copy/pixelDensity.mdx
new file mode 100644
index 0000000000..808ebab227
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pixelDensity.mdx	
@@ -0,0 +1,90 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1005
+title: pixelDensity
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Sets the pixel density or returns the current density.</p>
+
+  <p>Computer displays are grids of little lights called <em>pixels</em>. A
+
+  display's <em>pixel density</em> describes how many pixels it packs into an
+
+  area. Displays with smaller pixels have a higher pixel density and create
+
+  sharper images.</p>
+
+  <p><code>pixelDensity()</code> sets the pixel scaling for high pixel density
+  displays.
+
+  By default, the pixel density is set to match the display's density.
+
+  Calling <code>pixelDensity(1)</code> turn this off.</p>
+
+  <p>Calling <code>pixelDensity()</code> without an argument returns the current
+  pixel
+
+  density.</p>
+line: 1005
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 1.
+      pixelDensity(1);
+
+      // Create a canvas and draw
+      // a circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A fuzzy white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Set the pixel density to 3.
+      pixelDensity(3);
+
+      // Create a canvas, paint the
+      // background, and draw a
+      // circle.
+      createCanvas(100, 100);
+      background(200);
+      circle(50, 50, 70);
+
+      describe('A sharp white circle on a gray canvas.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1005
+    params:
+      - name: val
+        description: |
+          <p>desired pixel density.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1059
+    params: []
+    return:
+      description: current pixel density of the sketch.
+      type: Number
+chainable: true
+---
+
+
+# pixelDensity
diff --git a/src/content/reference/en/p5 copy/pixels.mdx b/src/content/reference/en/p5 copy/pixels.mdx
new file mode 100644
index 0000000000..7185d708bf
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pixels.mdx	
@@ -0,0 +1,173 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L12
+title: pixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>An array containing the color of each pixel on the canvas.</p>
+
+  <p>Colors are stored as numbers representing red, green, blue, and alpha
+
+  (RGBA) values. <code>pixels</code> is a one-dimensional array for performance
+  reasons.</p>
+
+  <p>Each pixel occupies four elements in the <code>pixels</code> array, one for
+  each RGBA
+
+  value. For example, the pixel at coordinates (0, 0) stores its RGBA values
+
+  at <code>pixels[0]</code>, <code>pixels[1]</code>, <code>pixels[2]</code>, and
+  <code>pixels[3]</code>, respectively.
+
+  The next pixel at coordinates (1, 0) stores its RGBA values at
+  <code>pixels[4]</code>,
+
+  <code>pixels[5]</code>, <code>pixels[6]</code>, and <code>pixels[7]</code>.
+  And so on. The <code>pixels</code> array
+
+  for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.</p>
+
+  <p>Some displays use several smaller pixels to set the color at a single
+
+  point. The <a href="/reference/p5/pixelDensity/">pixelDensity()</a> function
+  returns
+
+  the pixel density of the canvas. High density displays often have a
+
+  <a href="/reference/p5/pixelDensity/">pixelDensity()</a> of 2. On such a
+  display, the
+
+  <code>pixels</code> array for a 100×100 canvas has 200 × 200 × 4 =
+
+  160,000 elements.</p>
+
+  <p>Accessing the RGBA values for a point on the canvas requires a little math
+
+  as shown below. The <a href="/reference/p5/loadPixels/">loadPixels()</a>
+  function
+
+  must be called before accessing the <code>pixels</code> array. The
+
+  <a href="/reference/p5/updatePixels/">updatePixels()</a> function must be
+  called
+
+  after any changes are made.</p>
+line: 12
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Set the dot's coordinates.
+      let x = 50;
+      let y = 50;
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Set the pixel(s) at the center of the canvas black.
+      for (let i = 0; i < d; i += 1) {
+        for (let j = 0; j < d; j += 1) {
+          let index = 4 * ((y * d + j) * width * d + (x * d + i));
+          // Red.
+          pixels[index] = 0;
+          // Green.
+          pixels[index + 1] = 0;
+          // Blue.
+          pixels[index + 2] = 0;
+          // Alpha.
+          pixels[index + 3] = 255;
+        }
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A black dot in the middle of a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Make the top half of the canvas red.
+      for (let i = 0; i < halfImage; i += 4) {
+        // Red.
+        pixels[i] = 255;
+        // Green.
+        pixels[i + 1] = 0;
+        // Blue.
+        pixels[i + 2] = 0;
+        // Alpha.
+        pixels[i + 3] = 255;
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A red rectangle drawn above a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let pink = color(255, 102, 204);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Make the top half of the canvas red.
+      for (let i = 0; i < halfImage; i += 4) {
+        pixels[i] = red(pink);
+        pixels[i + 1] = green(pink);
+        pixels[i + 2] = blue(pink);
+        pixels[i + 3] = alpha(pink);
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A pink rectangle drawn above a gray rectangle.');
+    }
+    </code>
+    </div>
+class: p5
+type: 'Number[]'
+---
+
+
+# pixels
diff --git a/src/content/reference/en/p5 copy/plane.mdx b/src/content/reference/en/p5 copy/plane.mdx
new file mode 100644
index 0000000000..eefeb29b7a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/plane.mdx	
@@ -0,0 +1,152 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L866
+title: plane
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a plane.</p>
+
+  <p>A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
+
+  similar to a rectangle and offers advanced drawing features in WebGL mode.</p>
+
+  <p>The first parameter, <code>width</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>plane(20)</code>, it sets the plane’s width and height. By default,
+  <code>width</code> is
+
+  50.</p>
+
+  <p>The second parameter, <code>height</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>plane(20, 30)</code>, it sets the plane’s height. By default,
+  <code>height</code> is
+
+  set to the plane’s <code>width</code>.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>plane(20, 30, 5)</code> it sets the number of triangle
+  subdivisions to use
+
+  along the x-axis. All 3D shapes are made by connecting triangles to form
+
+  their surfaces. By default, <code>detailX</code> is 1.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>plane(20, 30, 5, 7)</code> it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailY</code> is 1.</p>
+
+  <p>Note: <code>plane()</code> can only be used in WebGL mode.</p>
+line: 866
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white plane on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the plane.
+      plane();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white plane on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the plane.
+      // Set its width and height to 30.
+      plane(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white plane on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the plane.
+      // Set its width to 30 and height to 50.
+      plane(30, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width of the plane.</p>
+    type: Number
+    optional: true
+  - name: height
+    description: |
+      <p>height of the plane.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# plane
diff --git a/src/content/reference/en/p5 copy/pmouseX.mdx b/src/content/reference/en/p5 copy/pmouseX.mdx
new file mode 100644
index 0000000000..5f5e8ff7f7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pmouseX.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L333
+title: pmouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's previous
+  horizontal
+
+  position.</p>
+
+  <p><code>pmouseX</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. Its value is
+
+  <a href="/reference/p5/mouseX/">mouseX</a> from the previous frame. For
+  example, if
+
+  the mouse was 50 pixels from the left edge of the canvas during the last
+
+  frame, then <code>pmouseX</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>pmouseX</code> will hold
+  the
+
+  x-coordinate of the last touch point.</p>
+
+  <p>Note: <code>pmouseX</code> is reset to the current <a
+  href="/reference/p5/mouseX/">mouseX</a>
+
+  value at the start of each touch event.</p>
+line: 333
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      line(pmouseX, pmouseY, mouseX, mouseY);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let pmx = pmouseX - 50;
+      let pmy = pmouseY - 50;
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Draw the line.
+      line(pmx, pmy, mx, my);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pmouseX
diff --git a/src/content/reference/en/p5 copy/pmouseY.mdx b/src/content/reference/en/p5 copy/pmouseY.mdx
new file mode 100644
index 0000000000..558747e43f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pmouseY.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L398
+title: pmouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> system variable that tracks the mouse's previous
+  vertical
+
+  position.</p>
+
+  <p><code>pmouseY</code> keeps track of the mouse's position relative to the
+
+  top-left corner of the canvas. Its value is
+
+  <a href="/reference/p5/mouseY/">mouseY</a> from the previous frame. For
+  example, if
+
+  the mouse was 50 pixels from the top edge of the canvas during the last
+
+  frame, then <code>pmouseY</code> will be 50.</p>
+
+  <p>If touch is used instead of the mouse, then <code>pmouseY</code> will hold
+  the
+
+  y-coordinate of the last touch point.</p>
+
+  <p>Note: <code>pmouseY</code> is reset to the current <a
+  href="/reference/p5/mouseY/">mouseY</a>
+
+  value at the start of each touch event.</p>
+line: 398
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      line(pmouseX, pmouseY, mouseX, mouseY);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Adjust coordinates for WebGL mode.
+      // The origin (0, 0) is at the center of the canvas.
+      let pmx = pmouseX - 50;
+      let pmy = pmouseY - 50;
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Draw the line.
+      line(pmx, pmy, mx, my);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pmouseY
diff --git a/src/content/reference/en/p5 copy/point.mdx b/src/content/reference/en/p5 copy/point.mdx
new file mode 100644
index 0000000000..7912c06cbb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/point.mdx	
@@ -0,0 +1,229 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L721
+title: point
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a single point in space.</p>
+
+  <p>A point's default width is one pixel. To color a point, use the
+
+  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
+  use the
+
+  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A point
+
+  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
+  won't
+
+  affect the point's color.</p>
+
+  <p>The version of <code>point()</code> with two parameters allows the point's
+  location to
+
+  be set with its x- and y-coordinates, as in <code>point(10, 20)</code>.</p>
+
+  <p>The version of <code>point()</code> with three parameters allows the point
+  to be drawn
+
+  in 3D space with x-, y-, and z-coordinates, as in <code>point(10, 20,
+  30)</code>.
+
+  Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
+
+  <p>The version of <code>point()</code> with one parameter allows the point's
+  location to
+
+  be set with a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
+line: 721
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+
+      // Making point to 5 pixels
+      strokeWeight(5);
+
+
+      // Top-left.
+      point(30, 20);
+
+      // Top-right.
+      point(85, 20);
+
+      // Bottom-right.
+      point(85, 75);
+
+      // Bottom-left.
+      point(30, 75);
+
+      describe(
+        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+
+      // Making point to 5 pixels.
+      strokeWeight(5);
+
+
+      // Top-left.
+      point(30, 20);
+
+      // Top-right.
+      point(70, 20);
+
+      // Style the next points.
+      stroke('purple');
+      strokeWeight(10);
+
+      // Bottom-right.
+      point(70, 80);
+
+      // Bottom-left.
+      point(30, 80);
+
+      describe(
+        'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+
+      // Making point to 5 pixels.
+      strokeWeight(5);
+
+
+      // Top-left.
+      let a = createVector(30, 20);
+      point(a);
+
+      // Top-right.
+      let b = createVector(70, 20);
+      point(b);
+
+      // Bottom-right.
+      let c = createVector(70, 80);
+      point(c);
+
+      // Bottom-left.
+      let d = createVector(30, 80);
+      point(d);
+
+      describe(
+        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Two purple points drawn on a gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the points.
+      stroke('purple');
+      strokeWeight(10);
+
+      // Top-left.
+      point(-20, -30);
+
+      // Bottom-right.
+      point(20, 30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Two purple points drawn on a gray canvas. The scene spins slowly.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Style the points.
+      stroke('purple');
+      strokeWeight(10);
+
+      // Top-left.
+      point(-20, -30, 0);
+
+      // Bottom-right.
+      point(20, 30, -50);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 721
+    params:
+      - name: x
+        description: |
+          <p>the x-coordinate.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>the y-coordinate.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>the z-coordinate (for WebGL mode).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 900
+    params:
+      - name: coordinateVector
+        description: |
+          <p>the coordinate vector.</p>
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# point
diff --git a/src/content/reference/en/p5 copy/pointLight.mdx b/src/content/reference/en/p5 copy/pointLight.mdx
new file mode 100644
index 0000000000..c6f10715b9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pointLight.mdx	
@@ -0,0 +1,329 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L683
+title: pointLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines from a point in all directions.</p>
+
+  <p>Point lights are like light bulbs that shine in all directions. They can be
+
+  placed at different positions to achieve different lighting effects. A
+
+  maximum of 5 point lights can be active at once.</p>
+
+  <p>There are four ways to call <code>pointLight()</code> with parameters to
+  set the
+
+  light’s color and position.</p>
+
+  <p>The first way to call <code>pointLight()</code> has six parameters. The
+  first three
+
+  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
+  light’s color using the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The last three parameters,
+  <code>x</code>,
+
+  <code>y</code>, and <code>z</code>, set the light’s position. For example,
+
+  <code>pointLight(255, 0, 0, 50, 0, 0)</code> creates a red <code>(255, 0,
+  0)</code> light that
+
+  shines from the coordinates <code>(50, 0, 0)</code>.</p>
+
+  <p>The second way to call <code>pointLight()</code> has four parameters. The
+  first three
+
+  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
+  light’s color using the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter,
+  position sets
+
+  the light’s position using a <a href="/reference/p5/p5.Vector">p5.Vector</a>
+  object.
+
+  For example, <code>pointLight(255, 0, 0, lightPos)</code> creates a red
+  <code>(255, 0, 0)</code>
+
+  light that shines from the position set by the <code>lightPos</code>
+  vector.</p>
+
+  <p>The third way to call <code>pointLight()</code> has four parameters. The
+  first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
+  the light’s position. For
+
+  example, <code>directionalLight(myColor, 50, 0, 0)</code> creates a light that
+  shines
+
+  from the coordinates <code>(50, 0, 0)</code> with the color value of
+  <code>myColor</code>.</p>
+
+  <p>The fourth way to call <code>pointLight()</code> has two parameters. The
+  first
+
+  parameter, <code>color</code>, sets the light’s color using a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
+  values. The
+
+  second parameter, <code>position</code>, sets the light’s position using a
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
+
+  <code>directionalLight(myColor, lightPos)</code> creates a light that shines
+  from the
+
+  position set by the <code>lightPos</code> vector with the color value of
+  <code>myColor</code>.</p>
+line: 683
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to turn on the point light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Control the light.
+      if (isLit === true) {
+        // Add a red point light from above.
+        // Use RGB values and XYZ coordinates.
+        pointLight(255, 0, 0, 0, -150, 0);
+      }
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the point light when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red point light from above.
+      // Use a p5.Color object and XYZ directions.
+      let c = color(255, 0, 0);
+      pointLight(c, 0, -150, 0);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red point light from above.
+      // Use a p5.Color object and a p5.Vector object.
+      let c = color(255, 0, 0);
+      let lightPos = createVector(0, -150, 0);
+      pointLight(c, lightPos);
+
+      // Style the sphere.
+      noStroke();
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a red point light that points to the center of the scene.
+      // Use a p5.Color object and a p5.Vector object.
+      let c = color(255, 0, 0);
+      let lightPos = createVector(0, 0, 65);
+      pointLight(c, lightPos);
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw a sphere up and to the left.
+      push();
+      translate(-25, -25, 25);
+      sphere(10);
+      pop();
+
+      // Draw a box up and to the right.
+      push();
+      translate(25, -25, 25);
+      sphere(10);
+      pop();
+
+      // Draw a sphere down and to the left.
+      push();
+      translate(-25, 25, 25);
+      sphere(10);
+      pop();
+
+      // Draw a box down and to the right.
+      push();
+      translate(25, 25, 25);
+      sphere(10);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 683
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: x
+        description: |
+          <p>x-coordinate of the light.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the light.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the light.</p>
+        type: Number
+    chainable: 1
+  - line: 890
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: position
+        description: |
+          <p>position of the light as a
+                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
+        type: p5.Vector
+    chainable: 1
+  - line: 900
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                                                   an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+    chainable: 1
+  - line: 910
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: position
+        description: ''
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# pointLight
diff --git a/src/content/reference/en/p5 copy/pop.mdx b/src/content/reference/en/p5 copy/pop.mdx
new file mode 100644
index 0000000000..72b5c1db21
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pop.mdx	
@@ -0,0 +1,20 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L553
+title: pop
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: "<p>Ends a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
+line: 553
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
+class: p5
+chainable: false
+---
+
+
+# pop
diff --git a/src/content/reference/en/p5 copy/pow.mdx b/src/content/reference/en/p5 copy/pow.mdx
new file mode 100644
index 0000000000..18201ec3c2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pow.mdx	
@@ -0,0 +1,67 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L815
+title: pow
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: |
+  <p>Calculates exponential expressions such as <var>2<sup>3</sup></var>.</p>
+  <p>For example, <code>pow(2, 3)</code> evaluates the expression
+  2 × 2 × 2. <code>pow(2, -3)</code> evaluates 1 ÷
+  (2 × 2 × 2).</p>
+line: 815
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set the base of the exponent.
+      let base = 3;
+
+      // Top-left.
+      let d = pow(base, 1);
+      circle(10, 10, d);
+
+      // Left-center.
+      d = pow(base, 2);
+      circle(20, 20, d);
+
+      // Right-center.
+      d = pow(base, 3);
+      circle(40, 40, d);
+
+      // Bottom-right.
+      d = pow(base, 4);
+      circle(80, 80, d);
+
+      describe('A series of circles that grow exponentially from top left to bottom right.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>base of the exponential expression.</p>
+    type: Number
+  - name: e
+    description: |
+      <p>power by which to raise the base.</p>
+    type: Number
+return:
+  description: n^e.
+  type: Number
+chainable: false
+---
+
+
+# pow
diff --git a/src/content/reference/en/p5 copy/preload.mdx b/src/content/reference/en/p5 copy/preload.mdx
new file mode 100644
index 0000000000..66d5db4378
--- /dev/null
+++ b/src/content/reference/en/p5 copy/preload.mdx	
@@ -0,0 +1,70 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L41
+title: preload
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>A function that's called once to load assets before the sketch runs.</p>
+
+  <p>Declaring the function <code>preload()</code> sets a code block to run once
+
+  automatically before <a href="/reference/p5/setup/">setup()</a> or
+
+  <a href="/reference/p5/draw/">draw()</a>. It's used to load assets including
+
+  multimedia files, fonts, data, and 3D models:</p>
+
+  <pre><code class="language-js">function preload() {
+    // Code to run before the rest of the sketch.
+  }
+
+  </code></pre>
+
+  <p>Functions such as <a href="/reference/p5/loadImage/">loadImage()</a>,
+
+  <a href="/reference/p5/loadFont/">loadFont()</a>,
+
+  <a href="/reference/p5/loadJSON/">loadJSON()</a>, and
+
+  <a href="/reference/p5/loadModel/">loadModel()</a> are guaranteed to either
+
+  finish loading or raise an error if they're called within
+  <code>preload()</code>.
+
+  Doing so ensures that assets are available when the sketch begins
+
+  running.</p>
+line: 41
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe('A red brick wall.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# preload
diff --git a/src/content/reference/en/p5 copy/print.mdx b/src/content/reference/en/p5 copy/print.mdx
new file mode 100644
index 0000000000..50137586ae
--- /dev/null
+++ b/src/content/reference/en/p5 copy/print.mdx	
@@ -0,0 +1,55 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L21
+title: print
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>Displays text in the web browser's console.</p>
+
+  <p><code>print()</code> is helpful for printing values while debugging. Each
+  call to
+
+  <code>print()</code> creates a new line of text.</p>
+
+  <p>Note: Call <code>print('\n')</code> to print a blank line. Calling
+  <code>print()</code> without
+
+  an argument opens the browser's dialog for printing documents.</p>
+line: 21
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Prints "hello, world" to the console.
+      print('hello, world');
+    }
+    </code>
+    </div>
+
+    <div class="norender">
+    <code>
+    function setup() {
+      let name = 'ada';
+      // Prints "hello, ada" to the console.
+      print(`hello, ${name}`);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: contents
+    description: |
+      <p>content to print to the console.</p>
+    type: Any
+chainable: false
+---
+
+
+# print
diff --git a/src/content/reference/en/p5 copy/push.mdx b/src/content/reference/en/p5 copy/push.mdx
new file mode 100644
index 0000000000..ee1a386cee
--- /dev/null
+++ b/src/content/reference/en/p5 copy/push.mdx	
@@ -0,0 +1,20 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L269
+title: push
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: "<p>Begins a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
+line: 269
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
+class: p5
+chainable: false
+---
+
+
+# push
diff --git a/src/content/reference/en/p5 copy/pwinMouseX.mdx b/src/content/reference/en/p5 copy/pwinMouseX.mdx
new file mode 100644
index 0000000000..cb869aea71
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pwinMouseX.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L545
+title: pwinMouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's previous horizontal
+  position
+
+  within the browser.</p>
+
+  <p><code>pwinMouseX</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. Its value is
+
+  <a href="/reference/p5/winMouseX/">winMouseX</a> from the previous frame. For
+
+  example, if the mouse was 50 pixels from
+
+  the left edge of the browser during the last frame, then
+  <code>pwinMouseX</code> will
+
+  be 50.</p>
+
+  <p>On a touchscreen device, <code>pwinMouseX</code> will hold the x-coordinate
+  of the most
+
+  recent touch point. <code>pwinMouseX</code> is reset to the current
+
+  <a href="/reference/p5/winMouseX/">winMouseX</a> value at the start of each
+  touch
+
+  event.</p>
+
+  <p>Note: Use <a href="/reference/p5/pmouseX/">pmouseX</a> to track the mouse’s
+  previous
+
+  x-coordinate within the canvas.</p>
+line: 545
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's diameter.
+      let d = winMouseX - pwinMouseX;
+
+      // Draw the circle.
+      circle(50, 50, d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create the canvas and set its position.
+      let cnv = createCanvas(100, 100);
+      cnv.position(20, 20);
+
+      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display pwinMouseX.
+      text(pwinMouseX, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pwinMouseX
diff --git a/src/content/reference/en/p5 copy/pwinMouseY.mdx b/src/content/reference/en/p5 copy/pwinMouseY.mdx
new file mode 100644
index 0000000000..2f36580a23
--- /dev/null
+++ b/src/content/reference/en/p5 copy/pwinMouseY.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L616
+title: pwinMouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's previous vertical
+  position
+
+  within the browser.</p>
+
+  <p><code>pwinMouseY</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. Its value is
+
+  <a href="/reference/p5/winMouseY/">winMouseY</a> from the previous frame. For
+
+  example, if the mouse was 50 pixels from
+
+  the top edge of the browser during the last frame, then
+  <code>pwinMouseY</code> will
+
+  be 50.</p>
+
+  <p>On a touchscreen device, <code>pwinMouseY</code> will hold the y-coordinate
+  of the most
+
+  recent touch point. <code>pwinMouseY</code> is reset to the current
+
+  <a href="/reference/p5/winMouseY/">winMouseY</a> value at the start of each
+  touch
+
+  event.</p>
+
+  <p>Note: Use <a href="/reference/p5/pmouseY/">pmouseY</a> to track the mouse’s
+  previous
+
+  y-coordinate within the canvas.</p>
+line: 616
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(10);
+
+      describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the circle's diameter.
+      let d = winMouseY - pwinMouseY;
+
+      // Draw the circle.
+      circle(50, 50, d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create the canvas and set its position.
+      let cnv = createCanvas(100, 100);
+      cnv.position(20, 20);
+
+      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display pwinMouseY.
+      text(pwinMouseY, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# pwinMouseY
diff --git a/src/content/reference/en/p5 copy/quad.mdx b/src/content/reference/en/p5 copy/quad.mdx
new file mode 100644
index 0000000000..fbc09fa0a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/quad.mdx	
@@ -0,0 +1,233 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L928
+title: quad
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a quadrilateral (four-sided shape).</p>
+
+  <p>Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
+
+  first pair of parameters <code>(x1, y1)</code> sets the quad's first point.
+  The next
+
+  three pairs of parameters set the coordinates for its next three points
+
+  <code>(x2, y2)</code>, <code>(x3, y3)</code>, and <code>(x4, y4)</code>.
+  Points should be added in either
+
+  clockwise or counter-clockwise order.</p>
+
+  <p>The version of <code>quad()</code> with twelve parameters allows the quad
+  to be drawn
+
+  in 3D space. Doing so requires adding the <code>WEBGL</code> argument to
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
+
+  <p>The thirteenth and fourteenth parameters are optional. In WebGL mode, they
+
+  set the number of segments used to draw the quadrilateral in the x- and
+
+  y-directions. They're both 2 by default.</p>
+line: 928
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(20, 20, 80, 20, 80, 80, 20, 80);
+
+      describe('A white square with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(20, 30, 80, 30, 80, 70, 20, 70);
+
+      describe('A white rectangle with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(50, 62, 86, 50, 50, 38, 14, 50);
+
+      describe('A white rhombus with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      quad(20, 50, 80, 30, 80, 70, 20, 70);
+
+      describe('A white trapezoid with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      quad(-30, -30, 30, -30, 30, 30, -30, 30);
+
+      describe('A white square with a black outline drawn on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A wavy white surface spins around on gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the quad.
+      quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 928
+    params:
+      - name: x1
+        description: |
+          <p>the x-coordinate of the first point.</p>
+        type: Number
+      - name: y1
+        description: |
+          <p>the y-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: |
+          <p>the x-coordinate of the second point.</p>
+        type: Number
+      - name: y2
+        description: |
+          <p>the y-coordinate of the second point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>the x-coordinate of the third point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>the y-coordinate of the third point.</p>
+        type: Number
+      - name: x4
+        description: |
+          <p>the x-coordinate of the fourth point.</p>
+        type: Number
+      - name: y4
+        description: |
+          <p>the y-coordinate of the fourth point.</p>
+        type: Number
+      - name: detailX
+        description: |
+          <p>number of segments in the x-direction.</p>
+        type: Integer
+        optional: true
+      - name: detailY
+        description: |
+          <p>number of segments in the y-direction.</p>
+        type: Integer
+        optional: true
+    chainable: 1
+  - line: 1048
+    params:
+      - name: x1
+        description: ''
+        type: Number
+      - name: y1
+        description: ''
+        type: Number
+      - name: z1
+        description: |
+          <p>the z-coordinate of the first point.</p>
+        type: Number
+      - name: x2
+        description: ''
+        type: Number
+      - name: y2
+        description: ''
+        type: Number
+      - name: z2
+        description: |
+          <p>the z-coordinate of the second point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>the z-coordinate of the third point.</p>
+        type: Number
+      - name: x4
+        description: ''
+        type: Number
+      - name: y4
+        description: ''
+        type: Number
+      - name: z4
+        description: |
+          <p>the z-coordinate of the fourth point.</p>
+        type: Number
+      - name: detailX
+        description: ''
+        type: Integer
+        optional: true
+      - name: detailY
+        description: ''
+        type: Integer
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# quad
diff --git a/src/content/reference/en/p5 copy/quadraticVertex.mdx b/src/content/reference/en/p5 copy/quadraticVertex.mdx
new file mode 100644
index 0000000000..e319e38769
--- /dev/null
+++ b/src/content/reference/en/p5 copy/quadraticVertex.mdx	
@@ -0,0 +1,303 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1600
+title: quadraticVertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a quadratic Bézier curve segment to a custom shape.</p>
+
+  <p><code>quadraticVertex()</code> adds a curved segment to custom shapes. The
+  Bézier
+
+  curve segments it creates are similar to those made by the
+
+  <a href="/reference/p5/bezierVertex/">bezierVertex()</a> function.
+
+  <code>quadraticVertex()</code> must be called between the
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
+  uses
+
+  the previous vertex as the first anchor point, so there must be at least
+
+  one call to <a href="/reference/p5/vertex/">vertex()</a> before
+  <code>quadraticVertex()</code> can
+
+  be used.</p>
+
+  <p>The first two parameters, <code>cx</code> and <code>cy</code>, set the
+  curve’s control point.
+
+  The control point "pulls" the curve towards its.</p>
+
+  <p>The last two parameters, <code>x3</code>, and <code>y3</code>, set the last
+  anchor point. The
+
+  last anchor point is where the curve ends.</p>
+
+  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
+
+  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
+  and
+
+  z-coordinates.</p>
+
+  <p>Note: <code>quadraticVertex()</code> won’t work when an argument is passed
+  to
+
+  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 1600
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the curve.
+      noFill();
+
+      // Draw the curve.
+      beginShape();
+      vertex(20, 20);
+      quadraticVertex(80, 20, 50, 50);
+      endShape();
+
+      describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the curve.
+      noFill();
+      beginShape();
+      vertex(20, 20);
+      quadraticVertex(80, 20, 50, 50);
+      endShape();
+
+      // Draw red lines from the anchor points to the control point.
+      stroke(255, 0, 0);
+      line(20, 20, 80, 20);
+      line(50, 50, 80, 20);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(20, 20);
+      point(50, 50);
+
+      // Draw the control point in red.
+      stroke(255, 0, 0);
+      point(80, 20);
+
+      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the mouse near the red dot in the top-right corner
+    // and drag to change the curve's shape.
+
+    let x2 = 80;
+    let y2 = 20;
+    let isChanging = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the curve.
+      noFill();
+      strokeWeight(1);
+      stroke(0);
+
+      // Draw the curve.
+      beginShape();
+      vertex(20, 20);
+      quadraticVertex(x2, y2, 50, 50);
+      endShape();
+
+      // Draw red lines from the anchor points to the control point.
+      stroke(255, 0, 0);
+      line(20, 20, x2, y2);
+      line(50, 50, x2, y2);
+
+      // Draw the anchor points in black.
+      strokeWeight(5);
+      stroke(0);
+      point(20, 20);
+      point(50, 50);
+
+      // Draw the control point in red.
+      stroke(255, 0, 0);
+      point(x2, y2);
+    }
+
+    // Start changing the first control point if the user clicks near it.
+    function mousePressed() {
+      if (dist(mouseX, mouseY, x2, y2) < 20) {
+        isChanging = true;
+      }
+    }
+
+    // Stop changing the first control point when the user releases the mouse.
+    function mouseReleased() {
+      isChanging = false;
+    }
+
+    // Update the first control point while the user drags the mouse.
+    function mouseDragged() {
+      if (isChanging === true) {
+        x2 = mouseX;
+        y2 = mouseY;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add the curved segments.
+      vertex(20, 20);
+      quadraticVertex(80, 20, 50, 50);
+      quadraticVertex(20, 80, 80, 80);
+
+      // Add the straight segments.
+      vertex(80, 10);
+      vertex(20, 10);
+      vertex(20, 20);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A white puzzle piece drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the and drag the mouse to view the scene from a different angle.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the first puzzle piece.
+      noStroke();
+      fill(255);
+
+      // Draw the first puzzle piece.
+      beginShape();
+      vertex(-30, -30, 0);
+      quadraticVertex(30, -30, 0, 0, 0, 0);
+      quadraticVertex(-30, 30, 0, 30, 30, 0);
+      vertex(30, -40, 0);
+      vertex(-30, -40, 0);
+      vertex(-30, -30, 0);
+      endShape();
+
+      // Style the second puzzle piece.
+      stroke(255);
+      noFill();
+
+      // Draw the second puzzle piece.
+      beginShape();
+      vertex(-30, -30, -20);
+      quadraticVertex(30, -30, -20, 0, 0, -20);
+      quadraticVertex(-30, 30, -20, 30, 30, -20);
+      vertex(30, -40, -20);
+      vertex(-30, -40, -20);
+      vertex(-30, -30, -20);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1600
+    params:
+      - name: cx
+        description: |
+          <p>x-coordinate of the control point.</p>
+        type: Number
+      - name: cy
+        description: |
+          <p>y-coordinate of the control point.</p>
+        type: Number
+      - name: x3
+        description: |
+          <p>x-coordinate of the anchor point.</p>
+        type: Number
+      - name: y3
+        description: |
+          <p>y-coordinate of the anchor point.</p>
+        type: Number
+    chainable: 1
+  - line: 1832
+    params:
+      - name: cx
+        description: ''
+        type: Number
+      - name: cy
+        description: ''
+        type: Number
+      - name: cz
+        description: |
+          <p>z-coordinate of the control point.</p>
+        type: Number
+      - name: x3
+        description: ''
+        type: Number
+      - name: y3
+        description: ''
+        type: Number
+      - name: z3
+        description: |
+          <p>z-coordinate of the anchor point.</p>
+        type: Number
+chainable: true
+---
+
+
+# quadraticVertex
diff --git a/src/content/reference/en/p5 copy/radians.mdx b/src/content/reference/en/p5 copy/radians.mdx
new file mode 100644
index 0000000000..da0adc1ff7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/radians.mdx	
@@ -0,0 +1,53 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L521
+title: radians
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: |
+  <p>Converts an angle measured in degrees to its value in radians.</p>
+  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
+  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
+  <p>The same angle can be expressed in with either unit. For example, 90° is a
+  quarter of a full rotation. The same angle is 2 × π ÷ 4
+  (about 1.57) radians.</p>
+line: 521
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Calculate the angle conversion.
+      let deg = 45;
+      let rad = radians(deg);
+
+      // Display the angle conversion.
+      text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
+
+      describe('The text "45˚ = 0.785 rad".');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: degrees
+    description: |
+      <p>degree value to convert to radians.</p>
+    type: Number
+return:
+  description: converted angle.
+  type: Number
+chainable: false
+---
+
+
+# radians
diff --git a/src/content/reference/en/p5 copy/random.mdx b/src/content/reference/en/p5 copy/random.mdx
new file mode 100644
index 0000000000..aef8e546e8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/random.mdx	
@@ -0,0 +1,48 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L86
+title: random
+module: Math
+submodule: Random
+file: src/math/random.js
+description: "<p>Returns a random number or a random element from an array.</p>\n<p><code>random()</code> follows uniform distribution, which means that all outcomes are\nequally likely. When <code>random()</code> is used to generate numbers, all\nnumbers in the output range are equally likely to be returned. When\n<code>random()</code> is used to select elements from an array, all elements are\nequally likely to be chosen.</p>\n<p>By default, <code>random()</code> produces different results each time a sketch runs.\nThe <a href=\"/reference/p5/randomSeed/\">randomSeed()</a> function can be used to\ngenerate the same sequence of numbers or choices each time a sketch runs.</p>\n<p>The version of <code>random()</code> with no parameters returns a random number from 0\nup to but not including 1.</p>\n<p>The version of <code>random()</code> with one parameter works one of two ways. If the\nargument passed is a number, <code>random()</code> returns a random number from 0 up\nto but not including the number. For example, calling <code>random(5)</code> returns\nvalues between 0 and 5. If the argument passed is an array, <code>random()</code>\nreturns a random element from that array. For example, calling\n<code>random(['\U0001F981', '\U0001F42F', '\U0001F43B'])</code> returns either a lion, tiger, or bear emoji.</p>\n<p>The version of <code>random()</code> with two parameters returns a random number from\na given range. The arguments passed set the range's lower and upper bounds.\nFor example, calling <code>random(-5, 10.2)</code> returns values from -5 up to but\nnot including 10.2.</p>\n"
+line: 86
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(0, 100);\n  let y = random(0, 100);\n\n  // Draw a point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Create an array of emoji strings.\n  let animals = ['\U0001F981', '\U0001F42F', '\U0001F43B'];\n\n  // Choose a random element from the array.\n  let choice = random(animals);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(20);\n\n  // Display the emoji.\n  text(choice, 50, 50);\n\n  describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 45 and 55.\n  let x = random(45, 55);\n  let y = random(45, 55);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n  // Update x and y randomly.\n  x += random(-1, 1);\n  y += random(-1, 1);\n\n  // Draw the point.\n  point(x, y);\n}\n</code>\n</div>"
+class: p5
+return:
+  description: random number.
+  type: Number
+overloads:
+  - line: 86
+    params:
+      - name: min
+        description: |
+          <p>lower bound (inclusive).</p>
+        type: Number
+        optional: true
+      - name: max
+        description: |
+          <p>upper bound (exclusive).</p>
+        type: Number
+        optional: true
+    return:
+      description: random number.
+      type: Number
+  - line: 259
+    params:
+      - name: choices
+        description: |
+          <p>array to choose from.</p>
+        type: Array
+    return:
+      description: random element from the array.
+      type: '*'
+chainable: false
+---
+
+
+# random
diff --git a/src/content/reference/en/p5 copy/randomGaussian.mdx b/src/content/reference/en/p5 copy/randomGaussian.mdx
new file mode 100644
index 0000000000..24893f378b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/randomGaussian.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L292
+title: randomGaussian
+module: Math
+submodule: Random
+file: src/math/random.js
+description: >
+  <p>Returns a random number fitting a Gaussian, or normal, distribution.</p>
+
+  <p>Normal distributions look like bell curves when plotted. Values from a
+
+  normal distribution cluster around a central value called the mean. The
+
+  cluster's standard deviation describes its spread.</p>
+
+  <p>By default, <code>randomGaussian()</code> produces different results each
+  time a
+
+  sketch runs. The <a href="/reference/p5/randomSeed/">randomSeed()</a> function
+  can be
+
+  used to generate the same sequence of numbers each time a sketch runs.</p>
+
+  <p>There's no minimum or maximum value that <code>randomGaussian()</code>
+  might return.
+
+  Values far from the mean are very unlikely and values near the mean are
+
+  very likely.</p>
+
+  <p>The version of <code>randomGaussian()</code> with no parameters returns
+  values with a
+
+  mean of 0 and standard deviation of 1.</p>
+
+  <p>The version of <code>randomGaussian()</code> with one parameter interprets
+  the
+
+  argument passed as the mean. The standard deviation is 1.</p>
+
+  <p>The version of <code>randomGaussian()</code> with two parameters interprets
+  the first
+
+  argument passed as the mean and the second as the standard deviation.</p>
+line: 292
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
+    }
+
+    function draw() {
+      // Style the circles.
+      noStroke();
+      fill(0, 10);
+
+      // Uniform distribution between 0 and 100.
+      let x = random(100);
+      let y = 25;
+      circle(x, y, 5);
+
+      // Gaussian distribution with a mean of 50 and sd of 1.
+      x = randomGaussian(50);
+      y = 50;
+      circle(x, y, 5);
+
+      // Gaussian distribution with a mean of 50 and sd of 10.
+      x = randomGaussian(50, 10);
+      y = 75;
+      circle(x, y, 5);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mean
+    description: |
+      <p>mean.</p>
+    type: Number
+    optional: true
+  - name: sd
+    description: |
+      <p>standard deviation.</p>
+    type: Number
+    optional: true
+return:
+  description: random number.
+  type: Number
+chainable: false
+---
+
+
+# randomGaussian
diff --git a/src/content/reference/en/p5 copy/randomSeed.mdx b/src/content/reference/en/p5 copy/randomSeed.mdx
new file mode 100644
index 0000000000..dbd1a6ae3d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/randomSeed.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L37
+title: randomSeed
+module: Math
+submodule: Random
+file: src/math/random.js
+description: >
+  <p>Sets the seed value for the <a href="/reference/p5/random/">random()</a>
+  and
+
+  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> functions.</p>
+
+  <p>By default, <a href="/reference/p5/random/">random()</a> and
+
+  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> produce different
+
+  results each time a sketch is run. Calling <code>randomSeed()</code> with a
+  constant
+
+  argument, such as <code>randomSeed(99)</code>, makes these functions produce
+  the same
+
+  results each time a sketch is run.</p>
+line: 37
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get random coordinates.
+      let x = random(0, 100);
+      let y = random(0, 100);
+
+      // Draw the white circle.
+      circle(x, y, 10);
+
+      // Set a random seed for consistency.
+      randomSeed(99);
+
+      // Get random coordinates.
+      x = random(0, 100);
+      y = random(0, 100);
+
+      // Draw the black circle.
+      fill(0);
+      circle(x, y, 10);
+
+      describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: seed
+    description: |
+      <p>seed value.</p>
+    type: Number
+chainable: false
+---
+
+
+# randomSeed
diff --git a/src/content/reference/en/p5 copy/rect.mdx b/src/content/reference/en/p5 copy/rect.mdx
new file mode 100644
index 0000000000..6876ab536d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rect.mdx	
@@ -0,0 +1,209 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1091
+title: rect
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a rectangle.</p>
+
+  <p>A rectangle is a four-sided shape defined by the <code>x</code>,
+  <code>y</code>, <code>w</code>, and <code>h</code>
+
+  parameters. <code>x</code> and <code>y</code> set the location of its top-left
+  corner. <code>w</code> sets
+
+  its width and <code>h</code> sets its height. Every angle in the rectangle
+  measures
+
+  90˚. See <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to
+  define
+
+  rectangles.</p>
+
+  <p>The version of <code>rect()</code> with five parameters creates a rounded
+  rectangle. The
+
+  fifth parameter sets the radius for all four corners.</p>
+
+  <p>The version of <code>rect()</code> with eight parameters also creates a
+  rounded
+
+  rectangle. Each of the last four parameters set the radius of a corner. The
+
+  radii start with the top-left corner and move clockwise around the
+
+  rectangle. If any of these parameters are omitted, they are set to the
+
+  value of the last radius that was set.</p>
+line: 1091
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rect(30, 20, 55, 55);
+
+      describe('A white square with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rect(30, 20, 55, 40);
+
+      describe('A white rectangle with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give all corners a radius of 20.
+      rect(30, 20, 55, 50, 20);
+
+      describe('A white rectangle with a black outline and round edges on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give each corner a unique radius.
+      rect(30, 20, 55, 50, 20, 15, 10, 5);
+
+      describe('A white rectangle with a black outline and round edges of different radii.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      rect(-20, -30, 55, 55);
+
+      describe('A white square with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square spins around on gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the rectangle.
+      rect(-20, -30, 55, 55);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1091
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the rectangle.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the rectangle.</p>
+        type: Number
+      - name: w
+        description: |
+          <p>width of the rectangle.</p>
+        type: Number
+      - name: h
+        description: |
+          <p>height of the rectangle.</p>
+        type: Number
+        optional: true
+      - name: tl
+        description: |
+          <p>optional radius of top-left corner.</p>
+        type: Number
+        optional: true
+      - name: tr
+        description: |
+          <p>optional radius of top-right corner.</p>
+        type: Number
+        optional: true
+      - name: br
+        description: |
+          <p>optional radius of bottom-right corner.</p>
+        type: Number
+        optional: true
+      - name: bl
+        description: |
+          <p>optional radius of bottom-left corner.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1214
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: w
+        description: ''
+        type: Number
+      - name: h
+        description: ''
+        type: Number
+      - name: detailX
+        description: |
+          <p>number of segments in the x-direction (for WebGL mode).</p>
+        type: Integer
+        optional: true
+      - name: detailY
+        description: |
+          <p>number of segments in the y-direction (for WebGL mode).</p>
+        type: Integer
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# rect
diff --git a/src/content/reference/en/p5 copy/rectMode.mdx b/src/content/reference/en/p5 copy/rectMode.mdx
new file mode 100644
index 0000000000..5d444cb16e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rectMode.mdx	
@@ -0,0 +1,142 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L184
+title: rectMode
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Changes where rectangles and squares are drawn.</p>
+
+  <p>By default, the first two parameters of
+
+  <a href="/reference/p5/rect/">rect()</a> and <a
+  href="/reference/p5/square/">square()</a>,
+
+  are the x- and y-coordinates of the shape's upper left corner. The next
+  parameters set
+
+  the shape's width and height. This is the same as calling
+
+  <code>rectMode(CORNER)</code>.</p>
+
+  <p><code>rectMode(CORNERS)</code> also uses the first two parameters as the
+  location of
+
+  one of the corners. The next parameters are the location of the opposite
+
+  corner. This mode only works for <a href="/reference/p5/rect/">rect()</a>.</p>
+
+  <p><code>rectMode(CENTER)</code> uses the first two parameters as the x- and
+
+  y-coordinates of the shape's center. The next parameters are its width and
+
+  height.</p>
+
+  <p><code>rectMode(RADIUS)</code> also uses the first two parameters as the x-
+  and
+
+  y-coordinates of the shape's center. The next parameters are
+
+  half of the shape's width and height.</p>
+
+  <p>The argument passed to <code>rectMode()</code> must be written in ALL CAPS
+  because the
+
+  constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and
+  <code>CORNERS</code> are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 184
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(CORNER);
+      fill(255);
+      rect(25, 25, 50, 50);
+
+      rectMode(CORNERS);
+      fill(100);
+      rect(25, 25, 50, 50);
+
+      describe('A small gray square drawn at the top-left corner of a white square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(RADIUS);
+      fill(255);
+      rect(50, 50, 30, 30);
+
+      rectMode(CENTER);
+      fill(100);
+      rect(50, 50, 30, 30);
+
+      describe('A small gray square drawn at the center of a white square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(CORNER);
+      fill(255);
+      square(25, 25, 50);
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      rectMode(RADIUS);
+      fill(255);
+      square(50, 50, 30);
+
+      rectMode(CENTER);
+      fill(100);
+      square(50, 50, 30);
+
+      describe('A small gray square drawn at the center of a white square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either CORNER, CORNERS, CENTER, or RADIUS</p>
+    type: Constant
+chainable: true
+---
+
+
+# rectMode
diff --git a/src/content/reference/en/p5 copy/red.mdx b/src/content/reference/en/p5 copy/red.mdx
new file mode 100644
index 0000000000..819478b246
--- /dev/null
+++ b/src/content/reference/en/p5 copy/red.mdx	
@@ -0,0 +1,158 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1279
+title: red
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the red value of a color.</p>
+
+  <p><code>red()</code> extracts the red value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>By default, <code>red()</code> returns a color's red value in the range 0
+
+  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
+  RGB, it
+
+  returns the red value in the given range.</p>
+line: 1279
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let c = color(175, 100, 220);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 175.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a color array.
+      let c = [175, 100, 220];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 175.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a CSS color string.
+      let c = 'rgb(175, 100, 220)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 175.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use RGB color with values in the range 0-100.
+      colorMode(RGB, 100);
+
+      // Create a p5.Color object.
+      let c = color(69, 39, 86);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'redValue' to 69.
+      let redValue = red(c);
+
+      // Draw the right rectangle.
+      fill(redValue, 0, 0);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is light purple and the right one is red.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the red value.
+  type: Number
+chainable: false
+---
+
+
+# red
diff --git a/src/content/reference/en/p5 copy/redraw.mdx b/src/content/reference/en/p5 copy/redraw.mdx
new file mode 100644
index 0000000000..6519f322f0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/redraw.mdx	
@@ -0,0 +1,117 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L838
+title: redraw
+module: Structure
+submodule: Structure
+file: src/core/structure.js
+description: >
+  <p>Runs the code in <a href="/reference/p5/draw/">draw()</a> once.</p>
+
+  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
+  per
+
+  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
+
+  <a href="/reference/p5/draw/">draw()</a> from repeating. Calling
+  <code>redraw()</code> will
+
+  execute the code in the <a href="/reference/p5/draw/">draw()</a> function a
+  set
+
+  number of times.</p>
+
+  <p>The parameter, <code>n</code>, is optional. If a number is passed, as in
+  <code>redraw(5)</code>,
+
+  then the draw loop will run the given number of times. By default,
+  <code>n</code> is
+
+  1.</p>
+line: 838
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click the canvas to move the circle.
+
+    let x = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe(
+        'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle.
+      circle(x, 50, 20);
+
+      // Increment x.
+      x += 5;
+    }
+
+    // Run the draw loop when the user double-clicks.
+    function doubleClicked() {
+      redraw();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Double-click the canvas to move the circle.
+
+    let x = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Turn off the draw loop.
+      noLoop();
+
+      describe(
+        'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the circle.
+      circle(x, 50, 20);
+
+      // Increment x.
+      x += 5;
+    }
+
+    // Run the draw loop three times when the user double-clicks.
+    function doubleClicked() {
+      redraw(3);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: >
+      <p>number of times to run <a href="#/p5/draw">draw()</a>. Defaults to
+      1.</p>
+    type: Integer
+    optional: true
+chainable: false
+---
+
+
+# redraw
diff --git a/src/content/reference/en/p5 copy/remove.mdx b/src/content/reference/en/p5 copy/remove.mdx
new file mode 100644
index 0000000000..552822f5a3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/remove.mdx	
@@ -0,0 +1,57 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L559
+title: remove
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>Removes the sketch from the web page.</p>
+
+  <p>Calling <code>remove()</code> stops the draw loop and removes any HTML
+  elements
+
+  created by the sketch, including the canvas. A new sketch can be
+
+  created by using the <a href="/reference/p5/p5/">p5()</a> constructor, as in
+
+  <code>new p5()</code>.</p>
+line: 559
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to remove the canvas.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      // Paint the background repeatedly.
+      background(200);
+
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+
+    // Remove the sketch when the user double-clicks.
+    function doubleClicked() {
+      remove();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# remove
diff --git a/src/content/reference/en/p5 copy/removeElements.mdx b/src/content/reference/en/p5 copy/removeElements.mdx
new file mode 100644
index 0000000000..51e712026b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/removeElements.mdx	
@@ -0,0 +1,85 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L256
+title: removeElements
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Removes all elements created by p5.js, including any event handlers.</p>
+
+  <p>There are two exceptions:
+
+  canvas elements created by <a
+  href="/reference/p5/createCanvas/">createCanvas()</a>
+
+  and <a href="/reference/p5/p5.Renderer">p5.Render</a> objects created by
+
+  <a href="/reference/p5/createGraphics/">createGraphics()</a>.</p>
+line: 256
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a paragraph element and place
+      // it in the middle of the canvas.
+      let p = createP('p5*js');
+      p.position(25, 25);
+
+      describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
+    }
+
+    // Remove all elements when the mouse is pressed.
+    function mousePressed() {
+      removeElements();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let slider;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a paragraph element and place
+      // it at the top of the canvas.
+      let p = createP('p5*js');
+      p.position(25, 25);
+
+      // Create a slider element and place it
+      // beneath the canvas.
+      slider = createSlider(0, 255, 200);
+      slider.position(0, 100);
+
+      describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
+    }
+
+    function draw() {
+      // Use the slider value to change the background color.
+      let g = slider.value();
+      background(g);
+    }
+
+    // Remove all elements when the mouse is double-clicked.
+    function doubleClicked() {
+      removeElements();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# removeElements
diff --git a/src/content/reference/en/p5 copy/removeItem.mdx b/src/content/reference/en/p5 copy/removeItem.mdx
new file mode 100644
index 0000000000..ba091b00b4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/removeItem.mdx	
@@ -0,0 +1,97 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L380
+title: removeItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Removes an item from the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs.</p>
+
+  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
+  values in
+
+  <code>localStorage</code> and <code>removeItem()</code> makes it easy to
+  delete them.</p>
+
+  <p>The parameter, <code>key</code>, is the name of the value to remove as a
+  string. For
+
+  example, calling <code>removeItem('size')</code> removes the item with the key
+  <code>size</code>.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 380
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to remove an item from localStorage.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe(
+        'The text "Feist: 1234" written in black on a gray background. The text "Feist: null" appears when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+
+    // Remove the word from localStorage when the user double-clicks.
+    function doubleClicked() {
+      removeItem('score');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: key
+    description: |
+      <p>name of the value to remove.</p>
+    type: String
+chainable: false
+---
+
+
+# removeItem
diff --git a/src/content/reference/en/p5 copy/requestPointerLock.mdx b/src/content/reference/en/p5 copy/requestPointerLock.mdx
new file mode 100644
index 0000000000..621ce063ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/requestPointerLock.mdx	
@@ -0,0 +1,85 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1880
+title: requestPointerLock
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>Locks the mouse pointer to its current position and makes it invisible.</p>
+
+  <p><code>requestPointerLock()</code> allows the mouse to move forever without
+  leaving the
+
+  screen. Calling <code>requestPointerLock()</code> locks the values of
+
+  <a href="/reference/p5/mouseX/">mouseX</a>, <a
+  href="/reference/p5/mouseY/">mouseY</a>,
+
+  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
+  href="/reference/p5/pmouseY/">pmouseY</a>.
+
+  <a href="/reference/p5/movedX/">movedX</a> and <a
+  href="/reference/p5/movedY/">movedY</a>
+
+  continue updating and can be used to get the distance the mouse moved since
+
+  the last frame was drawn. Calling
+
+  <a href="/reference/p5/exitPointerLock/">exitPointerLock()</a> resumes
+  updating the
+
+  mouse system variables.</p>
+
+  <p>Note: Most browsers require an input, such as a click, before calling
+
+  <code>requestPointerLock()</code>. It’s recommended to call
+  <code>requestPointerLock()</code> in
+
+  an event function such as <a
+  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
+line: 1880
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let score = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the text "Score: X" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Update the score.
+      score -= movedY;
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the score.
+      text(`Score: ${score}`, 50, 50);
+    }
+
+    // Lock the pointer when the user double-clicks.
+    function doubleClicked() {
+      requestPointerLock();
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# requestPointerLock
diff --git a/src/content/reference/en/p5 copy/resetMatrix.mdx b/src/content/reference/en/p5 copy/resetMatrix.mdx
new file mode 100644
index 0000000000..af797b49db
--- /dev/null
+++ b/src/content/reference/en/p5 copy/resetMatrix.mdx	
@@ -0,0 +1,52 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L246
+title: resetMatrix
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: |
+  <p>Clears all transformations applied to the coordinate system.</p>
+line: 246
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a blue circle at the coordinates (25, 25).
+      fill('blue');
+      circle(25, 25, 20);
+
+      // Clear all transformations.
+      // The origin is now at the top-left corner.
+      resetMatrix();
+
+      // Draw a red circle at the coordinates (25, 25).
+      fill('red');
+      circle(25, 25, 20);
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# resetMatrix
diff --git a/src/content/reference/en/p5 copy/resetShader.mdx b/src/content/reference/en/p5 copy/resetShader.mdx
new file mode 100644
index 0000000000..850ca0773c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/resetShader.mdx	
@@ -0,0 +1,95 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1628
+title: resetShader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: |
+  <p>Restores the default shaders.</p>
+  <p><code>resetShader()</code> deactivates any shaders previously applied by
+  <a href="/reference/p5/shader/">shader()</a>.</p>
+  <p>Note: Shaders can only be used in WebGL mode.</p>
+line: 1628
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    uniform mat4 uProjectionMatrix;
+    uniform mat4 uModelViewMatrix;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 position = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * position;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision mediump float;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vec2 uv = vTexCoord;
+      vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+      gl_FragColor = vec4(color, 1.0);
+    }
+    `;
+
+    let myShader;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      myShader = createShader(vertSrc, fragSrc);
+
+      describe(
+        'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a box using the p5.Shader.
+      // shader() sets the active shader to myShader.
+      shader(myShader);
+      push();
+      translate(-25, 0, 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(width / 4);
+      pop();
+
+      // Draw a box using the default fill shader.
+      // resetShader() restores the default fill shader.
+      resetShader();
+      fill(255, 0, 0);
+      push();
+      translate(25, 0, 0);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+      box(width / 4);
+      pop();
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# resetShader
diff --git a/src/content/reference/en/p5 copy/resizeCanvas.mdx b/src/content/reference/en/p5 copy/resizeCanvas.mdx
new file mode 100644
index 0000000000..fde0561563
--- /dev/null
+++ b/src/content/reference/en/p5 copy/resizeCanvas.mdx	
@@ -0,0 +1,133 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L221
+title: resizeCanvas
+module: Rendering
+submodule: Rendering
+file: src/core/rendering.js
+description: >
+  <p>Resizes the canvas to a given width and height.</p>
+
+  <p><code>resizeCanvas()</code> immediately clears the canvas and calls
+
+  <a href="/reference/p5/redraw/">redraw()</a>. It's common to call
+  <code>resizeCanvas()</code>
+
+  within the body of <a href="/reference/p5/windowResized/">windowResized()</a>
+  like
+
+  so:</p>
+
+  <pre><code class="language-js">function windowResized() {
+    resizeCanvas(windowWidth, windowHeight);
+  }
+
+  </code></pre>
+
+  <p>The first two parameters, <code>width</code> and <code>height</code>, set
+  the dimensions of the
+
+  canvas. They also the values of the <a href="/reference/p5/width/">width</a>
+  and
+
+  <a href="/reference/p5/height/">height</a> system variables. For example,
+  calling
+
+  <code>resizeCanvas(300, 500)</code> resizes the canvas to 300×500 pixels, then
+  sets
+
+  <a href="/reference/p5/width/">width</a> to 300 and
+
+  <a href="/reference/p5/height/">height</a> 500.</p>
+
+  <p>The third parameter, <code>noRedraw</code>, is optional. If
+  <code>true</code> is passed, as in
+
+  <code>resizeCanvas(300, 500, true)</code>, then the canvas will be canvas to
+  300×500
+
+  pixels but the <a href="/reference/p5/redraw/">redraw()</a> function won't be
+  called
+
+  immediately. By default, <a href="/reference/p5/redraw/">redraw()</a> is
+  called
+
+  immediately when <code>resizeCanvas()</code> finishes executing.</p>
+line: 221
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to resize the canvas.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(180);
+
+      // Draw a circle at the center of the canvas.
+      circle(width / 2, height / 2, 20);
+    }
+
+    // Resize the canvas when the user double-clicks.
+    function doubleClicked() {
+      resizeCanvas(50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Resize the web browser to change the canvas size.
+
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+
+      describe('A white circle drawn on a gray background.');
+    }
+
+    function draw() {
+      background(180);
+
+      // Draw a circle at the center of the canvas.
+      circle(width / 2, height / 2, 20);
+    }
+
+    // Always resize the canvas to fill the browser window.
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: width
+    description: |
+      <p>width of the canvas.</p>
+    type: Number
+  - name: height
+    description: |
+      <p>height of the canvas.</p>
+    type: Number
+  - name: noRedraw
+    description: |
+      <p>whether to delay calling
+                                   <a href="#/p5/redraw">redraw()</a>. Defaults
+                                   to <code>false</code>.</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# resizeCanvas
diff --git a/src/content/reference/en/p5 copy/reverse.mdx b/src/content/reference/en/p5 copy/reverse.mdx
new file mode 100644
index 0000000000..bf7a6571ac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/reverse.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L141
+title: reverse
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Reverses the order of an array, maps to Array.reverse()</p>
+line: 141
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">array.reverse()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'><code>
+    function setup() {
+      let myArray = ['A', 'B', 'C'];
+      print(myArray); // ['A','B','C']
+
+      reverse(myArray);
+      print(myArray); // ['C','B','A']
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to reverse</p>
+    type: Array
+return:
+  description: the reversed list
+  type: Array
+chainable: false
+---
+
+
+# reverse
diff --git a/src/content/reference/en/p5 copy/rotate.mdx b/src/content/reference/en/p5 copy/rotate.mdx
new file mode 100644
index 0000000000..bbb4f8e5f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotate.mdx	
@@ -0,0 +1,226 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L289
+title: rotate
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system.</p>
+
+  <p>By default, the positive x-axis points to the right and the positive y-axis
+
+  points downward. The <code>rotate()</code> function changes this orientation
+  by
+
+  rotating the coordinate system about the origin. Everything drawn after
+
+  <code>rotate()</code> is called will appear to be rotated.</p>
+
+  <p>The first parameter, <code>angle</code>, is the amount to rotate. For
+  example, calling
+
+  <code>rotate(1)</code> rotates the coordinate system clockwise 1 radian which
+  is
+
+  nearly 57˚. <code>rotate()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>The second parameter, <code>axis</code>, is optional. It's used to orient
+  3D rotations
+
+  in WebGL mode. If a <a href="/reference/p5/p5.Vector">p5.Vector</a> is passed,
+  as in
+
+  <code>rotate(QUARTER_PI, myVector)</code>, then the coordinate system will
+  rotate
+
+  <code>QUARTER_PI</code> radians about <code>myVector</code>. If an array of
+  vector components is
+
+  passed, as in <code>rotate(QUARTER_PI, [1, 0, 0])</code>, then the coordinate
+  system
+
+  will rotate <code>QUARTER_PI</code> radians about a vector with the components
+
+  <code>[1, 0, 0]</code>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotate(1)</code>
+
+  twice has the same effect as calling <code>rotate(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotate(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 289
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn.
+      rotate(QUARTER_PI);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotate(QUARTER_PI / 2);
+
+      // Rotate the coordinate system another 1/16 turn.
+      rotate(QUARTER_PI / 2);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe(
+        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn.
+      rotate(45);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotate(angle);
+
+      // Draw a rectangle at coordinates (50, 0).
+      rect(50, 0, 40, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A cube on a gray background. The cube's front face points to the top-right.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn about
+      // the axis [1, 1, 0].
+      let axis = createVector(1, 1, 0);
+      rotate(QUARTER_PI, axis);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe("A cube on a gray background. The cube's front face points to the top-right.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate the coordinate system 1/8 turn about
+      // the axis [1, 1, 0].
+      let axis = [1, 1, 0];
+      rotate(QUARTER_PI, axis);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+  - name: axis
+    description: |
+      <p>axis to rotate about in 3D.</p>
+    type: 'p5.Vector|Number[]'
+    optional: true
+chainable: true
+---
+
+
+# rotate
diff --git a/src/content/reference/en/p5 copy/rotateX.mdx b/src/content/reference/en/p5 copy/rotateX.mdx
new file mode 100644
index 0000000000..c519976bce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotateX.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L470
+title: rotateX
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system about the x-axis in WebGL mode.</p>
+
+  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
+  calling
+
+  <code>rotateX(1)</code> rotates the coordinate system about the x-axis by 1
+  radian.
+
+  <code>rotateX()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotateX(1)</code>
+
+  twice has the same effect as calling <code>rotateX(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotateX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 470
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateX(QUARTER_PI);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateX(QUARTER_PI / 2);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateX(QUARTER_PI / 2);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateX(45);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotateX(angle);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# rotateX
diff --git a/src/content/reference/en/p5 copy/rotateY.mdx b/src/content/reference/en/p5 copy/rotateY.mdx
new file mode 100644
index 0000000000..c7976c5a44
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotateY.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L606
+title: rotateY
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system about the y-axis in WebGL mode.</p>
+
+  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
+  calling
+
+  <code>rotateY(1)</code> rotates the coordinate system about the y-axis by 1
+  radian.
+
+  <code>rotateY()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotateY(1)</code>
+
+  twice has the same effect as calling <code>rotateY(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotateY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 606
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateY(QUARTER_PI);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateY(QUARTER_PI / 2);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateY(QUARTER_PI / 2);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateY(45);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotateY(angle);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# rotateY
diff --git a/src/content/reference/en/p5 copy/rotateZ.mdx b/src/content/reference/en/p5 copy/rotateZ.mdx
new file mode 100644
index 0000000000..317bd7fe88
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotateZ.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L742
+title: rotateZ
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Rotates the coordinate system about the z-axis in WebGL mode.</p>
+
+  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
+  calling
+
+  <code>rotateZ(1)</code> rotates the coordinate system about the z-axis by 1
+  radian.
+
+  <code>rotateZ()</code> interprets angle values using the current
+
+  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>rotateZ(1)</code>
+
+  twice has the same effect as calling <code>rotateZ(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>rotateZ(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to spin.</p>
+line: 742
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateZ(QUARTER_PI);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateZ(QUARTER_PI / 2);
+
+      // Rotate the coordinate system 1/16 turn.
+      rotateZ(QUARTER_PI / 2);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white cube on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system 1/8 turn.
+      rotateZ(45);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white cube rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Rotate the coordinate system a little more each frame.
+      let angle = frameCount * 0.01;
+      rotateZ(angle);
+
+      // Draw a box.
+      box();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle of rotation in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# rotateZ
diff --git a/src/content/reference/en/p5 copy/rotationX.mdx b/src/content/reference/en/p5 copy/rotationX.mdx
new file mode 100644
index 0000000000..98dfd287dc
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotationX.mdx	
@@ -0,0 +1,45 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L131
+title: rotationX
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationX always contains the rotation of the
+  device along the x axis. If the sketch <a href="/reference/p5/angleMode/">
+  angleMode()</a> is set to DEGREES, the value will be -180 to 180. If
+  it is set to RADIANS, the value will be -PI to PI.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 131
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      //rotateZ(radians(rotationZ));
+      rotateX(radians(rotationX));
+      //rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# rotationX
diff --git a/src/content/reference/en/p5 copy/rotationY.mdx b/src/content/reference/en/p5 copy/rotationY.mdx
new file mode 100644
index 0000000000..f06a033bb7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotationY.mdx	
@@ -0,0 +1,45 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L164
+title: rotationY
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationY always contains the rotation of the
+  device along the y axis. If the sketch <a href="/reference/p5/angleMode/">
+  angleMode()</a> is set to DEGREES, the value will be -90 to 90. If
+  it is set to RADIANS, the value will be -PI/2 to PI/2.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 164
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      //rotateZ(radians(rotationZ));
+      //rotateX(radians(rotationX));
+      rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# rotationY
diff --git a/src/content/reference/en/p5 copy/rotationZ.mdx b/src/content/reference/en/p5 copy/rotationZ.mdx
new file mode 100644
index 0000000000..47d6d965aa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/rotationZ.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L197
+title: rotationZ
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: |
+  <p>The system variable rotationZ always contains the rotation of the
+  device along the z axis. If the sketch <a href="/reference/p5/angleMode/">
+  angleMode()</a> is set to DEGREES, the value will be 0 to 360. If
+  it is set to RADIANS, the value will be 0 to 2*PI.</p>
+  <p>Unlike rotationX and rotationY, this variable is available for devices
+  with a built-in compass only.</p>
+  <p>Note: The order the rotations are called is important, ie. if used
+  together, it must be called in the order Z-X-Y or there might be
+  unexpected behaviour.</p>
+line: 197
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(200);
+      rotateZ(radians(rotationZ));
+      //rotateX(radians(rotationX));
+      //rotateY(radians(rotationY));
+      box(200, 200, 200);
+      describe(`red horizontal line right, green vertical line bottom.
+        black background.`);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# rotationZ
diff --git a/src/content/reference/en/p5 copy/round.mdx b/src/content/reference/en/p5 copy/round.mdx
new file mode 100644
index 0000000000..3f6efea6eb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/round.mdx	
@@ -0,0 +1,88 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L861
+title: round
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the integer closest to a number.</p>
+
+  <p>For example, <code>round(133.8)</code> returns the value 134.</p>
+
+  <p>The second parameter, <code>decimals</code>, is optional. It sets the
+  number of
+
+  decimal places to use when rounding. For example, <code>round(12.34, 1)</code>
+  returns
+
+  12.3. <code>decimals</code> is 0 by default.</p>
+line: 861
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Round a number.
+      let x = round(4.2);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the rounded number.
+      text(x, 50, 50);
+
+      describe('The number 4 written in middle of the canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Round a number to 2 decimal places.
+      let x = round(12.782383, 2);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the rounded number.
+      text(x, 50, 50);
+
+      describe('The number 12.78 written in middle of canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to round.</p>
+    type: Number
+  - name: decimals
+    description: |
+      <p>number of decimal places to round to, default is 0.</p>
+    type: Number
+    optional: true
+return:
+  description: rounded number.
+  type: Integer
+chainable: false
+---
+
+
+# round
diff --git a/src/content/reference/en/p5 copy/sampleRate.mdx b/src/content/reference/en/p5 copy/sampleRate.mdx
new file mode 100644
index 0000000000..3608ee22be
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sampleRate.mdx	
@@ -0,0 +1,26 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L811
+title: sampleRate
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Returns a number representing the sample rate, in samples per second,
+  of all sound objects in this audio context. It is determined by the
+  sampling rate of your operating system's sound card, and it is not
+  currently possile to change.
+  It is often 44100, or twice the range of human hearing.</p>
+line: 811
+isConstructor: false
+itemtype: method
+class: p5
+return:
+  description: samplerate samples per second
+  type: Number
+chainable: false
+---
+
+
+# sampleRate
diff --git a/src/content/reference/en/p5 copy/saturation.mdx b/src/content/reference/en/p5 copy/saturation.mdx
new file mode 100644
index 0000000000..7552fe927d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saturation.mdx	
@@ -0,0 +1,201 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1415
+title: saturation
+module: Color
+submodule: Creating & Reading
+file: src/color/creating_reading.js
+description: >
+  <p>Gets the saturation value of a color.</p>
+
+  <p><code>saturation()</code> extracts the saturation value from a
+
+  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
+  components, or
+
+  a CSS color string.</p>
+
+  <p>Saturation is scaled differently in HSB and HSL. By default,
+  <code>saturation()</code>
+
+  returns a color's HSL saturation in the range 0 to 100. If the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
+  returns the
+
+  saturation value in the given mode.</p>
+line: 1415
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a p5.Color object.
+      let c = color(0, 50, 100);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 50.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a color array.
+      let c = [0, 50, 100];
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 100.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // Create a CSS color string.
+      let c = 'rgb(255, 128, 128)';
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 100.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color.
+      colorMode(HSL);
+
+      // Create a p5.Color object.
+      let c = color(0, 100, 75);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 100.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Use HSL color with values in the range 0-255.
+      colorMode(HSL, 255);
+
+      // Create a p5.Color object.
+      let c = color(0, 255, 191.5);
+
+      // Draw the left rectangle.
+      noStroke();
+      fill(c);
+      rect(15, 15, 35, 70);
+
+      // Set 'satValue' to 255.
+      let satValue = saturation(c);
+
+      // Draw the right rectangle.
+      fill(satValue);
+      rect(50, 15, 35, 70);
+
+      describe('Two rectangles. The left one is salmon pink and the right one is white.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: color
+    description: |
+      <p><a href="#/p5.Color">p5.Color</a> object, array of
+                                              color components, or CSS color string.</p>
+    type: 'p5.Color|Number[]|String'
+return:
+  description: the saturation value
+  type: Number
+chainable: false
+---
+
+
+# saturation
diff --git a/src/content/reference/en/p5 copy/save.mdx b/src/content/reference/en/p5 copy/save.mdx
new file mode 100644
index 0000000000..fb8b67cd74
--- /dev/null
+++ b/src/content/reference/en/p5 copy/save.mdx	
@@ -0,0 +1,140 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1835
+title: save
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Saves a given element(image, text, json, csv, wav, or html) to the client's
+
+  computer. The first parameter can be a pointer to element we want to save.
+
+  The element can be one of <a href="/reference/p5/p5.Element">p5.Element</a>,an
+  Array of
+
+  Strings, an Array of JSON, a JSON object, a <a
+  href="/reference/p5/p5.Table">p5.Table
+
+  </a>, a <a href="/reference/p5/p5.Image">p5.Image</a>, or a p5.SoundFile
+  (requires
+
+  p5.sound). The second parameter is a filename (including extension).The
+
+  third parameter is for options specific to this type of object. This method
+
+  will save a file that fits the given parameters.
+
+  If it is called without specifying an element, by default it will save the
+
+  whole canvas as an image file. You can optionally specify a filename as
+
+  the first parameter in such a case.
+
+  <strong>Note that it is not recommended to
+
+  call this method within draw, as it will open a new save dialog on every
+
+  render.</strong></p>
+line: 1835
+isConstructor: false
+itemtype: method
+example:
+  - |2-
+
+     <div class="norender"><code>
+     // Saves the canvas as an image
+     cnv = createCanvas(300, 300);
+     save(cnv, 'myCanvas.jpg');
+
+     // Saves the canvas as an image by default
+     save('myCanvas.jpg');
+     describe('An example for saving a canvas as an image.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves p5.Image as an image
+     img = createImage(10, 10);
+     save(img, 'myImage.png');
+     describe('An example for saving a p5.Image element as an image.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves p5.Renderer object as an image
+     obj = createGraphics(100, 100);
+     save(obj, 'myObject.png');
+     describe('An example for saving a p5.Renderer element.');
+     </code></div>
+
+     <div class="norender"><code>
+     let myTable = new p5.Table();
+     // Saves table as html file
+     save(myTable, 'myTable.html');
+
+     // Comma Separated Values
+     save(myTable, 'myTable.csv');
+
+     // Tab Separated Values
+     save(myTable, 'myTable.tsv');
+
+     describe(`An example showing how to save a table in formats of
+     HTML, CSV and TSV.`);
+     </code></div>
+
+     <div class="norender"><code>
+     let myJSON = { a: 1, b: true };
+
+     // Saves pretty JSON
+     save(myJSON, 'my.json');
+
+     // Optimizes JSON filesize
+     save(myJSON, 'my.json', true);
+
+     describe('An example for saving JSON to a txt file with some extra arguments.');
+     </code></div>
+
+     <div class="norender"><code>
+     // Saves array of strings to text file with line breaks after each item
+     let arrayOfStrings = ['a', 'b'];
+     save(arrayOfStrings, 'my.txt');
+     describe(`An example for saving an array of strings to text file
+     with line breaks.`);
+     </code></div>
+class: p5
+params:
+  - name: objectOrFilename
+    description: |
+      <p>If filename is provided, will
+                                                 save canvas as an image with
+                                                 either png or jpg extension
+                                                 depending on the filename.
+                                                 If object is provided, will
+                                                 save depending on the object
+                                                 and filename (see examples
+                                                 above).</p>
+    type: Object|String
+    optional: true
+  - name: filename
+    description: |
+      <p>If an object is provided as the first
+                                   parameter, then the second parameter
+                                   indicates the filename,
+                                   and should include an appropriate
+                                   file extension (see examples above).</p>
+    type: String
+    optional: true
+  - name: options
+    description: |
+      <p>Additional options depend on
+                                filetype. For example, when saving JSON,
+                                <code>true</code> indicates that the
+                                output will be optimized for filesize,
+                                rather than readability.</p>
+    type: Boolean|String
+    optional: true
+chainable: false
+---
+
+
+# save
diff --git a/src/content/reference/en/p5 copy/saveCanvas.mdx b/src/content/reference/en/p5 copy/saveCanvas.mdx
new file mode 100644
index 0000000000..159bf101ce
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveCanvas.mdx	
@@ -0,0 +1,166 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L153
+title: saveCanvas
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Saves the current canvas as an image.</p>
+
+  <p>By default, <code>saveCanvas()</code> saves the canvas as a PNG image
+  called
+
+  <code>untitled.png</code>.</p>
+
+  <p>The first parameter, <code>filename</code>, is optional. It's a string that
+  sets the
+
+  file's name. If a file extension is included, as in
+
+  <code>saveCanvas('drawing.png')</code>, then the image will be saved using
+  that
+
+  format.</p>
+
+  <p>The second parameter, <code>extension</code>, is also optional. It sets the
+  files format.
+
+  Either <code>'png'</code>, <code>'webp'</code>, or <code>'jpg'</code> can be
+  used. For example, <code>saveCanvas('drawing', 'jpg')</code>
+
+  saves the canvas to a file called <code>drawing.jpg</code>.</p>
+
+  <p>Note: The browser will either save the file immediately or prompt the user
+
+  with a dialogue window.</p>
+line: 153
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(255);
+
+      // Save the canvas to 'untitled.png'.
+      saveCanvas();
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas('myCanvas.jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas('myCanvas', 'jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'untitled.png'.
+      saveCanvas(cnv);
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas(cnv, 'myCanvas.jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+
+    <div class='norender'>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      background(255);
+
+      // Save the canvas to 'myCanvas.jpg'.
+      saveCanvas(cnv, 'myCanvas', 'jpg');
+
+      describe('A white square.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 153
+    params:
+      - name: selectedCanvas
+        description: |
+          <p>reference to a
+                                                                   specific HTML5 canvas element.</p>
+        type: p5.Framebuffer|p5.Element|HTMLCanvasElement
+      - name: filename
+        description: |
+          <p>file name. Defaults to 'untitled'.</p>
+        type: String
+        optional: true
+      - name: extension
+        description: >
+          <p>file extension, either 'png', 'webp', or 'jpg'. Defaults to
+          'png'.</p>
+        type: String
+        optional: true
+  - line: 267
+    params:
+      - name: filename
+        description: ''
+        type: String
+        optional: true
+      - name: extension
+        description: ''
+        type: String
+        optional: true
+chainable: false
+---
+
+
+# saveCanvas
diff --git a/src/content/reference/en/p5 copy/saveFrames.mdx b/src/content/reference/en/p5 copy/saveFrames.mdx
new file mode 100644
index 0000000000..72b8d7d987
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveFrames.mdx	
@@ -0,0 +1,175 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L561
+title: saveFrames
+module: Image
+submodule: Image
+file: src/image/image.js
+description: >
+  <p>Captures a sequence of frames from the canvas that can be saved as
+  images.</p>
+
+  <p><code>saveFrames()</code> creates an array of frame objects. Each frame is
+  stored as
+
+  an object with its file type, file name, and image data as a string. For
+
+  example, the first saved frame might have the following properties:</p>
+
+  <p><code>{ ext: 'png', filename: 'frame0', imageData:
+  'data:image/octet-stream;base64, abc123' }</code>.</p>
+
+  <p>The first parameter, <code>filename</code>, sets the prefix for the file
+  names. For
+
+  example, setting the prefix to <code>'frame'</code> would generate the image
+  files
+
+  <code>frame0.png</code>, <code>frame1.png</code>, and so on.</p>
+
+  <p>The second parameter, <code>extension</code>, sets the file type to either
+  <code>'png'</code> or
+
+  <code>'jpg'</code>.</p>
+
+  <p>The third parameter, <code>duration</code>, sets the duration to record in
+  seconds.
+
+  The maximum duration is 15 seconds.</p>
+
+  <p>The fourth parameter, <code>framerate</code>, sets the number of frames to
+  record per
+
+  second. The maximum frame rate value is 22. Limits are placed on
+  <code>duration</code>
+
+  and <code>framerate</code> to avoid using too much memory. Recording large
+  canvases
+
+  can easily crash sketches or even web browsers.</p>
+
+  <p>The fifth parameter, <code>callback</code>, is optional. If a function is
+  passed,
+
+  image files won't be saved by default. The callback function can be used
+
+  to process an array containing the data for each captured frame. The array
+
+  of image data contains a sequence of objects with three properties for each
+
+  frame: <code>imageData</code>, <code>filename</code>, and
+  <code>extension</code>.</p>
+
+  <p>Note: Frames are downloaded as individual image files by default.</p>
+line: 561
+isConstructor: false
+itemtype: method
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A square repeatedly changes color from blue to pink.');
+    }
+
+
+    function draw() {
+      let r = frameCount % 255;
+      let g = 50;
+      let b = 100;
+      background(r, g, b);
+    }
+
+
+    // Save the frames when the user presses the 's' key.
+
+    function keyPressed() {
+      if (key === 's') {
+        saveFrames('frame', 'png', 1, 5);
+      }
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A square repeatedly changes color from blue to pink.');
+    }
+
+
+    function draw() {
+      let r = frameCount % 255;
+      let g = 50;
+      let b = 100;
+      background(r, g, b);
+    }
+
+
+    // Print 5 frames when the user presses the mouse.
+
+    function mousePressed() {
+      saveFrames('frame', 'png', 1, 5, printFrames);
+    }
+
+
+    // Prints an array of objects containing raw image data, filenames, and
+    extensions.
+
+    function printFrames(frames) {
+      for (let frame of frames) {
+        print(frame);
+      }
+    }
+
+    </code>
+
+    </div>
+class: p5
+params:
+  - name: filename
+    description: |
+      <p>prefix of file name.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>file extension, either 'jpg' or 'png'.</p>
+    type: String
+  - name: duration
+    description: >
+      <p>duration in seconds to record. This parameter will be constrained to be
+      less or equal to 15.</p>
+    type: Number
+  - name: framerate
+    description: >
+      <p>number of frames to save per second. This parameter will be constrained
+      to be less or equal to 22.</p>
+    type: Number
+  - name: callback
+    description: |
+      <p>callback function that will be executed
+                                       to handle the image data. This function
+                                       should accept an array as argument. The
+                                       array will contain the specified number of
+                                       frames of objects. Each object has three
+                                       properties: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>
+    type: Function(Array)
+    optional: true
+chainable: false
+---
+
+
+# saveFrames
diff --git a/src/content/reference/en/p5 copy/saveGif.mdx b/src/content/reference/en/p5 copy/saveGif.mdx
new file mode 100644
index 0000000000..9b520993ac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveGif.mdx	
@@ -0,0 +1,119 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L204
+title: saveGif
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Generates a gif from a sketch and saves it to a file.</p>
+
+  <p><code>saveGif()</code> may be called in <a
+  href="/reference/p5/setup/">setup()</a> or at any
+
+  point while a sketch is running.</p>
+
+  <p>The first parameter, <code>fileName</code>, sets the gif's file name.</p>
+
+  <p>The second parameter, <code>duration</code>, sets the gif's duration in
+  seconds.</p>
+
+  <p>The third parameter, <code>options</code>, is optional. If an object is
+  passed,
+
+  <code>saveGif()</code> will use its properties to customize the gif.
+  <code>saveGif()</code>
+
+  recognizes the properties <code>delay</code>, <code>units</code>,
+  <code>silent</code>,
+
+  <code>notificationDuration</code>, and <code>notificationID</code>.</p>
+line: 204
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the circle.
+      let c = frameCount % 255;
+      fill(c);
+
+      // Display the circle.
+      circle(50, 50, 25);
+    }
+
+    // Save a 5-second gif when the user presses the 's' key.
+    function keyPressed() {
+      if (key === 's') {
+        saveGif('mySketch', 5);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the circle.
+      let c = frameCount % 255;
+      fill(c);
+
+      // Display the circle.
+      circle(50, 50, 25);
+    }
+
+    // Save a 5-second gif when the user presses the 's' key.
+    // Wait 1 second after the key press before recording.
+    function keyPressed() {
+      if (key === 's') {
+        saveGif('mySketch', 5, { delay: 1 });
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: filename
+    description: |
+      <p>file name of gif.</p>
+    type: String
+  - name: duration
+    description: |
+      <p>duration in seconds to capture from the sketch.</p>
+    type: Number
+  - name: options
+    description: |
+      <p>an object that can contain five more properties:
+                       <code>delay</code>, a Number specifying how much time to wait before recording;
+                       <code>units</code>, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
+                       <code>silent</code>, a Boolean that defines presence of progress notifications. By default it’s <code>false</code>;
+                       <code>notificationDuration</code>, a Number that defines how long in seconds the final notification
+                       will live. By default it's <code>0</code>, meaning the notification will never be removed;
+                       <code>notificationID</code>, a String that specifies the id of the notification's DOM element. By default it’s <code>'progressBar’</code>.</p>
+    type: Object
+    optional: true
+chainable: false
+---
+
+
+# saveGif
diff --git a/src/content/reference/en/p5 copy/saveJSON.mdx b/src/content/reference/en/p5 copy/saveJSON.mdx
new file mode 100644
index 0000000000..d5e664d0b2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveJSON.mdx	
@@ -0,0 +1,170 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1979
+title: saveJSON
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Saves an <code>Object</code> or <code>Array</code> to a JSON file.</p>
+
+  <p>JavaScript Object Notation
+
+  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
+  target="_blank">JSON</a>)
+
+  is a standard format for sending data between applications. The format is
+
+  based on JavaScript objects which have keys and values. JSON files store
+
+  data in an object with strings as keys. Values can be strings, numbers,
+
+  Booleans, arrays, <code>null</code>, or other objects.</p>
+
+  <p>The first parameter, <code>json</code>, is the data to save. The data can
+  be an array,
+
+  as in <code>[1, 2, 3]</code>, or an object, as in
+
+  <code>{ x: 50, y: 50, color: 'deeppink' }</code>.</p>
+
+  <p>The second parameter, <code>filename</code>, is a string that sets the
+  file's name.
+
+  For example, calling <code>saveJSON([1, 2, 3], 'data.json')</code> saves the
+  array
+
+  <code>[1, 2, 3]</code> to a file called <code>data.json</code> on the user's
+  computer.</p>
+
+  <p>The third parameter, <code>optimize</code>, is optional. If
+  <code>true</code> is passed, as in
+
+  <code>saveJSON([1, 2, 3], 'data.json', true)</code>, then all unneeded
+  whitespace will
+
+  be removed to reduce the file size.</p>
+
+  <p>Note: The browser will either save the file immediately or prompt the user
+
+  with a dialogue window.</p>
+line: 1979
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        let data = [1, 2, 3];
+
+        // Save the JSON file.
+        saveJSON(data, 'numbers.json');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an object.
+        let data = { x: mouseX, y: mouseY };
+
+        // Save the JSON file.
+        saveJSON(data, 'state.json');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an object.
+        let data = { x: mouseX, y: mouseY };
+
+        // Save the JSON file and reduce its size.
+        saveJSON(data, 'state.json', true);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: json
+    description: |
+      <p>data to save.</p>
+    type: Array|Object
+  - name: filename
+    description: |
+      <p>name of the file to be saved.</p>
+    type: String
+  - name: optimize
+    description: |
+      <p>whether to trim unneeded whitespace. Defaults
+                                   to <code>true</code>.</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# saveJSON
diff --git a/src/content/reference/en/p5 copy/saveSound.mdx b/src/content/reference/en/p5 copy/saveSound.mdx
new file mode 100644
index 0000000000..3e8e7d0667
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveSound.mdx	
@@ -0,0 +1,35 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L1145
+title: saveSound
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p>Save a p5.SoundFile as a .wav file. The browser will prompt the user
+
+  to download the file to their device.
+
+  For uploading audio to a server, use
+
+  <a
+  href="/docs/reference/#/p5.SoundFile/saveBlob/"><code>p5.SoundFile.saveBlob</code></a>.</p>
+line: 1145
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: soundFile
+    description: |
+      <p>p5.SoundFile that you wish to save</p>
+    type: p5.SoundFile
+  - name: fileName
+    description: |
+      <p>name of the resulting .wav file.</p>
+    type: String
+chainable: false
+---
+
+
+# saveSound
diff --git a/src/content/reference/en/p5 copy/saveStrings.mdx b/src/content/reference/en/p5 copy/saveStrings.mdx
new file mode 100644
index 0000000000..36c6c448a2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveStrings.mdx	
@@ -0,0 +1,185 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2118
+title: saveStrings
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Saves an <code>Array</code> of <code>String</code>s to a file, one per
+  line.</p>
+
+  <p>The first parameter, <code>list</code>, is an array with the strings to
+  save.</p>
+
+  <p>The second parameter, <code>filename</code>, is a string that sets the
+  file's name.
+
+  For example, calling <code>saveStrings(['0', '01', '011'], 'data.txt')</code>
+  saves
+
+  the array <code>['0', '01', '011']</code> to a file called
+  <code>data.txt</code> on the user's
+
+  computer.</p>
+
+  <p>The third parameter, <code>extension</code>, is optional. If a string is
+  passed, as in
+
+  <code>saveStrings(['0', '01', '0</code>1'], 'data', 'txt')`, the second
+  parameter will
+
+  be interpreted as the file name and the third parameter as the extension.</p>
+
+  <p>The fourth parameter, <code>isCRLF</code>, is also optional, If
+  <code>true</code> is passed, as
+
+  in <code>saveStrings(['0', '01', '011'], 'data', 'txt', true)</code>, then two
+
+  characters, <code>\r\n</code> , will be added to the end of each string to
+  create new
+
+  lines in the saved file. <code>\r</code> is a carriage return (CR) and
+  <code>\n</code> is a line
+
+  feed (LF). By default, only <code>\n</code> (line feed) is added to each
+  string in
+
+  order to create new lines.</p>
+
+  <p>Note: The browser will either save the file immediately or prompt the user
+
+  with a dialogue window.</p>
+line: 2118
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        let data = ['0', '01', '011'];
+
+        // Save the text file.
+        saveStrings(data, 'data.txt');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        // ASCII art courtesy Wikipedia:
+        // https://en.wikipedia.org/wiki/ASCII_art
+        let data = [' (\\_/) ', "(='.'=)", '(")_(")'];
+
+        // Save the text file.
+        saveStrings(data, 'cat', 'txt');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Display instructions.
+      text('Double-click to save', 5, 50, 90);
+
+      describe('The text "Double-click to save" written in black on a gray background.');
+    }
+
+    // Save the file when the user double-clicks.
+    function doubleClicked() {
+      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+        // Create an array.
+        //   +--+
+        //  /  /|
+        // +--+ +
+        // |  |/
+        // +--+
+        let data = ['  +--+', ' /  /|', '+--+ +', '|  |/', '+--+'];
+
+        // Save the text file.
+        // Use CRLF for line endings.
+        saveStrings(data, 'box', 'txt', true);
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>data to save.</p>
+    type: 'String[]'
+  - name: filename
+    description: |
+      <p>name of file to be saved.</p>
+    type: String
+  - name: extension
+    description: |
+      <p>format to use for the file.</p>
+    type: String
+    optional: true
+  - name: isCRLF
+    description: |
+      <p>whether to add <code>\r\n</code> to the end of each
+                                  string. Defaults to <code>false</code>.</p>
+    type: Boolean
+    optional: true
+chainable: false
+---
+
+
+# saveStrings
diff --git a/src/content/reference/en/p5 copy/saveTable.mdx b/src/content/reference/en/p5 copy/saveTable.mdx
new file mode 100644
index 0000000000..dd6e64ea4d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/saveTable.mdx	
@@ -0,0 +1,70 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2275
+title: saveTable
+module: IO
+submodule: Output
+file: src/io/files.js
+description: >
+  <p>Writes the contents of a <a href="/reference/p5/p5.Table">Table</a> object
+  to a file. Defaults to a
+
+  text file with comma-separated-values ('csv') but can also
+
+  use tab separation ('tsv'), or generate an HTML table ('html').
+
+  The file saving process and location of the saved file will
+
+  vary between web browsers.</p>
+line: 2275
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+     let table;
+
+     function setup() {
+     table = new p5.Table();
+
+     table.addColumn('id');
+     table.addColumn('species');
+     table.addColumn('name');
+
+     let newRow = table.addRow();
+     newRow.setNum('id', table.getRowCount() - 1);
+     newRow.setString('species', 'Panthera leo');
+     newRow.setString('name', 'Lion');
+
+     // To save, un-comment next line then click 'run'
+     // saveTable(table, 'new.csv');
+
+     describe('no image displayed');
+     }
+
+     // Saves the following to a file called 'new.csv':
+     // id,species,name
+     // 0,Panthera leo,Lion
+     </code></div>
+class: p5
+params:
+  - name: Table
+    description: |
+      <p>the <a href="#/p5.Table">Table</a> object to save to a file</p>
+    type: p5.Table
+  - name: filename
+    description: |
+      <p>the filename to which the Table should be saved</p>
+    type: String
+  - name: options
+    description: |
+      <p>can be one of "tsv", "csv", or "html"</p>
+    type: String
+    optional: true
+chainable: false
+---
+
+
+# saveTable
diff --git a/src/content/reference/en/p5 copy/scale.mdx b/src/content/reference/en/p5 copy/scale.mdx
new file mode 100644
index 0000000000..a459477d80
--- /dev/null
+++ b/src/content/reference/en/p5 copy/scale.mdx	
@@ -0,0 +1,231 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L878
+title: scale
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Scales the coordinate system.</p>
+
+  <p>By default, shapes are drawn at their original scale. A rectangle that's 50
+
+  pixels wide appears to take up half the width of a 100 pixel-wide canvas.
+
+  The <code>scale()</code> function can shrink or stretch the coordinate system
+  so that
+
+  shapes appear at different sizes. There are two ways to call
+  <code>scale()</code> with
+
+  parameters that set the scale factor(s).</p>
+
+  <p>The first way to call <code>scale()</code> uses numbers to set the amount
+  of scaling.
+
+  The first parameter, <code>s</code>, sets the amount to scale each axis. For
+  example,
+
+  calling <code>scale(2)</code> stretches the x-, y-, and z-axes by a factor of
+  2. The
+
+  next two parameters, <code>y</code> and <code>z</code>, are optional. They set
+  the amount to
+
+  scale the y- and z-axes. For example, calling <code>scale(2, 0.5, 1)</code>
+  stretches
+
+  the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
+
+  leaves the z-axis unchanged.</p>
+
+  <p>The second way to call <code>scale()</code> uses a <a
+  href="/reference/p5/p5.Vector">p5.Vector</a>
+
+  object to set the scale factors. For example, calling
+  <code>scale(myVector)</code>
+
+  uses the x-, y-, and z-components of <code>myVector</code> to set the amount
+  of
+
+  scaling along the x-, y-, and z-axes. Doing so is the same as calling
+
+  <code>scale(myVector.x, myVector.y, myVector.z)</code>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+  <code>scale(1)</code>
+
+  twice has the same effect as calling <code>scale(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and <a
+  href="/reference/p5/pop/">pop()</a> functions
+
+  can be used to isolate transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>scale(2)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't cause
+
+  shapes to grow continuously.</p>
+line: 878
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Scale the coordinate system by a factor of 0.5.
+      scale(0.5);
+
+      // Draw a square at (30, 20).
+      // It appears at (15, 10) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle and a square drawn in white on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Scale the coordinate system by factors of
+      // 0.5 along the x-axis and
+      // 1.3 along the y-axis.
+      scale(0.5, 1.3);
+
+      // Draw a square at (30, 20).
+      // It appears as a rectangle at (15, 26) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A rectangle and a square drawn in white on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a square at (30, 20).
+      square(30, 20, 40);
+
+      // Create a p5.Vector object.
+      let v = createVector(0.5, 1.3);
+
+      // Scale the coordinate system by factors of
+      // 0.5 along the x-axis and
+      // 1.3 along the y-axis.
+      scale(v);
+
+      // Draw a square at (30, 20).
+      // It appears as a rectangle at (15, 26) after scaling.
+      square(30, 20, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw the red sphere.
+      fill('red');
+      box();
+
+      // Scale the coordinate system by factors of
+      // 0.5 along the x-axis and
+      // 1.3 along the y-axis and
+      // 2 along the z-axis.
+      scale(0.5, 1.3, 2);
+
+      // Draw the blue sphere.
+      fill('blue');
+      box();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 878
+    params:
+      - name: s
+        description: |
+          <p>amount to scale along the positive x-axis.</p>
+        type: 'Number|p5.Vector|Number[]'
+      - name: 'y'
+        description: >
+          <p>amount to scale along the positive y-axis. Defaults to
+          <code>s</code>.</p>
+        type: Number
+        optional: true
+      - name: z
+        description: >
+          <p>amount to scale along the positive z-axis. Defaults to
+          <code>y</code>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1039
+    params:
+      - name: scales
+        description: |
+          <p>vector whose components should be used to scale.</p>
+        type: 'p5.Vector|Number[]'
+    chainable: 1
+chainable: true
+---
+
+
+# scale
diff --git a/src/content/reference/en/p5 copy/second.mdx b/src/content/reference/en/p5 copy/second.mdx
new file mode 100644
index 0000000000..e29042801c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/second.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L277
+title: second
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current second as a number from 0–59.</p>
+line: 277
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current second.
+      let s = second();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the second.
+      text(`Current second: ${s}`, 10, 50, 80);
+
+      describe(`The text 'Current second: ${s}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current second between 0 and 59.
+  type: Integer
+chainable: false
+---
+
+
+# second
diff --git a/src/content/reference/en/p5 copy/select.mdx b/src/content/reference/en/p5 copy/select.mdx
new file mode 100644
index 0000000000..0ace11ab0d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/select.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L21
+title: select
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Searches the page for the first element that matches the given
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
+  target="_blank">CSS selector string</a>.</p>
+
+  <p>The selector string can be an ID, class, tag name, or a combination.
+
+  <code>select()</code> returns a <a
+  href="/reference/p5/p5.Element">p5.Element</a> object if it
+
+  finds a match and <code>null</code> if not.</p>
+
+  <p>The second parameter, <code>container</code>, is optional. It specifies a
+  container to
+
+  search within. <code>container</code> can be CSS selector string, a
+
+  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
+  target="_blank">HTMLElement</a> object.</p>
+line: 21
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+      background(200);
+
+      // Select the canvas by its tag.
+      let cnv = select('canvas');
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      // Add a class attribute to the canvas.
+      cnv.class('pinkborder');
+
+      background(200);
+
+      // Select the canvas by its class.
+      cnv = select('.pinkborder');
+
+      // Style its border.
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      let cnv = createCanvas(100, 100);
+
+      // Set the canvas' ID.
+      cnv.id('mycanvas');
+
+      background(200);
+
+      // Select the canvas by its ID.
+      cnv = select('#mycanvas');
+
+      // Style its border.
+      cnv.style('border', '5px deeppink dashed');
+
+      describe('A gray square with a dashed pink border.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: selectors
+    description: |
+      <p>CSS selector string of element to search for.</p>
+    type: String
+  - name: container
+    description: |
+      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
+    type: String|p5.Element|HTMLElement
+    optional: true
+return:
+  description: <a href="#/p5.Element">p5.Element</a> containing the element.
+  type: p5.Element|null
+chainable: false
+---
+
+
+# select
diff --git a/src/content/reference/en/p5 copy/selectAll.mdx b/src/content/reference/en/p5 copy/selectAll.mdx
new file mode 100644
index 0000000000..ccd1f3329f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/selectAll.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L109
+title: selectAll
+module: DOM
+submodule: DOM
+file: src/dom/dom.js
+description: >
+  <p>Searches the page for all elements that matches the given
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
+  target="_blank">CSS selector string</a>.</p>
+
+  <p>The selector string can be an ID, class, tag name, or a combination.
+
+  <code>selectAll()</code> returns an array of <a
+  href="/reference/p5/p5.Element">p5.Element</a>
+
+  objects if it finds any matches and an empty array if none are found.</p>
+
+  <p>The second parameter, <code>container</code>, is optional. It specifies a
+  container to
+
+  search within. <code>container</code> can be CSS selector string, a
+
+  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
+  target="_blank">HTMLElement</a> object.</p>
+line: 109
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create three buttons.
+      createButton('1');
+      createButton('2');
+      createButton('3');
+
+      // Select the buttons by their tag.
+      let buttons = selectAll('button');
+
+      // Position the buttons.
+      for (let i = 0; i < 3; i += 1) {
+        buttons[i].position(0, i * 30);
+      }
+
+      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Create three buttons and position them.
+      let b1 = createButton('1');
+      b1.position(0, 0);
+      let b2 = createButton('2');
+      b2.position(0, 30);
+      let b3 = createButton('3');
+      b3.position(0, 60);
+
+      // Add a class attribute to each button.
+      b1.class('btn');
+      b2.class('btn btn-pink');
+      b3.class('btn');
+
+      // Select the buttons by their class.
+      let buttons = selectAll('.btn');
+      let pinkButtons = selectAll('.btn-pink');
+
+      // Style the selected buttons.
+      buttons.forEach(setFont);
+      pinkButtons.forEach(setColor);
+
+      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
+    }
+
+    // Set a button's font to Comic Sans MS.
+    function setFont(btn) {
+      btn.style('font-family', 'Comic Sans MS');
+    }
+
+    // Set a button's background and font color.
+    function setColor(btn) {
+      btn.style('background', 'deeppink');
+      btn.style('color', 'white');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: selectors
+    description: |
+      <p>CSS selector string of element to search for.</p>
+    type: String
+  - name: container
+    description: |
+      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
+    type: String|p5.Element|HTMLElement
+    optional: true
+return:
+  description: >-
+    array of <a href="#/p5.Element">p5.Element</a>s containing any elements
+    found.
+  type: 'p5.Element[]'
+chainable: false
+---
+
+
+# selectAll
diff --git a/src/content/reference/en/p5 copy/set.mdx b/src/content/reference/en/p5 copy/set.mdx
new file mode 100644
index 0000000000..caa9e75a66
--- /dev/null
+++ b/src/content/reference/en/p5 copy/set.mdx	
@@ -0,0 +1,157 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L997
+title: set
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Sets the color of a pixel or draws an image to the canvas.</p>
+
+  <p><code>set()</code> is easy to use but it's not as fast as
+
+  <a href="/reference/p5/pixels/">pixels</a>. Use <a
+  href="/reference/p5/pixels/">pixels</a>
+
+  to set many pixel values.</p>
+
+  <p><code>set()</code> interprets the first two parameters as x- and
+  y-coordinates. It
+
+  interprets the last parameter as a grayscale value, a <code>[R, G, B,
+  A]</code> pixel
+
+  array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or a
+
+  <a href="/reference/p5/p5.Image">p5.Image</a> object. If an image is passed,
+  the first
+
+  two parameters set the coordinates for the image's upper-left corner,
+
+  regardless of the current <a
+  href="/reference/p5/imageMode/">imageMode()</a>.</p>
+
+  <p><a href="/reference/p5/updatePixels/">updatePixels()</a> must be called
+  after using
+
+  <code>set()</code> for changes to appear.</p>
+line: 997
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Set four pixels to black.
+      set(30, 20, 0);
+      set(85, 20, 0);
+      set(85, 75, 0);
+      set(30, 75, 0);
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Four black dots arranged in a square drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a p5.Color object.
+      let black = color(0);
+
+      // Set four pixels to black.
+      set(30, 20, black);
+      set(85, 20, black);
+      set(85, 75, black);
+      set(30, 75, black);
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Four black dots arranged in a square drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(255);
+
+      // Draw a horizontal color gradient.
+      for (let x = 0; x < 100; x += 1) {
+        for (let y = 0; y < 100; y += 1) {
+          // Calculate the grayscale value.
+          let c = map(x, 0, 100, 0, 255);
+
+          // Set the pixel using the grayscale value.
+          set(x, y, c);
+        }
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('A horizontal color gradient from black to white.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use the image to set all pixels.
+      set(0, 0, img);
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('An image of a mountain landscape.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the pixel.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the pixel.</p>
+    type: Number
+  - name: c
+    description: |
+      <p>grayscale value | pixel array |
+                                     <a href="#/p5.Color">p5.Color</a> object | <a href="#/p5.Image">p5.Image</a> to copy.</p>
+    type: 'Number|Number[]|Object'
+chainable: false
+---
+
+
+# set
diff --git a/src/content/reference/en/p5 copy/setAttributes.mdx b/src/content/reference/en/p5 copy/setAttributes.mdx
new file mode 100644
index 0000000000..368bc49c6c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setAttributes.mdx	
@@ -0,0 +1,163 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.RendererGL.js#L118
+title: setAttributes
+module: Rendering
+submodule: Rendering
+file: src/webgl/p5.RendererGL.js
+description: |
+  <p>Set attributes for the WebGL Drawing context.
+  This is a way of adjusting how the WebGL
+  renderer works to fine-tune the display and performance.</p>
+  <p>Note that this will reinitialize the drawing context
+  if called after the WebGL canvas is made.</p>
+  <p>If an object is passed as the parameter, all attributes
+  not declared in the object will be set to defaults.</p>
+  <p>The available attributes are:
+  <br>
+  alpha - indicates if the canvas contains an alpha buffer
+  default is true</br></p>
+  <p>depth - indicates whether the drawing buffer has a depth buffer
+  of at least 16 bits - default is true</p>
+  <p>stencil - indicates whether the drawing buffer has a stencil buffer
+  of at least 8 bits</p>
+  <p>antialias - indicates whether or not to perform anti-aliasing
+  default is false (true in Safari)</p>
+  <p>premultipliedAlpha - indicates that the page compositor will assume
+  the drawing buffer contains colors with pre-multiplied alpha
+  default is true</p>
+  <p>preserveDrawingBuffer - if true the buffers will not be cleared and
+  and will preserve their values until cleared or overwritten by author
+  (note that p5 clears automatically on draw loop)
+  default is true</p>
+  <p>perPixelLighting - if true, per-pixel lighting will be used in the
+  lighting shader otherwise per-vertex lighting is used.
+  default is true.</p>
+  <p>version - either 1 or 2, to specify which WebGL version to ask for. By
+  default, WebGL 2 will be requested. If WebGL2 is not available, it will
+  fall back to WebGL 1. You can check what version is used with by looking at
+  the global <code>webglVersion</code> property.</p>
+line: 118
+isConstructor: false
+itemtype: method
+alt: a rotating cube with smoother edges
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      push();
+      rotateZ(frameCount * 0.02);
+      rotateX(frameCount * 0.02);
+      rotateY(frameCount * 0.02);
+      fill(0, 0, 0);
+      box(50);
+      pop();
+    }
+    </code>
+    </div>
+    <br>
+    Now with the antialias attribute set to true.
+    <br>
+    <div>
+    <code>
+    function setup() {
+      setAttributes('antialias', true);
+      createCanvas(100, 100, WEBGL);
+    }
+
+    function draw() {
+      background(255);
+      push();
+      rotateZ(frameCount * 0.02);
+      rotateX(frameCount * 0.02);
+      rotateY(frameCount * 0.02);
+      fill(0, 0, 0);
+      box(50);
+      pop();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // press the mouse button to disable perPixelLighting
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+      noStroke();
+      fill(255);
+    }
+
+    let lights = [
+      { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+      { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+      { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+      { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+      { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+      { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+    ];
+
+    function draw() {
+      let t = millis() / 1000 + 1000;
+      background(0);
+      directionalLight(color('#222'), 1, 1, 1);
+
+      for (let i = 0; i < lights.length; i++) {
+        let light = lights[i];
+        pointLight(
+          color(light.c),
+          p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+        );
+      }
+
+      specularMaterial(255);
+      sphere(width * 0.1);
+
+      rotateX(t * 0.77);
+      rotateY(t * 0.83);
+      rotateZ(t * 0.91);
+      torus(width * 0.3, width * 0.07, 24, 10);
+    }
+
+    function mousePressed() {
+      setAttributes('perPixelLighting', false);
+      noStroke();
+      fill(255);
+    }
+    function mouseReleased() {
+      setAttributes('perPixelLighting', true);
+      noStroke();
+      fill(255);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 118
+    params:
+      - name: key
+        description: |
+          <p>Name of attribute</p>
+        type: String
+      - name: value
+        description: |
+          <p>New value of named attribute</p>
+        type: Boolean
+  - line: 262
+    params:
+      - name: obj
+        description: |
+          <p>object with key-value pairs</p>
+        type: Object
+chainable: false
+---
+
+
+# setAttributes
diff --git a/src/content/reference/en/p5 copy/setBPM.mdx b/src/content/reference/en/p5 copy/setBPM.mdx
new file mode 100644
index 0000000000..d2e94a6c5d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setBPM.mdx	
@@ -0,0 +1,29 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L9084
+title: setBPM
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>Set the global tempo, in beats per minute, for all
+  p5.Parts. This method will impact all active p5.Parts.</p>
+line: 9084
+isConstructor: false
+itemtype: method
+class: p5
+params:
+  - name: BPM
+    description: |
+      <p>Beats Per Minute</p>
+    type: Number
+  - name: rampTime
+    description: |
+      <p>Seconds from now</p>
+    type: Number
+chainable: false
+---
+
+
+# setBPM
diff --git a/src/content/reference/en/p5 copy/setCamera.mdx b/src/content/reference/en/p5 copy/setCamera.mdx
new file mode 100644
index 0000000000..bd4727d474
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setCamera.mdx	
@@ -0,0 +1,81 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L3897
+title: setCamera
+module: 3D
+submodule: Camera
+file: src/webgl/p5.Camera.js
+description: >
+  <p>Sets the current (active) camera of a 3D sketch.</p>
+
+  <p><code>setCamera()</code> allows for switching between multiple cameras
+  created with
+
+  <a href="/reference/p5/createCamera/">createCamera()</a>.</p>
+
+  <p>Note: <code>setCamera()</code> can only be used in WebGL mode.</p>
+line: 3897
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Double-click to toggle between cameras.
+
+    let cam1;
+    let cam2;
+    let usingCam1 = true;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create the first camera.
+      // Keep its default settings.
+      cam1 = createCamera();
+
+      // Create the second camera.
+      // Place it at the top-left.
+      // Point it at the origin.
+      cam2 = createCamera();
+      cam2.setPosition(400, -400, 800);
+      cam2.lookAt(0, 0, 0);
+
+      // Set the current camera to cam1.
+      setCamera(cam1);
+
+      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw the box.
+      box();
+    }
+
+    // Toggle the current camera when the user double-clicks.
+    function doubleClicked() {
+      if (usingCam1 === true) {
+        setCamera(cam2);
+        usingCam1 = false;
+      } else {
+        setCamera(cam1);
+        usingCam1 = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: cam
+    description: |
+      <p>camera that should be made active.</p>
+    type: p5.Camera
+chainable: false
+---
+
+
+# setCamera
diff --git a/src/content/reference/en/p5 copy/setMoveThreshold.mdx b/src/content/reference/en/p5 copy/setMoveThreshold.mdx
new file mode 100644
index 0000000000..3b90fb5f4d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setMoveThreshold.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L417
+title: setMoveThreshold
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>
+  function is used to set the movement threshold for
+
+  the <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function. The
+  default threshold is set to 0.5.</p>
+line: 417
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // You will need to move the device incrementally further
+    // the closer the square's color gets to white in order to change the value.
+
+    let value = 0;
+    let threshold = 0.5;
+    function setup() {
+      setMoveThreshold(threshold);
+    }
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device moves`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      threshold = threshold + 0.1;
+      if (value > 255) {
+        value = 0;
+        threshold = 30;
+      }
+      setMoveThreshold(threshold);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>The threshold value</p>
+    type: Number
+chainable: false
+---
+
+
+# setMoveThreshold
diff --git a/src/content/reference/en/p5 copy/setShakeThreshold.mdx b/src/content/reference/en/p5 copy/setShakeThreshold.mdx
new file mode 100644
index 0000000000..30af9eadb0
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setShakeThreshold.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L459
+title: setShakeThreshold
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>The <a href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>
+  function is used to set the movement threshold for
+
+  the <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function. The
+  default threshold is set to 30.</p>
+line: 459
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    // Run this example on a mobile device
+    // You will need to shake the device more firmly
+    // the closer the box's fill gets to white in order to change the value.
+
+    let value = 0;
+    let threshold = 30;
+    function setup() {
+      setShakeThreshold(threshold);
+    }
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device is being shaked`);
+    }
+    function deviceMoved() {
+      value = value + 5;
+      threshold = threshold + 5;
+      if (value > 255) {
+        value = 0;
+        threshold = 30;
+      }
+      setShakeThreshold(threshold);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>The threshold value</p>
+    type: Number
+chainable: false
+---
+
+
+# setShakeThreshold
diff --git a/src/content/reference/en/p5 copy/setup.mdx b/src/content/reference/en/p5 copy/setup.mdx
new file mode 100644
index 0000000000..6a71ea6a0f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/setup.mdx	
@@ -0,0 +1,111 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L87
+title: setup
+module: Structure
+submodule: Structure
+file: src/core/main.js
+description: >
+  <p>A function that's called once when the sketch begins running.</p>
+
+  <p>Declaring the function <code>setup()</code> sets a code block to run once
+
+  automatically when the sketch starts running. It's used to perform
+
+  setup tasks such as creating the canvas and initializing variables:</p>
+
+  <pre><code class="language-js">function setup() {
+    // Code to run once at the start of the sketch.
+  }
+
+  </code></pre>
+
+  <p>Code placed in <code>setup()</code> will run once before code placed in
+
+  <a href="/reference/p5/draw/">draw()</a> begins looping. If the
+
+  <a href="/reference/p5/preload/">preload()</a> is declared, then
+  <code>setup()</code> will
+
+  run immediately after <a href="/reference/p5/preload/">preload()</a> finishes
+
+  loading assets.</p>
+
+  <p>Note: <code>setup()</code> doesn’t have to be declared, but it’s common
+  practice to do so.</p>
+line: 87
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw the circle.
+      circle(50, 50, 40);
+
+      describe('A white circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Paint the background once.
+      background(200);
+
+      describe(
+        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+      );
+    }
+
+    function draw() {
+      // Draw circles repeatedly.
+      circle(mouseX, mouseY, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/bricks.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Draw the image.
+      image(img, 0, 0);
+
+      describe(
+        'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'
+      );
+    }
+
+    function draw() {
+      // Style the circle.
+      noStroke();
+
+      // Draw the circle.
+      circle(mouseX, mouseY, 10);
+    }
+    </code>
+    </div>
+class: p5
+chainable: false
+---
+
+
+# setup
diff --git a/src/content/reference/en/p5 copy/shader.mdx b/src/content/reference/en/p5 copy/shader.mdx
new file mode 100644
index 0000000000..c8213d9261
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shader.mdx	
@@ -0,0 +1,244 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L682
+title: shader
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the <a href="/reference/p5/p5.Shader">p5.Shader</a> object to apply
+  while drawing.</p>
+
+  <p>Shaders are programs that run on the graphics processing unit (GPU). They
+
+  can process many pixels or vertices at the same time, making them fast for
+
+  many graphics tasks. They’re written in a language called
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
+  target="_blank">GLSL</a>
+
+  and run along with the rest of the code in a sketch.
+
+  <a href="/reference/p5/p5.Shader">p5.Shader</a> objects can be created using
+  the
+
+  <a href="/reference/p5/createShader/">createShader()</a> and
+
+  <a href="/reference/p5/loadShader/">loadShader()</a> functions.</p>
+
+  <p>The parameter, <code>s</code>, is the <a
+  href="/reference/p5/p5.Shader">p5.Shader</a> object to
+
+  apply. For example, calling <code>shader(myShader)</code> applies
+  <code>myShader</code> to
+
+  process each pixel on the canvas. The shader will be used for:</p>
+
+  <ul>
+
+  <li>Fills when a texture is enabled if it includes a uniform
+  <code>sampler2D</code>.</li>
+
+  <li>Fills when lights are enabled if it includes the attribute
+  <code>aNormal</code>, or if it has any of the following uniforms:
+  <code>uUseLighting</code>, <code>uAmbientLightCount</code>,
+  <code>uDirectionalLightCount</code>, <code>uPointLightCount</code>,
+  <code>uAmbientColor</code>, <code>uDirectionalDiffuseColors</code>,
+  <code>uDirectionalSpecularColors</code>, <code>uPointLightLocation</code>,
+  <code>uPointLightDiffuseColors</code>, <code>uPointLightSpecularColors</code>,
+  <code>uLightingDirection</code>, or <code>uSpecular</code>.</li>
+
+  <li>Fills whenever there are no lights or textures.</li>
+
+  <li>Strokes if it includes the uniform <code>uStrokeWeight</code>.</li>
+
+  </ul>
+
+  <p>The source code from a <a href="/reference/p5/p5.Shader">p5.Shader</a>
+  object's
+
+  fragment and vertex shaders will be compiled the first time it's passed to
+
+  <code>shader()</code>. See
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compileShader/"
+  target="_blank">MDN</a>
+
+  for more information about compiling shaders.</p>
+
+  <p>Calling <a href="/reference/p5/resetShader/">resetShader()</a> restores a
+  sketch’s
+
+  default shaders.</p>
+
+  <p>Note: Shaders can only be used in WebGL mode.</p>
+line: 682
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div modernizr='webgl'>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    // Create a string with the vertex shader program.
+    // The vertex shader is called for each vertex.
+    let vertSrc = `
+    precision highp float;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 positionVec4 = vec4(aPosition, 1.0);
+      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+    }
+    `;
+
+    // Create a string with the fragment shader program.
+    // The fragment shader is called for each pixel.
+    let fragSrc = `
+    precision highp float;
+
+    void main() {
+      // Set each pixel's RGBA value to yellow.
+      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+    }
+    `;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Shader object.
+      let shaderProgram = createShader(vertSrc, fragSrc);
+
+      // Apply the p5.Shader object.
+      shader(shaderProgram);
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a plane as a drawing surface.
+      plane(100, 100);
+
+      describe('A yellow square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let mandelbrot;
+
+    // Load the shader and create a p5.Shader object.
+    function preload() {
+      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Use the p5.Shader object.
+      shader(mandelbrot);
+
+      // Set the shader uniform p to an array.
+      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+
+      describe('A fractal image zooms in and out of focus.');
+    }
+
+    function draw() {
+      // Set the shader uniform r to a value that oscillates between 0 and 2.
+      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+
+      // Add a quad as a display surface for the shader.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Note: A "uniform" is a global variable within a shader program.
+
+    let redGreen;
+    let orangeBlue;
+    let showRedGreen = false;
+
+    // Load the shader and create two separate p5.Shader objects.
+    function preload() {
+      redGreen = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
+      orangeBlue = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Initialize the redGreen shader.
+      shader(redGreen);
+
+      // Set the redGreen shader's center and background color.
+      redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
+      redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
+
+      // Initialize the orangeBlue shader.
+      shader(orangeBlue);
+
+      // Set the orangeBlue shader's center and background color.
+      orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
+      orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
+
+      describe(
+        'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'
+      );
+    }
+
+    function draw() {
+      // Update the offset values for each shader.
+      // Move orangeBlue vertically.
+      // Move redGreen horizontally.
+      orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);
+      redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);
+
+      if (showRedGreen === true) {
+        shader(redGreen);
+      } else {
+        shader(orangeBlue);
+      }
+
+      // Style the drawing surface.
+      noStroke();
+
+      // Add a quad as a drawing surface.
+      quad(-1, -1, 1, -1, 1, 1, -1, 1);
+    }
+
+    // Toggle between shaders when the user double-clicks.
+    function doubleClicked() {
+      showRedGreen = !showRedGreen;
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: s
+    description: |
+      <p><a href="#/p5.Shader">p5.Shader</a> object
+                           to apply.</p>
+    type: p5.Shader
+chainable: true
+---
+
+
+# shader
diff --git a/src/content/reference/en/p5 copy/shearX.mdx b/src/content/reference/en/p5 copy/shearX.mdx
new file mode 100644
index 0000000000..244fea83e2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shearX.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1069
+title: shearX
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Shears the x-axis so that shapes appear skewed.</p>
+
+  <p>By default, the x- and y-axes are perpendicular. The <code>shearX()</code>
+  function
+
+  transforms the coordinate system so that x-coordinates are translated while
+
+  y-coordinates are fixed.</p>
+
+  <p>The first parameter, <code>angle</code>, is the amount to shear. For
+  example, calling
+
+  <code>shearX(1)</code> transforms all x-coordinates using the formula
+
+  <code>x = x + y * tan(angle)</code>. <code>shearX()</code> interprets angle
+  values using the
+
+  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+
+  <code>shearX(1)</code> twice has the same effect as calling
+  <code>shearX(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and
+
+  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
+
+  transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>shearX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't
+
+  cause shapes to shear continuously.</p>
+line: 1069
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the x-axis.
+      shearX(QUARTER_PI);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the x-axis.
+      shearX(45);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle to shear by in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# shearX
diff --git a/src/content/reference/en/p5 copy/shearY.mdx b/src/content/reference/en/p5 copy/shearY.mdx
new file mode 100644
index 0000000000..007a8b4bfa
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shearY.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1146
+title: shearY
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Shears the y-axis so that shapes appear skewed.</p>
+
+  <p>By default, the x- and y-axes are perpendicular. The <code>shearY()</code>
+  function
+
+  transforms the coordinate system so that y-coordinates are translated while
+
+  x-coordinates are fixed.</p>
+
+  <p>The first parameter, <code>angle</code>, is the amount to shear. For
+  example, calling
+
+  <code>shearY(1)</code> transforms all y-coordinates using the formula
+
+  <code>y = y + x * tan(angle)</code>. <code>shearY()</code> interprets angle
+  values using the
+
+  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+
+  <code>shearY(1)</code> twice has the same effect as calling
+  <code>shearY(2)</code> once. The
+
+  <a href="/reference/p5/push/">push()</a> and
+
+  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
+
+  transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>shearY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
+  function won't
+
+  cause shapes to shear continuously.</p>
+line: 1146
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the y-axis.
+      shearY(QUARTER_PI);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Use degrees.
+      angleMode(DEGREES);
+
+      describe('A white quadrilateral on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Shear the coordinate system along the y-axis.
+      shearY(45);
+
+      // Draw the square.
+      square(0, 0, 50);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>angle to shear by in the current <a
+      href="#/p5/angleMode">angleMode()</a>.</p>
+    type: Number
+chainable: true
+---
+
+
+# shearY
diff --git a/src/content/reference/en/p5 copy/shininess.mdx b/src/content/reference/en/p5 copy/shininess.mdx
new file mode 100644
index 0000000000..a093e246c8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shininess.mdx	
@@ -0,0 +1,86 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2998
+title: shininess
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the amount of gloss ("shininess") of a
+
+  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
+
+  <p>Shiny materials focus reflected light more than dull materials.
+
+  <code>shininess()</code> affects the way materials reflect light sources
+  including
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>,
+
+  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
+
+  <p>The parameter, <code>shine</code>, is a number that sets the amount of
+  shininess.
+
+  <code>shine</code> must be greater than 1, which is its default value.</p>
+line: 2998
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn on a red ambient light.
+      ambientLight(255, 0, 0);
+
+      // Get the mouse's coordinates.
+      let mx = mouseX - 50;
+      let my = mouseY - 50;
+
+      // Turn on a white point light that follows the mouse.
+      pointLight(255, 255, 255, mx, my, 50);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a specular material with a grayscale value.
+      specularMaterial(255);
+
+      // Draw the left sphere with low shininess.
+      translate(-25, 0, 0);
+      shininess(10);
+      sphere(20);
+
+      // Draw the right sphere with high shininess.
+      translate(50, 0, 0);
+      shininess(100);
+      sphere(20);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: shine
+    description: |
+      <p>amount of shine.</p>
+    type: Number
+chainable: true
+---
+
+
+# shininess
diff --git a/src/content/reference/en/p5 copy/shorten.mdx b/src/content/reference/en/p5 copy/shorten.mdx
new file mode 100644
index 0000000000..a1018f7fb8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shorten.mdx	
@@ -0,0 +1,44 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L161
+title: shorten
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Decreases an array by one element and returns the shortened array,
+  maps to Array.pop().</p>
+line: 161
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">array.pop()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = ['A', 'B', 'C'];
+      print(myArray); // ['A', 'B', 'C']
+      let newArray = shorten(myArray);
+      print(myArray); // ['A','B','C']
+      print(newArray); // ['A','B']
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to shorten</p>
+    type: Array
+return:
+  description: shortened Array
+  type: Array
+chainable: false
+---
+
+
+# shorten
diff --git a/src/content/reference/en/p5 copy/shuffle.mdx b/src/content/reference/en/p5 copy/shuffle.mdx
new file mode 100644
index 0000000000..a4ead252ef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/shuffle.mdx	
@@ -0,0 +1,132 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L185
+title: shuffle
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: >
+  <p>Shuffles the elements of an array.</p>
+
+  <p>The first parameter, <code>array</code>, is the array to be shuffled. For
+  example,
+
+  calling <code>shuffle(myArray)</code> will shuffle the elements of
+  <code>myArray</code>. By
+
+  default, the original array won’t be modified. Instead, a copy will be
+
+  created, shuffled, and returned.</p>
+
+  <p>The second parameter, <code>modify</code>, is optional. If
+  <code>true</code> is passed, as in
+
+  <code>shuffle(myArray, true)</code>, then the array will be shuffled in place
+  without
+
+  making a copy.</p>
+line: 185
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of colors.
+      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+
+      // Create a shuffled copy of the array.
+      let shuffledColors = shuffle(colors);
+
+      // Draw  a row of circles using the original array.
+      for (let i = 0; i < colors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 12.5;
+
+        // Style the circle.
+        let c = colors[i];
+        fill(c);
+
+        // Draw the circle.
+        circle(x, 33, 10);
+      }
+
+      // Draw  a row of circles using the original array.
+      for (let i = 0; i < shuffledColors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 12.5;
+
+        // Style the circle.
+        let c = shuffledColors[i];
+        fill(c);
+
+        // Draw the circle.
+        circle(x, 67, 10);
+      }
+
+      describe(
+        'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of colors.
+      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
+
+      // Shuffle the array.
+      shuffle(colors, true);
+
+      // Draw  a row of circles using the original array.
+      for (let i = 0; i < colors.length; i += 1) {
+        // Calculate the x-coordinate.
+        let x = (i + 1) * 12.5;
+
+        // Style the circle.
+        let c = colors[i];
+        fill(c);
+
+        // Draw the circle.
+        circle(x, 50, 10);
+      }
+
+      describe(
+        'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: array
+    description: |
+      <p>array to shuffle.</p>
+    type: Array
+  - name: bool
+    description: >
+      <p>if <code>true</code>, shuffle the original array in place. Defaults to
+      <code>false</code>.</p>
+    type: Boolean
+    optional: true
+return:
+  description: shuffled array.
+  type: Array
+chainable: false
+---
+
+
+# shuffle
diff --git a/src/content/reference/en/p5 copy/sin.mdx b/src/content/reference/en/p5 copy/sin.mdx
new file mode 100644
index 0000000000..7f0cba972d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sin.mdx	
@@ -0,0 +1,107 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L363
+title: sin
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the sine of an angle.</p>
+
+  <p><code>sin()</code> is useful for many geometric tasks in creative coding.
+  The values
+
+  returned oscillate between -1 and 1 as the input angle increases.
+  <code>sin()</code>
+
+  calculates the sine of an angle, using radians by default, or according to
+
+  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+  DEGREES).</p>
+line: 363
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white ball on a string oscillates up and down.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the coordinates.
+      let x = 50;
+      let y = 30 * sin(frameCount * 0.05) + 50;
+
+      // Draw the oscillator.
+      line(50, y, x, y);
+      circle(x, y, 20);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form a wave pattern.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 30 * sin(x * 0.1) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots form an infinity symbol.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = 30 * cos(frameCount * 0.1) + 50;
+      let y = 10 * sin(frameCount * 0.2) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>the angle, in radians by default, or according to
+
+      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+      DEGREES).</p>
+    type: Number
+return:
+  description: sine of the angle.
+  type: Number
+chainable: false
+---
+
+
+# sin
diff --git a/src/content/reference/en/p5 copy/smooth.mdx b/src/content/reference/en/p5 copy/smooth.mdx
new file mode 100644
index 0000000000..2c42bda62c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/smooth.mdx	
@@ -0,0 +1,94 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L303
+title: smooth
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Draws certain features with smooth (antialiased) edges.</p>
+
+  <p><code>smooth()</code> is active by default. In 2D mode,
+
+  <a href="/reference/p5/noSmooth/">noSmooth()</a> is helpful for scaling up
+  images
+
+  without blurring. The functions don't affect shapes or fonts.</p>
+
+  <p>In WebGL mode, <a href="/reference/p5/noSmooth/">noSmooth()</a> causes all
+  shapes to
+
+  be drawn with jagged (aliased) edges. The functions don't affect images or
+
+  fonts.</p>
+line: 303
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let heart;
+
+    // Load a pixelated heart image from an image data string.
+    function preload() {
+      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      background(50);
+
+      // Antialiased hearts.
+      image(heart, 10, 10);
+      image(heart, 20, 10, 16, 16);
+      image(heart, 40, 10, 32, 32);
+
+      // Aliased hearts.
+      noSmooth();
+      image(heart, 10, 60);
+      image(heart, 20, 60, 16, 16);
+      image(heart, 40, 60, 32, 32);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A white circle on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Disable smoothing.
+      noSmooth();
+
+      background(200);
+
+      circle(0, 0, 80);
+
+      describe('A pixelated white circle on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+chainable: true
+---
+
+
+# smooth
diff --git a/src/content/reference/en/p5 copy/sort.mdx b/src/content/reference/en/p5 copy/sort.mdx
new file mode 100644
index 0000000000..c2249d926a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sort.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L300
+title: sort
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Sorts an array of numbers from smallest to largest, or puts an array of
+  words in alphabetical order. The original array is not modified; a
+  re-ordered array is returned. The count parameter states the number of
+  elements to sort. For example, if there are 12 elements in an array and
+  count is set to 5, only the first 5 elements in the array will be sorted.</p>
+line: 300
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">array.sort()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let words = ['banana', 'apple', 'pear', 'lime'];
+      print(words); // ['banana', 'apple', 'pear', 'lime']
+      let count = 4; // length of array
+
+      words = sort(words, count);
+      print(words); // ['apple', 'banana', 'lime', 'pear']
+    }
+    </code></div>
+    <div class = 'norender'><code>
+    function setup() {
+      let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
+      print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
+      let count = 5; // Less than the length of the array
+
+      numbers = sort(numbers, count);
+      print(numbers); // [1,2,5,6,14,9,8,12]
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to sort</p>
+    type: Array
+  - name: count
+    description: |
+      <p>number of elements to sort, starting from 0</p>
+    type: Integer
+    optional: true
+return:
+  description: the sorted list
+  type: Array
+chainable: false
+---
+
+
+# sort
diff --git a/src/content/reference/en/p5 copy/soundFormats.mdx b/src/content/reference/en/p5 copy/soundFormats.mdx
new file mode 100644
index 0000000000..6bc28fe726
--- /dev/null
+++ b/src/content/reference/en/p5 copy/soundFormats.mdx	
@@ -0,0 +1,51 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L925
+title: soundFormats
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: |
+  <p>List the SoundFile formats that you will include. LoadSound
+  will search your directory for these extensions, and will pick
+  a format that is compatable with the client's web browser.
+  <a href="http://media.io/">Here</a> is a free online file
+  converter.</p>
+line: 925
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    function preload() {
+      // set the global sound formats
+      soundFormats('mp3', 'ogg');
+
+      // load either beatbox.mp3, or .ogg, depending on browser
+      mySound = loadSound('/assets/beatbox.mp3');
+    }
+
+    function setup() {
+         let cnv = createCanvas(100, 100);
+         background(220);
+         text('sound loaded! tap to play', 10, 20, width - 20);
+         cnv.mousePressed(function() {
+           mySound.play();
+         });
+       }
+    </code></div>
+class: p5
+params:
+  - name: formats
+    description: |
+      <p>i.e. 'mp3', 'wav', 'ogg'</p>
+    type: String
+    optional: true
+    multiple: true
+chainable: false
+---
+
+
+# soundFormats
diff --git a/src/content/reference/en/p5 copy/soundOut.mdx b/src/content/reference/en/p5 copy/soundOut.mdx
new file mode 100644
index 0000000000..2f418a829c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/soundOut.mdx	
@@ -0,0 +1,26 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L782
+title: soundOut
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >
+  <p><code>p5.soundOut</code> is the p5.sound final output bus. It sends output
+  to
+
+  the destination of this window's web audio context. It contains
+
+  Web Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),
+
+  and Gain Nodes for <code>.input</code> and <code>.output</code>.</p>
+line: 782
+isConstructor: false
+itemtype: property
+class: p5
+type: Object
+---
+
+
+# soundOut
diff --git a/src/content/reference/en/p5 copy/specularColor.mdx b/src/content/reference/en/p5 copy/specularColor.mdx
new file mode 100644
index 0000000000..b23e834ca7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/specularColor.mdx	
@@ -0,0 +1,308 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L205
+title: specularColor
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Sets the specular color for lights.</p>
+
+  <p><code>specularColor()</code> affects lights that bounce off a surface in a
+  preferred
+
+  direction. These lights include
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>, and
+
+  <a href="/reference/p5/spotLight/">spotLight()</a>. The function helps to
+  create
+
+  highlights on <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects that
+  are
+
+  styled with <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.
+  If a
+
+  geometry does not use
+
+  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>, then
+
+  <code>specularColor()</code> will have no effect.</p>
+
+  <p>Note: <code>specularColor()</code> doesn’t affect lights that bounce in all
+
+  directions, including <a href="/reference/p5/ambientLight/">ambientLight()</a>
+  and
+
+  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
+
+  <p>There are three ways to call <code>specularColor()</code> with optional
+  parameters to
+
+  set the specular highlight color.</p>
+
+  <p>The first way to call <code>specularColor()</code> has two optional
+  parameters, <code>gray</code>
+
+  and <code>alpha</code>. Grayscale and alpha values between 0 and 255, as in
+
+  <code>specularColor(50)</code> or <code>specularColor(50, 80)</code>, can be
+  passed to set the
+
+  specular highlight color.</p>
+
+  <p>The second way to call <code>specularColor()</code> has one optional
+  parameter,
+
+  <code>color</code>. A <a href="/reference/p5/p5.Color">p5.Color</a> object, an
+  array of color
+
+  values, or a CSS color string can be passed to set the specular highlight
+
+  color.</p>
+
+  <p>The third way to call <code>specularColor()</code> has four optional
+  parameters, <code>v1</code>,
+
+  <code>v2</code>, <code>v3</code>, and <code>alpha</code>. RGBA, HSBA, or HSLA
+  values, as in
+
+  <code>specularColor(255, 0, 0, 80)</code>, can be passed to set the specular
+  highlight
+
+  color. Color values will be interpreted using the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 205
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere drawn on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // No specular color.
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to add a point light.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Style the sphere.
+      noStroke();
+      specularColor(100);
+      specularMaterial(255, 255, 255);
+
+      // Control the light.
+      if (isLit === true) {
+        // Add a white point light from the top-right.
+        pointLight(255, 255, 255, 30, -20, 40);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the point light when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a specular highlight.
+      // Use a p5.Color object.
+      let c = color('dodgerblue');
+      specularColor(c);
+
+      // Add a white point light from the top-right.
+      pointLight(255, 255, 255, 30, -20, 40);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a white specular material.
+      specularMaterial(255, 255, 255);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a specular highlight.
+      // Use a CSS color string.
+      specularColor('#1E90FF');
+
+      // Add a white point light from the top-right.
+      pointLight(255, 255, 255, 30, -20, 40);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a white specular material.
+      specularMaterial(255, 255, 255);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Add a specular highlight.
+      // Use RGB values.
+      specularColor(30, 144, 255);
+
+      // Add a white point light from the top-right.
+      pointLight(255, 255, 255, 30, -20, 40);
+
+      // Style the sphere.
+      noStroke();
+
+      // Add a white specular material.
+      specularMaterial(255, 255, 255);
+
+      // Draw the sphere.
+      sphere(30);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 205
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+    chainable: 1
+  - line: 423
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 and 255.</p>
+        type: Number
+    chainable: 1
+  - line: 429
+    params:
+      - name: value
+        description: |
+          <p>color as a CSS string.</p>
+        type: String
+    chainable: 1
+  - line: 435
+    params:
+      - name: values
+        description: |
+          <p>color as an array of RGBA, HSBA, or HSLA
+                                          values.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 442
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# specularColor
diff --git a/src/content/reference/en/p5 copy/specularMaterial.mdx b/src/content/reference/en/p5 copy/specularMaterial.mdx
new file mode 100644
index 0000000000..57e8977cf5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/specularMaterial.mdx	
@@ -0,0 +1,311 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2743
+title: specularMaterial
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the specular color of shapes’ surface material.</p>
+
+  <p>The <code>specularMaterial()</code> color sets the components of light
+  color that
+
+  glossy coats on shapes will reflect. For example, calling
+
+  <code>specularMaterial(255, 255, 0)</code> would cause a shape to reflect red
+  and
+
+  green light, but not blue light.</p>
+
+  <p>Unlike <a href="/reference/p5/ambientMaterial/">ambientMaterial()</a>,
+
+  <code>specularMaterial()</code> will reflect the full color of light sources
+  including
+
+  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
+
+  <a href="/reference/p5/pointLight/">pointLight()</a>,
+
+  and <a href="/reference/p5/spotLight/">spotLight()</a>. This is what gives it
+  shapes
+
+  their "shiny" appearance. The material’s shininess can be controlled by the
+
+  <a href="/reference/p5/shininess/">shininess()</a> function.</p>
+
+  <p><code>specularMaterial()</code> can be called three ways with different
+  parameters to
+
+  set the material’s color.</p>
+
+  <p>The first way to call <code>specularMaterial()</code> has one parameter,
+  <code>gray</code>.
+
+  Grayscale values between 0 and 255, as in <code>specularMaterial(50)</code>,
+  can be
+
+  passed to set the material’s color. Higher grayscale values make shapes
+
+  appear brighter.</p>
+
+  <p>The second way to call <code>specularMaterial()</code> has one parameter,
+  <code>color</code>. A
+
+  <a href="/reference/p5/p5.Color">p5.Color> object, an array of color values,
+  or a CSS
+
+  color string, as in <code>specularMaterial('magenta')</code>, can be passed to
+  set the
+
+  material’s color.</a></p>
+
+  <p>The third way to call <code>specularMaterial()</code> has four parameters,
+  <code>v1</code>, <code>v2</code>,
+
+  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
+  HSBA, or HSLA values can be
+
+  passed to set the material’s colors, as in <code>specularMaterial(255, 0,
+  0)</code> or
+
+  <code>specularMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
+  using
+
+  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
+line: 2743
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy coat if the user has double-clicked.
+      if (isGlossy === true) {
+        specularMaterial(255);
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy green coat if the user has double-clicked.
+      if (isGlossy === true) {
+        specularMaterial(0, 255, 0);
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy green coat if the user has double-clicked.
+      if (isGlossy === true) {
+        // Create a p5.Color object.
+        let c = color('green');
+        specularMaterial(c);
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click the canvas to apply a specular material.
+
+    let isGlossy = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on a white point light at the top-right.
+      pointLight(255, 255, 255, 30, -40, 30);
+
+      // Add a glossy green coat if the user has double-clicked.
+      if (isGlossy === true) {
+        specularMaterial('#00FF00');
+        shininess(50);
+      }
+
+      // Style the torus.
+      noStroke();
+      fill(255, 0, 0);
+
+      // Draw the torus.
+      torus(30);
+    }
+
+    // Make the torus glossy when the user double-clicks.
+    function doubleClicked() {
+      isGlossy = true;
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 2743
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value between 0 (black) and 255 (white).</p>
+        type: Number
+      - name: alpha
+        description: |
+          <p>alpha value in the current current
+                                   <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2966
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in
+                                          the current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value
+                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value
+                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2978
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                     an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+    chainable: 1
+chainable: true
+---
+
+
+# specularMaterial
diff --git a/src/content/reference/en/p5 copy/sphere.mdx b/src/content/reference/en/p5 copy/sphere.mdx
new file mode 100644
index 0000000000..c2ceca44ad
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sphere.mdx	
@@ -0,0 +1,165 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1227
+title: sphere
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a sphere.</p>
+
+  <p>A sphere is a 3D shape with triangular faces that connect to form a round
+
+  surface. Spheres with few faces look like crystals. Spheres with many faces
+
+  have smooth surfaces and look like balls.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>sphere(20)</code>, it sets the radius of the sphere. By default,
+  <code>radius</code> is 50.</p>
+
+  <p>The second parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>sphere(20, 5)</code>, it sets the number of triangle subdivisions
+  to use
+
+  along the x-axis. All 3D shapes are made by connecting triangles to form
+
+  their surfaces. By default, <code>detailX</code> is 24.</p>
+
+  <p>The third parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>sphere(20, 5, 2)</code>, it sets the number of triangle
+  subdivisions to
+
+  use along the y-axis. All 3D shapes are made by connecting triangles to
+
+  form their surfaces. By default, <code>detailY</code> is 16.</p>
+
+  <p>Note: <code>sphere()</code> can only be used in WebGL mode.</p>
+line: 1227
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      sphere();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      // Set its radius to 30.
+      sphere(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      // Set its radius to 30.
+      // Set its detailX to 6.
+      sphere(30, 6);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the sphere.
+      // Set its radius to 30.
+      // Set its detailX to 24.
+      // Set its detailY to 4.
+      sphere(30, 24, 4);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the sphere. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# sphere
diff --git a/src/content/reference/en/p5 copy/splice.mdx b/src/content/reference/en/p5 copy/splice.mdx
new file mode 100644
index 0000000000..866bc4ddef
--- /dev/null
+++ b/src/content/reference/en/p5 copy/splice.mdx	
@@ -0,0 +1,58 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L346
+title: splice
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Inserts a value or an array of values into an existing array. The first
+  parameter specifies the initial array to be modified, and the second
+  parameter defines the data to be inserted. The third parameter is an index
+  value which specifies the array position from which to insert data.
+  (Remember that array index numbering starts at zero, so the first position
+  is 0, the second position is 1, and so on.)</p>
+line: 346
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">array.splice()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = [0, 1, 2, 3, 4];
+      let insArray = ['A', 'B', 'C'];
+      print(myArray); // [0, 1, 2, 3, 4]
+      print(insArray); // ['A','B','C']
+
+      splice(myArray, insArray, 3);
+      print(myArray); // [0,1,2,'A','B','C',3,4]
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to splice into</p>
+    type: Array
+  - name: value
+    description: |
+      <p>value to be spliced in</p>
+    type: Any
+  - name: position
+    description: |
+      <p>in the array from which to insert data</p>
+    type: Integer
+return:
+  description: the list
+  type: Array
+chainable: false
+---
+
+
+# splice
diff --git a/src/content/reference/en/p5 copy/split.mdx b/src/content/reference/en/p5 copy/split.mdx
new file mode 100644
index 0000000000..60b7944313
--- /dev/null
+++ b/src/content/reference/en/p5 copy/split.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L690
+title: split
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Splits a <code>String</code> into pieces and returns an array containing
+  the pieces.</p>
+
+  <p>The first parameter, <code>value</code>, is the string to split.</p>
+
+  <p>The second parameter, <code>delim</code>, is the character(s) that should
+  be used to
+
+  split the string. For example, calling
+
+  <code>split('rock...paper...scissors', '...')</code> would return the array
+
+  <code>['rock', 'paper', 'scissors']</code> because there are three periods
+  <code>...</code>
+
+  between each word.</p>
+line: 690
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock...paper...scissors';
+
+      // Split the string at each ...
+      let words = split(string, '...');
+
+      // Print the array to the console:
+      // ["rock", "paper", "scissors"]
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", and "scissors" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>the String to be split</p>
+    type: String
+  - name: delim
+    description: |
+      <p>the String used to separate the data</p>
+    type: String
+return:
+  description: Array of Strings
+  type: 'String[]'
+chainable: false
+---
+
+
+# split
diff --git a/src/content/reference/en/p5 copy/splitTokens.mdx b/src/content/reference/en/p5 copy/splitTokens.mdx
new file mode 100644
index 0000000000..95d6ef4f8e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/splitTokens.mdx	
@@ -0,0 +1,180 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L751
+title: splitTokens
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Splits a <code>String</code> into pieces and returns an array containing
+  the pieces.</p>
+
+  <p><code>splitTokens()</code> is an enhanced version of
+
+  <a href="/reference/p5/split/">split()</a>. It can split a string when any
+  characters
+
+  from a list are detected.</p>
+
+  <p>The first parameter, <code>value</code>, is the string to split.</p>
+
+  <p>The second parameter, <code>delim</code>, is optional. It sets the
+  character(s) that
+
+  should be used to split the string. <code>delim</code> can be a single string,
+  as in
+
+  <code>splitTokens('rock...paper...scissors...shoot', '...')</code>, or an
+  array of
+
+  strings, as in
+
+  <code>splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])</code>. By
+  default,
+
+  if no <code>delim</code> characters are specified, then any whitespace
+  character is
+
+  used to split. Whitespace characters include tab (<code>\t</code>), line feed
+  (<code>\n</code>),
+
+  carriage return (<code>\r</code>), form feed (<code>\f</code>), and space.</p>
+line: 751
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock paper scissors shoot';
+
+      // Split the string at each space.
+      let words = splitTokens(string);
+
+      // Print the array to the console.
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 20;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock...paper...scissors...shoot';
+
+      // Split the string at each ...
+      let words = splitTokens(string, '...');
+
+      // Print the array to the console.
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 20;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+
+    <div class='notest'>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = 'rock;paper,scissors...shoot';
+
+      // Split the string at each semicolon, comma, or ...
+      let words = splitTokens(string, [';', ',', '...']);
+
+      // Print the array to the console.
+      print(words);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(12);
+
+      // Iterate over the words array.
+      for (let i = 0; i < words.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 20;
+
+        // Display the word.
+        text(words[i], 50, y);
+      }
+
+      describe(
+        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: value
+    description: |
+      <p>string to split.</p>
+    type: String
+  - name: delim
+    description: |
+      <p>character(s) to use for splitting the string.</p>
+    type: String
+    optional: true
+return:
+  description: separated strings.
+  type: 'String[]'
+chainable: false
+---
+
+
+# splitTokens
diff --git a/src/content/reference/en/p5 copy/spotLight.mdx b/src/content/reference/en/p5 copy/spotLight.mdx
new file mode 100644
index 0000000000..3d221dc8f4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/spotLight.mdx	
@@ -0,0 +1,398 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1272
+title: spotLight
+module: 3D
+submodule: Lights
+file: src/webgl/light.js
+description: >
+  <p>Creates a light that shines from a point in one direction.</p>
+
+  <p>Spot lights are like flashlights that shine in one direction creating a
+
+  cone of light. The shape of the cone can be controlled using the angle and
+
+  concentration parameters. A maximum of 5 spot lights can be active at
+  once.</p>
+
+  <p>There are eight ways to call <code>spotLight()</code> with parameters to
+  set the
+
+  light’s color, position, direction. For example,
+
+  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)</code> creates a red <code>(255,
+  0, 0)</code> light
+
+  at the origin <code>(0, 0, 0)</code> that points to the right <code>(1, 0,
+  0)</code>.</p>
+
+  <p>The <code>angle</code> parameter is optional. It sets the radius of the
+  light cone.
+
+  For example, <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)</code>
+  creates a
+
+  red <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
+  points to the right
+
+  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians. By
+  default, <code>angle</code> is
+
+  <code>PI / 3</code> radians.</p>
+
+  <p>The <code>concentration</code> parameter is also optional. It focuses the
+  light
+
+  towards the center of the light cone. For example,
+
+  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)</code> creates a red
+
+  <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
+  points to the right
+
+  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians at
+  concentration of 50. By
+
+  default, <code>concentration</code> is 100.</p>
+line: 1272
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to adjust the spotlight.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Control the spotlight.
+      if (isLit === true) {
+        // Add a red spot light that shines into the screen.
+        // Set its angle to PI / 32 radians.
+        spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the spotlight when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+    // Double-click to adjust the spotlight.
+
+    let isLit = false;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+    }
+
+    function draw() {
+      background(50);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Turn on the lights.
+      lights();
+
+      // Control the spotlight.
+      if (isLit === true) {
+        // Add a red spot light that shines into the screen.
+        // Set its angle to PI / 3 radians (default).
+        // Set its concentration to 1000.
+        let c = color(255, 0, 0);
+        let position = createVector(0, 0, 100);
+        let direction = createVector(0, 0, -1);
+        spotLight(c, position, direction, PI / 3, 1000);
+      }
+
+      // Draw the sphere.
+      sphere(30);
+    }
+
+    // Turn on the spotlight when the user double-clicks.
+    function doubleClicked() {
+      isLit = true;
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1272
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value in the current
+                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value in the current
+                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue, brightness, or lightness value in the current
+                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
+        type: Number
+      - name: x
+        description: |
+          <p>x-coordinate of the light.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the light.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the light.</p>
+        type: Number
+      - name: rx
+        description: |
+          <p>x-component of light direction between -1 and 1.</p>
+        type: Number
+      - name: ry
+        description: |
+          <p>y-component of light direction between -1 and 1.</p>
+        type: Number
+      - name: rz
+        description: |
+          <p>z-component of light direction between -1 and 1.</p>
+        type: Number
+      - name: angle
+        description: |
+          <p>angle of the light cone. Defaults to <code>PI / 3</code>.</p>
+        type: Number
+        optional: true
+      - name: concentration
+        description: |
+          <p>concentration of the light. Defaults to 100.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1399
+    params:
+      - name: color
+        description: |
+          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
+                                                       an array of color values, or a CSS string.</p>
+        type: 'p5.Color|Number[]|String'
+      - name: position
+        description: >
+          <p>position of the light as a <a href="#/p5.Vector">p5.Vector</a>
+          object.</p>
+        type: p5.Vector
+      - name: direction
+        description: >
+          <p>direction of light as a <a href="#/p5.Vector">p5.Vector</a>
+          object.</p>
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1408
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: position
+        description: ''
+        type: p5.Vector
+      - name: direction
+        description: ''
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1418
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+      - name: direction
+        description: ''
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1428
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: position
+        description: ''
+        type: p5.Vector
+      - name: rx
+        description: ''
+        type: Number
+      - name: ry
+        description: ''
+        type: Number
+      - name: rz
+        description: ''
+        type: Number
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1438
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+      - name: direction
+        description: ''
+        type: p5.Vector
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1450
+    params:
+      - name: v1
+        description: ''
+        type: Number
+      - name: v2
+        description: ''
+        type: Number
+      - name: v3
+        description: ''
+        type: Number
+      - name: position
+        description: ''
+        type: p5.Vector
+      - name: rx
+        description: ''
+        type: Number
+      - name: ry
+        description: ''
+        type: Number
+      - name: rz
+        description: ''
+        type: Number
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+  - line: 1462
+    params:
+      - name: color
+        description: ''
+        type: 'p5.Color|Number[]|String'
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+      - name: rx
+        description: ''
+        type: Number
+      - name: ry
+        description: ''
+        type: Number
+      - name: rz
+        description: ''
+        type: Number
+      - name: angle
+        description: ''
+        type: Number
+        optional: true
+      - name: concentration
+        description: ''
+        type: Number
+        optional: true
+chainable: true
+---
+
+
+# spotLight
diff --git a/src/content/reference/en/p5 copy/sq.mdx b/src/content/reference/en/p5 copy/sq.mdx
new file mode 100644
index 0000000000..da0f2c4024
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sq.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L928
+title: sq
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the square of a number.</p>
+
+  <p>Squaring a number means multiplying the number by itself. For example,
+
+  <code>sq(3)</code> evaluates 3 × 3 which is 9. <code>sq(-3)</code> evaluates
+  -3 × -3
+
+  which is also 9. Multiplying two negative numbers produces a positive
+
+  number. The value returned by <code>sq()</code> is always positive.</p>
+line: 928
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = sq(3);
+      circle(33, 33, d);
+
+      // Bottom-right.
+      d = sq(6);
+      circle(67, 67, d);
+
+      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that get higher quickly from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 0.01 * sq(x);
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>number to square.</p>
+    type: Number
+return:
+  description: squared number.
+  type: Number
+chainable: false
+---
+
+
+# sq
diff --git a/src/content/reference/en/p5 copy/sqrt.mdx b/src/content/reference/en/p5 copy/sqrt.mdx
new file mode 100644
index 0000000000..5e239f6fe4
--- /dev/null
+++ b/src/content/reference/en/p5 copy/sqrt.mdx	
@@ -0,0 +1,84 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L988
+title: sqrt
+module: Math
+submodule: Calculation
+file: src/math/calculation.js
+description: >
+  <p>Calculates the square root of a number.</p>
+
+  <p>A number's square root can be multiplied by itself to produce the original
+
+  number. For example, <code>sqrt(9)</code> returns 3 because 3 × 3 = 9.
+  <code>sqrt()</code>
+
+  always returns a positive value. <code>sqrt()</code> doesn't work with
+  negative arguments
+
+  such as <code>sqrt(-9)</code>.</p>
+line: 988
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top-left.
+      let d = sqrt(16);
+      circle(33, 33, d);
+
+      // Bottom-right.
+      d = sqrt(1600);
+      circle(67, 67, d);
+
+      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of black dots that get higher slowly from left to right.');
+    }
+
+    function draw() {
+      // Invert the y-axis.
+      scale(1, -1);
+      translate(0, -100);
+
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 5 * sqrt(x);
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>non-negative number to square root.</p>
+    type: Number
+return:
+  description: square root of number.
+  type: Number
+chainable: false
+---
+
+
+# sqrt
diff --git a/src/content/reference/en/p5 copy/square.mdx b/src/content/reference/en/p5 copy/square.mdx
new file mode 100644
index 0000000000..1e94a0087d
--- /dev/null
+++ b/src/content/reference/en/p5 copy/square.mdx	
@@ -0,0 +1,163 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1229
+title: square
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a square.</p>
+
+  <p>A square is a four-sided shape defined by the <code>x</code>,
+  <code>y</code>, and <code>s</code>
+
+  parameters. <code>x</code> and <code>y</code> set the location of its top-left
+  corner. <code>s</code> sets
+
+  its width and height. Every angle in the square measures 90˚ and all its
+
+  sides are the same length. See <a
+  href="/reference/p5/rectMode/">rectMode()</a> for
+
+  other ways to define squares.</p>
+
+  <p>The version of <code>square()</code> with four parameters creates a rounded
+  square.
+
+  The fourth parameter sets the radius for all four corners.</p>
+
+  <p>The version of <code>square()</code> with seven parameters also creates a
+  rounded
+
+  square. Each of the last four parameters set the radius of a corner. The
+
+  radii start with the top-left corner and move clockwise around the
+
+  square. If any of these parameters are omitted, they are set to the
+
+  value of the last radius that was set.</p>
+line: 1229
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      square(30, 20, 55);
+
+      describe('A white square with a black outline in on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give all corners a radius of 20.
+      square(30, 20, 55, 20);
+
+      describe(
+        'A white square with a black outline and round edges on a gray canvas.'
+      );
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Give each corner a unique radius.
+      square(30, 20, 55, 20, 15, 10, 5);
+
+      describe('A white square with a black outline and round edges of different radii.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      square(-20, -30, 55);
+
+      describe('A white square with a black outline in on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square spins around on gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the square.
+      square(-20, -30, 55);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the square.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the square.</p>
+    type: Number
+  - name: s
+    description: |
+      <p>side size of the square.</p>
+    type: Number
+  - name: tl
+    description: |
+      <p>optional radius of top-left corner.</p>
+    type: Number
+    optional: true
+  - name: tr
+    description: |
+      <p>optional radius of top-right corner.</p>
+    type: Number
+    optional: true
+  - name: br
+    description: |
+      <p>optional radius of bottom-right corner.</p>
+    type: Number
+    optional: true
+  - name: bl
+    description: |
+      <p>optional radius of bottom-left corner.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# square
diff --git a/src/content/reference/en/p5 copy/storeItem.mdx b/src/content/reference/en/p5 copy/storeItem.mdx
new file mode 100644
index 0000000000..8552634c5a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/storeItem.mdx	
@@ -0,0 +1,149 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L10
+title: storeItem
+module: Data
+submodule: LocalStorage
+file: src/data/local_storage.js
+description: >
+  <p>Stores a value in the web browser's local storage.</p>
+
+  <p>Web browsers can save small amounts of data using the built-in
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
+  target="_blank">localStorage object</a>.
+
+  Data stored in <code>localStorage</code> can be retrieved at any point, even
+  after
+
+  refreshing a page or restarting the browser. Data are stored as key-value
+
+  pairs.</p>
+
+  <p><code>storeItem()</code> makes it easy to store values in
+  <code>localStorage</code> and
+
+  <a href="/reference/p5/getItem/">getItem()</a> makes it easy to retrieve
+  them.</p>
+
+  <p>The first parameter, <code>key</code>, is the name of the value to be
+  stored as a
+
+  string.</p>
+
+  <p>The second parameter, <code>value</code>, is the value to be stored. Values
+  can have
+
+  any type.</p>
+
+  <p>Note: Sensitive data such as passwords or personal information shouldn't be
+
+  stored in <code>localStorage</code>.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Store the player's name.
+      storeItem('name', 'Feist');
+
+      // Store the player's score.
+      storeItem('score', 1234);
+
+      describe('The text "Feist: 1234" written in black on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(14);
+
+      // Retrieve the name.
+      let name = getItem('name');
+
+      // Retrieve the score.
+      let score = getItem('score');
+
+      // Display the score.
+      text(`${name}: ${score}`, 50, 50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create an object.
+      let p = { x: 50, y: 50 };
+
+      // Store the object.
+      storeItem('position', p);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let p = getItem('position');
+
+      // Draw the circle.
+      circle(p.x, p.y, 30);
+    }
+    </code>
+    </div>
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Create a p5.Color object.
+      let c = color('deeppink');
+
+      // Store the object.
+      storeItem('color', c);
+
+      describe('A pink circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Retrieve the object.
+      let c = getItem('color');
+
+      // Style the circle.
+      fill(c);
+
+      // Draw the circle.
+      circle(50, 50, 30);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: key
+    description: |
+      <p>name of the value.</p>
+    type: String
+  - name: value
+    description: |
+      <p>value to be stored.</p>
+    type: String|Number|Boolean|Object|Array
+chainable: false
+---
+
+
+# storeItem
diff --git a/src/content/reference/en/p5 copy/str.mdx b/src/content/reference/en/p5 copy/str.mdx
new file mode 100644
index 0000000000..c487979761
--- /dev/null
+++ b/src/content/reference/en/p5 copy/str.mdx	
@@ -0,0 +1,135 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L232
+title: str
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>Boolean</code> or <code>Number</code> to
+  <code>String</code>.</p>
+
+  <p><code>str()</code> converts values to strings. See the
+
+  <a href="/reference/p5/String/">String</a> reference page for guidance on
+  using
+
+  template literals instead.</p>
+
+  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
+  is a Boolean, as in
+
+  <code>str(false)</code> or <code>str(true)</code>, then the value will be
+  returned as a string,
+
+  as in <code>'false'</code> or <code>'true'</code>. If <code>n</code> is a
+  number, as in <code>str(123)</code>, then its
+
+  value will be returned as a string, as in <code>'123'</code>. If an array is
+  passed,
+
+  as in <code>str([12.34, 56.78])</code>, then an array of strings will be
+  returned.</p>
+line: 232
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a Boolean variable.
+      let original = false;
+
+      // Convert the Boolean to a string.
+      let converted = str(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "false : false" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a number variable.
+      let original = 123;
+
+      // Convert the number to a string.
+      let converted = str(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "123 = 123" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = [12, 34, 56];
+
+      // Convert the numbers to strings.
+      let strings = str(original);
+
+      // Create an empty string variable.
+      let final = '';
+
+      // Concatenate all the strings.
+      for (let s of strings) {
+        final += s;
+      }
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the concatenated string.
+      text(final, 50, 50);
+
+      describe('The text "123456" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: 'n'
+    description: |
+      <p>value to convert.</p>
+    type: String|Boolean|Number
+return:
+  description: converted string.
+  type: String
+chainable: false
+---
+
+
+# str
diff --git a/src/content/reference/en/p5 copy/stroke.mdx b/src/content/reference/en/p5 copy/stroke.mdx
new file mode 100644
index 0000000000..bf086f9b66
--- /dev/null
+++ b/src/content/reference/en/p5 copy/stroke.mdx	
@@ -0,0 +1,311 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1373
+title: stroke
+module: Color
+submodule: Setting
+file: src/color/setting.js
+description: >
+  <p>Sets the color used to draw points, lines, and the outlines of shapes.</p>
+
+  <p>Calling <code>stroke(255, 165, 0)</code> or <code>stroke('orange')</code>
+  means all shapes drawn
+
+  after calling <code>stroke()</code> will be outlined with the color orange.
+  The way
+
+  these parameters are interpreted may be changed with the
+
+  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
+
+  <p>The version of <code>stroke()</code> with one parameter interprets the
+  value one of
+
+  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
+  grayscale
+
+  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
+  color
+
+  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
+  provided to
+
+  set the stroke color.</p>
+
+  <p>The version of <code>stroke()</code> with two parameters interprets the
+  first one as a
+
+  grayscale value. The second parameter sets the alpha (transparency) value.</p>
+
+  <p>The version of <code>stroke()</code> with three parameters interprets them
+  as RGB, HSB,
+
+  or HSL colors, depending on the current <code>colorMode()</code>.</p>
+
+  <p>The version of <code>stroke()</code> with four parameters interprets them
+  as RGBA, HSBA,
+
+  or HSLA colors, depending on the current <code>colorMode()</code>. The last
+  parameter
+
+  sets the alpha (transparency) value.</p>
+line: 1373
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A grayscale value.
+      strokeWeight(4);
+      stroke(51);
+      square(20, 20, 60);
+
+      describe('A white square with a dark charcoal gray outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // R, G & B values.
+      stroke(255, 204, 0);
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a yellow outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Use HSB color.
+      colorMode(HSB);
+
+      // H, S & B values.
+      strokeWeight(4);
+      stroke(255, 204, 100);
+      square(20, 20, 60);
+
+      describe('A white square with a royal blue outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A CSS named color.
+      stroke('red');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a red outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Three-digit hex RGB notation.
+      stroke('#fae');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a pink outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Six-digit hex RGB notation.
+      stroke('#222222');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a black outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGB notation.
+      stroke('rgb(0, 255, 0)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A whiite square with a bright green outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Integer RGBA notation.
+      stroke('rgba(0, 255, 0, 0.25)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a soft green outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGB notation.
+      stroke('rgb(100%, 0%, 10%)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a red outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Percentage RGBA notation.
+      stroke('rgba(100%, 0%, 100%, 0.5)');
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a dark fuchsia outline.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // A p5.Color object.
+      stroke(color(0, 0, 255));
+      strokeWeight(4);
+      square(20, 20, 60);
+
+      describe('A white square with a blue outline.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1373
+    params:
+      - name: v1
+        description: >
+          <p>red value if color mode is RGB or hue value if color mode is
+          HSB.</p>
+        type: Number
+      - name: v2
+        description: >
+          <p>green value if color mode is RGB or saturation value if color mode
+          is HSB.</p>
+        type: Number
+      - name: v3
+        description: >
+          <p>blue value if color mode is RGB or brightness value if color mode
+          is HSB.</p>
+        type: Number
+      - name: alpha
+        description: >
+          <p>alpha value, controls transparency (0 - transparent, 255 -
+          opaque).</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1596
+    params:
+      - name: value
+        description: |
+          <p>a color string.</p>
+        type: String
+    chainable: 1
+  - line: 1602
+    params:
+      - name: gray
+        description: |
+          <p>a grayscale value.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1609
+    params:
+      - name: values
+        description: |
+          <p>an array containing the red, green, blue,
+                                          and alpha components of the color.</p>
+        type: 'Number[]'
+    chainable: 1
+  - line: 1616
+    params:
+      - name: color
+        description: |
+          <p>the stroke color.</p>
+        type: p5.Color
+    chainable: 1
+chainable: true
+---
+
+
+# stroke
diff --git a/src/content/reference/en/p5 copy/strokeCap.mdx b/src/content/reference/en/p5 copy/strokeCap.mdx
new file mode 100644
index 0000000000..80965419ab
--- /dev/null
+++ b/src/content/reference/en/p5 copy/strokeCap.mdx	
@@ -0,0 +1,67 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L388
+title: strokeCap
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the style for rendering the ends of lines.</p>
+
+  <p>The caps for line endings are either rounded (<code>ROUND</code>), squared
+
+  (<code>SQUARE</code>), or extended (<code>PROJECT</code>). The default cap is
+  <code>ROUND</code>.</p>
+
+  <p>The argument passed to <code>strokeCap()</code> must be written in ALL CAPS
+  because
+
+  the constants <code>ROUND</code>, <code>SQUARE</code>, and
+  <code>PROJECT</code> are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 388
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      strokeWeight(12);
+
+      // Top.
+      strokeCap(ROUND);
+      line(20, 30, 80, 30);
+
+      // Middle.
+      strokeCap(SQUARE);
+      line(20, 50, 80, 50);
+
+      // Bottom.
+      strokeCap(PROJECT);
+      line(20, 70, 80, 70);
+
+      describe(
+        'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: cap
+    description: |
+      <p>either ROUND, SQUARE, or PROJECT</p>
+    type: Constant
+chainable: true
+---
+
+
+# strokeCap
diff --git a/src/content/reference/en/p5 copy/strokeJoin.mdx b/src/content/reference/en/p5 copy/strokeJoin.mdx
new file mode 100644
index 0000000000..46a8a9206f
--- /dev/null
+++ b/src/content/reference/en/p5 copy/strokeJoin.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L442
+title: strokeJoin
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the style of the joints that connect line segments.</p>
+
+  <p>Joints are either mitered (<code>MITER</code>), beveled
+  (<code>BEVEL</code>), or rounded
+
+  (<code>ROUND</code>). The default joint is <code>MITER</code> in 2D mode and
+  <code>ROUND</code> in WebGL
+
+  mode.</p>
+
+  <p>The argument passed to <code>strokeJoin()</code> must be written in ALL
+  CAPS because
+
+  the constants <code>MITER</code>, <code>BEVEL</code>, and <code>ROUND</code>
+  are defined this way.
+
+  JavaScript is a case-sensitive language.</p>
+line: 442
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      noFill();
+      strokeWeight(10);
+      strokeJoin(MITER);
+
+      // Draw the line.
+      beginShape();
+      vertex(35, 20);
+      vertex(65, 50);
+      vertex(35, 80);
+      endShape();
+
+      describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      noFill();
+      strokeWeight(10);
+      strokeJoin(BEVEL);
+
+      // Draw the line.
+      beginShape();
+      vertex(35, 20);
+      vertex(65, 50);
+      vertex(35, 80);
+      endShape();
+
+      describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the line.
+      noFill();
+      strokeWeight(10);
+      strokeJoin(ROUND);
+
+      // Draw the line.
+      beginShape();
+      vertex(35, 20);
+      vertex(65, 50);
+      vertex(35, 80);
+      endShape();
+
+      describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: join
+    description: |
+      <p>either MITER, BEVEL, or ROUND</p>
+    type: Constant
+chainable: true
+---
+
+
+# strokeJoin
diff --git a/src/content/reference/en/p5 copy/strokeWeight.mdx b/src/content/reference/en/p5 copy/strokeWeight.mdx
new file mode 100644
index 0000000000..82ebfc13d5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/strokeWeight.mdx	
@@ -0,0 +1,77 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L541
+title: strokeWeight
+module: Shape
+submodule: Attributes
+file: src/core/shape/attributes.js
+description: >
+  <p>Sets the width of the stroke used for points, lines, and the outlines of
+
+  shapes.</p>
+
+  <p>Note: <code>strokeWeight()</code> is affected by transformations,
+  especially calls to
+
+  <a href="/reference/p5/scale/">scale()</a>.</p>
+line: 541
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      line(20, 20, 80, 20);
+
+      // Middle.
+      strokeWeight(4);
+      line(20, 40, 80, 40);
+
+      // Bottom.
+      strokeWeight(10);
+      line(20, 70, 80, 70);
+
+      describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      line(20, 20, 80, 20);
+
+      // Scale by a factor of 5.
+      scale(5);
+
+      // Bottom. Coordinates are adjusted for scaling.
+      line(4, 8, 16, 8);
+
+      describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: weight
+    description: |
+      <p>the weight of the stroke (in pixels).</p>
+    type: Number
+chainable: true
+---
+
+
+# strokeWeight
diff --git a/src/content/reference/en/p5 copy/subset.mdx b/src/content/reference/en/p5 copy/subset.mdx
new file mode 100644
index 0000000000..1cf7cb7f4e
--- /dev/null
+++ b/src/content/reference/en/p5 copy/subset.mdx	
@@ -0,0 +1,59 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L381
+title: subset
+module: Data
+submodule: Array Functions
+file: src/utilities/array_functions.js
+description: |
+  <p>Extracts an array of elements from an existing array. The list parameter
+  defines the array from which the elements will be copied, and the start
+  and count parameters specify which elements to extract. If no count is
+  given, elements will be extracted from the start to the end of the array.
+  When specifying the start, remember that the first array element is 0.
+  This function does not change the source array.</p>
+line: 381
+deprecated: >-
+  Use <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">array.slice()</a>
+  instead.
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div class = 'norender'><code>
+    function setup() {
+      let myArray = [1, 2, 3, 4, 5];
+      print(myArray); // [1, 2, 3, 4, 5]
+
+      let sub1 = subset(myArray, 0, 3);
+      let sub2 = subset(myArray, 2, 2);
+      print(sub1); // [1,2,3]
+      print(sub2); // [3,4]
+    }
+    </code></div>
+class: p5
+params:
+  - name: list
+    description: |
+      <p>Array to extract from</p>
+    type: Array
+  - name: start
+    description: |
+      <p>position to begin</p>
+    type: Integer
+  - name: count
+    description: |
+      <p>number of values to extract</p>
+    type: Integer
+    optional: true
+return:
+  description: Array of extracted elements
+  type: Array
+chainable: false
+---
+
+
+# subset
diff --git a/src/content/reference/en/p5 copy/tan.mdx b/src/content/reference/en/p5 copy/tan.mdx
new file mode 100644
index 0000000000..376d093f33
--- /dev/null
+++ b/src/content/reference/en/p5 copy/tan.mdx	
@@ -0,0 +1,66 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L445
+title: tan
+module: Math
+submodule: Trigonometry
+file: src/math/trigonometry.js
+description: >
+  <p>Calculates the tangent of an angle.</p>
+
+  <p><code>tan()</code> 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. <code>tan()</code> calculates the tan of an angle,
+  using radians
+
+  by default, or according to
+
+  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+  DEGREES).</p>
+line: 445
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
+    }
+
+    function draw() {
+      // Calculate the coordinates.
+      let x = frameCount;
+      let y = 5 * tan(x * 0.1) + 50;
+
+      // Draw the point.
+      point(x, y);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: angle
+    description: >
+      <p>the angle, in radians by default, or according to
+
+      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
+      DEGREES).</p>
+    type: Number
+return:
+  description: tangent of the angle.
+  type: Number
+chainable: false
+---
+
+
+# tan
diff --git a/src/content/reference/en/p5 copy/text.mdx b/src/content/reference/en/p5 copy/text.mdx
new file mode 100644
index 0000000000..eea293bfd8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/text.mdx	
@@ -0,0 +1,96 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L182
+title: text
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Draws text to the canvas.</p>
+
+  <p>The first parameter, <code>str</code>, is the text to be drawn. The second
+  and third
+
+  parameters, <code>x</code> and <code>y</code>, set the coordinates of the
+  text's bottom-left
+
+  corner. See <a href="/reference/p5/textAlign/">textAlign()</a> for other ways
+  to
+
+  align text.</p>
+
+  <p>The fourth and fifth parameters, <code>maxWidth</code> and
+  <code>maxHeight</code>, are optional.
+
+  They set the dimensions of the invisible rectangle containing the text. By
+
+  default, they set its  maximum width and height. See
+
+  <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to define the
+
+  rectangular text box. Text will wrap to fit within the text box. Text
+
+  outside of the box won't be drawn.</p>
+
+  <p>Text can be styled a few ways. Call the <a
+  href="/reference/p5/fill/">fill()</a>
+
+  function to set the text's fill color. Call
+
+  <a href="/reference/p5/stroke/">stroke()</a> and
+
+  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> to set the text's
+  outline.
+
+  Call <a href="/reference/p5/textSize/">textSize()</a> and
+
+  <a href="/reference/p5/textFont/">textFont()</a> to set the text's size and
+  font,
+
+  respectively.</p>
+
+  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
+
+  <a href="/reference/p5/loadFont/">loadFont()</a>. Calling
+
+  <a href="/reference/p5/stroke/">stroke()</a> has no effect in
+  <code>WEBGL</code> mode.</p>
+line: 182
+isConstructor: false
+itemtype: method
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  background(200);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in black in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('skyblue');\n  textSize(100);\n  text('\U0001F308', 0, 100);\n\n  describe('A rainbow in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  textSize(32);\n  fill(255);\n  stroke(0);\n  strokeWeight(4);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in white with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('black');\n  textSize(22);\n  fill('yellow');\n  text('rainbows', 6, 20);\n  fill('cornflowerblue');\n  text('rainbows', 6, 45);\n  fill('tomato');\n  text('rainbows', 6, 70);\n  fill('limegreen');\n  text('rainbows', 6, 95);\n\n  describe('The text \"rainbows\" written on several lines, each in a different color.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 10, 10, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  rectMode(CENTER);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 50, 50, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet font;\n\nfunction preload() {\n  font = loadFont('/assets/inconsolata.otf');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(font);\n  textSize(32);\n  textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n  background(0);\n  rotateY(frameCount / 30);\n  text('p5*js', 0, 0);\n\n  describe('The text \"p5*js\" written in white and spinning in 3D.');\n}\n</code>\n</div>"
+class: p5
+params:
+  - name: str
+    description: |
+      <p>text to be displayed.</p>
+    type: String|Object|Array|Number|Boolean
+  - name: x
+    description: |
+      <p>x-coordinate of the text box.</p>
+    type: Number
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the text box.</p>
+    type: Number
+  - name: maxWidth
+    description: |
+      <p>maximum width of the text box. See
+                                 <a href="#/p5/rectMode">rectMode()</a> for
+                                 other options.</p>
+    type: Number
+    optional: true
+  - name: maxHeight
+    description: |
+      <p>maximum height of the text box. See
+                                 <a href="#/p5/rectMode">rectMode()</a> for
+                                 other options.</p>
+    type: Number
+    optional: true
+chainable: true
+---
+
+
+# text
diff --git a/src/content/reference/en/p5 copy/textAlign.mdx b/src/content/reference/en/p5 copy/textAlign.mdx
new file mode 100644
index 0000000000..3899f22842
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textAlign.mdx	
@@ -0,0 +1,135 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L11
+title: textAlign
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the way text is aligned when <a href="/reference/p5/text/">text()</a>
+  is called.</p>
+
+  <p>By default, calling <code>text('hi', 10, 20)</code> places the bottom-left
+  corner of
+
+  the text's bounding box at (10, 20).</p>
+
+  <p>The first parameter, <code>horizAlign</code>, changes the way
+
+  <a href="/reference/p5/text/">text()</a> interprets x-coordinates. By default,
+  the
+
+  x-coordinate sets the left edge of the bounding box. <code>textAlign()</code>
+  accepts
+
+  the following values for <code>horizAlign</code>: <code>LEFT</code>,
+  <code>CENTER</code>, or <code>RIGHT</code>.</p>
+
+  <p>The second parameter, <code>vertAlign</code>, is optional. It changes the
+  way
+
+  <a href="/reference/p5/text/">text()</a> interprets y-coordinates. By default,
+  the
+
+  y-coordinate sets the bottom edge of the bounding box.
+  <code>textAlign()</code>
+
+  accepts the following values for <code>vertAlign</code>: <code>TOP</code>,
+  <code>BOTTOM</code>, <code>CENTER</code>,
+
+  or <code>BASELINE</code>.</p>
+line: 11
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a vertical line.
+      strokeWeight(0.5);
+      line(50, 0, 50, 100);
+
+      // Top line.
+      textSize(16);
+      textAlign(RIGHT);
+      text('ABCD', 50, 30);
+
+      // Middle line.
+      textAlign(CENTER);
+      text('EFGH', 50, 50);
+
+      // Bottom line.
+      textAlign(LEFT);
+      text('IJKL', 50, 70);
+
+      describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      strokeWeight(0.5);
+
+      // First line.
+      line(0, 12, width, 12);
+      textAlign(CENTER, TOP);
+      text('TOP', 50, 12);
+
+      // Second line.
+      line(0, 37, width, 37);
+      textAlign(CENTER, CENTER);
+      text('CENTER', 50, 37);
+
+      // Third line.
+      line(0, 62, width, 62);
+      textAlign(CENTER, BASELINE);
+      text('BASELINE', 50, 62);
+
+      // Fourth line.
+      line(0, 97, width, 97);
+      textAlign(CENTER, BOTTOM);
+      text('BOTTOM', 50, 97);
+
+      describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 11
+    params:
+      - name: horizAlign
+        description: |
+          <p>horizontal alignment, either LEFT,
+                                     CENTER, or RIGHT.</p>
+        type: Constant
+      - name: vertAlign
+        description: |
+          <p>vertical alignment, either TOP,
+                                     BOTTOM, CENTER, or BASELINE.</p>
+        type: Constant
+        optional: true
+    chainable: 1
+  - line: 98
+    params: []
+    return:
+      description: ''
+      type: Object
+chainable: true
+---
+
+
+# textAlign
diff --git a/src/content/reference/en/p5 copy/textAscent.mdx b/src/content/reference/en/p5 copy/textAscent.mdx
new file mode 100644
index 0000000000..b81a657de6
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textAscent.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L337
+title: textAscent
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Calculates the ascent of the current font at its current size.</p>
+  <p>The ascent represents the distance, in pixels, of the tallest character
+  above the baseline.</p>
+line: 337
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload()  {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup()  {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textFont(font);
+
+      // Different for each font.
+      let fontScale = 0.8;
+
+      let baseY = 75;
+      strokeWeight(0.5);
+
+      // Draw small text.
+      textSize(24);
+      text('dp', 0, baseY);
+
+      // Draw baseline and ascent.
+      let a = textAscent() * fontScale;
+      line(0, baseY, 23, baseY);
+      line(23, baseY - a, 23, baseY);
+
+      // Draw large text.
+      textSize(48);
+      text('dp', 45, baseY);
+
+      // Draw baseline and ascent.
+      a = textAscent() * fontScale;
+      line(45, baseY, 91, baseY);
+      line(91, baseY - a, 91, baseY);
+
+      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the "d".');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: ascent measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textAscent
diff --git a/src/content/reference/en/p5 copy/textDescent.mdx b/src/content/reference/en/p5 copy/textDescent.mdx
new file mode 100644
index 0000000000..15837acff3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textDescent.mdx	
@@ -0,0 +1,71 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L396
+title: textDescent
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Calculates the descent of the current font at its current size.</p>
+  <p>The descent represents the distance, in pixels, of the character with the
+  longest descender below the baseline.</p>
+line: 396
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let font;
+
+    function preload()  {
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup()  {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the font.
+      textFont(font);
+
+      // Different for each font.
+      let fontScale = 0.9;
+
+      let baseY = 75;
+      strokeWeight(0.5);
+
+      // Draw small text.
+      textSize(24);
+      text('dp', 0, baseY);
+
+      // Draw baseline and descent.
+      let d = textDescent() * fontScale;
+      line(0, baseY, 23, baseY);
+      line(23, baseY, 23, baseY + d);
+
+      // Draw large text.
+      textSize(48);
+      text('dp', 45, baseY);
+
+      // Draw baseline and descent.
+      d = textDescent() * fontScale;
+      line(45, baseY, 91, baseY);
+      line(91, baseY, 91, baseY + d);
+
+      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the "p".');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: descent measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textDescent
diff --git a/src/content/reference/en/p5 copy/textFont.mdx b/src/content/reference/en/p5 copy/textFont.mdx
new file mode 100644
index 0000000000..e5e9fa8da1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textFont.mdx	
@@ -0,0 +1,127 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L335
+title: textFont
+module: Typography
+submodule: Loading & Displaying
+file: src/typography/loading_displaying.js
+description: >
+  <p>Sets the font used by the <a href="/reference/p5/text/">text()</a>
+  function.</p>
+
+  <p>The first parameter, <code>font</code>, sets the font.
+  <code>textFont()</code> recognizes either
+
+  a <a href="/reference/p5/p5.Font">p5.Font</a> object or a string with the name
+  of a
+
+  system font. For example, <code>'Courier New'</code>.</p>
+
+  <p>The second parameter, <code>size</code>, is optional. It sets the font size
+  in pixels.
+
+  This has the same effect as calling <a
+  href="/reference/p5/textSize/">textSize()</a>.</p>
+
+  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
+
+  <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
+line: 335
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      textFont('Courier New');
+      textSize(24);
+      text('hi', 35, 55);
+
+      describe('The text "hi" written in a black, monospace font on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background('black');
+      fill('palegreen');
+      textFont('Courier New', 10);
+      text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
+      text('>', 5, 70);
+
+      describe('A text prompt from a game is written in a green, monospace font on a black background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+      textFont('Verdana');
+      let currentFont = textFont();
+      text(currentFont, 25, 50);
+
+      describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let fontRegular;
+    let fontItalic;
+    let fontBold;
+
+    function preload() {
+      fontRegular = loadFont('/assets/Regular.otf');
+      fontItalic = loadFont('/assets/Italic.ttf');
+      fontBold = loadFont('/assets/Bold.ttf');
+    }
+
+    function setup() {
+      background(200);
+      textFont(fontRegular);
+      text('I am Normal', 10, 30);
+      textFont(fontItalic);
+      text('I am Italic', 10, 50);
+      textFont(fontBold);
+      text('I am Bold', 10, 70);
+
+      describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current font or p5 Object.
+  type: Object
+overloads:
+  - line: 335
+    params: []
+    return:
+      description: current font or p5 Object.
+      type: Object
+  - line: 418
+    params:
+      - name: font
+        description: |
+          <p>font as a <a href="#/p5.Font">p5.Font</a> object or a string.</p>
+        type: Object|String
+      - name: size
+        description: |
+          <p>font size in pixels.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: false
+---
+
+
+# textFont
diff --git a/src/content/reference/en/p5 copy/textLeading.mdx b/src/content/reference/en/p5 copy/textLeading.mdx
new file mode 100644
index 0000000000..3b5a22d9a2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textLeading.mdx	
@@ -0,0 +1,63 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L107
+title: textLeading
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the spacing between lines of text when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>Note: Spacing is measured in pixels.</p>
+
+  <p>Calling <code>textLeading()</code> without an argument returns the current
+  spacing.</p>
+line: 107
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // "\n" starts a new line of text.
+      let lines = 'one\ntwo';
+
+      // Left.
+      text(lines, 10, 25);
+
+      // Right.
+      textLeading(30);
+      text(lines, 70, 25);
+
+      describe('The words "one" and "two" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 107
+    params:
+      - name: leading
+        description: |
+          <p>spacing between lines of text in units of pixels.</p>
+        type: Number
+    chainable: 1
+  - line: 142
+    params: []
+    return:
+      description: ''
+      type: Number
+chainable: true
+---
+
+
+# textLeading
diff --git a/src/content/reference/en/p5 copy/textOutput.mdx b/src/content/reference/en/p5 copy/textOutput.mdx
new file mode 100644
index 0000000000..62ea4cb4b5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textOutput.mdx	
@@ -0,0 +1,186 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L10
+title: textOutput
+module: Environment
+submodule: Environment
+file: src/accessibility/outputs.js
+description: >
+  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
+
+  <p><code>textOutput()</code> adds a general description, list of shapes, and
+
+  table of shapes to the web page. The general description includes the
+
+  canvas size, canvas color, and number of shapes. For example,
+
+  <code>Your output is a, 100 by 100 pixels, gray canvas containing the
+  following 2 shapes:</code>.</p>
+
+  <p>A list of shapes follows the general description. The list describes the
+
+  color, location, and area of each shape. For example,
+
+  <code>a red circle at middle covering 3% of the canvas</code>. Each shape can
+  be
+
+  selected to get more details.</p>
+
+  <p><code>textOutput()</code> uses its table of shapes as a list. The table
+  describes the
+
+  shape, color, location, coordinates and area. For example,
+
+  <code>red circle location = middle area = 3%</code>. This is different from
+
+  <a href="/reference/p5/gridOutput/">gridOutput()</a>, which uses its table as
+  a grid.</p>
+
+  <p>The <code>display</code> parameter is optional. It determines how the
+  description is
+
+  displayed. If <code>LABEL</code> is passed, as in
+  <code>textOutput(LABEL)</code>, the description
+
+  will be visible in a div element next to the canvas. Using <code>LABEL</code>
+  creates
+
+  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
+
+  development. If <code>FALLBACK</code> is passed, as in
+  <code>textOutput(FALLBACK)</code>, the
+
+  description will only be visible to screen readers. This is the default
+
+  mode.</p>
+
+  <p>Read
+
+  <a
+  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
+  accessible canvas descriptions</a>
+
+  to learn more about making sketches accessible.</p>
+
+  <p><code>textOutput()</code> generates descriptions in English only. Text
+  drawn with
+
+  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
+  mode
+
+  and 3D shapes are not supported.</p>
+
+  <p>Use <a href="/reference/p5/describe/">describe()</a> and
+
+  <a href="/reference/p5/describeElement/">describeElement()</a> for more
+  control
+
+  over canvas descriptions.</p>
+line: 10
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      // Add the text description.
+      textOutput();
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      // Add the text description and
+      // display it for debugging.
+      textOutput(LABEL);
+
+      // Draw a couple of shapes.
+      background(200);
+      fill(255, 0, 0);
+      circle(20, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle and a blue square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the text description.
+      textOutput();
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+    }
+
+    function draw() {
+      // Add the text description and
+      // display it for debugging.
+      textOutput(LABEL);
+
+      // Draw a moving circle.
+      background(200);
+      let x = frameCount * 0.1;
+      fill(255, 0, 0);
+      circle(x, 20, 20);
+      fill(0, 0, 255);
+      square(50, 50, 50);
+
+      // Add a general description of the canvas.
+      describe('A red circle moves from left to right above a blue square.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: display
+    description: |
+      <p>either FALLBACK or LABEL.</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# textOutput
diff --git a/src/content/reference/en/p5 copy/textSize.mdx b/src/content/reference/en/p5 copy/textSize.mdx
new file mode 100644
index 0000000000..df77510315
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textSize.mdx	
@@ -0,0 +1,65 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L151
+title: textSize
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the font size when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>Note: Font size is measured in pixels.</p>
+
+  <p>Calling <code>textSize()</code> without an argument returns the current
+  size.</p>
+line: 151
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Top.
+      textSize(12);
+      text('Font Size 12', 10, 30);
+
+      // Middle.
+      textSize(14);
+      text('Font Size 14', 10, 60);
+
+      // Bottom.
+      textSize(16);
+      text('Font Size 16', 10, 90);
+
+      describe('The text "Font Size 12" drawn small, "Font Size 14" drawn medium, and "Font Size 16" drawn large.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 151
+    params:
+      - name: size
+        description: |
+          <p>size of the letters in units of pixels.</p>
+        type: Number
+    chainable: 1
+  - line: 188
+    params: []
+    return:
+      description: ''
+      type: Number
+chainable: true
+---
+
+
+# textSize
diff --git a/src/content/reference/en/p5 copy/textStyle.mdx b/src/content/reference/en/p5 copy/textStyle.mdx
new file mode 100644
index 0000000000..572ca0454c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textStyle.mdx	
@@ -0,0 +1,79 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L197
+title: textStyle
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the style for system fonts when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>The parameter, <code>style</code>, can be either <code>NORMAL</code>,
+  <code>ITALIC</code>, <code>BOLD</code>, or
+
+  <code>BOLDITALIC</code>.</p>
+
+  <p><code>textStyle()</code> may be overridden by CSS styling. This function
+  doesn't
+
+  affect fonts loaded with <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
+line: 197
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(12);
+      textAlign(CENTER);
+
+      // First row.
+      textStyle(NORMAL);
+      text('Normal', 50, 15);
+
+      // Second row.
+      textStyle(ITALIC);
+      text('Italic', 50, 40);
+
+      // Third row.
+      textStyle(BOLD);
+      text('Bold', 50, 65);
+
+      // Fourth row.
+      textStyle(BOLDITALIC);
+      text('Bold Italic', 50, 90);
+
+      describe('The words "Normal" displayed normally, "Italic" in italic, "Bold" in bold, and "Bold Italic" in bold italics.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 197
+    params:
+      - name: style
+        description: |
+          <p>styling for text, either NORMAL,
+                                     ITALIC, BOLD or BOLDITALIC.</p>
+        type: Constant
+    chainable: 1
+  - line: 244
+    params: []
+    return:
+      description: ''
+      type: String
+chainable: true
+---
+
+
+# textStyle
diff --git a/src/content/reference/en/p5 copy/textWidth.mdx b/src/content/reference/en/p5 copy/textWidth.mdx
new file mode 100644
index 0000000000..00721b0fee
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textWidth.mdx	
@@ -0,0 +1,83 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L253
+title: textWidth
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: |
+  <p>Calculates the maximum width of a string of text drawn when
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+line: 253
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(28);
+      strokeWeight(0.5);
+
+      // Calculate the text width.
+      let s = 'yoyo';
+      let w = textWidth(s);
+
+      // Display the text.
+      text(s, 22, 55);
+
+      // Underline the text.
+      line(22, 55, 22 + w, 55);
+
+      describe('The word "yoyo" underlined.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(28);
+      strokeWeight(0.5);
+
+      // Calculate the text width.
+      // "\n" starts a new line.
+      let s = 'yo\nyo';
+      let w = textWidth(s);
+
+      // Display the text.
+      text(s, 22, 55);
+
+      // Underline the text.
+      line(22, 55, 22 + w, 55);
+
+      describe('The word "yo" written twice, one copy beneath the other. The words are divided by a horizontal line.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: str
+    description: |
+      <p>string of text to measure.</p>
+    type: String
+return:
+  description: width measured in units of pixels.
+  type: Number
+chainable: false
+---
+
+
+# textWidth
diff --git a/src/content/reference/en/p5 copy/textWrap.mdx b/src/content/reference/en/p5 copy/textWrap.mdx
new file mode 100644
index 0000000000..0ba2b556a7
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textWrap.mdx	
@@ -0,0 +1,111 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L462
+title: textWrap
+module: Typography
+submodule: Attributes
+file: src/typography/attributes.js
+description: >
+  <p>Sets the style for wrapping text when
+
+  <a href="/reference/p5/text/">text()</a> is called.</p>
+
+  <p>The parameter, <code>style</code>, can be one of the following values:</p>
+
+  <p><code>WORD</code> starts new lines of text at spaces. If a string of text
+  doesn't
+
+  have spaces, it may overflow the text box and the canvas. This is the
+
+  default style.</p>
+
+  <p><code>CHAR</code> starts new lines as needed to stay within the text
+  box.</p>
+
+  <p><code>textWrap()</code> only works when the maximum width is set for a text
+  box. For
+
+  example, calling <code>text('Have a wonderful day', 0, 10, 100)</code> sets
+  the
+
+  maximum width to 100 pixels.</p>
+
+  <p>Calling <code>textWrap()</code> without an argument returns the current
+  style.</p>
+line: 462
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(20);
+      textWrap(WORD);
+
+      // Display the text.
+      text('Have a wonderful day', 0, 10, 100);
+
+      describe('The text "Have a wonderful day" written across three lines.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(20);
+      textWrap(CHAR);
+
+      // Display the text.
+      text('Have a wonderful day', 0, 10, 100);
+
+      describe('The text "Have a wonderful day" written across two lines.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the text.
+      textSize(20);
+      textWrap(CHAR);
+
+      // Display the text.
+      text('祝你有美好的一天', 0, 10, 100);
+
+      describe('The text "祝你有美好的一天" written across two lines.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: style
+    description: |
+      <p>text wrapping style, either WORD or CHAR.</p>
+    type: Constant
+return:
+  description: style
+  type: String
+chainable: false
+---
+
+
+# textWrap
diff --git a/src/content/reference/en/p5 copy/texture.mdx b/src/content/reference/en/p5 copy/texture.mdx
new file mode 100644
index 0000000000..7258f53ace
--- /dev/null
+++ b/src/content/reference/en/p5 copy/texture.mdx	
@@ -0,0 +1,207 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1716
+title: texture
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Sets the texture that will be used on shapes.</p>
+
+  <p>A texture is like a skin that wraps around a shape. <code>texture()</code>
+  works with
+
+  built-in shapes, such as <a href="/reference/p5/square/">square()</a> and
+
+  <a href="/reference/p5/sphere/">sphere()</a>, and custom shapes created with
+
+  functions such as <a href="/reference/p5/buildGeometry/">buildGeometry()</a>.
+  To
+
+  texture a geometry created with <a
+  href="/reference/p5/beginShape/">beginShape()</a>,
+
+  uv coordinates must be passed to each
+
+  <a href="/reference/p5/vertex/">vertex()</a> call.</p>
+
+  <p>The parameter, <code>tex</code>, is the texture to apply.
+  <code>texture()</code> can use a range
+
+  of sources including images, videos, and offscreen renderers such as
+
+  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> and
+
+  <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects.</p>
+
+  <p>To texture a geometry created with <a
+  href="/reference/p5/beginShape/">beginShape()</a>,
+
+  you will need to specify uv coordinates in <a
+  href="/reference/p5/vertex/">vertex()</a>.</p>
+
+  <p>Note: <code>texture()</code> can only be used in WebGL mode.</p>
+line: 1716
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A spinning cube with an image of a ceiling on each face.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the x-, y-, and z-axes.
+      rotateZ(frameCount * 0.01);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Draw the box.
+      box(50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let pg;
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Create a p5.Graphics object.
+      pg = createGraphics(100, 100);
+
+      // Draw a circle to the p5.Graphics object.
+      pg.background(200);
+      pg.circle(50, 50, 30);
+
+      describe('A spinning cube with circle at the center of each face.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the x-, y-, and z-axes.
+      rotateZ(frameCount * 0.01);
+      rotateX(frameCount * 0.01);
+      rotateY(frameCount * 0.01);
+
+      // Apply the p5.Graphics object as a texture.
+      texture(pg);
+
+      // Draw the box.
+      box(50);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let vid;
+
+    // Load a video and create a p5.MediaElement object.
+    function preload() {
+      vid = createVideo('/assets/fingers.mov');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Hide the video.
+      vid.hide();
+
+      // Set the video to loop.
+      vid.loop();
+
+      describe('A rectangle with video as texture');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Apply the video as a texture.
+      texture(vid);
+
+      // Draw the rectangle.
+      rect(-40, -40, 80, 80);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let vid;
+
+    // Load a video and create a p5.MediaElement object.
+    function preload() {
+      vid = createVideo('/assets/fingers.mov');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      // Hide the video.
+      vid.hide();
+
+      // Set the video to loop.
+      vid.loop();
+
+      describe('A rectangle with video as texture');
+    }
+
+    function draw() {
+      background(0);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Apply the video as a texture.
+      texture(vid);
+
+      // Draw a custom shape using uv coordinates.
+      beginShape();
+      vertex(-40, -40, 0, 0);
+      vertex(40, -40, 1, 0);
+      vertex(40, 40, 1, 1);
+      vertex(-40, 40, 0, 1);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: tex
+    description: |
+      <p>media to use as the texture.</p>
+    type: >-
+      p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
+chainable: true
+---
+
+
+# texture
diff --git a/src/content/reference/en/p5 copy/textureMode.mdx b/src/content/reference/en/p5 copy/textureMode.mdx
new file mode 100644
index 0000000000..397d1856b9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textureMode.mdx	
@@ -0,0 +1,254 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1903
+title: textureMode
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Changes the coordinate system used for textures when they’re applied to
+
+  custom shapes.</p>
+
+  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
+  shape needs a
+
+  way to map the points on its surface to the pixels in an image. Built-in
+
+  shapes such as <a href="/reference/p5/rect/">rect()</a> and
+
+  <a href="/reference/p5/box/">box()</a> already have these texture mappings
+  based on
+
+  their vertices. Custom shapes created with
+
+  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
+  passed as
+
+  uv coordinates.</p>
+
+  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
+  arguments,
+
+  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
+  <code>(x, y, z)</code>
+
+  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
+  the
+
+  corners of a rectangular image are mapped to the corners of a rectangle by
+  default:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  rect(0, 0, 30, 50);
+
+  </code></pre>
+
+  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
+
+  the same result could be achieved as follows:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+
+  // Top-left.
+
+  // u: 0, v: 0
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 300, v: 0
+
+  vertex(30, 0, 0, 300, 0);
+
+
+  // Bottom-right.
+
+  // u: 300, v: 500
+
+  vertex(30, 50, 0, 300, 500);
+
+
+  // Bottom-left.
+
+  // u: 0, v: 500
+
+  vertex(0, 50, 0, 0, 500);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p><code>textureMode()</code> changes the coordinate system for uv
+  coordinates.</p>
+
+  <p>The parameter, <code>mode</code>, accepts two possible constants. If
+  <code>NORMAL</code> is
+
+  passed, as in <code>textureMode(NORMAL)</code>, then the texture’s uv
+  coordinates can
+
+  be provided in the range 0 to 1 instead of the image’s dimensions. This can
+
+  be helpful for using the same code for multiple images of different sizes.
+
+  For example, the code snippet above could be rewritten as follows:</p>
+
+  <pre><code class="language-js">// Set the texture mode to use normalized
+  coordinates.
+
+  textureMode(NORMAL);
+
+
+  // Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+
+  // Top-left.
+
+  // u: 0, v: 0
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 1, v: 0
+
+  vertex(30, 0, 0, 1, 0);
+
+
+  // Bottom-right.
+
+  // u: 1, v: 1
+
+  vertex(30, 50, 0, 1, 1);
+
+
+  // Bottom-left.
+
+  // u: 0, v: 1
+
+  vertex(0, 50, 0, 0, 1);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p>By default, <code>mode</code> is <code>IMAGE</code>, which scales uv
+  coordinates to the
+
+  dimensions of the image. Calling <code>textureMode(IMAGE)</code> applies the
+  default.</p>
+
+  <p>Note: <code>textureMode()</code> can only be used in WebGL mode.</p>
+line: 1903
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('An image of a ceiling against a black background.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Draw the custom shape.
+      // Use the image's width and height as uv coordinates.
+      beginShape();
+      vertex(-30, -30, 0, 0);
+      vertex(30, -30, img.width, 0);
+      vertex(30, 30, img.width, img.height);
+      vertex(-30, 30, 0, img.height);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image and create a p5.Image object.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('An image of a ceiling against a black background.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Draw the custom shape.
+      // Use normalized uv coordinates.
+      beginShape();
+      vertex(-30, -30, 0, 0);
+      vertex(30, -30, 1, 0);
+      vertex(30, 30, 1, 1);
+      vertex(-30, 30, 0, 1);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: mode
+    description: |
+      <p>either IMAGE or NORMAL.</p>
+    type: Constant
+chainable: false
+---
+
+
+# textureMode
diff --git a/src/content/reference/en/p5 copy/textureWrap.mdx b/src/content/reference/en/p5 copy/textureWrap.mdx
new file mode 100644
index 0000000000..6734a5325b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/textureWrap.mdx	
@@ -0,0 +1,370 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2082
+title: textureWrap
+module: 3D
+submodule: Material
+file: src/webgl/material.js
+description: >
+  <p>Changes the way textures behave when a shape’s uv coordinates go beyond the
+
+  texture.</p>
+
+  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
+  shape needs a
+
+  way to map the points on its surface to the pixels in an image. Built-in
+
+  shapes such as <a href="/reference/p5/rect/">rect()</a> and
+
+  <a href="/reference/p5/box/">box()</a> already have these texture mappings
+  based on
+
+  their vertices. Custom shapes created with
+
+  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
+  passed as
+
+  uv coordinates.</p>
+
+  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
+  arguments,
+
+  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
+  <code>(x, y, z)</code>
+
+  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
+  the
+
+  corners of a rectangular image are mapped to the corners of a rectangle by
+  default:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  rect(0, 0, 30, 50);
+
+  </code></pre>
+
+  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
+
+  the same result could be achieved as follows:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+
+  // Top-left.
+
+  // u: 0, v: 0
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 300, v: 0
+
+  vertex(30, 0, 0, 300, 0);
+
+
+  // Bottom-right.
+
+  // u: 300, v: 500
+
+  vertex(30, 50, 0, 300, 500);
+
+
+  // Bottom-left.
+
+  // u: 0, v: 500
+
+  vertex(0, 50, 0, 0, 500);
+
+
+  endShape();
+
+  </code></pre>
+
+  <p><code>textureWrap()</code> controls how textures behave when their uv's go
+  beyond the
+
+  texture. Doing so can produce interesting visual effects such as tiling.
+
+  For example, the custom shape above could have u-coordinates are greater
+
+  than the image’s width:</p>
+
+  <pre><code class="language-js">// Apply the image as a texture.
+
+  texture(img);
+
+
+  // Draw the rectangle.
+
+  beginShape();
+
+  vertex(0, 0, 0, 0, 0);
+
+
+  // Top-right.
+
+  // u: 600
+
+  vertex(30, 0, 0, 600, 0);
+
+
+  // Bottom-right.
+
+  // u: 600
+
+  vertex(30, 50, 0, 600, 500);
+
+
+  vertex(0, 50, 0, 0, 500);
+
+  endShape();
+
+  </code></pre>
+
+  <p>The u-coordinates of 600 are greater than the texture image’s width of 300.
+
+  This creates interesting possibilities.</p>
+
+  <p>The first parameter, <code>wrapX</code>, accepts three possible constants.
+  If <code>CLAMP</code>
+
+  is passed, as in <code>textureWrap(CLAMP)</code>, the pixels at the edge of
+  the
+
+  texture will extend to the shape’s edges. If <code>REPEAT</code> is passed, as
+  in
+
+  <code>textureWrap(REPEAT)</code>, the texture will tile repeatedly until
+  reaching the
+
+  shape’s edges. If <code>MIRROR</code> is passed, as in
+  <code>textureWrap(MIRROR)</code>, the
+
+  texture will tile repeatedly until reaching the shape’s edges, flipping
+
+  its orientation between tiles. By default, textures <code>CLAMP</code>.</p>
+
+  <p>The second parameter, <code>wrapY</code>, is optional. It accepts the same
+  three
+
+  constants, <code>CLAMP</code>, <code>REPEAT</code>, and <code>MIRROR</code>.
+  If one of these constants is
+
+  passed, as in <code>textureWRAP(MIRROR, REPEAT)</code>, then the texture will
+  <code>MIRROR</code>
+
+  horizontally and <code>REPEAT</code> vertically. By default,
+  <code>wrapY</code> will be set to
+
+  the same value as <code>wrapX</code>.</p>
+
+  <p>Note: <code>textureWrap()</code> can only be used in WebGL mode.</p>
+line: 2082
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      // Note: CLAMP is the default mode.
+      textureWrap(CLAMP);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('Four identical images of a landscape arranged in a grid.');
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      textureWrap(REPEAT);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      textureWrap(MIRROR);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    function preload() {
+      img = loadImage('/assets/rockies128.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Set the texture mode.
+      textureMode(NORMAL);
+
+      // Set the texture wrapping.
+      textureWrap(REPEAT, MIRROR);
+
+      // Apply the image as a texture.
+      texture(img);
+
+      // Style the shape.
+      noStroke();
+
+      // Draw the shape.
+      // Use uv coordinates > 1.
+      beginShape();
+      vertex(-30, -30, 0, 0, 0);
+      vertex(30, -30, 0, 2, 0);
+      vertex(30, 30, 0, 2, 2);
+      vertex(-30, 30, 0, 0, 2);
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: wrapX
+    description: |
+      <p>either CLAMP, REPEAT, or MIRROR</p>
+    type: Constant
+  - name: wrapY
+    description: |
+      <p>either CLAMP, REPEAT, or MIRROR</p>
+    type: Constant
+    optional: true
+chainable: false
+---
+
+
+# textureWrap
diff --git a/src/content/reference/en/p5 copy/tint.mdx b/src/content/reference/en/p5 copy/tint.mdx
new file mode 100644
index 0000000000..e99dee4431
--- /dev/null
+++ b/src/content/reference/en/p5 copy/tint.mdx	
@@ -0,0 +1,201 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1192
+title: tint
+module: Image
+submodule: Loading & Displaying
+file: src/image/loading_displaying.js
+description: >
+  <p>Tints images using a color.</p>
+
+  <p>The version of <code>tint()</code> with one parameter interprets it one of
+  four ways.
+
+  If the parameter is a number, it's interpreted as a grayscale value. If the
+
+  parameter is a string, it's interpreted as a CSS color string. An array of
+
+  <code>[R, G, B, A]</code> values or a <a
+  href="/reference/p5/p5.Color">p5.Color</a> object can
+
+  also be used to set the tint color.</p>
+
+  <p>The version of <code>tint()</code> with two parameters uses the first one
+  as a
+
+  grayscale value and the second as an alpha value. For example, calling
+
+  <code>tint(255, 128)</code> will make an image 50% transparent.</p>
+
+  <p>The version of <code>tint()</code> with three parameters interprets them as
+  RGB or
+
+  HSB values, depending on the current
+
+  <a href="/reference/p5/colorMode/">colorMode()</a>. The optional fourth
+  parameter
+
+  sets the alpha value. For example, <code>tint(255, 0, 0, 100)</code> will give
+  images
+
+  a red tint and make them transparent.</p>
+line: 1192
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left image.
+      image(img, 0, 0);
+
+      // Right image.
+      // Tint with a CSS color string.
+      tint('red');
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left image.
+      image(img, 0, 0);
+
+      // Right image.
+      // Tint with RGB values.
+      tint(255, 0, 0);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left.
+      image(img, 0, 0);
+
+      // Right.
+      // Tint with RGBA values.
+      tint(255, 0, 0, 100);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Left.
+      image(img, 0, 0);
+
+      // Right.
+      // Tint with grayscale and alpha values.
+      tint(255, 180);
+      image(img, 50, 0);
+
+      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1192
+    params:
+      - name: v1
+        description: |
+          <p>red or hue value.</p>
+        type: Number
+      - name: v2
+        description: |
+          <p>green or saturation value.</p>
+        type: Number
+      - name: v3
+        description: |
+          <p>blue or brightness.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+  - line: 1318
+    params:
+      - name: value
+        description: |
+          <p>CSS color string.</p>
+        type: String
+  - line: 1323
+    params:
+      - name: gray
+        description: |
+          <p>grayscale value.</p>
+        type: Number
+      - name: alpha
+        description: ''
+        type: Number
+        optional: true
+  - line: 1329
+    params:
+      - name: values
+        description: |
+          <p>array containing the red, green, blue &
+                                          alpha components of the color.</p>
+        type: 'Number[]'
+  - line: 1335
+    params:
+      - name: color
+        description: |
+          <p>the tint color</p>
+        type: p5.Color
+chainable: false
+---
+
+
+# tint
diff --git a/src/content/reference/en/p5 copy/torus.mdx b/src/content/reference/en/p5 copy/torus.mdx
new file mode 100644
index 0000000000..f0e2740d59
--- /dev/null
+++ b/src/content/reference/en/p5 copy/torus.mdx	
@@ -0,0 +1,200 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L2183
+title: torus
+module: Shape
+submodule: 3D Primitives
+file: src/webgl/3d_primitives.js
+description: >
+  <p>Draws a torus.</p>
+
+  <p>A torus is a 3D shape with triangular faces that connect to form a ring.
+
+  Toruses with few faces look flattened. Toruses with many faces have smooth
+
+  surfaces.</p>
+
+  <p>The first parameter, <code>radius</code>, is optional. If a
+  <code>Number</code> is passed, as in
+
+  <code>torus(30)</code>, it sets the radius of the ring. By default,
+  <code>radius</code> is 50.</p>
+
+  <p>The second parameter, <code>tubeRadius</code>, is also optional. If a
+  <code>Number</code> is
+
+  passed, as in <code>torus(30, 15)</code>, it sets the radius of the tube. By
+  default,
+
+  <code>tubeRadius</code> is 10.</p>
+
+  <p>The third parameter, <code>detailX</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>torus(30, 15, 5)</code>, it sets the number of edges used to draw
+  the hole
+
+  of the torus. Using more edges makes the hole look more like a circle. By
+
+  default, <code>detailX</code> is 24.</p>
+
+  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
+  <code>Number</code> is passed,
+
+  as in <code>torus(30, 15, 5, 7)</code>, it sets the number of triangle
+  subdivisions to
+
+  use while filling in the torus’ height. By default, <code>detailY</code> is
+  16.</p>
+
+  <p>Note: <code>torus()</code> can only be used in WebGL mode.</p>
+line: 2183
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      torus();
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30.
+      torus(30);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30 and tubeRadius to 15.
+      torus(30, 15);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30 and tubeRadius to 15.
+      // Set its detailX to 5.
+      torus(30, 15, 5);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click and drag the mouse to view the scene from different angles.
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white torus on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Enable orbiting with the mouse.
+      orbitControl();
+
+      // Draw the torus.
+      // Set its radius to 30 and tubeRadius to 15.
+      // Set its detailX to 5.
+      // Set its detailY to 3.
+      torus(30, 15, 5, 3);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: radius
+    description: |
+      <p>radius of the torus. Defaults to 50.</p>
+    type: Number
+    optional: true
+  - name: tubeRadius
+    description: |
+      <p>radius of the tube. Defaults to 10.</p>
+    type: Number
+    optional: true
+  - name: detailX
+    description: |
+      <p>number of edges that form the hole. Defaults to 24.</p>
+    type: Integer
+    optional: true
+  - name: detailY
+    description: |
+      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
+    type: Integer
+    optional: true
+chainable: true
+---
+
+
+# torus
diff --git a/src/content/reference/en/p5 copy/touchEnded.mdx b/src/content/reference/en/p5 copy/touchEnded.mdx
new file mode 100644
index 0000000000..aebb308dc1
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touchEnded.mdx	
@@ -0,0 +1,196 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L468
+title: touchEnded
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>A function that's called once each time a screen touch ends.</p>
+
+  <p>Declaring the function <code>touchEnded()</code> sets a code block to run
+
+  automatically when the user stops touching a touchscreen device:</p>
+
+  <pre><code class="language-js">function touchEnded() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
+  the most
+
+  recent touch points when <code>touchEnded()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function touchEnded() {
+    // Paint over the background.
+    background(200);
+
+    // Mark each remaining touch point when the user stops
+    // a touch.
+    for (let touch of touches) {
+      circle(touch.x, touch.y, 40);
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, event, is optional. <code>touchEnded()</code> will be passed
+  a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
+  target="_blank">TouchEvent</a>
+
+  object with properties that describe the touch event:</p>
+
+  <pre><code class="language-js">function touchEnded(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <a
+  href="/reference/p5/mouseReleased/">mouseReleased()</a> will
+
+  run when the user’s touch ends if <code>touchEnded()</code> isn’t declared. If
+
+  <code>touchEnded()</code> is declared, then <code>touchEnded()</code> will run
+  when a user’s
+
+  touch ends and <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
+  won’t.</p>
+
+  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
+
+  <code>touchEnded()</code>, and <a
+  href="/reference/p5/touchMoved/">touchMoved()</a> are all
+
+  related. <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon
+  as the
+
+  user touches a touchscreen device. <code>touchEnded()</code> runs as soon as
+  the user
+
+  ends a touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs
+  repeatedly as
+
+  the user moves any touch points.</p>
+line: 468
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle colors when a touch ends.
+    function touchEnded() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let bgColor = 50;
+    let fillColor = 255;
+    let borderWidth = 0.5;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+      );
+    }
+
+    function draw() {
+      background(bgColor);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      fill(0);
+      noStroke();
+
+      // Display the number of touch points.
+      text(touches.length, 50, 20);
+
+      // Style the touch points.
+      fill(fillColor);
+      stroke(0);
+      strokeWeight(borderWidth);
+
+      // Display the touch points as circles.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+
+    // Set the background color to a random grayscale value.
+    function touchStarted() {
+      bgColor = random(80, 255);
+    }
+
+    // Set the fill color to a random grayscale value.
+    function touchEnded() {
+      fillColor = random(0, 255);
+    }
+
+    // Set the stroke weight.
+    function touchMoved() {
+      // Increment the border width.
+      borderWidth += 0.1;
+
+      // Reset the border width once it's too thick.
+      if (borderWidth > 20) {
+        borderWidth = 0.5;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>TouchEvent</code> argument.</p>
+    type: TouchEvent
+    optional: true
+chainable: false
+---
+
+
+# touchEnded
diff --git a/src/content/reference/en/p5 copy/touchMoved.mdx b/src/content/reference/en/p5 copy/touchMoved.mdx
new file mode 100644
index 0000000000..80c23b81f8
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touchMoved.mdx	
@@ -0,0 +1,198 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L295
+title: touchMoved
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>A function that's called when the user touches the screen and moves.</p>
+
+  <p>Declaring the function <code>touchMoved()</code> sets a code block to run
+
+  automatically when the user touches a touchscreen device and moves:</p>
+
+  <pre><code class="language-js">function touchMoved() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
+  the most
+
+  recent touch points when <code>touchMoved()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function touchMoved() {
+    // Paint over the background.
+    background(200);
+
+    // Mark each touch point while the user moves.
+    for (let touch of touches) {
+      circle(touch.x, touch.y, 40);
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, event, is optional. <code>touchMoved()</code> will be passed
+  a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
+  target="_blank">TouchEvent</a>
+
+  object with properties that describe the touch event:</p>
+
+  <pre><code class="language-js">function touchMoved(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <a
+  href="/reference/p5/mouseDragged/">mouseDragged()</a> will
+
+  run when the user’s touch points move if <code>touchMoved()</code> isn’t
+  declared. If
+
+  <code>touchMoved()</code> is declared, then <code>touchMoved()</code> will run
+  when a user’s
+
+  touch points move and <a href="/reference/p5/mouseDragged/">mouseDragged()</a>
+  won’t.</p>
+
+  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a>, and
+
+  <code>touchMoved()</code> are all related.
+
+  <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon as the
+  user
+
+  touches a touchscreen device. <a
+  href="/reference/p5/touchEnded/">touchEnded()</a>
+
+  runs as soon as the user ends a touch. <code>touchMoved()</code> runs
+  repeatedly as
+
+  the user moves any touch points.</p>
+line: 295
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    function touchMoved() {
+      // Update the grayscale value.
+      value += 5;
+
+      // Reset the grayscale value.
+      if (value > 255) {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let bgColor = 50;
+    let fillColor = 255;
+    let borderWidth = 0.5;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+      );
+    }
+
+    function draw() {
+      background(bgColor);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      fill(0);
+      noStroke();
+
+      // Display the number of touch points.
+      text(touches.length, 50, 20);
+
+      // Style the touch points.
+      fill(fillColor);
+      stroke(0);
+      strokeWeight(borderWidth);
+
+      // Display the touch points as circles.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+
+    // Set the background color to a random grayscale value.
+    function touchStarted() {
+      bgColor = random(80, 255);
+    }
+
+    // Set the fill color to a random grayscale value.
+    function touchEnded() {
+      fillColor = random(0, 255);
+    }
+
+    // Set the stroke weight.
+    function touchMoved() {
+      // Increment the border width.
+      borderWidth += 0.1;
+
+      // Reset the border width once it's too thick.
+      if (borderWidth > 20) {
+        borderWidth = 0.5;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional TouchEvent argument.</p>
+    type: TouchEvent
+    optional: true
+chainable: false
+---
+
+
+# touchMoved
diff --git a/src/content/reference/en/p5 copy/touchStarted.mdx b/src/content/reference/en/p5 copy/touchStarted.mdx
new file mode 100644
index 0000000000..fc33b1f1c5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touchStarted.mdx	
@@ -0,0 +1,197 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L125
+title: touchStarted
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>A function that's called once each time the user touches the screen.</p>
+
+  <p>Declaring a function called <code>touchStarted()</code> sets a code block
+  to run
+
+  automatically each time the user begins touching a touchscreen device:</p>
+
+  <pre><code class="language-js">function touchStarted() {
+    // Code to run.
+  }
+
+  </code></pre>
+
+  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
+  the most
+
+  recent touch points when <code>touchStarted()</code> is called by p5.js:</p>
+
+  <pre><code class="language-js">function touchStarted() {
+    // Paint over the background.
+    background(200);
+
+    // Mark each touch point once with a circle.
+    for (let touch of touches) {
+      circle(touch.x, touch.y, 40);
+    }
+  }
+
+  </code></pre>
+
+  <p>The parameter, event, is optional. <code>touchStarted()</code> will be
+  passed a
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
+  target="_blank">TouchEvent</a>
+
+  object with properties that describe the touch event:</p>
+
+  <pre><code class="language-js">function touchStarted(event) {
+    // Code to run that uses the event.
+    console.log(event);
+  }
+
+  </code></pre>
+
+  <p>On touchscreen devices, <a
+  href="/reference/p5/mousePressed/">mousePressed()</a> will
+
+  run when a user’s touch starts if <code>touchStarted()</code> isn’t declared.
+  If
+
+  <code>touchStarted()</code> is declared, then <code>touchStarted()</code> will
+  run when a user’s
+
+  touch starts and <a href="/reference/p5/mousePressed/">mousePressed()</a>
+  won’t.</p>
+
+  <p>Note: <code>touchStarted()</code>, <a
+  href="/reference/p5/touchEnded/">touchEnded()</a>, and
+
+  <a href="/reference/p5/touchMoved/">touchMoved()</a> are all related.
+
+  <code>touchStarted()</code> runs as soon as the user touches a touchscreen
+  device.
+
+  <a href="/reference/p5/touchEnded/">touchEnded()</a> runs as soon as the user
+  ends a
+
+  touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs repeatedly as
+  the
+
+  user moves any touch points.</p>
+line: 125
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let value = 0;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the square.
+      fill(value);
+
+      // Draw the square.
+      square(25, 25, 50);
+    }
+
+    // Toggle colors with each touch.
+    function touchStarted() {
+      if (value === 0) {
+        value = 255;
+      } else {
+        value = 0;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    let bgColor = 50;
+    let fillColor = 255;
+    let borderWidth = 0.5;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+      );
+    }
+
+    function draw() {
+      background(bgColor);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+      fill(0);
+      noStroke();
+
+      // Display the number of touch points.
+      text(touches.length, 50, 20);
+
+      // Style the touch points.
+      fill(fillColor);
+      stroke(0);
+      strokeWeight(borderWidth);
+
+      // Display the touch points as circles.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+
+    // Set the background color to a random grayscale value.
+    function touchStarted() {
+      bgColor = random(80, 255);
+    }
+
+    // Set the fill color to a random grayscale value.
+    function touchEnded() {
+      fillColor = random(0, 255);
+    }
+
+    // Set the stroke weight.
+    function touchMoved() {
+      // Increment the border width.
+      borderWidth += 0.1;
+
+      // Reset the border width once it's too thick.
+      if (borderWidth > 20) {
+        borderWidth = 0.5;
+      }
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional <code>TouchEvent</code> argument.</p>
+    type: TouchEvent
+    optional: true
+chainable: false
+---
+
+
+# touchStarted
diff --git a/src/content/reference/en/p5 copy/touches.mdx b/src/content/reference/en/p5 copy/touches.mdx
new file mode 100644
index 0000000000..7ad03e1610
--- /dev/null
+++ b/src/content/reference/en/p5 copy/touches.mdx	
@@ -0,0 +1,102 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L10
+title: touches
+module: Events
+submodule: Touch
+file: src/events/touch.js
+description: >
+  <p>An <code>Array</code> of all the current touch points on a touchscreen
+  device.</p>
+
+  <p>The <code>touches</code> array is empty by default. When the user touches
+  their
+
+  screen, a new touch point is tracked and added to the array. Touch points
+
+  are <code>Objects</code> with the following properties:</p>
+
+  <pre><code class="language-js">// Iterate over the touches array.
+
+  for (let touch of touches) {
+    // x-coordinate relative to the top-left
+    // corner of the canvas.
+    console.log(touch.x);
+
+    // y-coordinate relative to the top-left
+    // corner of the canvas.
+    console.log(touch.y);
+
+    // x-coordinate relative to the top-left
+    // corner of the browser.
+    console.log(touch.winX);
+
+    // y-coordinate relative to the top-left
+    // corner of the browser.
+    console.log(touch.winY);
+
+    // ID number
+    console.log(touch.id);
+  }
+
+  </code></pre>
+line: 10
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. White circles appear where the user touches the square.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a circle at each touch point.
+      for (let touch of touches) {
+        circle(touch.x, touch.y, 40);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // On a touchscreen device, touch the canvas using one or more fingers
+    // at the same time.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'A gray square. Labels appear where the user touches the square, displaying the coordinates.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a label above each touch point.
+      for (let touch of touches) {
+        text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: 'Object[]'
+---
+
+
+# touches
diff --git a/src/content/reference/en/p5 copy/translate.mdx b/src/content/reference/en/p5 copy/translate.mdx
new file mode 100644
index 0000000000..dd725eb199
--- /dev/null
+++ b/src/content/reference/en/p5 copy/translate.mdx	
@@ -0,0 +1,241 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1223
+title: translate
+module: Transform
+submodule: Transform
+file: src/core/transform.js
+description: >
+  <p>Translates the coordinate system.</p>
+
+  <p>By default, the origin <code>(0, 0)</code> is at the sketch's top-left
+  corner in 2D
+
+  mode and center in WebGL mode. The <code>translate()</code> function shifts
+  the origin
+
+  to a different position. Everything drawn after <code>translate()</code> is
+  called
+
+  will appear to be shifted. There are two ways to call <code>translate()</code>
+  with
+
+  parameters that set the origin's position.</p>
+
+  <p>The first way to call <code>translate()</code> uses numbers to set the
+  amount of
+
+  translation. The first two parameters, <code>x</code> and <code>y</code>, set
+  the amount to
+
+  translate along the positive x- and y-axes. For example, calling
+
+  <code>translate(20, 30)</code> translates the origin 20 pixels along the
+  x-axis and 30
+
+  pixels along the y-axis. The third parameter, <code>z</code>, is optional. It
+  sets the
+
+  amount to translate along the positive z-axis. For example, calling
+
+  <code>translate(20, 30, 40)</code> translates the origin 20 pixels along the
+  x-axis,
+
+  30 pixels along the y-axis, and 40 pixels along the z-axis.</p>
+
+  <p>The second way to call <code>translate()</code> uses a
+
+  <a href="/reference/p5/p5.Vector">p5.Vector</a> object to set the amount of
+
+  translation. For example, calling <code>translate(myVector)</code> uses the
+  x-, y-,
+
+  and z-components of <code>myVector</code> to set the amount to translate along
+  the x-,
+
+  y-, and z-axes. Doing so is the same as calling
+
+  <code>translate(myVector.x, myVector.y, myVector.z)</code>.</p>
+
+  <p>By default, transformations accumulate. For example, calling
+
+  <code>translate(10, 0)</code> twice has the same effect as calling
+
+  <code>translate(20, 0)</code> once. The <a
+  href="/reference/p5/push/">push()</a> and
+
+  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
+
+  transformations within distinct drawing groups.</p>
+
+  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
+
+  <code>translate(10, 0)</code> inside the <a
+  href="/reference/p5/draw/">draw()</a> function won't
+
+  cause shapes to move continuously.</p>
+line: 1223
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw a circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Translate the origin to the center.
+      translate(50, 50);
+
+      // Draw the red circle.
+      fill('red');
+      circle(0, 0, 40);
+
+      // Translate the origin to the right.
+      translate(25, 0);
+
+      // Draw the blue circle.
+      fill('blue');
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle moves slowly from left to right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Calculate the x-coordinate.
+      let x = frameCount * 0.2;
+
+      // Translate the origin.
+      translate(x, 50);
+
+      // Draw a circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Create a p5.Vector object.
+      let v = createVector(50, 50);
+
+      // Translate the origin by the vector.
+      translate(v);
+
+      // Draw a circle at coordinates (0, 0).
+      circle(0, 0, 40);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe(
+        'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      // Turn on the lights.
+      lights();
+
+      // Style the spheres.
+      noStroke();
+
+      // Draw the red sphere.
+      fill('red');
+      sphere(10);
+
+      // Translate the origin to the right.
+      translate(30, 0, 0);
+
+      // Draw the blue sphere.
+      fill('blue');
+      sphere(10);
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1223
+    params:
+      - name: x
+        description: |
+          <p>amount to translate along the positive x-axis.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>amount to translate along the positive y-axis.</p>
+        type: Number
+      - name: z
+        description: |
+          <p>amount to translate along the positive z-axis.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 1394
+    params:
+      - name: vector
+        description: |
+          <p>vector by which to translate.</p>
+        type: p5.Vector
+    chainable: 1
+chainable: true
+---
+
+
+# translate
diff --git a/src/content/reference/en/p5 copy/triangle.mdx b/src/content/reference/en/p5 copy/triangle.mdx
new file mode 100644
index 0000000000..08f1afb223
--- /dev/null
+++ b/src/content/reference/en/p5 copy/triangle.mdx	
@@ -0,0 +1,104 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1385
+title: triangle
+module: Shape
+submodule: 2D Primitives
+file: src/core/shape/2d_primitives.js
+description: >
+  <p>Draws a triangle.</p>
+
+  <p>A triangle is a three-sided shape defined by three points. The
+
+  first two parameters specify the triangle's first point <code>(x1, y1)</code>.
+  The
+
+  middle two parameters specify its second point <code>(x2, y2)</code>. And the
+  last two
+
+  parameters specify its third point <code>(x3, y3)</code>.</p>
+line: 1385
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      triangle(30, 75, 58, 20, 86, 75);
+
+      describe('A white triangle with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      triangle(-20, 25, 8, -30, 36, 25);
+
+      describe('A white triangle with a black outline on a gray canvas.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white triangle spins around on a gray canvas.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Draw the triangle.
+      triangle(-20, 25, 8, -30, 36, 25);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x1
+    description: |
+      <p>x-coordinate of the first point.</p>
+    type: Number
+  - name: y1
+    description: |
+      <p>y-coordinate of the first point.</p>
+    type: Number
+  - name: x2
+    description: |
+      <p>x-coordinate of the second point.</p>
+    type: Number
+  - name: y2
+    description: |
+      <p>y-coordinate of the second point.</p>
+    type: Number
+  - name: x3
+    description: |
+      <p>x-coordinate of the third point.</p>
+    type: Number
+  - name: y3
+    description: |
+      <p>y-coordinate of the third point.</p>
+    type: Number
+chainable: true
+---
+
+
+# triangle
diff --git a/src/content/reference/en/p5 copy/trim.mdx b/src/content/reference/en/p5 copy/trim.mdx
new file mode 100644
index 0000000000..a782306725
--- /dev/null
+++ b/src/content/reference/en/p5 copy/trim.mdx	
@@ -0,0 +1,113 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L916
+title: trim
+module: Data
+submodule: String Functions
+file: src/utilities/string_functions.js
+description: >
+  <p>Removes whitespace from the start and end of a <code>String</code> without
+  changing the middle.</p>
+
+  <p><code>trim()</code> trims
+
+  <a href="https://developer.mozilla.org/en-US/docs/Glossary/whitespace/"
+  target="_blank">whitespace characters</a>
+
+  such as spaces, carriage returns, tabs, Unicode "nbsp" character.</p>
+
+  <p>The parameter, <code>str</code>, is the string to trim. If a single string
+  is passed,
+
+  as in <code>trim('   pad   ')</code>, a single string is returned. If an array
+  of
+
+  strings is passed, as in <code>trim(['    pad   ', '\n space \n'])</code>, an
+  array of
+
+  strings is returned.</p>
+line: 916
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let string = '   p5*js   ';
+
+      // Trim the whitespace.
+      let trimmed = trim(string);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the text.
+      text(`Hello, ${trimmed}!`, 50, 50);
+
+      describe('The text "Hello, p5*js!" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of strings.
+      let strings = ['   wide  ', '\n  open  ', '\n spaces  '];
+
+      // Trim the whitespace.
+      let trimmed = trim(strings);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(10);
+
+      // Display the text.
+      text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);
+
+      describe('The text "wide open spaces" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: trimmed string.
+  type: String
+overloads:
+  - line: 916
+    params:
+      - name: str
+        description: |
+          <p>string to trim.</p>
+        type: String
+    return:
+      description: trimmed string.
+      type: String
+  - line: 984
+    params:
+      - name: strs
+        description: |
+          <p>strings to trim.</p>
+        type: 'String[]'
+    return:
+      description: trimmed strings.
+      type: 'String[]'
+chainable: false
+---
+
+
+# trim
diff --git a/src/content/reference/en/p5 copy/turnAxis.mdx b/src/content/reference/en/p5 copy/turnAxis.mdx
new file mode 100644
index 0000000000..e8dc93e115
--- /dev/null
+++ b/src/content/reference/en/p5 copy/turnAxis.mdx	
@@ -0,0 +1,54 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L378
+title: turnAxis
+module: Events
+submodule: Acceleration
+file: src/events/acceleration.js
+description: >
+  <p>When a device is rotated, the axis that triggers the <a
+  href="/reference/p5/deviceTurned/">deviceTurned()</a>
+
+  method is stored in the turnAxis variable. The turnAxis variable is only
+  defined within
+
+  the scope of deviceTurned().</p>
+line: 378
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Run this example on a mobile device
+    // Rotate the device by 90 degrees in the
+    // X-axis to change the value.
+
+    let value = 0;
+    function draw() {
+      fill(value);
+      rect(25, 25, 50, 50);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when device turns`);
+      describe(`50-by-50 black rect in center of canvas.
+        turns white on mobile when x-axis turns`);
+    }
+    function deviceTurned() {
+      if (turnAxis === 'X') {
+        if (value === 0) {
+          value = 255;
+        } else if (value === 255) {
+          value = 0;
+        }
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# turnAxis
diff --git a/src/content/reference/en/p5 copy/types/Array.mdx b/src/content/reference/en/p5 copy/types/Array.mdx
new file mode 100644
index 0000000000..17fe1c2ed3
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Array.mdx	
@@ -0,0 +1,269 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1140
+title: Array
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A list that keeps several pieces of data in order.</p>
+
+  <p>Arrays are helpful for storing related data. They can contain data of any
+
+  type. For example, an array could contain a list of someone's favorite
+
+  colors as strings. Arrays are created as follows:</p>
+
+  <pre><code class="language-js">let myArray = ['deeppink', 'darkorchid',
+  'magenta'];
+
+  </code></pre>
+
+  <p>Each piece of data in an array is called an element. Each element has an
+
+  address, or index, within its array. The variable <code>myArray</code> refers
+  to an
+
+  array with three <a href="/reference/p5/String/">String</a> elements,
+  <code>'deeppink'</code>,
+
+  <code>'darkorchid'</code>, and <code>'magenta'</code>. Arrays are
+  zero-indexed, which means
+
+  that <code>'deeppink'</code> is at index 0, <code>'darkorchid'</code> is at
+  index 1, and
+
+  '<code>magenta'</code> is at index 2. Array elements can be accessed using
+  their
+
+  indices as follows:</p>
+
+  <pre><code class="language-js">let zeroth = myArray[0]; // 'deeppink'
+
+  let first = myArray[1]; // 'darkorchid'
+
+  let second = myArray[2]; // 'magenta'
+
+  </code></pre>
+
+  <p>Elements can be added to the end of an array by calling the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push/"
+  target="_blank">push()</a>
+
+  method as follows:</p>
+
+  <pre><code class="language-js">myArray.push('lavender');
+
+
+  let third = myArray[3]; // 'lavender'
+
+  </code></pre>
+
+  <p>See <a
+  href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays/"
+  target="_blank">MDN</a>
+
+  for more information about arrays.</p>
+line: 1140
+isConstructor: false
+itemtype: property
+example:
+  - >-
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an array
+
+    // with three numeric elements.
+
+    let xCoordinates = [25, 50, 75];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'Three white circles drawn in a horizontal line on a gray background.'
+      );
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access the element at index 0, which is 25.
+      circle(xCoordinates[0], 50, 20);
+
+      // Access the element at index 1, which is 50.
+      circle(xCoordinates[1], 50, 20);
+
+      // Access the element at index 2, which is 75.
+      circle(xCoordinates[2], 50, 20);
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an array with three
+    numeric elements.
+
+    let xCoordinates = [20, 40, 60];
+
+
+    // Add another element to the end of the array.
+
+    xCoordinates.push(80);
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access the element at index 0, which is 20.
+      circle(xCoordinates[0], 50, 20);
+
+      // Access the element at index 1, which is 40.
+      circle(xCoordinates[1], 50, 20);
+
+      // Access the element at index 2, which is 60.
+      circle(xCoordinates[2], 50, 20);
+
+      // Access the element at index 3, which is 80.
+      circle(xCoordinates[3], 50, 20);
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an empty array.
+
+    let xCoordinates = [];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Add elements to the array using a loop.
+      for (let x = 20; x < 100; x += 20) {
+        xCoordinates.push(x);
+      }
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access the element at index i and use it to draw a circle.
+      for (let i = 0; i < xCoordinates.length; i += 1) {
+        circle(xCoordinates[i], 50, 20);
+      }
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an empty array.
+
+    let xCoordinates = [];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Add elements to the array using a loop.
+      for (let x = 20; x < 100; x += 20) {
+        xCoordinates.push(x);
+      }
+
+      describe('Four white circles drawn in a horizontal line on a gray background.');
+    }
+
+
+    function draw() {
+      background(200);
+
+      // Access each element of the array and use it to draw a circle.
+      for (let x of xCoordinates) {
+        circle(x, 50, 20);
+      }
+    }
+
+    </code>
+
+    </div>
+
+
+    <div>
+
+    <code>
+
+    // Declare the variable xCoordinates and assign it an empty array.
+
+    let xCoordinates = [];
+
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Add elements to the array using a loop.
+      for (let x = 20; x < 100; x += 20) {
+        xCoordinates.push(x);
+      }
+
+      describe(
+        'Four white circles in a horizontal line on a gray background. The circles move randomly.'
+      );
+    }
+
+
+    function draw() {
+      background(200);
+
+      for (let i = 0; i < xCoordinates.length; i += 1) {
+        // Update the element at index i.
+        xCoordinates[i] += random(-1, 1);
+
+        // Use the element at index i to draw a circle.
+        circle(xCoordinates[i], 50, 20);
+      }
+    }
+
+    </code>
+
+    </div>
+class: p5
+---
+
+
+# Array
diff --git a/src/content/reference/en/p5 copy/types/Boolean.mdx b/src/content/reference/en/p5 copy/types/Boolean.mdx
new file mode 100644
index 0000000000..01d02c8de2
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Boolean.mdx	
@@ -0,0 +1,273 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L502
+title: Boolean
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A value that's either <code>true</code> or <code>false</code>.</p>
+
+  <p><code>Boolean</code> values help to make decisions in code. They appear any
+  time a
+
+  logical condition is checked. For example, the condition
+
+  "Is a mouse button being pressed?" must be either <code>true</code> or
+
+  <code>false</code>:</p>
+
+  <pre><code class="language-js">// If the user presses the mouse, draw a circle
+  at
+
+  // the mouse's location.
+
+  if (mouseIsPressed === true) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>The <code>if</code> statement checks whether
+
+  <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> is
+  <code>true</code> and draws a
+
+  circle if it is. <code>Boolean</code> expressions such as <code>mouseIsPressed
+  === true</code>
+
+  evaluate to one of the two possible <code>Boolean</code> values:
+  <code>true</code> or <code>false</code>.</p>
+
+  <p>The <code>===</code> operator (EQUAL) checks whether two values are equal.
+  If they
+
+  are, the expression evaluates to <code>true</code>. Otherwise, it evaluates to
+
+  <code>false</code>.</p>
+
+  <p>Note: There's also a <code>==</code> operator with two <code>=</code>
+  instead of three. Don't use
+
+  it.</p>
+
+  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
+  variable is
+
+  always <code>true</code> or <code>false</code>, so the code snippet above
+  could also be written
+
+  as follows:</p>
+
+  <pre><code class="language-js">if (mouseIsPressed) {
+    circle(mouseX, mouseY, 20);
+  }
+
+  </code></pre>
+
+  <p>The <code>!==</code> operator (NOT EQUAL) checks whether two values are not
+  equal, as
+
+  in the following example:</p>
+
+  <pre><code class="language-js">if (2 + 2 !== 4) {
+    text('War is peace.', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>Starting from the left, the arithmetic expression <code>2 + 2</code>
+  produces the
+
+  value <code>4</code>. The <code>Boolean</code> expression <code>4 !== 4</code>
+  evaluates to <code>false</code> because
+
+  <code>4</code> is equal to itself. As a result, the <code>if</code>
+  statement's body is skipped.</p>
+
+  <p>Note: There's also a <code>!=</code> operator with one <code>=</code>
+  instead of two. Don't use
+
+  it.</p>
+
+  <p>The <code>Boolean</code> operator <code>&&</code> (AND) checks whether two
+  expressions are both
+
+  <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
+    text('You pressed the "p" key!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
+  message will
+
+  display.</p>
+
+  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
+  least one of two
+
+  expressions is <code>true</code>:</p>
+
+  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
+  true) {
+    text('You did something!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>If the user presses a key, or presses a mouse button, or both, then a
+
+  message will display.</p>
+
+  <p>The following truth table summarizes a few common scenarios with
+  <code>&&</code> and
+
+  <code>||</code>:</p>
+
+  <pre><code class="language-js">true && true  // true
+
+  true && false // false
+
+  false && false // false
+
+  true || true  // true
+
+  true || false // true
+
+  false || false // false
+
+  </code></pre>
+
+  <p>The relational operators <code>></code>, <code><< code="">,
+  <code>>=</code>, and <code><=< code=""> also produce <code>Boolean</code>
+
+  values:</=<></code></<></code></p>
+
+  <pre><code class="language-js">2 > 1 // true
+
+  2 < 1 // false
+
+  2 >= 2 // true
+
+  2 <= 2="" true="" <="" code=""/></code></pre>
+
+  <p>See <a href="/reference/p5/if/">if</a> for more information about
+  <code>if</code> statements and
+
+  <a href="/reference/p5/Number/">Number</a> for more information about
+  <code>Number</code>s.</p>
+line: 502
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the user presses the mouse, draw a circle at that location.
+      if (mouseIsPressed) {
+        circle(mouseX, mouseY, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the user presses the mouse, draw a circle at that location.
+      if (mouseIsPressed === true) {
+        circle(mouseX, mouseY, 20);
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click on the canvas to begin detecting key presses.
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A gray square that turns pink when the user presses the mouse or a key.');
+    }
+
+    function draw() {
+      background(200);
+
+      // If the user presses the mouse, change the background color.
+      if (mouseIsPressed === true || keyIsPressed === true) {
+        background('deeppink');
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Click the canvas to begin detecting key presses.
+
+    // Create a Boolean variable.
+    let isPlaying = false;
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe(
+        'The message "Begin?\nY or N" written in green on a black background. The message "Good luck!" appears when they press the "y" key.'
+      );
+    }
+
+    function draw() {
+      background(0);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textFont('Courier New');
+      textSize(16);
+      fill(0, 255, 0);
+
+      // Display a different message when the user begins playing.
+      if (isPlaying === false) {
+        text('Begin?', 50, 40);
+        text('Y or N', 50, 60);
+      } else {
+        text('Good luck!', 50, 50);
+      }
+    }
+
+    // Start playing when the user presses the 'y' key.
+    function keyPressed() {
+      if (key === 'y') {
+        isPlaying = true;
+      }
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# Boolean
diff --git a/src/content/reference/en/p5 copy/types/Number.mdx b/src/content/reference/en/p5 copy/types/Number.mdx
new file mode 100644
index 0000000000..3dfa850720
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Number.mdx	
@@ -0,0 +1,201 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L853
+title: Number
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A number that can be positive, negative, or zero.</p>
+
+  <p>The <code>Number</code> data type is useful for describing values such as
+  position,
+
+  size, and color. A number can be an integer such as 20 or a decimal number
+
+  such as 12.34. For example, a circle's position and size can be described
+
+  by three numbers:</p>
+
+  <pre><code class="language-js">circle(50, 50, 20);
+
+  </code></pre>
+
+  <pre><code class="language-js">circle(50, 50, 12.34);
+
+  </code></pre>
+
+  <p>Numbers support basic arithmetic and follow the standard order of
+
+  operations: Parentheses, Exponents, Multiplication, Division, Addition,
+
+  and Subtraction (PEMDAS). For example, it's common to use arithmetic
+
+  operators with p5.js' system variables that are numbers:</p>
+
+  <pre><code class="language-js">// Draw a circle at the center.
+
+  circle(width / 2, height / 2, 20);
+
+  </code></pre>
+
+  <pre><code class="language-js">// Draw a circle that moves from left to right.
+
+  circle(frameCount * 0.01, 50, 20);
+
+  </code></pre>
+
+  <p>Here's a quick overview of the arithmetic operators:</p>
+
+  <pre><code class="language-js">1 + 2 // Add
+
+  1 - 2 // Subtract
+
+  1 * 2 // Multiply
+
+  1 / 2 // Divide
+
+  1 % 2 // Remainder
+
+  1 ** 2 // Exponentiate
+
+  </code></pre>
+
+  <p>It's common to update a number variable using arithmetic. For example, an
+
+  object's location can be updated like so:</p>
+
+  <pre><code class="language-js">x = x + 1;
+
+  </code></pre>
+
+  <p>The statement above adds 1 to a variable <code>x</code> using the
+  <code>+</code> operator. The
+
+  addition assignment operator <code>+=</code> expresses the same idea:</p>
+
+  <pre><code class="language-js">x += 1;
+
+  </code></pre>
+
+  <p>Here's a quick overview of the assignment operators:</p>
+
+  <pre><code class="language-js">x += 2 // Addition assignment
+
+  x -= 2 // Subtraction assignment
+
+  x *= 2 // Multiplication assignment
+
+  x /= 2 // Division assignment
+
+  x %= 2 // Remainder assignment
+
+  </code></pre>
+
+  <p>Numbers can be compared using the
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators"
+  target="_blank">relational operators</a>
+
+  <code>></code>, <code><< code="">, <code>>=</code>, <code><=< code="">,
+  <code>===</code>, and <code>!==</code>.  For example, a sketch's
+
+  <a href="/reference/p5/frameCount/">frameCount</a> can be used as a
+  timer:</=<></code></<></code></p>
+
+  <pre><code class="language-js">if (frameCount > 1000) {
+    text('Game over!', 50, 50);
+  }
+
+  </code></pre>
+
+  <p>An expression such as <code>frameCount > 1000</code> evaluates to a
+  <code>Boolean</code> value
+
+  that's either <code>true</code> or <code>false</code>. The relational
+  operators all produce
+
+  <code>Boolean</code> values:</p>
+
+  <pre><code class="language-js">2 > 1 // true
+
+  2 < 1 // false
+
+  2 >= 2 // true
+
+  2 <= 2="" true="" !="=" false="" <="" code=""/></code></pre>
+
+  <p>See <a href="/reference/p5/Boolean/">Boolean</a> for more information about
+  comparisons and conditions.</p>
+
+  <p>Note: There are also <code>==</code> and <code>!=</code> operators with one
+  fewer <code>=</code>. Don't use them.</p>
+
+  <p>Expressions with numbers can also produce special values when something
+
+  goes wrong:</p>
+
+  <pre><code class="language-js">sqrt(-1) // NaN
+
+  1 / 0 // Infinity
+
+  </code></pre>
+
+  <p>The value <code>NaN</code> stands for
+
+  <a
+  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN/"
+  target="_blank">Not-A-Number</a>.
+
+  <code>NaN</code> appears when calculations or conversions don't work.
+  <code>Infinity</code> is a
+
+  value that's larger than any number. It appears during certain
+
+  calculations.</p>
+line: 853
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Draw a circle at the center.
+      circle(50, 50, 70);
+
+      // Draw a smaller circle at the center.
+      circle(width / 2, height / 2, 30);
+
+      describe('Two concentric, white circles drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle travels from left to right on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      circle(frameCount * 0.05, 50, 20);
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# Number
diff --git a/src/content/reference/en/p5 copy/types/Object.mdx b/src/content/reference/en/p5 copy/types/Object.mdx
new file mode 100644
index 0000000000..c5c9adf8bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/Object.mdx	
@@ -0,0 +1,91 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L999
+title: Object
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: "<p>A container for data that's stored as key-value pairs.</p>\n<p>Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.</p>\n<p>For example, an object could contain the location, size, and appearance of\na dog:</p>\n<pre><code class=\"language-js\">// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '\U0001F436' };\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);\n\n// Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n</code></pre>\n<p>The variable <code>dog</code> is assigned an object with four properties. Objects\nare declared with curly braces <code>{}</code>. Values can be accessed using the dot\noperator, as in <code>dog.size</code>. In the example above, the key <code>size</code>\ncorresponds to the value <code>20</code>. Objects can also be empty to start:</p>\n<pre><code class=\"language-js\">// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n// Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '\U0001F431';\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);\n\n// Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n</code></pre>\n<p>An object's data can be updated while a sketch runs. For example, the <code>cat</code>\ncould run away from the <code>dog</code> by updating its location:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat.x += 5;\n</code></pre>\n<p>If needed, an object's values can be accessed using square brackets <code>[]</code>\nand strings instead of dot notation:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat[\"x\"] += 5;\n</code></pre>\n<p>This syntax can be helpful when the key's name has spaces, as in\n<code>cat['height (m)']</code>.</p>\n"
+line: 999
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    // Declare the variable data and assign it an object with three properties.
+    let data = { x: 50, y: 50, d: 20 };
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the object's values using the . operator.
+      circle(data.x, data.y, data.d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable data and assign it an object with three properties.
+    let data = { x: 50, y: 50, d: 20 };
+
+    // Add another property for color.
+    data.color = 'deeppink';
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A pink circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the object's values using the . operator.
+      fill(data.color);
+      circle(data.x, data.y, data.d);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    // Declare the variable data and assign it an object with three properties.
+    let data = { x: 50, y: 50, d: 20 };
+
+    // Add another property for color.
+    data.color = 'deeppink';
+
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('A white circle on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Access the object's values using the . operator.
+      fill(data.color);
+      circle(data.x, data.y, data.d);
+
+      // Update the object's x and y properties.
+      data.x += random(-1, 1);
+      data.y += random(-1, 1);
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# Object
diff --git a/src/content/reference/en/p5 copy/types/String.mdx b/src/content/reference/en/p5 copy/types/String.mdx
new file mode 100644
index 0000000000..e62a9a8b9c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/types/String.mdx	
@@ -0,0 +1,153 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L710
+title: String
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A sequence of text characters.</p>
+
+  <p>The <code>String</code> data type is helpful for working with text. For
+  example, a
+
+  string could contain a welcome message:</p>
+
+  <pre><code class="language-js">// Use a string literal.
+
+  text('Hello!', 10, 10);
+
+  </code></pre>
+
+  <pre><code class="language-js">// Create a string variable.
+
+  let message = 'Hello!';
+
+
+  // Use the string variable.
+
+  text(message, 10, 10);
+
+  </code></pre>
+
+  <p>The most common way to create strings is to use some form of quotations as
+
+  follows:</p>
+
+  <pre><code class="language-js">text("hi", 50, 50);
+
+  </code></pre>
+
+  <pre><code class="language-js">text('hi', 50, 50);
+
+  </code></pre>
+
+  <pre><code class="language-js">text(`hi`, 50, 50);
+
+  </code></pre>
+
+  <p><code>"hi"</code>, <code>'hi'</code>, and <code>hi</code> are all string
+  literals. A "literal" means a
+
+  value was actually written, as in <code>text('hi', 50, 50)</code>. By
+  contrast,
+
+  <code>text(message, 50, 50)</code> uses the variable <code>message</code>, so
+  it isn't a string
+
+  literal.</p>
+
+  <p>Single quotes <code>''</code> and double quotes <code>""</code> mean the
+  same thing. It's nice to
+
+  have the option for cases when a string contains one type of quote:</p>
+
+  <pre><code class="language-js">text("What's up?", 50, 50);
+
+  </code></pre>
+
+  <pre><code class="language-js">text('Air quotes make you look "cool."', 50,
+  50);
+
+  </code></pre>
+
+  <p>Backticks <code>``</code> create template literals. Template literals have
+  many uses.
+
+  For example, they can contain both single and double quotes as needed:</p>
+
+  <pre><code class="language-js">text(`"Don't you forget about me"`,  10, 10);
+
+  </code></pre>
+
+  <p>Template literals are helpful when strings are created from variables like
+
+  so:</p>
+
+  <pre><code class="language-js">let size = random(10, 20);
+
+  circle(50, 50, size);
+
+
+  text(`The circle's diameter is ${size} pixels.`,  10, 10);
+
+  </code></pre>
+
+  <p>The <code>size</code> variable's value will replace <code>${size}</code>
+  when the string is
+
+  created. <code>${}</code> is a placeholder for any value. That means an
+  expression can
+
+  be used, as in <code>${round(PI, 3)}</code>. All of the following are valid
+  template
+
+  literals:</p>
+
+  <pre><code class="language-js">text(`π is about ${round(PI, 2)} pixels.`,  10,
+  10);
+
+  text(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 
+  10, 30);
+
+  </code></pre>
+
+  <p>Template literals can include several variables:</p>
+
+  <pre><code class="language-js">let x = random(0, 100);
+
+  let y = random(0, 100);
+
+  let size = random(10, 20);
+
+  circle(x, y, size);
+
+
+  text(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`,  10, 10);
+
+  </code></pre>
+
+  <p>Template literals are also helpful for creating multi-line text like
+  so:</p>
+
+  <pre><code class="language-js">let poem = `My sketch doesn't run;
+
+  it waits for me patiently
+
+  while bugs point the way.`;
+
+
+  text(poem, 10, 10);
+
+  </code></pre>
+line: 710
+isConstructor: false
+itemtype: property
+example:
+  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Display a welcome message.\n  text('Hello!', 50, 50);\n\n  describe('The text \"Hello!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Create a string variable.\n  let world = '\U0001F30D';\n\n  // Display a welcome message using a template string.\n  text(`Hello, ${world}!`, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>"
+class: p5
+---
+
+
+# String
diff --git a/src/content/reference/en/p5 copy/unchar.mdx b/src/content/reference/en/p5 copy/unchar.mdx
new file mode 100644
index 0000000000..8ef044b393
--- /dev/null
+++ b/src/content/reference/en/p5 copy/unchar.mdx	
@@ -0,0 +1,114 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L731
+title: unchar
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a single-character <code>String</code> to a
+  <code>Number</code>.</p>
+
+  <p><code>unchar()</code> converts single-character strings to their
+  corresponding
+
+  integer (whole number).</p>
+
+  <p>The parameter, <code>n</code>, is the character to convert. For example,
+
+  <code>unchar('A')</code>, returns the number 65. If an array is passed, as in
+
+  <code>unchar(['A', 'B', 'C'])</code>, an array of integers is returned.</p>
+line: 731
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a string variable.
+      let original = 'A';
+
+      // Convert the string to a number.
+      let converted = unchar(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} : ${converted}`, 50, 50);
+
+      describe('The text "A : 65" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of characters.
+      let original = ['A', 'B', 'C'];
+
+      // Convert the string to a number.
+      let converted = unchar(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Iterate over elements of the converted array.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${original[i]} : ${converted[i]}`, 50, y);
+      }
+
+      describe(
+        'The text "A : 65", "B : 66", and "C :67" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 731
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String
+    return:
+      description: converted number.
+      type: Number
+  - line: 805
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: 'String[]'
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# unchar
diff --git a/src/content/reference/en/p5 copy/unhex.mdx b/src/content/reference/en/p5 copy/unhex.mdx
new file mode 100644
index 0000000000..5c507abc4c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/unhex.mdx	
@@ -0,0 +1,121 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L956
+title: unhex
+module: Data
+submodule: Conversion
+file: src/utilities/conversion.js
+description: >
+  <p>Converts a <code>String</code> with a hexadecimal value to a 
+  <code>Number</code>.</p>
+
+  <p><code>unhex()</code> converts a string with its hexadecimal number value to
+  a number.
+
+  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
+
+  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
+
+  number <code>11</code> (eleven) in base-10 is written as the letter
+  <code>B</code> in hex.</p>
+
+  <p>The first parameter, <code>n</code>, is the hex string to convert. For
+  example,
+
+  <code>unhex('FF')</code>, returns the number 255. If an array is passed, as in
+
+  <code>unhex(['00', '80', 'FF'])</code>, an array of numbers is returned.</p>
+line: 956
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create a a hex string variable
+      let original = 'FF';
+
+      // Convert the hex string to a number.
+      let converted = unhex(original);
+
+      // Style the text.
+      textAlign(CENTER, CENTER);
+      textSize(16);
+
+      // Display the original and converted values.
+      text(`${original} = ${converted}`, 50, 50);
+
+      describe('The text "FF = 255" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Create an array of numbers.
+      let original = ['00', '80', 'FF'];
+
+      // Convert the numbers to hex strings.
+      // Only use two hex digits.
+      let converted = unhex(original, 2);
+
+      // Style the text.
+      textAlign(RIGHT, CENTER);
+      textSize(16);
+
+      // Iterate over the converted values.
+      for (let i = 0; i < converted.length; i += 1) {
+
+        // Calculate the y-coordinate.
+        let y = (i + 1) * 25;
+
+        // Display the original and converted values.
+        text(`${ original[i]} = ${converted[i]}`, 80, y);
+      }
+
+      describe(
+        'The text "00 = 0", "80 = 128", and "FF = 255" written on three separate lines. The text is in black on a gray background.'
+      );
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: converted number.
+  type: Number
+overloads:
+  - line: 956
+    params:
+      - name: 'n'
+        description: |
+          <p>value to convert.</p>
+        type: String
+    return:
+      description: converted number.
+      type: Number
+  - line: 1033
+    params:
+      - name: ns
+        description: |
+          <p>values to convert.</p>
+        type: 'String[]'
+    return:
+      description: converted numbers.
+      type: 'Number[]'
+chainable: false
+---
+
+
+# unhex
diff --git a/src/content/reference/en/p5 copy/updatePixels.mdx b/src/content/reference/en/p5 copy/updatePixels.mdx
new file mode 100644
index 0000000000..5de892374b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/updatePixels.mdx	
@@ -0,0 +1,94 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L1118
+title: updatePixels
+module: Image
+submodule: Pixels
+file: src/image/pixels.js
+description: >
+  <p>Updates the canvas with the RGBA values in the
+
+  <a href="/reference/p5/pixels/">pixels</a> array.</p>
+
+  <p><code>updatePixels()</code> only needs to be called after changing values
+  in the
+
+  <a href="/reference/p5/pixels/">pixels</a> array. Such changes can be made
+  directly
+
+  after calling <a href="/reference/p5/loadPixels/">loadPixels()</a> or by
+  calling
+
+  <a href="/reference/p5/set/">set()</a>.</p>
+line: 1118
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    let img;
+
+    // Load the image.
+    function preload() {
+      img = loadImage('/assets/rockies.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100);
+
+      // Display the image.
+      image(img, 0, 0, 100, 100);
+
+      // Get the pixel density.
+      let d = pixelDensity();
+
+      // Calculate the halfway index in the pixels array.
+      let halfImage = 4 * (d * width) * (d * height / 2);
+
+      // Load the pixels array.
+      loadPixels();
+
+      // Copy the top half of the canvas to the bottom.
+      for (let i = 0; i < halfImage; i += 1) {
+        pixels[i + halfImage] = pixels[i];
+      }
+
+      // Update the canvas.
+      updatePixels();
+
+      describe('Two identical images of mountain landscapes, one on top of the other.');
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: x
+    description: |
+      <p>x-coordinate of the upper-left corner of region
+                              to update.</p>
+    type: Number
+    optional: true
+  - name: 'y'
+    description: |
+      <p>y-coordinate of the upper-left corner of region
+                              to update.</p>
+    type: Number
+    optional: true
+  - name: w
+    description: |
+      <p>width of region to update.</p>
+    type: Number
+    optional: true
+  - name: h
+    description: |
+      <p>height of region to update.</p>
+    type: Number
+    optional: true
+chainable: false
+---
+
+
+# updatePixels
diff --git a/src/content/reference/en/p5 copy/userStartAudio.mdx b/src/content/reference/en/p5 copy/userStartAudio.mdx
new file mode 100644
index 0000000000..076d8537c5
--- /dev/null
+++ b/src/content/reference/en/p5 copy/userStartAudio.mdx	
@@ -0,0 +1,99 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L198
+title: userStartAudio
+module: p5.sound
+submodule: p5.sound
+file: lib/addons/p5.sound.js
+description: >-
+  <p>It is not only a good practice to give users control over starting
+
+  audio. This policy is enforced by many web browsers, including iOS and
+
+  <a href="https://goo.gl/7K7WLu/" title="Google Chrome's autoplay
+
+  policy">Google Chrome</a>, which create the Web Audio API's
+
+  <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/"
+  title="Audio Context @ MDN">Audio Context</a>
+
+  in a suspended state.</p>
+
+
+  <p>In these browser-specific policies, sound will not play until a user
+
+  interaction event (i.e. <code>mousePressed()</code>) explicitly resumes
+
+  the AudioContext, or starts an audio node. This can be accomplished by
+
+  calling <code>start()</code> on a <code>p5.Oscillator</code>,
+
+  <code> play()</code> on a <code>p5.SoundFile</code>, or simply
+
+  <code>userStartAudio()</code>.</p>
+
+
+  <p><code>userStartAudio()</code> starts the AudioContext on a user
+
+  gesture. The default behavior will enable audio on any
+
+  mouseUp or touchEnd event. It can also be placed in a specific
+
+  interaction function, such as <code>mousePressed()</code> as in the
+
+  example below. This method utilizes
+
+  <a href="https://github.com/tambien/StartAudioContext/">StartAudioContext
+
+  </a>, a library by Yotam Mann (MIT Licence, 2016).</p>
+line: 198
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div><code>
+    function setup() {
+      // mimics the autoplay policy
+      getAudioContext().suspend();
+
+      let mySynth = new p5.MonoSynth();
+
+      // This won't play until the context has resumed
+      mySynth.play('A6');
+    }
+    function draw() {
+      background(220);
+      textAlign(CENTER, CENTER);
+      text(getAudioContext().state, width/2, height/2);
+    }
+    function mousePressed() {
+      userStartAudio();
+    }
+    </code></div>
+class: p5
+params:
+  - name: elements
+    description: |
+      <p>This argument can be an Element,
+                                    Selector String, NodeList, p5.Element,
+                                    jQuery Element, or an Array of any of those.</p>
+    type: Element|Array
+    optional: true
+  - name: callback
+    description: |
+      <p>Callback to invoke when the AudioContext
+                                    has started</p>
+    type: Function
+    optional: true
+return:
+  description: |-
+    Returns a Promise that resolves when
+                                         the AudioContext state is 'running'
+  type: Promise
+chainable: false
+---
+
+
+# userStartAudio
diff --git a/src/content/reference/en/p5 copy/vertex.mdx b/src/content/reference/en/p5 copy/vertex.mdx
new file mode 100644
index 0000000000..92d5bb9138
--- /dev/null
+++ b/src/content/reference/en/p5 copy/vertex.mdx	
@@ -0,0 +1,242 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1881
+title: vertex
+module: Shape
+submodule: Vertex
+file: src/core/shape/vertex.js
+description: >
+  <p>Adds a vertex to a custom shape.</p>
+
+  <p><code>vertex()</code> sets the coordinates of vertices drawn between the
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
+
+  <p>The first two parameters, <code>x</code> and <code>y</code>, set the x- and
+  y-coordinates of the
+
+  vertex.</p>
+
+  <p>The third parameter, <code>z</code>, is optional. It sets the z-coordinate
+  of the
+
+  vertex in WebGL mode. By default, <code>z</code> is 0.</p>
+
+  <p>The fourth and fifth parameters, <code>u</code> and <code>v</code>, are
+  also optional. They set
+
+  the u- and v-coordinates for the vertex’s texture when used with
+
+  <a href="/reference/p5/endShape/">endShape()</a>. By default, <code>u</code>
+  and <code>v</code> are both 0.</p>
+line: 1881
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      strokeWeight(3);
+
+      // Start drawing the shape.
+      // Only draw the vertices.
+      beginShape(POINTS);
+
+      // Add the vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('Four black dots that form a square are drawn on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(30, 20);
+      vertex(85, 20);
+      vertex(85, 75);
+      vertex(30, 75);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      background(200);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(-20, -30, 0);
+      vertex(35, -30, 0);
+      vertex(35, 25, 0);
+      vertex(-20, 25, 0);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+
+      describe('A white square on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A white square spins around slowly on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Start drawing the shape.
+      beginShape();
+
+      // Add vertices.
+      vertex(-20, -30, 0);
+      vertex(35, -30, 0);
+      vertex(35, 25, 0);
+      vertex(-20, 25, 0);
+
+      // Stop drawing the shape.
+      endShape(CLOSE);
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let img;
+
+    // Load an image to apply as a texture.
+    function preload() {
+      img = loadImage('/assets/laDefense.jpg');
+    }
+
+    function setup() {
+      createCanvas(100, 100, WEBGL);
+
+      describe('A photograph of a ceiling rotates slowly against a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Rotate around the y-axis.
+      rotateY(frameCount * 0.01);
+
+      // Style the shape.
+      noStroke();
+
+      // Apply the texture.
+      texture(img);
+      textureMode(NORMAL);
+
+      // Start drawing the shape
+      beginShape();
+
+      // Add vertices.
+      vertex(-20, -30, 0, 0, 0);
+      vertex(35, -30, 0, 1, 0);
+      vertex(35, 25, 0, 1, 1);
+      vertex(-20, 25, 0, 0, 1);
+
+      // Stop drawing the shape.
+      endShape();
+    }
+    </code>
+    </div>
+class: p5
+overloads:
+  - line: 1881
+    params:
+      - name: x
+        description: |
+          <p>x-coordinate of the vertex.</p>
+        type: Number
+      - name: 'y'
+        description: |
+          <p>y-coordinate of the vertex.</p>
+        type: Number
+    chainable: 1
+  - line: 2052
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: |
+          <p>z-coordinate of the vertex. Defaults to 0.</p>
+        type: Number
+        optional: true
+    chainable: 1
+  - line: 2059
+    params:
+      - name: x
+        description: ''
+        type: Number
+      - name: 'y'
+        description: ''
+        type: Number
+      - name: z
+        description: ''
+        type: Number
+        optional: true
+      - name: u
+        description: |
+          <p>u-coordinate of the vertex's texture. Defaults to 0.</p>
+        type: Number
+        optional: true
+      - name: v
+        description: |
+          <p>v-coordinate of the vertex's texture. Defaults to 0.</p>
+        type: Number
+        optional: true
+    chainable: 1
+chainable: true
+---
+
+
+# vertex
diff --git a/src/content/reference/en/p5 copy/webglVersion.mdx b/src/content/reference/en/p5 copy/webglVersion.mdx
new file mode 100644
index 0000000000..1909f94a86
--- /dev/null
+++ b/src/content/reference/en/p5 copy/webglVersion.mdx	
@@ -0,0 +1,105 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L508
+title: webglVersion
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>String</code> variable with the WebGL version in use.</p>
+
+  <p><code>webglVersion</code>'s value equals one of the following string
+  constants:</p>
+
+  <ul>
+
+  <li><code>WEBGL2</code> whose value is <code>'webgl2'</code>,</li>
+
+  <li><code>WEBGL</code> whose value is <code>'webgl'</code>, or</li>
+
+  <li><code>P2D</code> whose value is <code>'p2d'</code>. This is the default
+  for 2D sketches.</li>
+
+  </ul>
+
+  <p>See <a href="/reference/p5/setAttributes/">setAttributes()</a> for ways to
+  set the
+
+  WebGL version.</p>
+line: 508
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the current WebGL version.
+      text(webglVersion, 42, 54);
+
+      describe('The text "p2d" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Load a font to use.
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      // Create a canvas using WEBGL mode.
+      createCanvas(100, 50, WEBGL);
+      background(200);
+
+      // Display the current WebGL version.
+      fill(0);
+      textFont(font);
+      text(webglVersion, -15, 5);
+
+      describe('The text "webgl2" written in black on a gray background.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    let font;
+
+    function preload() {
+      // Load a font to use.
+      font = loadFont('/assets/inconsolata.otf');
+    }
+
+    function setup() {
+      // Create a canvas using WEBGL mode.
+      createCanvas(100, 50, WEBGL);
+
+      // Set WebGL to version 1.
+      setAttributes({ version: 1 });
+
+      background(200);
+
+      // Display the current WebGL version.
+      fill(0);
+      textFont(font);
+      text(webglVersion, -14, 5);
+
+      describe('The text "webgl" written in black on a gray background.');
+    }
+    </code>
+    </div>
+class: p5
+type: String
+---
+
+
+# webglVersion
diff --git a/src/content/reference/en/p5 copy/while.mdx b/src/content/reference/en/p5 copy/while.mdx
new file mode 100644
index 0000000000..5fdcb2985a
--- /dev/null
+++ b/src/content/reference/en/p5 copy/while.mdx	
@@ -0,0 +1,161 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1872
+title: while
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >
+  <p>A way to repeat a block of code.</p>
+
+  <p><code>while</code> loops are helpful for repeating statements while a
+  condition is
+
+  <code>true</code>. They're like <code>if</code> statements that repeat. For
+  example, a <code>while</code>
+
+  loop makes it easy to express the idea "draw several lines" like so:</p>
+
+  <pre><code class="language-js">// Declare a variable to keep track of
+  iteration.
+
+  let x = 10;
+
+
+  // Repeat as long as x < 100
+
+  while (x < 100) {
+    line(x, 25, x, 75);
+
+    // Increment by 20.
+    x += 20;
+  }
+
+  </code></pre>
+
+  <p>The loop's header begins with the keyword <code>while</code>. Loops
+  generally count up
+
+  or count down as they repeat, or iterate. The statement in parentheses
+
+  <code>x < 100</code> is a condition the loop checks each time it iterates. If
+  the
+
+  condition is <code>true</code>, the loop runs the code between the curly
+  braces <code>{}</code>,
+
+  The code between the curly braces is called the loop's body. If the
+
+  condition is <code>false</code>, the body is skipped and the loop is
+  stopped.</p>
+
+  <p>It's common to create infinite loops accidentally. For example, the
+
+  following loop never stops iterating because it doesn't count up:</p>
+
+  <pre><code class="language-js">// Declare a variable to keep track of
+  iteration.
+
+  let x = 10;
+
+
+  // Repeat as long as x < 100
+
+  while (x < 100) {
+    line(x, 25, x, 75);
+  }
+
+
+  // This should be in the loop's body!
+
+  x += 20;
+
+  </code></pre>
+
+  <p>The statement <code>x += 20</code> appears after the loop's body. That
+  means the
+
+  variable <code>x</code> is stuck at <code>10</code>,  which is always less
+  than <code>100</code>.</p>
+
+  <p><code>while</code> loops are useful when the number of iterations isn't
+  known in
+
+  advance. For example, concentric circles could be drawn at random
+
+  increments:</p>
+
+  <pre><code class="language-js">let d = 100;
+
+  let minSize = 5;
+
+
+  while (d > minSize) {
+    circle(50, 50, d);
+    d -= random(10);
+  }
+
+  </code></pre>
+line: 1872
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe('Five black vertical lines on a gray background.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Declare a variable to keep track of iteration.
+      let x = 10;
+
+      // Repeat as long as x < 100
+      while (x < 100) {
+        line(x, 25, x, 75);
+
+        // Increment by 20.
+        x += 20;
+      }
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      // Slow the frame rate.
+      frameRate(5);
+
+      describe(
+        "A gray square with several concentric circles at the center. The circles' sizes decrease at random increments."
+      );
+    }
+
+    function draw() {
+      background(200);
+
+      let d = 100;
+      let minSize = 5;
+
+      while (d > minSize) {
+        circle(50, 50, d);
+        d -= random(5, 15);
+      }
+    }
+    </code>
+    </div>
+class: p5
+---
+
+
+# while
diff --git a/src/content/reference/en/p5 copy/width.mdx b/src/content/reference/en/p5 copy/width.mdx
new file mode 100644
index 0000000000..0eb6ad07bb
--- /dev/null
+++ b/src/content/reference/en/p5 copy/width.mdx	
@@ -0,0 +1,87 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L812
+title: width
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the width of the canvas in
+  pixels.</p>
+
+  <p><code>width</code>'s default value is 100. Calling
+
+  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
+
+  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
+
+  <code>width</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
+  sets its value to
+
+  0.</p>
+line: 812
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 42, 54);
+
+      describe('The number 100 written in black on a gray square.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(50, 100);
+
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 21, 54);
+
+      describe('The number 50 written in black on a gray rectangle.');
+    }
+    </code>
+    </div>
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Display the canvas' width.
+      text(width, 42, 54);
+
+      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
+    }
+
+    // If the mouse is pressed, reisze
+    // the canvas and display its new
+    // width.
+    function mousePressed() {
+      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
+        resizeCanvas(50, 100);
+        background(200);
+        text(width, 21, 54);
+      }
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# width
diff --git a/src/content/reference/en/p5 copy/winMouseX.mdx b/src/content/reference/en/p5 copy/winMouseX.mdx
new file mode 100644
index 0000000000..ae7dbc3fac
--- /dev/null
+++ b/src/content/reference/en/p5 copy/winMouseX.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L463
+title: winMouseX
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's horizontal position
+  within the
+
+  browser.</p>
+
+  <p><code>winMouseX</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. For example, if the mouse is 50 pixels from
+
+  the left edge of the browser, then <code>winMouseX</code> will be 50.</p>
+
+  <p>On a touchscreen device, <code>winMouseX</code> will hold the x-coordinate
+  of the most
+
+  recent touch point.</p>
+
+  <p>Note: Use <a href="/reference/p5/mouseX/">mouseX</a> to track the mouse’s
+
+  x-coordinate within the canvas.</p>
+line: 463
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates within the browser window.
+      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# winMouseX
diff --git a/src/content/reference/en/p5 copy/winMouseY.mdx b/src/content/reference/en/p5 copy/winMouseY.mdx
new file mode 100644
index 0000000000..32c59cba4c
--- /dev/null
+++ b/src/content/reference/en/p5 copy/winMouseY.mdx	
@@ -0,0 +1,61 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L504
+title: winMouseY
+module: Events
+submodule: Mouse
+file: src/events/mouse.js
+description: >
+  <p>A <code>Number</code> variable that tracks the mouse's vertical position
+  within the
+
+  browser.</p>
+
+  <p><code>winMouseY</code> keeps track of the mouse's position relative to the
+  top-left
+
+  corner of the browser window. For example, if the mouse is 50 pixels from
+
+  the top edge of the browser, then <code>winMouseY</code> will be 50.</p>
+
+  <p>On a touchscreen device, <code>winMouseY</code> will hold the y-coordinate
+  of the most
+
+  recent touch point.</p>
+
+  <p>Note: Use <a href="/reference/p5/mouseY/">mouseY</a> to track the mouse’s
+
+  y-coordinate within the canvas.</p>
+line: 504
+isConstructor: false
+itemtype: property
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
+    }
+
+    function draw() {
+      background(200);
+
+      // Style the text.
+      textAlign(CENTER);
+      textSize(16);
+
+      // Display the mouse's coordinates within the browser window.
+      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# winMouseY
diff --git a/src/content/reference/en/p5 copy/windowHeight.mdx b/src/content/reference/en/p5 copy/windowHeight.mdx
new file mode 100644
index 0000000000..829ac3d76b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/windowHeight.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L680
+title: windowHeight
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the height of the browser's
+  viewport.</p>
+
+  <p>The <a
+  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
+  target="_blank">layout viewport</a>
+
+  is the area within the browser that's available for drawing.</p>
+line: 680
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the browser's dimensions.
+      createCanvas(windowWidth, windowHeight);
+
+      background(200);
+
+      describe('A gray canvas that takes up the entire browser window.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# windowHeight
diff --git a/src/content/reference/en/p5 copy/windowResized.mdx b/src/content/reference/en/p5 copy/windowResized.mdx
new file mode 100644
index 0000000000..aed52e6b4b
--- /dev/null
+++ b/src/content/reference/en/p5 copy/windowResized.mdx	
@@ -0,0 +1,64 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L708
+title: windowResized
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A function that's called when the browser window is resized.</p>
+
+  <p>Code placed in the body of <code>windowResized()</code> will run when the
+
+  browser window's size changes. It's a good place to call
+
+  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> or make other
+
+  adjustments to accommodate the new window size.</p>
+
+  <p>The <code>event</code> parameter is optional. If added to the function
+  declaration, it
+
+  can be used for debugging or other purposes.</p>
+line: 708
+isConstructor: false
+itemtype: method
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      createCanvas(windowWidth, windowHeight);
+
+      describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');
+    }
+
+    function draw() {
+      background(200);
+
+      // Draw a circle at the center.
+      circle(width / 2, height / 2, 50);
+    }
+
+    // Resize the canvas when the
+    // browser's size changes.
+    function windowResized() {
+      resizeCanvas(windowWidth, windowHeight);
+    }
+    </code>
+    </div>
+class: p5
+params:
+  - name: event
+    description: |
+      <p>optional resize Event.</p>
+    type: Event
+    optional: true
+chainable: false
+---
+
+
+# windowResized
diff --git a/src/content/reference/en/p5 copy/windowWidth.mdx b/src/content/reference/en/p5 copy/windowWidth.mdx
new file mode 100644
index 0000000000..26ec5fc2a9
--- /dev/null
+++ b/src/content/reference/en/p5 copy/windowWidth.mdx	
@@ -0,0 +1,43 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L652
+title: windowWidth
+module: Environment
+submodule: Environment
+file: src/core/environment.js
+description: >
+  <p>A <code>Number</code> variable that stores the width of the browser's
+  viewport.</p>
+
+  <p>The <a
+  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
+  target="_blank">layout viewport</a>
+
+  is the area within the browser that's available for drawing.</p>
+line: 652
+isConstructor: false
+itemtype: property
+alt: This example does not render anything.
+example:
+  - |-
+
+    <div class="norender">
+    <code>
+    function setup() {
+      // Set the canvas' width and height
+      // using the browser's dimensions.
+      createCanvas(windowWidth, windowHeight);
+
+      background(200);
+
+      describe('A gray canvas that takes up the entire browser window.');
+    }
+    </code>
+    </div>
+class: p5
+type: Number
+---
+
+
+# windowWidth
diff --git a/src/content/reference/en/p5 copy/year.mdx b/src/content/reference/en/p5 copy/year.mdx
new file mode 100644
index 0000000000..04efa83189
--- /dev/null
+++ b/src/content/reference/en/p5 copy/year.mdx	
@@ -0,0 +1,47 @@
+---
+# This file was auto-generated. Please do not edit it manually!
+# To make changes, edit the comments in the corresponding source file:
+# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L311
+title: year
+module: IO
+submodule: Time & Date
+file: src/utilities/time_date.js
+description: |
+  <p>Returns the current year as a number such as 1999.</p>
+line: 311
+isConstructor: false
+itemtype: method
+example:
+  - |-
+
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Get the current year.
+      let y = year();
+
+      // Style the text.
+      textAlign(LEFT, CENTER);
+      textSize(12);
+      textFont('Courier New');
+
+      // Display the year.
+      text(`Current year: ${y}`, 10, 50, 80);
+
+      describe(`The text 'Current year: ${y}' written in black on a gray background.`);
+    }
+    </code>
+    </div>
+class: p5
+return:
+  description: current year.
+  type: Integer
+chainable: false
+---
+
+
+# year

From 3b6ecb11f84898303bb19b34d803c30a20365993 Mon Sep 17 00:00:00 2001
From: Aashish Panthi <aashishpanthi11@gmail.com>
Date: Mon, 29 Jun 2026 23:53:10 +0545
Subject: [PATCH 16/16] Remove test files and update readme

---
 .github/actions/translation-tracker/README.md |   4 +-
 src/content/reference/en/p5 copy/abs.mdx      |  61 --
 .../reference/en/p5 copy/accelerationX.mdx    |  37 -
 .../reference/en/p5 copy/accelerationY.mdx    |  37 -
 .../reference/en/p5 copy/accelerationZ.mdx    |  37 -
 src/content/reference/en/p5 copy/acos.mdx     |  86 --
 src/content/reference/en/p5 copy/alpha.mdx    | 120 ---
 .../reference/en/p5 copy/ambientLight.mdx     | 241 ------
 .../reference/en/p5 copy/ambientMaterial.mdx  | 269 ------
 .../reference/en/p5 copy/angleMode.mdx        | 219 -----
 src/content/reference/en/p5 copy/append.mdx   |  48 --
 .../reference/en/p5 copy/applyMatrix.mdx      | 347 --------
 src/content/reference/en/p5 copy/arc.mdx      | 274 ------
 .../reference/en/p5 copy/arrayCopy.mdx        |  95 ---
 src/content/reference/en/p5 copy/asin.mdx     |  86 --
 src/content/reference/en/p5 copy/atan.mdx     |  86 --
 src/content/reference/en/p5 copy/atan2.mdx    | 106 ---
 .../reference/en/p5 copy/background.mdx       | 336 --------
 .../reference/en/p5 copy/baseColorShader.mdx  | 178 ----
 .../en/p5 copy/baseMaterialShader.mdx         | 418 ---------
 .../reference/en/p5 copy/baseNormalShader.mdx | 211 -----
 .../reference/en/p5 copy/baseStrokeShader.mdx | 356 --------
 .../reference/en/p5 copy/beginClip.mdx        | 208 -----
 .../reference/en/p5 copy/beginContour.mdx     | 134 ---
 .../reference/en/p5 copy/beginGeometry.mdx    | 281 -------
 .../reference/en/p5 copy/beginShape.mdx       | 449 ----------
 src/content/reference/en/p5 copy/bezier.mdx   | 273 ------
 .../reference/en/p5 copy/bezierDetail.mdx     | 121 ---
 .../reference/en/p5 copy/bezierPoint.mdx      | 162 ----
 .../reference/en/p5 copy/bezierTangent.mdx    | 155 ----
 .../reference/en/p5 copy/bezierVertex.mdx     | 337 --------
 src/content/reference/en/p5 copy/blend.mdx    | 214 -----
 .../reference/en/p5 copy/blendMode.mdx        | 541 ------------
 src/content/reference/en/p5 copy/blue.mdx     | 158 ----
 src/content/reference/en/p5 copy/boolean.mdx  | 157 ----
 src/content/reference/en/p5 copy/box.mdx      | 186 ----
 .../reference/en/p5 copy/brightness.mdx       | 168 ----
 .../reference/en/p5 copy/buildGeometry.mdx    | 263 ------
 src/content/reference/en/p5 copy/byte.mdx     | 180 ----
 src/content/reference/en/p5 copy/camera.mdx   | 200 -----
 src/content/reference/en/p5 copy/ceil.mdx     |  65 --
 src/content/reference/en/p5 copy/changed.mdx  |  87 --
 src/content/reference/en/p5 copy/char.mdx     | 152 ----
 src/content/reference/en/p5 copy/circle.mdx   |  77 --
 src/content/reference/en/p5 copy/class.mdx    |  19 -
 src/content/reference/en/p5 copy/clear.mdx    | 108 ---
 .../reference/en/p5 copy/clearDepth.mdx       | 113 ---
 .../reference/en/p5 copy/clearStorage.mdx     |  81 --
 src/content/reference/en/p5 copy/clip.mdx     | 225 -----
 src/content/reference/en/p5 copy/color.mdx    | 349 --------
 .../reference/en/p5 copy/colorMode.mdx        | 271 ------
 src/content/reference/en/p5 copy/concat.mdx   |  54 --
 src/content/reference/en/p5 copy/cone.mdx     | 265 ------
 src/content/reference/en/p5 copy/console.mdx  |  99 ---
 .../reference/en/p5 copy/constants/ADD.mdx    |  18 -
 .../reference/en/p5 copy/constants/ALT.mdx    |  18 -
 .../reference/en/p5 copy/constants/ARROW.mdx  |  18 -
 .../reference/en/p5 copy/constants/AUTO.mdx   |  25 -
 .../reference/en/p5 copy/constants/AXES.mdx   |  18 -
 .../en/p5 copy/constants/BACKSPACE.mdx        |  18 -
 .../en/p5 copy/constants/BASELINE.mdx         |  18 -
 .../reference/en/p5 copy/constants/BEVEL.mdx  |  18 -
 .../reference/en/p5 copy/constants/BEZIER.mdx |  18 -
 .../reference/en/p5 copy/constants/BLEND.mdx  |  18 -
 .../reference/en/p5 copy/constants/BLUR.mdx   |  18 -
 .../reference/en/p5 copy/constants/BOLD.mdx   |  18 -
 .../en/p5 copy/constants/BOLDITALIC.mdx       |  18 -
 .../reference/en/p5 copy/constants/BOTTOM.mdx |  18 -
 .../reference/en/p5 copy/constants/BURN.mdx   |  18 -
 .../reference/en/p5 copy/constants/CENTER.mdx |  18 -
 .../reference/en/p5 copy/constants/CHAR.mdx   |  18 -
 .../reference/en/p5 copy/constants/CHORD.mdx  |  18 -
 .../reference/en/p5 copy/constants/CLAMP.mdx  |  18 -
 .../reference/en/p5 copy/constants/CLOSE.mdx  |  18 -
 .../en/p5 copy/constants/CONTAIN.mdx          |  18 -
 .../en/p5 copy/constants/CONTROL.mdx          |  18 -
 .../reference/en/p5 copy/constants/CORNER.mdx |  18 -
 .../en/p5 copy/constants/CORNERS.mdx          |  18 -
 .../reference/en/p5 copy/constants/COVER.mdx  |  18 -
 .../reference/en/p5 copy/constants/CROSS.mdx  |  18 -
 .../reference/en/p5 copy/constants/CURVE.mdx  |  18 -
 .../en/p5 copy/constants/DARKEST.mdx          |  18 -
 .../en/p5 copy/constants/DEGREES.mdx          |  59 --
 .../reference/en/p5 copy/constants/DELETE.mdx |  18 -
 .../en/p5 copy/constants/DIFFERENCE.mdx       |  18 -
 .../reference/en/p5 copy/constants/DILATE.mdx |  18 -
 .../reference/en/p5 copy/constants/DODGE.mdx  |  18 -
 .../en/p5 copy/constants/DOWN_ARROW.mdx       |  18 -
 .../reference/en/p5 copy/constants/ENTER.mdx  |  18 -
 .../reference/en/p5 copy/constants/ERODE.mdx  |  18 -
 .../reference/en/p5 copy/constants/ESCAPE.mdx |  18 -
 .../en/p5 copy/constants/EXCLUSION.mdx        |  18 -
 .../en/p5 copy/constants/FALLBACK.mdx         |  18 -
 .../reference/en/p5 copy/constants/FILL.mdx   |  18 -
 .../reference/en/p5 copy/constants/FLAT.mdx   |  18 -
 .../reference/en/p5 copy/constants/FLOAT.mdx  |  18 -
 .../reference/en/p5 copy/constants/GRAY.mdx   |  18 -
 .../reference/en/p5 copy/constants/GRID.mdx   |  18 -
 .../en/p5 copy/constants/HALF_FLOAT.mdx       |  18 -
 .../en/p5 copy/constants/HALF_PI.mdx          | 109 ---
 .../reference/en/p5 copy/constants/HAND.mdx   |  18 -
 .../en/p5 copy/constants/HARD_LIGHT.mdx       |  18 -
 .../reference/en/p5 copy/constants/HSB.mdx    |  24 -
 .../reference/en/p5 copy/constants/HSL.mdx    |  18 -
 .../reference/en/p5 copy/constants/IMAGE.mdx  |  18 -
 .../en/p5 copy/constants/IMMEDIATE.mdx        |  18 -
 .../reference/en/p5 copy/constants/INVERT.mdx |  18 -
 .../reference/en/p5 copy/constants/ITALIC.mdx |  18 -
 .../reference/en/p5 copy/constants/LABEL.mdx  |  18 -
 .../en/p5 copy/constants/LANDSCAPE.mdx        |  18 -
 .../reference/en/p5 copy/constants/LEFT.mdx   |  18 -
 .../en/p5 copy/constants/LEFT_ARROW.mdx       |  18 -
 .../en/p5 copy/constants/LIGHTEST.mdx         |  18 -
 .../reference/en/p5 copy/constants/LINEAR.mdx |  18 -
 .../reference/en/p5 copy/constants/LINES.mdx  |  18 -
 .../en/p5 copy/constants/LINE_LOOP.mdx        |  18 -
 .../en/p5 copy/constants/LINE_STRIP.mdx       |  18 -
 .../reference/en/p5 copy/constants/MIRROR.mdx |  18 -
 .../reference/en/p5 copy/constants/MITER.mdx  |  18 -
 .../reference/en/p5 copy/constants/MOVE.mdx   |  18 -
 .../en/p5 copy/constants/MULTIPLY.mdx         |  18 -
 .../en/p5 copy/constants/NEAREST.mdx          |  18 -
 .../reference/en/p5 copy/constants/NORMAL.mdx |  18 -
 .../reference/en/p5 copy/constants/OPAQUE.mdx |  18 -
 .../reference/en/p5 copy/constants/OPEN.mdx   |  18 -
 .../reference/en/p5 copy/constants/OPTION.mdx |  18 -
 .../en/p5 copy/constants/OVERLAY.mdx          |  18 -
 .../reference/en/p5 copy/constants/P2D.mdx    |  19 -
 .../reference/en/p5 copy/constants/PI.mdx     | 108 ---
 .../reference/en/p5 copy/constants/PIE.mdx    |  18 -
 .../reference/en/p5 copy/constants/POINTS.mdx |  18 -
 .../en/p5 copy/constants/PORTRAIT.mdx         |  18 -
 .../en/p5 copy/constants/POSTERIZE.mdx        |  18 -
 .../en/p5 copy/constants/PROJECT.mdx          |  18 -
 .../en/p5 copy/constants/QUADRATIC.mdx        |  18 -
 .../reference/en/p5 copy/constants/QUADS.mdx  |  18 -
 .../en/p5 copy/constants/QUAD_STRIP.mdx       |  18 -
 .../en/p5 copy/constants/QUARTER_PI.mdx       | 109 ---
 .../en/p5 copy/constants/RADIANS.mdx          |  66 --
 .../reference/en/p5 copy/constants/RADIUS.mdx |  18 -
 .../reference/en/p5 copy/constants/REMOVE.mdx |  18 -
 .../reference/en/p5 copy/constants/REPEAT.mdx |  18 -
 .../en/p5 copy/constants/REPLACE.mdx          |  18 -
 .../reference/en/p5 copy/constants/RETURN.mdx |  18 -
 .../reference/en/p5 copy/constants/RGB.mdx    |  18 -
 .../reference/en/p5 copy/constants/RGBA.mdx   |  18 -
 .../reference/en/p5 copy/constants/RIGHT.mdx  |  18 -
 .../en/p5 copy/constants/RIGHT_ARROW.mdx      |  18 -
 .../reference/en/p5 copy/constants/ROUND.mdx  |  18 -
 .../reference/en/p5 copy/constants/SCREEN.mdx |  18 -
 .../reference/en/p5 copy/constants/SHIFT.mdx  |  18 -
 .../reference/en/p5 copy/constants/SMOOTH.mdx |  18 -
 .../en/p5 copy/constants/SOFT_LIGHT.mdx       |  18 -
 .../reference/en/p5 copy/constants/SQUARE.mdx |  18 -
 .../reference/en/p5 copy/constants/STROKE.mdx |  18 -
 .../en/p5 copy/constants/SUBTRACT.mdx         |  18 -
 .../reference/en/p5 copy/constants/TAB.mdx    |  18 -
 .../reference/en/p5 copy/constants/TAU.mdx    | 114 ---
 .../reference/en/p5 copy/constants/TESS.mdx   |  18 -
 .../reference/en/p5 copy/constants/TEXT.mdx   |  18 -
 .../en/p5 copy/constants/TEXTURE.mdx          |  18 -
 .../en/p5 copy/constants/THRESHOLD.mdx        |  18 -
 .../reference/en/p5 copy/constants/TOP.mdx    |  18 -
 .../en/p5 copy/constants/TRIANGLES.mdx        |  18 -
 .../en/p5 copy/constants/TRIANGLE_FAN.mdx     |  18 -
 .../en/p5 copy/constants/TRIANGLE_STRIP.mdx   |  18 -
 .../reference/en/p5 copy/constants/TWO_PI.mdx | 114 ---
 .../en/p5 copy/constants/UNSIGNED_BYTE.mdx    |  18 -
 .../en/p5 copy/constants/UNSIGNED_INT.mdx     |  18 -
 .../en/p5 copy/constants/UP_ARROW.mdx         |  18 -
 .../en/p5 copy/constants/VERSION.mdx          |  19 -
 .../reference/en/p5 copy/constants/WAIT.mdx   |  18 -
 .../reference/en/p5 copy/constants/WEBGL.mdx  |  91 --
 .../reference/en/p5 copy/constants/WEBGL2.mdx |  21 -
 .../reference/en/p5 copy/constants/WORD.mdx   |  18 -
 .../reference/en/p5 copy/constrain.mdx        |  86 --
 src/content/reference/en/p5 copy/copy.mdx     | 144 ----
 src/content/reference/en/p5 copy/cos.mdx      | 107 ---
 src/content/reference/en/p5 copy/createA.mdx  |  93 --
 .../reference/en/p5 copy/createAudio.mdx      |  83 --
 .../reference/en/p5 copy/createButton.mdx     | 109 ---
 .../reference/en/p5 copy/createCamera.mdx     |  99 ---
 .../reference/en/p5 copy/createCanvas.mdx     | 191 -----
 .../reference/en/p5 copy/createCapture.mdx    | 189 -----
 .../reference/en/p5 copy/createCheckbox.mdx   | 131 ---
 .../en/p5 copy/createColorPicker.mdx          | 101 ---
 .../reference/en/p5 copy/createConvolver.mdx  |  78 --
 .../reference/en/p5 copy/createDiv.mdx        |  72 --
 .../reference/en/p5 copy/createElement.mdx    |  78 --
 .../reference/en/p5 copy/createFileInput.mdx  | 138 ---
 .../en/p5 copy/createFilterShader.mdx         | 148 ----
 .../en/p5 copy/createFramebuffer.mdx          | 208 -----
 .../reference/en/p5 copy/createGraphics.mdx   | 191 -----
 .../reference/en/p5 copy/createImage.mdx      | 172 ----
 .../reference/en/p5 copy/createImg.mdx        | 115 ---
 .../reference/en/p5 copy/createInput.mdx      | 118 ---
 .../reference/en/p5 copy/createModel.mdx      | 193 -----
 .../reference/en/p5 copy/createNumberDict.mdx |  57 --
 src/content/reference/en/p5 copy/createP.mdx  |  54 --
 .../reference/en/p5 copy/createRadio.mdx      | 223 -----
 .../reference/en/p5 copy/createSelect.mdx     | 235 ------
 .../reference/en/p5 copy/createShader.mdx     | 438 ----------
 .../reference/en/p5 copy/createSlider.mdx     | 162 ----
 .../reference/en/p5 copy/createSpan.mdx       |  93 --
 .../reference/en/p5 copy/createStringDict.mdx |  56 --
 .../reference/en/p5 copy/createVector.mdx     | 133 ---
 .../reference/en/p5 copy/createVideo.mdx      | 135 ---
 .../reference/en/p5 copy/createWriter.mdx     | 146 ----
 src/content/reference/en/p5 copy/cursor.mdx   | 139 ---
 src/content/reference/en/p5 copy/curve.mdx    | 272 ------
 .../reference/en/p5 copy/curveDetail.mdx      | 117 ---
 .../reference/en/p5 copy/curvePoint.mdx       | 160 ----
 .../reference/en/p5 copy/curveTangent.mdx     | 153 ----
 .../reference/en/p5 copy/curveTightness.mdx   |  77 --
 .../reference/en/p5 copy/curveVertex.mdx      | 407 ---------
 src/content/reference/en/p5 copy/cylinder.mdx | 282 -------
 src/content/reference/en/p5 copy/day.mdx      |  47 --
 .../reference/en/p5 copy/debugMode.mdx        | 362 --------
 src/content/reference/en/p5 copy/degrees.mdx  |  53 --
 .../reference/en/p5 copy/deltaTime.mdx        |  68 --
 src/content/reference/en/p5 copy/describe.mdx | 137 ---
 .../reference/en/p5 copy/describeElement.mdx  | 127 ---
 .../reference/en/p5 copy/deviceMoved.mdx      |  49 --
 .../en/p5 copy/deviceOrientation.mdx          |  22 -
 .../reference/en/p5 copy/deviceShaken.mdx     |  50 --
 .../reference/en/p5 copy/deviceTurned.mdx     |  80 --
 .../reference/en/p5 copy/directionalLight.mdx | 277 ------
 .../en/p5 copy/disableFriendlyErrors.mdx      |  55 --
 .../reference/en/p5 copy/displayDensity.mdx   |  55 --
 .../reference/en/p5 copy/displayHeight.mdx    |  47 --
 .../reference/en/p5 copy/displayWidth.mdx     |  47 --
 src/content/reference/en/p5 copy/dist.mdx     | 121 ---
 .../reference/en/p5 copy/doubleClicked.mdx    | 157 ----
 src/content/reference/en/p5 copy/draw.mdx     | 129 ---
 .../reference/en/p5 copy/drawingContext.mdx   |  78 --
 src/content/reference/en/p5 copy/ellipse.mdx  | 164 ----
 .../reference/en/p5 copy/ellipseMode.mdx      | 113 ---
 .../reference/en/p5 copy/ellipsoid.mdx        | 233 -----
 .../reference/en/p5 copy/emissiveMaterial.mdx | 140 ----
 src/content/reference/en/p5 copy/endClip.mdx  |  43 -
 .../reference/en/p5 copy/endContour.mdx       | 133 ---
 .../reference/en/p5 copy/endGeometry.mdx      | 285 -------
 src/content/reference/en/p5 copy/endShape.mdx | 256 ------
 src/content/reference/en/p5 copy/erase.mdx    | 123 ---
 .../reference/en/p5 copy/exitPointerLock.mdx  |  82 --
 src/content/reference/en/p5 copy/exp.mdx      |  83 --
 src/content/reference/en/p5 copy/fill.mdx     | 312 -------
 src/content/reference/en/p5 copy/filter.mdx   | 330 --------
 src/content/reference/en/p5 copy/float.mdx    | 116 ---
 src/content/reference/en/p5 copy/floor.mdx    |  57 --
 src/content/reference/en/p5 copy/focused.mdx  |  50 --
 src/content/reference/en/p5 copy/for.mdx      | 290 -------
 src/content/reference/en/p5 copy/fract.mdx    |  55 --
 .../reference/en/p5 copy/frameCount.mdx       |  73 --
 .../reference/en/p5 copy/frameRate.mdx        | 107 ---
 .../reference/en/p5 copy/freeGeometry.mdx     | 152 ----
 .../reference/en/p5 copy/freqToMidi.mdx       |  29 -
 src/content/reference/en/p5 copy/frustum.mdx  | 175 ----
 .../reference/en/p5 copy/fullscreen.mdx       |  63 --
 src/content/reference/en/p5 copy/function.mdx |  19 -
 src/content/reference/en/p5 copy/get.mdx      | 178 ----
 .../reference/en/p5 copy/getAudioContext.mdx  |  56 --
 src/content/reference/en/p5 copy/getItem.mdx  | 151 ----
 .../reference/en/p5 copy/getOutputVolume.mdx  |  25 -
 .../en/p5 copy/getTargetFrameRate.mdx         |  48 --
 src/content/reference/en/p5 copy/getURL.mdx   |  46 -
 .../reference/en/p5 copy/getURLParams.mdx     |  59 --
 .../reference/en/p5 copy/getURLPath.mdx       |  58 --
 src/content/reference/en/p5 copy/green.mdx    | 159 ----
 .../reference/en/p5 copy/gridOutput.mdx       | 189 -----
 src/content/reference/en/p5 copy/height.mdx   |  87 --
 src/content/reference/en/p5 copy/hex.mdx      | 166 ----
 src/content/reference/en/p5 copy/hour.mdx     |  47 --
 src/content/reference/en/p5 copy/httpDo.mdx   | 150 ----
 src/content/reference/en/p5 copy/httpGet.mdx  | 140 ----
 src/content/reference/en/p5 copy/httpPost.mdx | 165 ----
 src/content/reference/en/p5 copy/hue.mdx      | 145 ----
 src/content/reference/en/p5 copy/if.mdx       | 268 ------
 src/content/reference/en/p5 copy/image.mdx    | 327 --------
 .../reference/en/p5 copy/imageLight.mdx       |  86 --
 .../reference/en/p5 copy/imageMode.mdx        | 129 ---
 src/content/reference/en/p5 copy/input.mdx    |  88 --
 src/content/reference/en/p5 copy/int.mdx      | 169 ----
 .../reference/en/p5 copy/isLooping.mdx        |  65 --
 src/content/reference/en/p5 copy/join.mdx     |  70 --
 src/content/reference/en/p5 copy/key.mdx      | 106 ---
 src/content/reference/en/p5 copy/keyCode.mdx  | 128 ---
 .../reference/en/p5 copy/keyIsDown.mdx        | 142 ----
 .../reference/en/p5 copy/keyIsPressed.mdx     | 105 ---
 .../reference/en/p5 copy/keyPressed.mdx       | 192 -----
 .../reference/en/p5 copy/keyReleased.mdx      | 188 -----
 src/content/reference/en/p5 copy/keyTyped.mdx | 170 ----
 src/content/reference/en/p5 copy/lerp.mdx     | 122 ---
 .../reference/en/p5 copy/lerpColor.mdx        |  96 ---
 src/content/reference/en/p5 copy/let.mdx      |  91 --
 .../reference/en/p5 copy/lightFalloff.mdx     | 100 ---
 .../reference/en/p5 copy/lightness.mdx        | 168 ----
 src/content/reference/en/p5 copy/lights.mdx   |  88 --
 src/content/reference/en/p5 copy/line.mdx     | 194 -----
 .../reference/en/p5 copy/linePerspective.mdx  | 164 ----
 .../reference/en/p5 copy/loadBytes.mdx        |  56 --
 src/content/reference/en/p5 copy/loadFont.mdx | 171 ----
 .../reference/en/p5 copy/loadImage.mdx        | 137 ---
 src/content/reference/en/p5 copy/loadJSON.mdx | 288 -------
 .../reference/en/p5 copy/loadModel.mdx        | 469 -----------
 .../reference/en/p5 copy/loadPixels.mdx       |  61 --
 .../reference/en/p5 copy/loadShader.mdx       | 172 ----
 .../reference/en/p5 copy/loadSound.mdx        |  78 --
 .../reference/en/p5 copy/loadStrings.mdx      | 188 -----
 .../reference/en/p5 copy/loadTable.mdx        | 124 ---
 src/content/reference/en/p5 copy/loadXML.mdx  | 220 -----
 src/content/reference/en/p5 copy/log.mdx      |  79 --
 src/content/reference/en/p5 copy/loop.mdx     | 111 ---
 src/content/reference/en/p5 copy/mag.mdx      |  84 --
 src/content/reference/en/p5 copy/map.mdx      | 119 ---
 src/content/reference/en/p5 copy/match.mdx    |  91 --
 src/content/reference/en/p5 copy/matchAll.mdx | 107 ---
 src/content/reference/en/p5 copy/max.mdx      | 104 ---
 .../reference/en/p5 copy/metalness.mdx        | 142 ----
 .../reference/en/p5 copy/midiToFreq.mdx       |  66 --
 src/content/reference/en/p5 copy/millis.mdx   | 147 ----
 src/content/reference/en/p5 copy/min.mdx      | 104 ---
 src/content/reference/en/p5 copy/minute.mdx   |  47 --
 src/content/reference/en/p5 copy/model.mdx    | 155 ----
 src/content/reference/en/p5 copy/month.mdx    |  47 --
 .../reference/en/p5 copy/mouseButton.mdx      |  87 --
 .../reference/en/p5 copy/mouseClicked.mdx     | 196 -----
 .../reference/en/p5 copy/mouseDragged.mdx     | 130 ---
 .../reference/en/p5 copy/mouseIsPressed.mdx   |  73 --
 .../reference/en/p5 copy/mouseMoved.mdx       | 118 ---
 .../reference/en/p5 copy/mousePressed.mdx     | 193 -----
 .../reference/en/p5 copy/mouseReleased.mdx    | 195 -----
 .../reference/en/p5 copy/mouseWheel.mdx       | 162 ----
 src/content/reference/en/p5 copy/mouseX.mdx   | 124 ---
 src/content/reference/en/p5 copy/mouseY.mdx   | 124 ---
 src/content/reference/en/p5 copy/movedX.mdx   |  78 --
 src/content/reference/en/p5 copy/movedY.mdx   |  78 --
 src/content/reference/en/p5 copy/nf.mdx       | 159 ----
 src/content/reference/en/p5 copy/nfc.mdx      | 153 ----
 src/content/reference/en/p5 copy/nfp.mdx      | 188 -----
 src/content/reference/en/p5 copy/nfs.mdx      | 176 ----
 src/content/reference/en/p5 copy/noCanvas.mdx |  36 -
 src/content/reference/en/p5 copy/noCursor.mdx |  38 -
 .../reference/en/p5 copy/noDebugMode.mdx      |  54 --
 src/content/reference/en/p5 copy/noErase.mdx  |  55 --
 src/content/reference/en/p5 copy/noFill.mdx   |  73 --
 src/content/reference/en/p5 copy/noLights.mdx |  79 --
 src/content/reference/en/p5 copy/noLoop.mdx   | 139 ---
 src/content/reference/en/p5 copy/noSmooth.mdx |  92 --
 src/content/reference/en/p5 copy/noStroke.mdx |  71 --
 src/content/reference/en/p5 copy/noTint.mdx   |  51 --
 src/content/reference/en/p5 copy/noise.mdx    | 282 -------
 .../reference/en/p5 copy/noiseDetail.mdx      | 100 ---
 .../reference/en/p5 copy/noiseSeed.mdx        |  68 --
 src/content/reference/en/p5 copy/norm.mdx     |  69 --
 src/content/reference/en/p5 copy/normal.mdx   | 250 ------
 .../reference/en/p5 copy/normalMaterial.mdx   |  55 --
 .../reference/en/p5 copy/orbitControl.mdx     | 203 -----
 src/content/reference/en/p5 copy/ortho.mdx    | 168 ----
 .../reference/en/p5 copy/outputVolume.mdx     |  51 --
 .../reference/en/p5 copy/p5.Camera.mdx        | 659 ---------------
 src/content/reference/en/p5 copy/p5.Color.mdx | 116 ---
 .../reference/en/p5 copy/p5.Element.mdx       | 545 ------------
 src/content/reference/en/p5 copy/p5.File.mdx  | 153 ----
 src/content/reference/en/p5 copy/p5.Font.mdx  | 146 ----
 .../reference/en/p5 copy/p5.Framebuffer.mdx   | 443 ----------
 .../reference/en/p5 copy/p5.Geometry.mdx      | 793 ------------------
 .../reference/en/p5 copy/p5.Graphics.mdx      | 261 ------
 src/content/reference/en/p5 copy/p5.Image.mdx | 519 ------------
 .../reference/en/p5 copy/p5.MediaElement.mdx  | 258 ------
 .../reference/en/p5 copy/p5.NumberDict.mdx    |  63 --
 .../reference/en/p5 copy/p5.PrintWriter.mdx   |  35 -
 .../reference/en/p5 copy/p5.Renderer.mdx      |  34 -
 .../reference/en/p5 copy/p5.Shader.mdx        | 433 ----------
 .../reference/en/p5 copy/p5.StringDict.mdx    |  15 -
 src/content/reference/en/p5 copy/p5.Table.mdx | 213 -----
 .../reference/en/p5 copy/p5.TableRow.mdx      |  66 --
 .../reference/en/p5 copy/p5.TypedDict.mdx     |  66 --
 .../reference/en/p5 copy/p5.Vector.mdx        | 673 ---------------
 src/content/reference/en/p5 copy/p5.XML.mdx   | 321 -------
 src/content/reference/en/p5 copy/p5.mdx       |  51 --
 .../reference/en/p5 copy/pAccelerationX.mdx   |  21 -
 .../reference/en/p5 copy/pAccelerationY.mdx   |  21 -
 .../reference/en/p5 copy/pAccelerationZ.mdx   |  21 -
 .../reference/en/p5 copy/pRotationX.mdx       |  63 --
 .../reference/en/p5 copy/pRotationY.mdx       |  62 --
 .../reference/en/p5 copy/pRotationZ.mdx       |  58 --
 .../reference/en/p5 copy/paletteLerp.mdx      |  66 --
 src/content/reference/en/p5 copy/panorama.mdx |  76 --
 .../reference/en/p5 copy/perspective.mdx      | 194 -----
 .../reference/en/p5 copy/pixelDensity.mdx     |  90 --
 src/content/reference/en/p5 copy/pixels.mdx   | 173 ----
 src/content/reference/en/p5 copy/plane.mdx    | 152 ----
 src/content/reference/en/p5 copy/pmouseX.mdx  |  88 --
 src/content/reference/en/p5 copy/pmouseY.mdx  |  88 --
 src/content/reference/en/p5 copy/point.mdx    | 229 -----
 .../reference/en/p5 copy/pointLight.mdx       | 329 --------
 src/content/reference/en/p5 copy/pop.mdx      |  20 -
 src/content/reference/en/p5 copy/pow.mdx      |  67 --
 src/content/reference/en/p5 copy/preload.mdx  |  70 --
 src/content/reference/en/p5 copy/print.mdx    |  55 --
 src/content/reference/en/p5 copy/push.mdx     |  20 -
 .../reference/en/p5 copy/pwinMouseX.mdx       |  99 ---
 .../reference/en/p5 copy/pwinMouseY.mdx       |  99 ---
 src/content/reference/en/p5 copy/quad.mdx     | 233 -----
 .../reference/en/p5 copy/quadraticVertex.mdx  | 303 -------
 src/content/reference/en/p5 copy/radians.mdx  |  53 --
 src/content/reference/en/p5 copy/random.mdx   |  48 --
 .../reference/en/p5 copy/randomGaussian.mdx   | 104 ---
 .../reference/en/p5 copy/randomSeed.mdx       |  71 --
 src/content/reference/en/p5 copy/rect.mdx     | 209 -----
 src/content/reference/en/p5 copy/rectMode.mdx | 142 ----
 src/content/reference/en/p5 copy/red.mdx      | 158 ----
 src/content/reference/en/p5 copy/redraw.mdx   | 117 ---
 src/content/reference/en/p5 copy/remove.mdx   |  57 --
 .../reference/en/p5 copy/removeElements.mdx   |  85 --
 .../reference/en/p5 copy/removeItem.mdx       |  97 ---
 .../en/p5 copy/requestPointerLock.mdx         |  85 --
 .../reference/en/p5 copy/resetMatrix.mdx      |  52 --
 .../reference/en/p5 copy/resetShader.mdx      |  95 ---
 .../reference/en/p5 copy/resizeCanvas.mdx     | 133 ---
 src/content/reference/en/p5 copy/reverse.mdx  |  43 -
 src/content/reference/en/p5 copy/rotate.mdx   | 226 -----
 src/content/reference/en/p5 copy/rotateX.mdx  | 161 ----
 src/content/reference/en/p5 copy/rotateY.mdx  | 161 ----
 src/content/reference/en/p5 copy/rotateZ.mdx  | 161 ----
 .../reference/en/p5 copy/rotationX.mdx        |  45 -
 .../reference/en/p5 copy/rotationY.mdx        |  45 -
 .../reference/en/p5 copy/rotationZ.mdx        |  47 --
 src/content/reference/en/p5 copy/round.mdx    |  88 --
 .../reference/en/p5 copy/sampleRate.mdx       |  26 -
 .../reference/en/p5 copy/saturation.mdx       | 201 -----
 src/content/reference/en/p5 copy/save.mdx     | 140 ----
 .../reference/en/p5 copy/saveCanvas.mdx       | 166 ----
 .../reference/en/p5 copy/saveFrames.mdx       | 175 ----
 src/content/reference/en/p5 copy/saveGif.mdx  | 119 ---
 src/content/reference/en/p5 copy/saveJSON.mdx | 170 ----
 .../reference/en/p5 copy/saveSound.mdx        |  35 -
 .../reference/en/p5 copy/saveStrings.mdx      | 185 ----
 .../reference/en/p5 copy/saveTable.mdx        |  70 --
 src/content/reference/en/p5 copy/scale.mdx    | 231 -----
 src/content/reference/en/p5 copy/second.mdx   |  47 --
 src/content/reference/en/p5 copy/select.mdx   | 113 ---
 .../reference/en/p5 copy/selectAll.mdx        | 121 ---
 src/content/reference/en/p5 copy/set.mdx      | 157 ----
 .../reference/en/p5 copy/setAttributes.mdx    | 163 ----
 src/content/reference/en/p5 copy/setBPM.mdx   |  29 -
 .../reference/en/p5 copy/setCamera.mdx        |  81 --
 .../reference/en/p5 copy/setMoveThreshold.mdx |  59 --
 .../en/p5 copy/setShakeThreshold.mdx          |  59 --
 src/content/reference/en/p5 copy/setup.mdx    | 111 ---
 src/content/reference/en/p5 copy/shader.mdx   | 244 ------
 src/content/reference/en/p5 copy/shearX.mdx   | 105 ---
 src/content/reference/en/p5 copy/shearY.mdx   | 105 ---
 .../reference/en/p5 copy/shininess.mdx        |  86 --
 src/content/reference/en/p5 copy/shorten.mdx  |  44 -
 src/content/reference/en/p5 copy/shuffle.mdx  | 132 ---
 src/content/reference/en/p5 copy/sin.mdx      | 107 ---
 src/content/reference/en/p5 copy/smooth.mdx   |  94 ---
 src/content/reference/en/p5 copy/sort.mdx     |  63 --
 .../reference/en/p5 copy/soundFormats.mdx     |  51 --
 src/content/reference/en/p5 copy/soundOut.mdx |  26 -
 .../reference/en/p5 copy/specularColor.mdx    | 308 -------
 .../reference/en/p5 copy/specularMaterial.mdx | 311 -------
 src/content/reference/en/p5 copy/sphere.mdx   | 165 ----
 src/content/reference/en/p5 copy/splice.mdx   |  58 --
 src/content/reference/en/p5 copy/split.mdx    |  87 --
 .../reference/en/p5 copy/splitTokens.mdx      | 180 ----
 .../reference/en/p5 copy/spotLight.mdx        | 398 ---------
 src/content/reference/en/p5 copy/sq.mdx       |  83 --
 src/content/reference/en/p5 copy/sqrt.mdx     |  84 --
 src/content/reference/en/p5 copy/square.mdx   | 163 ----
 .../reference/en/p5 copy/storeItem.mdx        | 149 ----
 src/content/reference/en/p5 copy/str.mdx      | 135 ---
 src/content/reference/en/p5 copy/stroke.mdx   | 311 -------
 .../reference/en/p5 copy/strokeCap.mdx        |  67 --
 .../reference/en/p5 copy/strokeJoin.mdx       | 114 ---
 .../reference/en/p5 copy/strokeWeight.mdx     |  77 --
 src/content/reference/en/p5 copy/subset.mdx   |  59 --
 src/content/reference/en/p5 copy/tan.mdx      |  66 --
 src/content/reference/en/p5 copy/text.mdx     |  96 ---
 .../reference/en/p5 copy/textAlign.mdx        | 135 ---
 .../reference/en/p5 copy/textAscent.mdx       |  71 --
 .../reference/en/p5 copy/textDescent.mdx      |  71 --
 src/content/reference/en/p5 copy/textFont.mdx | 127 ---
 .../reference/en/p5 copy/textLeading.mdx      |  63 --
 .../reference/en/p5 copy/textOutput.mdx       | 186 ----
 src/content/reference/en/p5 copy/textSize.mdx |  65 --
 .../reference/en/p5 copy/textStyle.mdx        |  79 --
 .../reference/en/p5 copy/textWidth.mdx        |  83 --
 src/content/reference/en/p5 copy/textWrap.mdx | 111 ---
 src/content/reference/en/p5 copy/texture.mdx  | 207 -----
 .../reference/en/p5 copy/textureMode.mdx      | 254 ------
 .../reference/en/p5 copy/textureWrap.mdx      | 370 --------
 src/content/reference/en/p5 copy/tint.mdx     | 201 -----
 src/content/reference/en/p5 copy/torus.mdx    | 200 -----
 .../reference/en/p5 copy/touchEnded.mdx       | 196 -----
 .../reference/en/p5 copy/touchMoved.mdx       | 198 -----
 .../reference/en/p5 copy/touchStarted.mdx     | 197 -----
 src/content/reference/en/p5 copy/touches.mdx  | 102 ---
 .../reference/en/p5 copy/translate.mdx        | 241 ------
 src/content/reference/en/p5 copy/triangle.mdx | 104 ---
 src/content/reference/en/p5 copy/trim.mdx     | 113 ---
 src/content/reference/en/p5 copy/turnAxis.mdx |  54 --
 .../reference/en/p5 copy/types/Array.mdx      | 269 ------
 .../reference/en/p5 copy/types/Boolean.mdx    | 273 ------
 .../reference/en/p5 copy/types/Number.mdx     | 201 -----
 .../reference/en/p5 copy/types/Object.mdx     |  91 --
 .../reference/en/p5 copy/types/String.mdx     | 153 ----
 src/content/reference/en/p5 copy/unchar.mdx   | 114 ---
 src/content/reference/en/p5 copy/unhex.mdx    | 121 ---
 .../reference/en/p5 copy/updatePixels.mdx     |  94 ---
 .../reference/en/p5 copy/userStartAudio.mdx   |  99 ---
 src/content/reference/en/p5 copy/vertex.mdx   | 242 ------
 .../reference/en/p5 copy/webglVersion.mdx     | 105 ---
 src/content/reference/en/p5 copy/while.mdx    | 161 ----
 src/content/reference/en/p5 copy/width.mdx    |  87 --
 .../reference/en/p5 copy/winMouseX.mdx        |  61 --
 .../reference/en/p5 copy/winMouseY.mdx        |  61 --
 .../reference/en/p5 copy/windowHeight.mdx     |  43 -
 .../reference/en/p5 copy/windowResized.mdx    |  64 --
 .../reference/en/p5 copy/windowWidth.mdx      |  43 -
 src/content/reference/en/p5 copy/year.mdx     |  47 --
 523 files changed, 2 insertions(+), 60137 deletions(-)
 delete mode 100644 src/content/reference/en/p5 copy/abs.mdx
 delete mode 100644 src/content/reference/en/p5 copy/accelerationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/accelerationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/accelerationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/acos.mdx
 delete mode 100644 src/content/reference/en/p5 copy/alpha.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ambientLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ambientMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/angleMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/append.mdx
 delete mode 100644 src/content/reference/en/p5 copy/applyMatrix.mdx
 delete mode 100644 src/content/reference/en/p5 copy/arc.mdx
 delete mode 100644 src/content/reference/en/p5 copy/arrayCopy.mdx
 delete mode 100644 src/content/reference/en/p5 copy/asin.mdx
 delete mode 100644 src/content/reference/en/p5 copy/atan.mdx
 delete mode 100644 src/content/reference/en/p5 copy/atan2.mdx
 delete mode 100644 src/content/reference/en/p5 copy/background.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseColorShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseMaterialShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseNormalShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/baseStrokeShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginClip.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginContour.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/beginShape.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezier.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierDetail.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierPoint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierTangent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/bezierVertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/blend.mdx
 delete mode 100644 src/content/reference/en/p5 copy/blendMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/blue.mdx
 delete mode 100644 src/content/reference/en/p5 copy/boolean.mdx
 delete mode 100644 src/content/reference/en/p5 copy/box.mdx
 delete mode 100644 src/content/reference/en/p5 copy/brightness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/buildGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/byte.mdx
 delete mode 100644 src/content/reference/en/p5 copy/camera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ceil.mdx
 delete mode 100644 src/content/reference/en/p5 copy/changed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/char.mdx
 delete mode 100644 src/content/reference/en/p5 copy/circle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/class.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clear.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clearDepth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clearStorage.mdx
 delete mode 100644 src/content/reference/en/p5 copy/clip.mdx
 delete mode 100644 src/content/reference/en/p5 copy/color.mdx
 delete mode 100644 src/content/reference/en/p5 copy/colorMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/concat.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cone.mdx
 delete mode 100644 src/content/reference/en/p5 copy/console.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ADD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ALT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/AUTO.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/AXES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BASELINE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BEVEL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BEZIER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BLEND.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BLUR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BOLD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BOTTOM.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/BURN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CENTER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CHAR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CHORD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CLAMP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CLOSE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CONTAIN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CONTROL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CORNER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CORNERS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/COVER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CROSS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/CURVE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DARKEST.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DEGREES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DELETE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DILATE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DODGE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ENTER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ERODE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ESCAPE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FALLBACK.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FILL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FLAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/FLOAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/GRAY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/GRID.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HALF_PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HAND.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HSB.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/HSL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/IMAGE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/INVERT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ITALIC.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LABEL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LEFT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINEAR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MIRROR.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MITER.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MOVE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/NEAREST.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/NORMAL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OPAQUE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OPEN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OPTION.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/OVERLAY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/P2D.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PIE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/POINTS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/PROJECT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUADS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RADIANS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RADIUS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/REMOVE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/REPEAT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/REPLACE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RETURN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RGB.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RGBA.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RIGHT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/ROUND.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SCREEN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SHIFT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SMOOTH.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SQUARE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/STROKE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TAB.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TAU.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TESS.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TEXT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TEXTURE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TOP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/TWO_PI.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/VERSION.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WAIT.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WEBGL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WEBGL2.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constants/WORD.mdx
 delete mode 100644 src/content/reference/en/p5 copy/constrain.mdx
 delete mode 100644 src/content/reference/en/p5 copy/copy.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cos.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createA.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createAudio.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createButton.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCamera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCapture.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createCheckbox.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createColorPicker.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createConvolver.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createDiv.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createElement.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createFileInput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createFilterShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createFramebuffer.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createGraphics.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createImage.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createImg.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createInput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createModel.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createNumberDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createP.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createRadio.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createSelect.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createSlider.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createSpan.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createStringDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createVector.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createVideo.mdx
 delete mode 100644 src/content/reference/en/p5 copy/createWriter.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cursor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curve.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveDetail.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curvePoint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveTangent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveTightness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/curveVertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/cylinder.mdx
 delete mode 100644 src/content/reference/en/p5 copy/day.mdx
 delete mode 100644 src/content/reference/en/p5 copy/debugMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/degrees.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deltaTime.mdx
 delete mode 100644 src/content/reference/en/p5 copy/describe.mdx
 delete mode 100644 src/content/reference/en/p5 copy/describeElement.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceMoved.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceOrientation.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceShaken.mdx
 delete mode 100644 src/content/reference/en/p5 copy/deviceTurned.mdx
 delete mode 100644 src/content/reference/en/p5 copy/directionalLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
 delete mode 100644 src/content/reference/en/p5 copy/displayDensity.mdx
 delete mode 100644 src/content/reference/en/p5 copy/displayHeight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/displayWidth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/dist.mdx
 delete mode 100644 src/content/reference/en/p5 copy/doubleClicked.mdx
 delete mode 100644 src/content/reference/en/p5 copy/draw.mdx
 delete mode 100644 src/content/reference/en/p5 copy/drawingContext.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ellipse.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ellipseMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ellipsoid.mdx
 delete mode 100644 src/content/reference/en/p5 copy/emissiveMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endClip.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endContour.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/endShape.mdx
 delete mode 100644 src/content/reference/en/p5 copy/erase.mdx
 delete mode 100644 src/content/reference/en/p5 copy/exitPointerLock.mdx
 delete mode 100644 src/content/reference/en/p5 copy/exp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/fill.mdx
 delete mode 100644 src/content/reference/en/p5 copy/filter.mdx
 delete mode 100644 src/content/reference/en/p5 copy/float.mdx
 delete mode 100644 src/content/reference/en/p5 copy/floor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/focused.mdx
 delete mode 100644 src/content/reference/en/p5 copy/for.mdx
 delete mode 100644 src/content/reference/en/p5 copy/fract.mdx
 delete mode 100644 src/content/reference/en/p5 copy/frameCount.mdx
 delete mode 100644 src/content/reference/en/p5 copy/frameRate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/freeGeometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/freqToMidi.mdx
 delete mode 100644 src/content/reference/en/p5 copy/frustum.mdx
 delete mode 100644 src/content/reference/en/p5 copy/fullscreen.mdx
 delete mode 100644 src/content/reference/en/p5 copy/function.mdx
 delete mode 100644 src/content/reference/en/p5 copy/get.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getAudioContext.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getItem.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getOutputVolume.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getTargetFrameRate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getURL.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getURLParams.mdx
 delete mode 100644 src/content/reference/en/p5 copy/getURLPath.mdx
 delete mode 100644 src/content/reference/en/p5 copy/green.mdx
 delete mode 100644 src/content/reference/en/p5 copy/gridOutput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/height.mdx
 delete mode 100644 src/content/reference/en/p5 copy/hex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/hour.mdx
 delete mode 100644 src/content/reference/en/p5 copy/httpDo.mdx
 delete mode 100644 src/content/reference/en/p5 copy/httpGet.mdx
 delete mode 100644 src/content/reference/en/p5 copy/httpPost.mdx
 delete mode 100644 src/content/reference/en/p5 copy/hue.mdx
 delete mode 100644 src/content/reference/en/p5 copy/if.mdx
 delete mode 100644 src/content/reference/en/p5 copy/image.mdx
 delete mode 100644 src/content/reference/en/p5 copy/imageLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/imageMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/input.mdx
 delete mode 100644 src/content/reference/en/p5 copy/int.mdx
 delete mode 100644 src/content/reference/en/p5 copy/isLooping.mdx
 delete mode 100644 src/content/reference/en/p5 copy/join.mdx
 delete mode 100644 src/content/reference/en/p5 copy/key.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyCode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyIsDown.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyIsPressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyPressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyReleased.mdx
 delete mode 100644 src/content/reference/en/p5 copy/keyTyped.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lerp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lerpColor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/let.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lightFalloff.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lightness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/lights.mdx
 delete mode 100644 src/content/reference/en/p5 copy/line.mdx
 delete mode 100644 src/content/reference/en/p5 copy/linePerspective.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadBytes.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadFont.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadImage.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadJSON.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadModel.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadPixels.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadSound.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadStrings.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadTable.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loadXML.mdx
 delete mode 100644 src/content/reference/en/p5 copy/log.mdx
 delete mode 100644 src/content/reference/en/p5 copy/loop.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mag.mdx
 delete mode 100644 src/content/reference/en/p5 copy/map.mdx
 delete mode 100644 src/content/reference/en/p5 copy/match.mdx
 delete mode 100644 src/content/reference/en/p5 copy/matchAll.mdx
 delete mode 100644 src/content/reference/en/p5 copy/max.mdx
 delete mode 100644 src/content/reference/en/p5 copy/metalness.mdx
 delete mode 100644 src/content/reference/en/p5 copy/midiToFreq.mdx
 delete mode 100644 src/content/reference/en/p5 copy/millis.mdx
 delete mode 100644 src/content/reference/en/p5 copy/min.mdx
 delete mode 100644 src/content/reference/en/p5 copy/minute.mdx
 delete mode 100644 src/content/reference/en/p5 copy/model.mdx
 delete mode 100644 src/content/reference/en/p5 copy/month.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseButton.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseClicked.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseDragged.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseIsPressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseMoved.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mousePressed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseReleased.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseWheel.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/mouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/movedX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/movedY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nf.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nfc.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nfp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/nfs.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noCursor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noDebugMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noErase.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noFill.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noLights.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noLoop.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noSmooth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noStroke.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noTint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noise.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noiseDetail.mdx
 delete mode 100644 src/content/reference/en/p5 copy/noiseSeed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/norm.mdx
 delete mode 100644 src/content/reference/en/p5 copy/normal.mdx
 delete mode 100644 src/content/reference/en/p5 copy/normalMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/orbitControl.mdx
 delete mode 100644 src/content/reference/en/p5 copy/ortho.mdx
 delete mode 100644 src/content/reference/en/p5 copy/outputVolume.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Camera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Color.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Element.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.File.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Font.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Framebuffer.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Geometry.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Graphics.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Image.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.MediaElement.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.NumberDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.PrintWriter.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Renderer.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Shader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.StringDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Table.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.TableRow.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.TypedDict.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.Vector.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.XML.mdx
 delete mode 100644 src/content/reference/en/p5 copy/p5.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pAccelerationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pAccelerationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pAccelerationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pRotationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pRotationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pRotationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/paletteLerp.mdx
 delete mode 100644 src/content/reference/en/p5 copy/panorama.mdx
 delete mode 100644 src/content/reference/en/p5 copy/perspective.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pixelDensity.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pixels.mdx
 delete mode 100644 src/content/reference/en/p5 copy/plane.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pmouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pmouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/point.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pointLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pop.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pow.mdx
 delete mode 100644 src/content/reference/en/p5 copy/preload.mdx
 delete mode 100644 src/content/reference/en/p5 copy/print.mdx
 delete mode 100644 src/content/reference/en/p5 copy/push.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pwinMouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/pwinMouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/quad.mdx
 delete mode 100644 src/content/reference/en/p5 copy/quadraticVertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/radians.mdx
 delete mode 100644 src/content/reference/en/p5 copy/random.mdx
 delete mode 100644 src/content/reference/en/p5 copy/randomGaussian.mdx
 delete mode 100644 src/content/reference/en/p5 copy/randomSeed.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rect.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rectMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/red.mdx
 delete mode 100644 src/content/reference/en/p5 copy/redraw.mdx
 delete mode 100644 src/content/reference/en/p5 copy/remove.mdx
 delete mode 100644 src/content/reference/en/p5 copy/removeElements.mdx
 delete mode 100644 src/content/reference/en/p5 copy/removeItem.mdx
 delete mode 100644 src/content/reference/en/p5 copy/requestPointerLock.mdx
 delete mode 100644 src/content/reference/en/p5 copy/resetMatrix.mdx
 delete mode 100644 src/content/reference/en/p5 copy/resetShader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/resizeCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/reverse.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotateX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotateY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotateZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotationX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotationY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/rotationZ.mdx
 delete mode 100644 src/content/reference/en/p5 copy/round.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sampleRate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saturation.mdx
 delete mode 100644 src/content/reference/en/p5 copy/save.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveCanvas.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveFrames.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveGif.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveJSON.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveSound.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveStrings.mdx
 delete mode 100644 src/content/reference/en/p5 copy/saveTable.mdx
 delete mode 100644 src/content/reference/en/p5 copy/scale.mdx
 delete mode 100644 src/content/reference/en/p5 copy/second.mdx
 delete mode 100644 src/content/reference/en/p5 copy/select.mdx
 delete mode 100644 src/content/reference/en/p5 copy/selectAll.mdx
 delete mode 100644 src/content/reference/en/p5 copy/set.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setAttributes.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setBPM.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setCamera.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setMoveThreshold.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setShakeThreshold.mdx
 delete mode 100644 src/content/reference/en/p5 copy/setup.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shader.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shearX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shearY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shininess.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shorten.mdx
 delete mode 100644 src/content/reference/en/p5 copy/shuffle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sin.mdx
 delete mode 100644 src/content/reference/en/p5 copy/smooth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sort.mdx
 delete mode 100644 src/content/reference/en/p5 copy/soundFormats.mdx
 delete mode 100644 src/content/reference/en/p5 copy/soundOut.mdx
 delete mode 100644 src/content/reference/en/p5 copy/specularColor.mdx
 delete mode 100644 src/content/reference/en/p5 copy/specularMaterial.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sphere.mdx
 delete mode 100644 src/content/reference/en/p5 copy/splice.mdx
 delete mode 100644 src/content/reference/en/p5 copy/split.mdx
 delete mode 100644 src/content/reference/en/p5 copy/splitTokens.mdx
 delete mode 100644 src/content/reference/en/p5 copy/spotLight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sq.mdx
 delete mode 100644 src/content/reference/en/p5 copy/sqrt.mdx
 delete mode 100644 src/content/reference/en/p5 copy/square.mdx
 delete mode 100644 src/content/reference/en/p5 copy/storeItem.mdx
 delete mode 100644 src/content/reference/en/p5 copy/str.mdx
 delete mode 100644 src/content/reference/en/p5 copy/stroke.mdx
 delete mode 100644 src/content/reference/en/p5 copy/strokeCap.mdx
 delete mode 100644 src/content/reference/en/p5 copy/strokeJoin.mdx
 delete mode 100644 src/content/reference/en/p5 copy/strokeWeight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/subset.mdx
 delete mode 100644 src/content/reference/en/p5 copy/tan.mdx
 delete mode 100644 src/content/reference/en/p5 copy/text.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textAlign.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textAscent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textDescent.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textFont.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textLeading.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textOutput.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textSize.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textStyle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textWidth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textWrap.mdx
 delete mode 100644 src/content/reference/en/p5 copy/texture.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textureMode.mdx
 delete mode 100644 src/content/reference/en/p5 copy/textureWrap.mdx
 delete mode 100644 src/content/reference/en/p5 copy/tint.mdx
 delete mode 100644 src/content/reference/en/p5 copy/torus.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touchEnded.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touchMoved.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touchStarted.mdx
 delete mode 100644 src/content/reference/en/p5 copy/touches.mdx
 delete mode 100644 src/content/reference/en/p5 copy/translate.mdx
 delete mode 100644 src/content/reference/en/p5 copy/triangle.mdx
 delete mode 100644 src/content/reference/en/p5 copy/trim.mdx
 delete mode 100644 src/content/reference/en/p5 copy/turnAxis.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Array.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Boolean.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Number.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/Object.mdx
 delete mode 100644 src/content/reference/en/p5 copy/types/String.mdx
 delete mode 100644 src/content/reference/en/p5 copy/unchar.mdx
 delete mode 100644 src/content/reference/en/p5 copy/unhex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/updatePixels.mdx
 delete mode 100644 src/content/reference/en/p5 copy/userStartAudio.mdx
 delete mode 100644 src/content/reference/en/p5 copy/vertex.mdx
 delete mode 100644 src/content/reference/en/p5 copy/webglVersion.mdx
 delete mode 100644 src/content/reference/en/p5 copy/while.mdx
 delete mode 100644 src/content/reference/en/p5 copy/width.mdx
 delete mode 100644 src/content/reference/en/p5 copy/winMouseX.mdx
 delete mode 100644 src/content/reference/en/p5 copy/winMouseY.mdx
 delete mode 100644 src/content/reference/en/p5 copy/windowHeight.mdx
 delete mode 100644 src/content/reference/en/p5 copy/windowResized.mdx
 delete mode 100644 src/content/reference/en/p5 copy/windowWidth.mdx
 delete mode 100644 src/content/reference/en/p5 copy/year.mdx

diff --git a/.github/actions/translation-tracker/README.md b/.github/actions/translation-tracker/README.md
index 0c9a7e698e..1b5f2e041e 100644
--- a/.github/actions/translation-tracker/README.md
+++ b/.github/actions/translation-tracker/README.md
@@ -50,12 +50,12 @@ Preview path example:
 
 ```bash
 # From repository root — missing files from latest commit only (all languages by default)
-GENERATE_STUBS=true \
+  GENERATE_STUBS=true \
   GITHUB_TOKEN=your_token GITHUB_REPOSITORY=youruser/p5.js-website \
   node .github/actions/translation-tracker/index.js
 
 # Single language or full scan (STUB_MAX_FILES applies per language)
-GENERATE_STUBS=true STUB_FULL_SCAN=true STUB_MAX_FILES=10 STUB_LANGUAGES=es,hi \
+  GENERATE_STUBS=true STUB_FULL_SCAN=true STUB_MAX_FILES=10 STUB_LANGUAGES=es,hi \
   GITHUB_TOKEN=your_token GITHUB_REPOSITORY=youruser/p5.js-website \
   node .github/actions/translation-tracker/index.js
 ```
diff --git a/src/content/reference/en/p5 copy/abs.mdx b/src/content/reference/en/p5 copy/abs.mdx
deleted file mode 100644
index 1bdb6895ff..0000000000
--- a/src/content/reference/en/p5 copy/abs.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L10
-title: abs
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the absolute value of a number.</p>
-
-  <p>A number's absolute value is its distance from zero on the number line.
-
-  -5 and 5 are both five units away from zero, so calling <code>abs(-5)</code>
-  and
-
-  <code>abs(5)</code> both return 5. The absolute value of a number is always
-  positive.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Divide the canvas.
-      line(50, 0, 50, 100);
-
-      // Calculate the mouse's distance from the middle.
-      let h = abs(mouseX - 50);
-
-      // Draw a rectangle based on the mouse's distance
-      // from the middle.
-      rect(0, 100 - h, 100, h);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to compute.</p>
-    type: Number
-return:
-  description: absolute value of given number.
-  type: Number
-chainable: false
----
-
-
-# abs
diff --git a/src/content/reference/en/p5 copy/accelerationX.mdx b/src/content/reference/en/p5 copy/accelerationX.mdx
deleted file mode 100644
index 6a47fc46ce..0000000000
--- a/src/content/reference/en/p5 copy/accelerationX.mdx	
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L23
-title: accelerationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable accelerationX always contains the acceleration of the
-
-  device along the x axis. Value is represented as meters per second
-  squared.</p>
-line: 23
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move a touchscreen device to register
-    // acceleration changes.
-    function draw() {
-      background(220, 50);
-      fill('magenta');
-      ellipse(width / 2, height / 2, accelerationX);
-      describe('Magnitude of device acceleration is displayed as ellipse size.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# accelerationX
diff --git a/src/content/reference/en/p5 copy/accelerationY.mdx b/src/content/reference/en/p5 copy/accelerationY.mdx
deleted file mode 100644
index bf5f54e39b..0000000000
--- a/src/content/reference/en/p5 copy/accelerationY.mdx	
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L45
-title: accelerationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable accelerationY always contains the acceleration of the
-
-  device along the y axis. Value is represented as meters per second
-  squared.</p>
-line: 45
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move a touchscreen device to register
-    // acceleration changes.
-    function draw() {
-      background(220, 50);
-      fill('magenta');
-      ellipse(width / 2, height / 2, accelerationY);
-      describe('Magnitude of device acceleration is displayed as ellipse size');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# accelerationY
diff --git a/src/content/reference/en/p5 copy/accelerationZ.mdx b/src/content/reference/en/p5 copy/accelerationZ.mdx
deleted file mode 100644
index 11e5cbb53e..0000000000
--- a/src/content/reference/en/p5 copy/accelerationZ.mdx	
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L67
-title: accelerationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable accelerationZ always contains the acceleration of the
-
-  device along the z axis. Value is represented as meters per second
-  squared.</p>
-line: 67
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move a touchscreen device to register
-    // acceleration changes.
-    function draw() {
-      background(220, 50);
-      fill('magenta');
-      ellipse(width / 2, height / 2, accelerationZ);
-      describe('Magnitude of device acceleration is displayed as ellipse size');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# accelerationZ
diff --git a/src/content/reference/en/p5 copy/acos.mdx b/src/content/reference/en/p5 copy/acos.mdx
deleted file mode 100644
index c9ed943f5e..0000000000
--- a/src/content/reference/en/p5 copy/acos.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L18
-title: acos
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the arc cosine of a number.</p>
-
-  <p><code>acos()</code> is the inverse of <a
-  href="/reference/p5/cos/">cos()</a>. It expects
-
-  arguments in the range -1 to 1. By default, <code>acos()</code> returns values
-  in the
-
-  range 0 to π (about 3.14). If the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
-  then values are
-
-  returned in the range 0 to 180.</p>
-line: 18
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate cos() and acos() values.
-      let a = PI;
-      let c = cos(a);
-      let ac = acos(c);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(c, 3)}`, 35, 50);
-      text(`${round(ac, 3)}`, 35, 75);
-
-      describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate cos() and acos() values.
-      let a = PI + QUARTER_PI;
-      let c = cos(a);
-      let ac = acos(c);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(c, 3)}`, 35, 50);
-      text(`${round(ac, 3)}`, 35, 75);
-
-      describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>value whose arc cosine is to be returned.</p>
-    type: Number
-return:
-  description: arc cosine of the given value.
-  type: Number
-chainable: false
----
-
-
-# acos
diff --git a/src/content/reference/en/p5 copy/alpha.mdx b/src/content/reference/en/p5 copy/alpha.mdx
deleted file mode 100644
index c1a87aa78d..0000000000
--- a/src/content/reference/en/p5 copy/alpha.mdx	
+++ /dev/null
@@ -1,120 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L16
-title: alpha
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the alpha (transparency) value of a color.</p>
-
-  <p><code>alpha()</code> extracts the alpha value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-line: 16
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let c = color(0, 126, 255, 102);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'alphaValue' to 102.
-      let alphaValue = alpha(c);
-
-      // Draw the right rectangle.
-      fill(alphaValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [0, 126, 255, 102];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'alphaValue' to 102.
-      let alphaValue = alpha(c);
-
-      // Draw the left rectangle.
-      fill(alphaValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgba(0, 126, 255, 0.4)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'alphaValue' to 102.
-      let alphaValue = alpha(c);
-
-      // Draw the right rectangle.
-      fill(alphaValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the alpha value.
-  type: Number
-chainable: false
----
-
-
-# alpha
diff --git a/src/content/reference/en/p5 copy/ambientLight.mdx b/src/content/reference/en/p5 copy/ambientLight.mdx
deleted file mode 100644
index 09f9159592..0000000000
--- a/src/content/reference/en/p5 copy/ambientLight.mdx	
+++ /dev/null
@@ -1,241 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L10
-title: ambientLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines from all directions.</p>
-
-  <p>Ambient light does not come from one direction. Instead, 3D shapes are
-
-  lit evenly from all sides. Ambient lights are almost always used in
-
-  combination with other types of lights.</p>
-
-  <p>There are three ways to call <code>ambientLight()</code> with optional
-  parameters to
-
-  set the light’s color.</p>
-
-  <p>The first way to call <code>ambientLight()</code> has two parameters,
-  <code>gray</code> and
-
-  <code>alpha</code>. <code>alpha</code> is optional. Grayscale and alpha values
-  between 0 and 255
-
-  can be passed to set the ambient light’s color, as in
-  <code>ambientLight(50)</code> or
-
-  <code>ambientLight(50, 30)</code>.</p>
-
-  <p>The second way to call <code>ambientLight()</code> has one parameter,
-  color. A
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  values, or a
-
-  CSS color string, as in <code>ambientLight('magenta')</code>, can be passed to
-  set the
-
-  ambient light’s color.</p>
-
-  <p>The third way to call <code>ambientLight()</code> has four parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
-  HSBA, or HSLA values can be
-
-  passed to set the ambient light’s colors, as in <code>ambientLight(255, 0,
-  0)</code>
-
-  or <code>ambientLight(255, 0, 0, 30)</code>. Color values will be interpreted
-  using
-
-  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to turn on the light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the light.
-      if (isLit === true) {
-        // Use a grayscale value of 80.
-        ambientLight(80);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the ambient light when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A faded magenta sphere drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      // Use a p5.Color object.
-      let c = color('orchid');
-      ambientLight(c);
-
-      // Draw the sphere.
-      sphere();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A faded magenta sphere drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      // Use a CSS color string.
-      ambientLight('#DA70D6');
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A faded magenta sphere drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      // Use RGB values
-      ambientLight(218, 112, 214);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 10
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha (transparency) value in the current
-                                          <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 164
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 and 255.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 171
-    params:
-      - name: value
-        description: |
-          <p>color as a CSS string.</p>
-        type: String
-    chainable: 1
-  - line: 177
-    params:
-      - name: values
-        description: |
-          <p>color as an array of RGBA, HSBA, or HSLA
-                                          values.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 184
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# ambientLight
diff --git a/src/content/reference/en/p5 copy/ambientMaterial.mdx b/src/content/reference/en/p5 copy/ambientMaterial.mdx
deleted file mode 100644
index 8b96f24260..0000000000
--- a/src/content/reference/en/p5 copy/ambientMaterial.mdx	
+++ /dev/null
@@ -1,269 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2416
-title: ambientMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the ambient color of shapes’ surface material.</p>
-
-  <p>The <code>ambientMaterial()</code> color sets the components of the
-
-  <a href="/reference/p5/ambientLight/">ambientLight()</a> color that shapes
-  will
-
-  reflect. For example, calling <code>ambientMaterial(255, 255, 0)</code> would
-  cause a
-
-  shape to reflect red and green light, but not blue light.</p>
-
-  <p><code>ambientMaterial()</code> can be called three ways with different
-  parameters to
-
-  set the material’s color.</p>
-
-  <p>The first way to call <code>ambientMaterial()</code> has one parameter,
-  <code>gray</code>.
-
-  Grayscale values between 0 and 255, as in <code>ambientMaterial(50)</code>,
-  can be
-
-  passed to set the material’s color. Higher grayscale values make shapes
-
-  appear brighter.</p>
-
-  <p>The second way to call <code>ambientMaterial()</code> has one parameter,
-  <code>color</code>. A
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  values, or a
-
-  CSS color string, as in <code>ambientMaterial('magenta')</code>, can be passed
-  to set
-
-  the material’s color.</p>
-
-  <p>The third way to call <code>ambientMaterial()</code> has three parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  and <code>v3</code>. RGB, HSB, or HSL values, as in <code>ambientMaterial(255,
-  0, 0)</code>, can
-
-  be passed to set the material’s colors. Color values will be interpreted
-
-  using the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-
-  <p>Note: <code>ambientMaterial()</code> can only be used in WebGL mode.</p>
-line: 2416
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A magenta cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A purple cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a dark gray ambient material.
-      ambientMaterial(150);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a yellow ambient material using RGB values.
-      ambientMaterial(255, 255, 0);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a yellow ambient material using a p5.Color object.
-      let c = color(255, 255, 0);
-      ambientMaterial(c);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a magenta ambient light.
-      ambientLight(255, 0, 255);
-
-      // Add a yellow ambient material using a color string.
-      ambientMaterial('yellow');
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A yellow cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white ambient light.
-      ambientLight(255, 255, 255);
-
-      // Add a yellow ambient material using a color string.
-      ambientMaterial('yellow');
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2416
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the
-                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the
-                               current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-    chainable: 1
-  - line: 2621
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 (black) and 255 (white).</p>
-        type: Number
-    chainable: 1
-  - line: 2627
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                     an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-    chainable: 1
-chainable: true
----
-
-
-# ambientMaterial
diff --git a/src/content/reference/en/p5 copy/angleMode.mdx b/src/content/reference/en/p5 copy/angleMode.mdx
deleted file mode 100644
index 3401a563cd..0000000000
--- a/src/content/reference/en/p5 copy/angleMode.mdx	
+++ /dev/null
@@ -1,219 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L557
-title: angleMode
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Changes the unit system used to measure angles.</p>
-
-  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
-
-  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
-
-  <p>Functions such as <a href="/reference/p5/rotate/">rotate()</a> and
-
-  <a href="/reference/p5/sin/">sin()</a> expect angles measured radians by
-  default.
-
-  Calling <code>angleMode(DEGREES)</code> switches to degrees. Calling
-
-  <code>angleMode(RADIANS)</code> switches back to radians.</p>
-
-  <p>Calling <code>angleMode()</code> with no arguments returns current angle
-  mode, which
-
-  is either <code>RADIANS</code> or <code>DEGREES</code>.</p>
-line: 557
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Rotate 1/8 turn.
-      rotate(QUARTER_PI);
-
-      // Draw a line.
-      line(0, 0, 80, 0);
-
-      describe('A diagonal line radiating from the top-left corner of a square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Rotate 1/8 turn.
-      rotate(45);
-
-      // Draw a line.
-      line(0, 0, 80, 0);
-
-      describe('A diagonal line radiating from the top-left corner of a square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Calculate the angle to rotate.
-      let angle = TWO_PI / 7;
-
-      // Move the origin to the center.
-      translate(50, 50);
-
-      // Style the flower.
-      noStroke();
-      fill(255, 50);
-
-      // Draw the flower.
-      for (let i = 0; i < 7; i += 1) {
-        ellipse(0, 0, 80, 20);
-        rotate(angle);
-      }
-
-      describe('A translucent white flower on a dark background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Calculate the angle to rotate.
-      let angle = 360 / 7;
-
-      // Move the origin to the center.
-      translate(50, 50);
-
-      // Style the flower.
-      noStroke();
-      fill(255, 50);
-
-      // Draw the flower.
-      for (let i = 0; i < 7; i += 1) {
-        ellipse(0, 0, 80, 20);
-        rotate(angle);
-      }
-
-      describe('A translucent white flower on a dark background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white ball on a string oscillates left and right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.05) + 50;
-      let y = 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white ball on a string oscillates left and right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 2.86) + 50;
-      let y = 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the upper line.
-      rotate(PI / 6);
-      line(0, 0, 80, 0);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Draw the lower line.
-      rotate(30);
-      line(0, 0, 80, 0);
-
-      describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 557
-    params:
-      - name: mode
-        description: |
-          <p>either RADIANS or DEGREES.</p>
-        type: Constant
-  - line: 743
-    params: []
-    return:
-      description: mode either RADIANS or DEGREES
-      type: Constant
-chainable: false
----
-
-
-# angleMode
diff --git a/src/content/reference/en/p5 copy/append.mdx b/src/content/reference/en/p5 copy/append.mdx
deleted file mode 100644
index 4e0bbeb5eb..0000000000
--- a/src/content/reference/en/p5 copy/append.mdx	
+++ /dev/null
@@ -1,48 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L10
-title: append
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Adds a value to the end of an array. Extends the length of
-  the array by one. Maps to Array.push().</p>
-line: 10
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">array.push(value)</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    function setup() {
-      let myArray = ['Mango', 'Apple', 'Papaya'];
-      print(myArray); // ['Mango', 'Apple', 'Papaya']
-
-      append(myArray, 'Peach');
-      print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
-    }
-    </code></div>
-class: p5
-params:
-  - name: array
-    description: |
-      <p>Array to append</p>
-    type: Array
-  - name: value
-    description: |
-      <p>to be added to the Array</p>
-    type: Any
-return:
-  description: the array that was appended to
-  type: Array
-chainable: false
----
-
-
-# append
diff --git a/src/content/reference/en/p5 copy/applyMatrix.mdx b/src/content/reference/en/p5 copy/applyMatrix.mdx
deleted file mode 100644
index b105ed75da..0000000000
--- a/src/content/reference/en/p5 copy/applyMatrix.mdx	
+++ /dev/null
@@ -1,347 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L11
-title: applyMatrix
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Applies a transformation matrix to the coordinate system.</p>
-
-  <p>Transformations such as
-
-  <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and
-
-  <a href="/reference/p5/scale/">scale()</a>
-
-  use matrix-vector multiplication behind the scenes. A table of numbers,
-
-  called a matrix, encodes each transformation. The values in the matrix
-
-  then multiply each point on the canvas, which is represented by a vector.</p>
-
-  <p><code>applyMatrix()</code> allows for many transformations to be applied at
-  once. See
-
-  <a href="https://en.wikipedia.org/wiki/Transformation_matrix/"
-  target="_blank">Wikipedia</a>
-
-  and <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web/"
-  target="_blank">MDN</a>
-
-  for more details about transformations.</p>
-
-  <p>There are two ways to call <code>applyMatrix()</code> in two and three
-  dimensions.</p>
-
-  <p>In 2D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
-  <code>d</code>, <code>e</code>, and <code>f</code>, correspond to
-
-  elements in the following transformation matrix:</p>
-
-  <blockquote>
-
-  <p><img style="max-width: 150px" src="/assets/transformation-matrix.png"
-  alt="The transformation matrix used when applyMatrix is called in 2D
-  mode."/></p>
-
-  </blockquote>
-
-  <p>The numbers can be passed individually, as in
-
-  <code>applyMatrix(2, 0, 0, 0, 2, 0)</code>. They can also be passed in an
-  array, as in
-
-  <code>applyMatrix([2, 0, 0, 0, 2, 0])</code>.</p>
-
-  <p>In 3D mode, the parameters <code>a</code>, <code>b</code>, <code>c</code>,
-  <code>d</code>, <code>e</code>, <code>f</code>, <code>g</code>,
-  <code>h</code>, <code>i</code>,
-
-  <code>j</code>, <code>k</code>, <code>l</code>, <code>m</code>,
-  <code>n</code>, <code>o</code>, and <code>p</code> correspond to elements in
-  the
-
-  following transformation matrix:</p>
-
-  <p><img style="max-width: 300px" src="/assets/transformation-matrix-4-4.png"
-  alt="The transformation matrix used when applyMatrix is called in 3D
-  mode."/></p>
-
-  <p>The numbers can be passed individually, as in
-
-  <code>applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)</code>. They
-  can
-
-  also be passed in an array, as in
-
-  <code>applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0,
-  1])</code>.</p>
-
-  <p>By default, transformations accumulate. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>applyMatrix()</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't
-
-  cause shapes to transform continuously.</p>
-line: 11
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      applyMatrix(1, 0, 0, 1, 50, 50);
-
-      // Draw the circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      let m = [1, 0, 0, 1, 50, 50];
-      applyMatrix(m);
-
-      // Draw the circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn.
-      let angle = QUARTER_PI;
-      let ca = cos(angle);
-      let sa = sin(angle);
-      applyMatrix(ca, sa, -sa, ca, 0, 0);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Scale the coordinate system by a factor of 0.5.
-      applyMatrix(0.5, 0, 0, 0.5, 0, 0);
-
-      // Draw a square at (30, 20).
-      // It appears at (15, 10) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the shear factor.
-      let angle = QUARTER_PI;
-      let shearFactor = 1 / tan(HALF_PI - angle);
-
-      // Shear the coordinate system along the x-axis.
-      applyMatrix(1, 0, shearFactor, 1, 0, 0);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      let ca = cos(angle);
-      let sa = sin(angle);
-      applyMatrix(ca, 0, sa, 0, 0, 1, 0, 0, -sa, 0, ca, 0, 0, 0, 0, 1);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 11
-    params:
-      - name: arr
-        description: >
-          <p>an array containing the elements of the transformation matrix. Its
-          length should be either 6 (2D) or 16 (3D).</p>
-        type: Array
-    chainable: 1
-  - line: 206
-    params:
-      - name: a
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: b
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: c
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: d
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: e
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: f
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-    chainable: 1
-  - line: 216
-    params:
-      - name: a
-        description: ''
-        type: Number
-      - name: b
-        description: ''
-        type: Number
-      - name: c
-        description: ''
-        type: Number
-      - name: d
-        description: ''
-        type: Number
-      - name: e
-        description: ''
-        type: Number
-      - name: f
-        description: ''
-        type: Number
-      - name: g
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: i
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: j
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: k
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: l
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: m
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: 'n'
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: o
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-      - name: p
-        description: |
-          <p>an element of the transformation matrix.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# applyMatrix
diff --git a/src/content/reference/en/p5 copy/arc.mdx b/src/content/reference/en/p5 copy/arc.mdx
deleted file mode 100644
index ee50708815..0000000000
--- a/src/content/reference/en/p5 copy/arc.mdx	
+++ /dev/null
@@ -1,274 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L102
-title: arc
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws an arc.</p>
-
-  <p>An arc is a section of an ellipse defined by the <code>x</code>,
-  <code>y</code>, <code>w</code>, and
-
-  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
-  of the arc's center. <code>w</code> and
-
-  <code>h</code> set the arc's width and height. See
-
-  <a href="/reference/p5/ellipse/">ellipse()</a> and
-
-  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for more details.</p>
-
-  <p>The fifth and sixth parameters, <code>start</code> and <code>stop</code>,
-  set the angles
-
-  between which to draw the arc. Arcs are always drawn clockwise from
-
-  <code>start</code> to <code>stop</code>. The fifth and sixth parameters, start
-  and stop, set the
-
-  angles between which to draw the arc. By default, angles are given in radians,
-  but if angleMode
-
-  (DEGREES) is set, the function interprets the values in degrees.</p>
-
-  <p>The seventh parameter, <code>mode</code>, is optional. It determines the
-  arc's fill
-
-  style. The fill modes are a semi-circle (<code>OPEN</code>), a closed
-  semi-circle
-
-  (<code>CHORD</code>), or a closed pie segment (<code>PIE</code>).</p>
-
-  <p>The eighth parameter, <code>detail</code>, is also optional. It determines
-  how many
-
-  vertices are used to draw the arc in WebGL mode. The default value is 25.</p>
-line: 102
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      arc(50, 50, 80, 80, 0, PI + HALF_PI);
-
-      describe('A white circle on a gray canvas. The top-right quarter of the circle is missing.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      arc(50, 50, 80, 40, 0, PI + HALF_PI);
-
-      describe('A white ellipse on a gray canvas. The top-right quarter of the ellipse is missing.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Bottom-right.
-      arc(50, 55, 50, 50, 0, HALF_PI);
-
-      noFill();
-
-      // Bottom-left.
-      arc(50, 55, 60, 60, HALF_PI, PI);
-
-      // Top-left.
-      arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
-
-      // Top-right.
-      arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
-
-      describe(
-        'A shattered outline of an circle with a quarter of a white circle at the bottom-right.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Default fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
-
-      describe('A white circle with the top-right third missing. The bottom is outlined in black.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // OPEN fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
-
-      describe(
-        'A white circle missing a section from the top-right. The bottom is outlined in black.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // CHORD fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
-
-      describe('A white circle with a black outline missing a section from the top-right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // PIE fill mode.
-      arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
-
-      describe('A white circle with a black outline. The top-right third is missing.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // PIE fill mode.
-      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE);
-
-      describe('A white circle with a black outline. The top-right third is missing.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // PIE fill mode with 5 vertices.
-      arc(0, 0, 80, 80, 0, PI + QUARTER_PI, PIE, 5);
-
-      describe('A white circle with a black outline. The top-right third is missing.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A yellow circle on a black background. The circle opens and closes its mouth.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the arc.
-      noStroke();
-      fill(255, 255, 0);
-
-      // Update start and stop angles.
-      let biteSize = PI / 16;
-      let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
-      let endAngle = TWO_PI - startAngle;
-
-      // Draw the arc.
-      arc(50, 50, 80, 80, startAngle, endAngle, PIE);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the arc's ellipse.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the arc's ellipse.</p>
-    type: Number
-  - name: w
-    description: |
-      <p>width of the arc's ellipse by default.</p>
-    type: Number
-  - name: h
-    description: |
-      <p>height of the arc's ellipse by default.</p>
-    type: Number
-  - name: start
-    description: |
-      <p>angle to start the arc, specified in radians.</p>
-    type: Number
-  - name: stop
-    description: |
-      <p>angle to stop the arc, specified in radians.</p>
-    type: Number
-  - name: mode
-    description: |
-      <p>optional parameter to determine the way of drawing
-                              the arc. either CHORD, PIE, or OPEN.</p>
-    type: Constant
-    optional: true
-  - name: detail
-    description: |
-      <p>optional parameter for WebGL mode only. This is to
-                              specify the number of vertices that makes up the
-                              perimeter of the arc. Default value is 25. Won't
-                              draw a stroke for a detail of more than 50.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# arc
diff --git a/src/content/reference/en/p5 copy/arrayCopy.mdx b/src/content/reference/en/p5 copy/arrayCopy.mdx
deleted file mode 100644
index 2d149d1ed3..0000000000
--- a/src/content/reference/en/p5 copy/arrayCopy.mdx	
+++ /dev/null
@@ -1,95 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L35
-title: arrayCopy
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: >
-  <p>Copies an array (or part of an array) to another array. The src array is
-
-  copied to the dst array, beginning at the position specified by
-
-  srcPosition and into the position specified by dstPosition. The number of
-
-  elements to copy is determined by length. Note that copying values
-
-  overwrites existing values in the destination array. To append values
-
-  instead of overwriting them, use <a
-  href="/reference/p5/concat/">concat()</a>.</p>
-
-  <p>The simplified version with only two arguments, arrayCopy(src, dst),
-
-  copies an entire array to another of the same size. It is equivalent to
-
-  arrayCopy(src, 0, dst, 0, src.length).</p>
-
-  <p>Using this function is far more efficient for copying array data than
-
-  iterating through a for() loop and copying each element individually.</p>
-line: 35
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">arr1.copyWithin(arr2)</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    let src = ['A', 'B', 'C'];
-    let dst = [1, 2, 3];
-    let srcPosition = 1;
-    let dstPosition = 0;
-    let length = 2;
-
-    print(src); // ['A', 'B', 'C']
-    print(dst); // [ 1 ,  2 ,  3 ]
-
-    arrayCopy(src, srcPosition, dst, dstPosition, length);
-    print(dst); // ['B', 'C', 3]
-    </code></div>
-class: p5
-overloads:
-  - line: 35
-    params:
-      - name: src
-        description: |
-          <p>the source Array</p>
-        type: Array
-      - name: srcPosition
-        description: |
-          <p>starting position in the source Array</p>
-        type: Integer
-      - name: dst
-        description: |
-          <p>the destination Array</p>
-        type: Array
-      - name: dstPosition
-        description: |
-          <p>starting position in the destination Array</p>
-        type: Integer
-      - name: length
-        description: |
-          <p>number of Array elements to be copied</p>
-        type: Integer
-  - line: 73
-    params:
-      - name: src
-        description: ''
-        type: Array
-      - name: dst
-        description: ''
-        type: Array
-      - name: length
-        description: ''
-        type: Integer
-        optional: true
-chainable: false
----
-
-
-# arrayCopy
diff --git a/src/content/reference/en/p5 copy/asin.mdx b/src/content/reference/en/p5 copy/asin.mdx
deleted file mode 100644
index 78518c0050..0000000000
--- a/src/content/reference/en/p5 copy/asin.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L80
-title: asin
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the arc sine of a number.</p>
-
-  <p><code>asin()</code> is the inverse of <a
-  href="/reference/p5/sin/">sin()</a>. It expects input
-
-  values in the range of -1 to 1. By default, <code>asin()</code> returns values
-  in the
-
-  range -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If
-
-  the <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>
-  then values are
-
-  returned in the range -90 to 90.</p>
-line: 80
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate sin() and asin() values.
-      let a = PI / 3;
-      let s = sin(a);
-      let as = asin(s);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(s, 3)}`, 35, 50);
-      text(`${round(as, 3)}`, 35, 75);
-
-      describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate sin() and asin() values.
-      let a = PI + PI / 3;
-      let s = sin(a);
-      let as = asin(s);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(s, 3)}`, 35, 50);
-      text(`${round(as, 3)}`, 35, 75);
-
-      describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>value whose arc sine is to be returned.</p>
-    type: Number
-return:
-  description: arc sine of the given value.
-  type: Number
-chainable: false
----
-
-
-# asin
diff --git a/src/content/reference/en/p5 copy/atan.mdx b/src/content/reference/en/p5 copy/atan.mdx
deleted file mode 100644
index 86b3874bb0..0000000000
--- a/src/content/reference/en/p5 copy/atan.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L142
-title: atan
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the arc tangent of a number.</p>
-
-  <p><code>atan()</code> is the inverse of <a
-  href="/reference/p5/tan/">tan()</a>. It expects input
-
-  values in the range of -Infinity to Infinity. By default, <code>atan()</code>
-  returns
-
-  values in the range -π ÷ 2 (about -1.57) to π ÷ 2
-
-  (about 1.57). If the <a href="/reference/p5/angleMode/">angleMode()</a> is
-  <code>DEGREES</code>
-
-  then values are returned in the range -90 to 90.</p>
-line: 142
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate tan() and atan() values.
-      let a = PI / 3;
-      let t = tan(a);
-      let at = atan(t);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(t, 3)}`, 35, 50);
-      text(`${round(at, 3)}`, 35, 75);
-
-      describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate tan() and atan() values.
-      let a = PI + PI / 3;
-      let t = tan(a);
-      let at = atan(t);
-
-      // Display the values.
-      text(`${round(a, 3)}`, 35, 25);
-      text(`${round(t, 3)}`, 35, 50);
-      text(`${round(at, 3)}`, 35, 75);
-
-      describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>value whose arc tangent is to be returned.</p>
-    type: Number
-return:
-  description: arc tangent of the given value.
-  type: Number
-chainable: false
----
-
-
-# atan
diff --git a/src/content/reference/en/p5 copy/atan2.mdx b/src/content/reference/en/p5 copy/atan2.mdx
deleted file mode 100644
index 200b49516b..0000000000
--- a/src/content/reference/en/p5 copy/atan2.mdx	
+++ /dev/null
@@ -1,106 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L204
-title: atan2
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the angle formed by a point, the origin, and the positive
-
-  x-axis.</p>
-
-  <p><code>atan2()</code> is most often used for orienting geometry to the
-  mouse's
-
-  position, as in <code>atan2(mouseY, mouseX)</code>. The first parameter is the
-  point's
-
-  y-coordinate and the second parameter is its x-coordinate.</p>
-
-  <p>By default, <code>atan2()</code> returns values in the range
-
-  -π (about -3.14) to π (3.14). If the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a> is <code>DEGREES</code>,
-  then values are
-
-  returned in the range -180 to 180.</p>
-line: 204
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle at the top-left of the canvas rotates with mouse movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the angle between the mouse
-      // and the origin.
-      let a = atan2(mouseY, mouseX);
-
-      // Rotate.
-      rotate(a);
-
-      // Draw the shape.
-      rect(0, 0, 60, 10);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle at the center of the canvas rotates with mouse movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Get the mouse's coordinates relative to the origin.
-      let x = mouseX - 50;
-      let y = mouseY - 50;
-
-      // Calculate the angle between the mouse and the origin.
-      let a = atan2(y, x);
-
-      // Rotate.
-      rotate(a);
-
-      // Draw the shape.
-      rect(-30, -5, 60, 10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the point.</p>
-    type: Number
-  - name: x
-    description: |
-      <p>x-coordinate of the point.</p>
-    type: Number
-return:
-  description: arc tangent of the given point.
-  type: Number
-chainable: false
----
-
-
-# atan2
diff --git a/src/content/reference/en/p5 copy/background.mdx b/src/content/reference/en/p5 copy/background.mdx
deleted file mode 100644
index 6250c60339..0000000000
--- a/src/content/reference/en/p5 copy/background.mdx	
+++ /dev/null
@@ -1,336 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L414
-title: background
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Sets the color used for the background of the canvas.</p>
-
-  <p>By default, the background is transparent. <code>background()</code> is
-  typically used
-
-  within <a href="/reference/p5/draw/">draw()</a> to clear the display window at
-  the
-
-  beginning of each frame. It can also be used inside
-
-  <a href="/reference/p5/setup/">setup()</a> to set the background on the first
-  frame
-
-  of animation.</p>
-
-  <p>The version of <code>background()</code> with one parameter interprets the
-  value one
-
-  of four ways. If the parameter is a <code>Number</code>, it's interpreted as a
-  grayscale
-
-  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
-  color string.
-
-  RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the
-
-  parameter is a <a href="/reference/p5/p5.Color">p5.Color</a> object, it will
-  be used as
-
-  the background color. If the parameter is a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object, it will be used as the
-  background
-
-  image.</p>
-
-  <p>The version of <code>background()</code> with two parameters interprets the
-  first one
-
-  as a grayscale value. The second parameter sets the alpha (transparency)
-
-  value.</p>
-
-  <p>The version of <code>background()</code> with three parameters interprets
-  them as RGB,
-
-  HSB, or HSL colors, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. By default, colors are
-  specified
-
-  in RGB values. Calling <code>background(255, 204, 0)</code> sets the
-  background a bright
-
-  yellow color.</p>
-
-  <p>The version of <code>background()</code> with four parameters interprets
-  them as RGBA,
-
-  HSBA, or HSLA colors, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter sets
-  the alpha
-
-  (transparency) value.</p>
-line: 414
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A grayscale value.
-      background(51);
-
-      describe('A canvas with a dark charcoal gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A grayscale value and an alpha value.
-      background(51, 0.4);
-      describe('A canvas with a transparent gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // R, G & B values.
-      background(255, 204, 0);
-
-      describe('A canvas with a yellow background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // R, G, B, and Alpha values.
-      background(255, 0, 0, 128);
-
-      describe('A canvas with a semi-transparent red background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // H, S & B values.
-      background(255, 204, 100);
-
-      describe('A canvas with a royal blue background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A CSS named color.
-      background('red');
-
-      describe('A canvas with a red background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Three-digit hex RGB notation.
-      background('#fae');
-
-      describe('A canvas with a pink background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Six-digit hex RGB notation.
-      background('#222222');
-
-      describe('A canvas with a black background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Integer RGB notation.
-      background('rgb(0, 255, 0)');
-
-      describe('A canvas with a bright green background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Integer RGBA notation.
-      background('rgba(0, 255, 0, 0.25)');
-
-      describe('A canvas with a transparent green background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Percentage RGB notation.
-      background('rgb(100%, 0%, 10%)');
-
-      describe('A canvas with a red background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Percentage RGBA notation.
-      background('rgba(100%, 0%, 100%, 0.5)');
-
-      describe('A canvas with a transparent purple background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // A p5.Color object.
-      let c = color(0, 0, 255);
-      background(c);
-
-      describe('A canvas with a blue background.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 414
-    params:
-      - name: color
-        description: >
-          <p>any value created by the <a href="#/p5/color">color()</a>
-          function</p>
-        type: p5.Color
-    chainable: 1
-  - line: 626
-    params:
-      - name: colorstring
-        description: |
-          <p>color string, possible formats include: integer
-                                  rgb() or rgba(), percentage rgb() or rgba(),
-                                  3-digit hex, 6-digit hex.</p>
-        type: String
-      - name: a
-        description: |
-          <p>opacity of the background relative to current
-                                      color range (default is 0-255).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 636
-    params:
-      - name: gray
-        description: |
-          <p>specifies a value between white and black.</p>
-        type: Number
-      - name: a
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 643
-    params:
-      - name: v1
-        description: >
-          <p>red value if color mode is RGB, or hue value if color mode is
-          HSB.</p>
-        type: Number
-      - name: v2
-        description: >
-          <p>green value if color mode is RGB, or saturation value if color mode
-          is HSB.</p>
-        type: Number
-      - name: v3
-        description: >
-          <p>blue value if color mode is RGB, or brightness value if color mode
-          is HSB.</p>
-        type: Number
-      - name: a
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 652
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 659
-    params:
-      - name: image
-        description: |
-          <p>image created with <a href="#/p5/loadImage">loadImage()</a>
-                                      or <a href="#/p5/createImage">createImage()</a>,
-                                      to set as background.
-                                      (must be same size as the sketch window).</p>
-        type: p5.Image
-      - name: a
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# background
diff --git a/src/content/reference/en/p5 copy/baseColorShader.mdx b/src/content/reference/en/p5 copy/baseColorShader.mdx
deleted file mode 100644
index a608e4d5ce..0000000000
--- a/src/content/reference/en/p5 copy/baseColorShader.mdx	
+++ /dev/null
@@ -1,178 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1292
-title: baseColorShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the shader used when no lights or materials are applied.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseColorShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <thead>
-
-  <tr>
-
-  <th>Hook</th>
-
-  <th>Description</th>
-
-  </tr>
-
-  </thead>
-
-  <tbody><tr>
-
-  <td><code>void beforeVertex</code></td>
-
-  <td>Called at the start of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalPosition</code></td>
-
-  <td>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldPosition</code></td>
-
-  <td>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalNormal</code></td>
-
-  <td>Update the normal before transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldNormal</code></td>
-
-  <td>Update the normal after transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec2 getUV</code></td>
-
-  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
-  return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getVertexColor</code></td>
-
-  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterVertex</code></td>
-
-  <td>Called at the end of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void beforeFragment</code></td>
-
-  <td>Called at the start of the fragment shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getFinalColor</code></td>
-
-  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterFragment</code></td>
-
-  <td>Called at the end of the fragment shader.</td>
-
-  </tr>
-
-  </tbody></table>
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseColorShader().inspectHooks()</code> to see all the possible
-  hooks and
-
-  their default implementations.</p>
-line: 1292
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseColorShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      noStroke();
-      fill('red');
-      circle(0, 0, 50);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The color shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseColorShader
diff --git a/src/content/reference/en/p5 copy/baseMaterialShader.mdx b/src/content/reference/en/p5 copy/baseMaterialShader.mdx
deleted file mode 100644
index d41248d1aa..0000000000
--- a/src/content/reference/en/p5 copy/baseMaterialShader.mdx	
+++ /dev/null
@@ -1,418 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L886
-title: baseMaterialShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the default shader used with lights, materials,
-
-  and textures.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseMaterialShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <tr><th>Hook</th><th>Description</th></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getLocalPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getWorldPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getLocalNormal</code></p>
-
-  </td><td>
-
-
-  <p>Update the normal before transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getWorldNormal</code></p>
-
-  </td><td>
-
-
-  <p>Update the normal after transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec2 getUV</code></p>
-
-  </td><td>
-
-
-  <p>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
-  return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getVertexColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the fragment shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>Inputs getPixelInputs</code></p>
-
-  </td><td>
-
-
-  <p>Update the per-pixel inputs of the material. It takes in an
-  <code>Inputs</code> struct, which includes:</p>
-
-  <ul>
-
-  <li><code>vec3 normal</code>, the direction pointing out of the surface</li>
-
-  <li><code>vec2 texCoord</code>, a vector where <code>x</code> and
-  <code>y</code> are between 0 and 1 describing the spot on a texture the pixel
-  is mapped to, as a fraction of the texture size</li>
-
-  <li><code>vec3 ambientLight</code>, the ambient light color on the vertex</li>
-
-  <li><code>vec4 color</code>, the base material color of the pixel</li>
-
-  <li><code>vec3 ambientMaterial</code>, the color of the pixel when affected by
-  ambient light</li>
-
-  <li><code>vec3 specularMaterial</code>, the color of the pixel when reflecting
-  specular highlights</li>
-
-  <li><code>vec3 emissiveMaterial</code>, the light color emitted by the
-  pixel</li>
-
-  <li><code>float shininess</code>, a number representing how sharp specular
-  reflections should be, from 1 to infinity</li>
-
-  <li><code>float metalness</code>, a number representing how mirrorlike the
-  material should be, between 0 and 1
-
-  The struct can be modified and returned.</li></ul></td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 combineColors</code></p>
-
-  </td><td>
-
-
-  <p>Take in a <code>ColorComponents</code> struct containing all the different
-  components of light, and combining them into
-
-  a single final color. The struct contains:</p>
-
-  <ul>
-
-  <li><code>vec3 baseColor</code>, the base color of the pixel</li>
-
-  <li><code>float opacity</code>, the opacity between 0 and 1 that it should be
-  drawn at</li>
-
-  <li><code>vec3 ambientColor</code>, the color of the pixel when affected by
-  ambient light</li>
-
-  <li><code>vec3 specularColor</code>, the color of the pixel when affected by
-  specular reflections</li>
-
-  <li><code>vec3 diffuse</code>, the amount of diffused light hitting the
-  pixel</li>
-
-  <li><code>vec3 ambient</code>, the amount of ambient light hitting the
-  pixel</li>
-
-  <li><code>vec3 specular</code>, the amount of specular reflection hitting the
-  pixel</li>
-
-  <li><code>vec3 emissive</code>, the amount of light emitted by the pixel</li>
-
-  </ul>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getFinalColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the fragment shader.</p>
-
-  </td></tr>
-
-  </table>
-
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseMaterialShader().inspectHooks()</code> to see all the
-  possible hooks and
-
-  their default implementations.</p>
-line: 886
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20.0 * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      lights();
-      noStroke();
-      fill('red');
-      sphere(50);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        declarations: 'vec3 myNormal;',
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          myNormal = inputs.normal;
-          return inputs;
-        }`,
-        'vec4 getFinalColor': `(vec4 color) {
-          return mix(
-            vec4(1.0, 1.0, 1.0, 1.0),
-            color,
-            abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))
-          );
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      rotateY(millis() * 0.001);
-      shader(myShader);
-      lights();
-      noStroke();
-      fill('red');
-      torus(30);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-    let environment;
-
-    function preload() {
-      environment = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          float factor =
-            sin(
-              inputs.texCoord.x * ${TWO_PI} +
-              inputs.texCoord.y * ${TWO_PI}
-            ) * 0.4 + 0.5;
-          inputs.shininess = mix(1., 100., factor);
-          inputs.metalness = factor;
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      panorama(environment);
-      ambientLight(100);
-      imageLight(environment);
-      rotateY(millis() * 0.001);
-      shader(myShader);
-      noStroke();
-      fill(255);
-      specularMaterial(150);
-      sphere(50);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseMaterialShader().modify({
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          vec3 newNormal = inputs.normal;
-          // Simple bump mapping: adjust the normal based on position
-          newNormal.x += 0.2 * sin(
-              sin(
-                inputs.texCoord.y * ${TWO_PI} * 10.0 +
-                inputs.texCoord.x * ${TWO_PI} * 25.0
-              )
-            );
-          newNormal.y += 0.2 * sin(
-            sin(
-                inputs.texCoord.x * ${TWO_PI} * 10.0 +
-                inputs.texCoord.y * ${TWO_PI} * 25.0
-              )
-          );
-          inputs.normal = normalize(newNormal);
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      ambientLight(150);
-      pointLight(
-        255, 255, 255,
-        100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)
-      );
-      noStroke();
-      fill('red');
-      shininess(200);
-      specularMaterial(255);
-      sphere(50);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The material shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseMaterialShader
diff --git a/src/content/reference/en/p5 copy/baseNormalShader.mdx b/src/content/reference/en/p5 copy/baseNormalShader.mdx
deleted file mode 100644
index 4eac6e9109..0000000000
--- a/src/content/reference/en/p5 copy/baseNormalShader.mdx	
+++ /dev/null
@@ -1,211 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1197
-title: baseNormalShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the shader used by <a
-  href="/reference/p5/normalMaterial/"><code>normalMaterial()</code></a>.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseNormalShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <thead>
-
-  <tr>
-
-  <th>Hook</th>
-
-  <th>Description</th>
-
-  </tr>
-
-  </thead>
-
-  <tbody><tr>
-
-  <td><code>void beforeVertex</code></td>
-
-  <td>Called at the start of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalPosition</code></td>
-
-  <td>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldPosition</code></td>
-
-  <td>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getLocalNormal</code></td>
-
-  <td>Update the normal before transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec3 getWorldNormal</code></td>
-
-  <td>Update the normal after transforms are applied. It takes in <code>vec3
-  normal</code> and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec2 getUV</code></td>
-
-  <td>Update the texture coordinates. It takes in <code>vec2 uv</code> and must
-  return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getVertexColor</code></td>
-
-  <td>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterVertex</code></td>
-
-  <td>Called at the end of the vertex shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void beforeFragment</code></td>
-
-  <td>Called at the start of the fragment shader.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>vec4 getFinalColor</code></td>
-
-  <td>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</td>
-
-  </tr>
-
-  <tr>
-
-  <td><code>void afterFragment</code></td>
-
-  <td>Called at the end of the fragment shader.</td>
-
-  </tr>
-
-  </tbody></table>
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseNormalShader().inspectHooks()</code> to see all the possible
-  hooks and
-
-  their default implementations.</p>
-line: 1197
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseNormalShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      noStroke();
-      sphere(50);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseNormalShader().modify({
-        'vec3 getWorldNormal': '(vec3 normal) { return abs(normal); }',
-        'vec4 getFinalColor': `(vec4 color) {
-          // Map the r, g, and b values of the old normal to new colors
-          // instead of just red, green, and blue:
-          vec3 newColor =
-            color.r * vec3(89.0, 240.0, 232.0) / 255.0 +
-            color.g * vec3(240.0, 237.0, 89.0) / 255.0 +
-            color.b * vec3(205.0, 55.0, 222.0) / 255.0;
-          newColor = newColor / (color.r + color.g + color.b);
-          return vec4(newColor, 1.0) * color.a;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      noStroke();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.015);
-      box(100);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The `normalMaterial` shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseNormalShader
diff --git a/src/content/reference/en/p5 copy/baseStrokeShader.mdx b/src/content/reference/en/p5 copy/baseStrokeShader.mdx
deleted file mode 100644
index f2bfb42be5..0000000000
--- a/src/content/reference/en/p5 copy/baseStrokeShader.mdx	
+++ /dev/null
@@ -1,356 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1355
-title: baseStrokeShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Get the shader used when drawing the strokes of shapes.</p>
-
-  <p>You can call <a
-  href="/reference/p5.Shader/modify/"><code>baseStrokeShader().modify()</code></a>
-
-  and change any of the following hooks:</p>
-
-  <table>
-
-  <tr><th>Hook</th><th>Description</th></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getLocalPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices before transforms are applied. It takes in
-  <code>vec3 position</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec3 getWorldPosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of vertices after transforms are applied. It takes in
-  <code>vec3 position</code> and pust return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>float getStrokeWeight</code></p>
-
-  </td><td>
-
-
-  <p>Update the stroke weight. It takes in <code>float weight</code> and pust
-  return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec2 getLineCenter</code></p>
-
-  </td><td>
-
-
-  <p>Update the center of the line. It takes in <code>vec2 center</code> and
-  must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec2 getLinePosition</code></p>
-
-  </td><td>
-
-
-  <p>Update the position of each vertex on the edge of the line. It takes in
-  <code>vec2 position</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getVertexColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the color of each vertex. It takes in a <code>vec4 color</code> and
-  must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterVertex</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the vertex shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void beforeFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the start of the fragment shader.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>Inputs getPixelInputs</code></p>
-
-  </td><td>
-
-
-  <p>Update the inputs to the shader. It takes in a struct <code>Inputs
-  inputs</code>, which includes:</p>
-
-  <ul>
-
-  <li><code>vec4 color</code>, the color of the stroke</li>
-
-  <li><code>vec2 tangent</code>, the direction of the stroke in screen
-  space</li>
-
-  <li><code>vec2 center</code>, the coordinate of the center of the stroke in
-  screen space p5.js pixels</li>
-
-  <li><code>vec2 position</code>, the coordinate of the current pixel in screen
-  space p5.js pixels</li>
-
-  <li><code>float strokeWeight</code>, the thickness of the stroke in p5.js
-  pixels</li>
-
-  </ul>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>bool shouldDiscard</code></p>
-
-  </td><td>
-
-
-  <p>Caps and joins are made by discarded pixels in the fragment shader to carve
-  away unwanted areas. Use this to change this logic. It takes in a <code>bool
-  willDiscard</code> and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>vec4 getFinalColor</code></p>
-
-  </td><td>
-
-
-  <p>Update the final color after mixing. It takes in a <code>vec4 color</code>
-  and must return a modified version.</p>
-
-  </td></tr>
-
-  <tr><td>
-
-
-  <p><code>void afterFragment</code></p>
-
-  </td><td>
-
-
-  <p>Called at the end of the fragment shader.</p>
-
-  </td></tr>
-
-  </table>
-
-
-  <p>Most of the time, you will need to write your hooks in GLSL ES version 300.
-  If you
-
-  are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.</p>
-
-  <p>Call <code>baseStrokeShader().inspectHooks()</code> to see all the possible
-  hooks and
-
-  their default implementations.</p>
-line: 1355
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseStrokeShader().modify({
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          float opacity = 1.0 - smoothstep(
-            0.0,
-            15.0,
-            length(inputs.position - inputs.center)
-          );
-          inputs.color *= opacity;
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      strokeWeight(30);
-      line(
-        -width/3,
-        sin(millis()*0.001) * height/4,
-        width/3,
-        sin(millis()*0.001 + 1) * height/4
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseStrokeShader().modify({
-        uniforms: {
-          'float time': () => millis()
-        },
-        declarations: 'vec3 myPosition;',
-        'vec3 getWorldPosition': `(vec3 pos) {
-          myPosition = pos;
-          return pos;
-        }`,
-        'float getStrokeWeight': `(float w) {
-          // Add a somewhat random offset to the weight
-          // that varies based on position and time
-          float scale = 0.8 + 0.2*sin(10.0 * sin(
-            floor(time/250.) +
-            myPosition.x*0.01 +
-            myPosition.y*0.01
-          ));
-          return w * scale;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      myShader.setUniform('time', millis());
-      strokeWeight(10);
-      beginShape();
-      for (let i = 0; i <= 50; i++) {
-        let r = map(i, 0, 50, 0, width/3);
-        let x = r*cos(i*0.2);
-        let y = r*sin(i*0.2);
-        vertex(x, y);
-      }
-      endShape();
-    }
-    </code>
-    </div>
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    let myShader;
-
-    function setup() {
-      createCanvas(200, 200, WEBGL);
-      myShader = baseStrokeShader().modify({
-        'float random': `(vec2 p) {
-          vec3 p3  = fract(vec3(p.xyx) * .1031);
-          p3 += dot(p3, p3.yzx + 33.33);
-          return fract((p3.x + p3.y) * p3.z);
-        }`,
-        'Inputs getPixelInputs': `(Inputs inputs) {
-          // Replace alpha in the color with dithering by
-          // randomly setting pixel colors to 0 based on opacity
-          float a = inputs.color.a;
-          inputs.color.a = 1.0;
-          inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;
-          return inputs;
-        }`
-      });
-    }
-
-    function draw() {
-      background(255);
-      shader(myShader);
-      strokeWeight(10);
-      beginShape();
-      for (let i = 0; i <= 50; i++) {
-        stroke(
-          0,
-          255
-            * map(i, 0, 20, 0, 1, true)
-            * map(i, 30, 50, 1, 0, true)
-        );
-        vertex(
-          map(i, 0, 50, -1, 1) * width/3,
-          50 * sin(i/10 + frameCount/100)
-        );
-      }
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: The stroke shader
-  type: p5.Shader
-chainable: false
-beta: true
----
-
-
-# baseStrokeShader
diff --git a/src/content/reference/en/p5 copy/beginClip.mdx b/src/content/reference/en/p5 copy/beginClip.mdx
deleted file mode 100644
index ebad022a68..0000000000
--- a/src/content/reference/en/p5 copy/beginClip.mdx	
+++ /dev/null
@@ -1,208 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L13
-title: beginClip
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Starts defining a shape that will mask any shapes drawn afterward.</p>
-
-  <p>Any shapes drawn between <code>beginClip()</code> and
-
-  <a href="/reference/p5/endClip/">endClip()</a> will add to the mask shape. The
-  mask
-
-  will apply to anything drawn after <a
-  href="/reference/p5/endClip/">endClip()</a>.</p>
-
-  <p>The parameter, <code>options</code>, is optional. If an object with an
-  <code>invert</code>
-
-  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
-  used to
-
-  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
-  holes
-
-  in shapes that are masked. <code>invert</code> is <code>false</code> by
-  default.</p>
-
-  <p>Masks can be contained between the
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions.
-
-  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
-
-  <p>Masks can also be defined in a callback function that's passed to
-
-  <a href="/reference/p5/clip/">clip()</a>.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white triangle and circle on a gray background.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an inverted mask.
-      beginClip({ invert: true });
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      noStroke();
-
-      // Draw a masked shape.
-      push();
-      // Create a mask.
-      beginClip();
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw an inverted masked shape.
-      push();
-      // Create an inverted mask.
-      beginClip({ invert: true });
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored fuchsia.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-      endClip();
-
-      // Draw a backing shape.
-      noStroke();
-      fill('fuchsia');
-      plane(100);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-      endClip();
-
-      // Draw a backing shape.
-      noStroke();
-      beginShape(QUAD_STRIP);
-      fill(0, 255, 255);
-      vertex(-width / 2, -height / 2);
-      vertex(width / 2, -height / 2);
-      fill(100, 0, 100);
-      vertex(-width / 2, height / 2);
-      vertex(width / 2, height / 2);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: options
-    description: |
-      <p>an object containing clip settings.</p>
-    type: Object
-    optional: true
-chainable: false
----
-
-
-# beginClip
diff --git a/src/content/reference/en/p5 copy/beginContour.mdx b/src/content/reference/en/p5 copy/beginContour.mdx
deleted file mode 100644
index 5ecd6d1437..0000000000
--- a/src/content/reference/en/p5 copy/beginContour.mdx	
+++ /dev/null
@@ -1,134 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L20
-title: beginContour
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Begins creating a hole within a flat shape.</p>
-
-  <p>The <code>beginContour()</code> and <a
-  href="/reference/p5/endContour/">endContour()</a>
-
-  functions allow for creating negative space within custom shapes that are
-
-  flat. <code>beginContour()</code> begins adding vertices to a negative space
-  and
-
-  <a href="/reference/p5/endContour/">endContour()</a> stops adding them.
-
-  <code>beginContour()</code> and <a
-  href="/reference/p5/endContour/">endContour()</a> must be
-
-  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a>.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and <a
-  href="/reference/p5/scale/">scale()</a>
-
-  don't work between <code>beginContour()</code> and
-
-  <a href="/reference/p5/endContour/">endContour()</a>. It's also not possible
-  to use
-
-  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
-
-  <a href="/reference/p5/rect/">rect()</a>, between <code>beginContour()</code>
-  and
-
-  <a href="/reference/p5/endContour/">endContour()</a>.</p>
-
-  <p>Note: The vertices that define a negative space must "wind" in the opposite
-
-  direction from the outer shape. First, draw vertices for the outer shape
-
-  clockwise order. Then, draw vertices for the negative space in
-
-  counter-clockwise order.</p>
-line: 20
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(10, 10);
-      vertex(90, 10);
-      vertex(90, 90);
-      vertex(10, 90);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(30, 30);
-      vertex(30, 70);
-      vertex(70, 70);
-      vertex(70, 30);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(-40, -40);
-      vertex(40, -40);
-      vertex(40, 40);
-      vertex(-40, 40);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(-20, -20);
-      vertex(-20, 20);
-      vertex(20, 20);
-      vertex(20, -20);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# beginContour
diff --git a/src/content/reference/en/p5 copy/beginGeometry.mdx b/src/content/reference/en/p5 copy/beginGeometry.mdx
deleted file mode 100644
index 3fdf211bd3..0000000000
--- a/src/content/reference/en/p5 copy/beginGeometry.mdx	
+++ /dev/null
@@ -1,281 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L13
-title: beginGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Begins adding shapes to a new
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
-
-  <p>The <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>
-
-  functions help with creating complex 3D shapes from simpler ones such as
-
-  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
-  begins adding shapes
-
-  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
-
-  <p><code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a> can help
-
-  to make sketches more performant. For example, if a complex 3D shape
-
-  doesn’t change while a sketch runs, then it can be created with
-
-  <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>.
-
-  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
-  then
-
-  drawing it will run faster than repeatedly drawing the individual pieces.</p>
-
-  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
-  way to
-
-  build 3D shapes.</p>
-
-  <p>Note: <code>beginGeometry()</code> can only be used in WebGL mode.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add a cone.
-      cone();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      createArrow();
-
-      describe('A white arrow drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let blueArrow;
-    let redArrow;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the arrows.
-      redArrow = createArrow('red');
-      blueArrow = createArrow('blue');
-
-      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the red arrow.
-      model(redArrow);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the blue arrow.
-      model(blueArrow);
-    }
-
-    function createArrow(fillColor) {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      fill(fillColor);
-
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = createParticles();
-    }
-
-    function createParticles() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# beginGeometry
diff --git a/src/content/reference/en/p5 copy/beginShape.mdx b/src/content/reference/en/p5 copy/beginShape.mdx
deleted file mode 100644
index d8642333db..0000000000
--- a/src/content/reference/en/p5 copy/beginShape.mdx	
+++ /dev/null
@@ -1,449 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L129
-title: beginShape
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Begins adding vertices to a custom shape.</p>
-
-  <p>The <code>beginShape()</code> and <a
-  href="/reference/p5/endShape/">endShape()</a> functions
-
-  allow for creating custom shapes in 2D or 3D. <code>beginShape()</code> begins
-  adding
-
-  vertices to a custom shape and <a
-  href="/reference/p5/endShape/">endShape()</a> stops
-
-  adding them.</p>
-
-  <p>The parameter, <code>kind</code>, sets the kind of shape to make. By
-  default, any
-
-  irregular polygon can be drawn. The available modes for kind are:</p>
-
-  <ul>
-
-  <li><code>POINTS</code> to draw a series of points.</li>
-
-  <li><code>LINES</code> to draw a series of unconnected line segments.</li>
-
-  <li><code>TRIANGLES</code> to draw a series of separate triangles.</li>
-
-  <li><code>TRIANGLE_FAN</code> to draw a series of connected triangles sharing
-  the first vertex in a fan-like fashion.</li>
-
-  <li><code>TRIANGLE_STRIP</code> to draw a series of connected triangles in
-  strip fashion.</li>
-
-  <li><code>QUADS</code> to draw a series of separate quadrilaterals
-  (quads).</li>
-
-  <li><code>QUAD_STRIP</code> to draw quad strip using adjacent edges to form
-  the next quad.</li>
-
-  <li><code>TESS</code> to create a filling curve by explicit tessellation
-  (WebGL only).</li>
-
-  </ul>
-
-  <p>After calling <code>beginShape()</code>, shapes can be built by calling
-
-  <a href="/reference/p5/vertex/">vertex()</a>,
-
-  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
-
-  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
-
-  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
-
-  <a href="/reference/p5/endShape/">endShape()</a> will stop adding vertices to
-  the
-
-  shape. Each shape will be outlined with the current stroke color and filled
-
-  with the current fill color.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and
-
-  <a href="/reference/p5/scale/">scale()</a> don't work between
-  <code>beginShape()</code> and
-
-  <a href="/reference/p5/endShape/">endShape()</a>. It's also not possible to
-  use
-
-  other shapes, such as <a href="/reference/p5/ellipse/">ellipse()</a> or
-
-  <a href="/reference/p5/rect/">rect()</a>, between <code>beginShape()</code>
-  and
-
-  <a href="/reference/p5/endShape/">endShape()</a>.</p>
-line: 129
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Only draw the vertices (points).
-      beginShape(POINTS);
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Four black dots that form a square are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Only draw lines between alternating pairs of vertices.
-      beginShape(LINES);
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Two horizontal black lines on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Three black lines form a sideways U shape on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      // Connect the first and last vertices.
-      endShape(CLOSE);
-
-      describe('A black outline of a square drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of triangles.
-      beginShape(TRIANGLES);
-
-      // Left triangle.
-      vertex(30, 75);
-      vertex(40, 20);
-      vertex(50, 75);
-
-      // Right triangle.
-      vertex(60, 20);
-      vertex(70, 75);
-      vertex(80, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Two white triangles drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of triangles.
-      beginShape(TRIANGLE_STRIP);
-
-      // Add vertices.
-      vertex(30, 75);
-      vertex(40, 20);
-      vertex(50, 75);
-      vertex(60, 20);
-      vertex(70, 75);
-      vertex(80, 20);
-      vertex(90, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Five white triangles that are interleaved drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of triangles that share their first vertex.
-      beginShape(TRIANGLE_FAN);
-
-      // Add vertices.
-      vertex(57.5, 50);
-      vertex(57.5, 15);
-      vertex(92, 50);
-      vertex(57.5, 85);
-      vertex(22, 50);
-      vertex(57.5, 15);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Four white triangles form a square are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(QUADS);
-
-      // Left rectangle.
-      vertex(30, 20);
-      vertex(30, 75);
-      vertex(50, 75);
-      vertex(50, 20);
-
-      // Right rectangle.
-      vertex(65, 20);
-      vertex(65, 75);
-      vertex(85, 75);
-      vertex(85, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Two white rectangles drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(QUAD_STRIP);
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(30, 75);
-      vertex(50, 20);
-      vertex(50, 75);
-      vertex(65, 20);
-      vertex(65, 75);
-      vertex(85, 20);
-      vertex(85, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Three white rectangles that share edges are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(TESS);
-
-      // Add the vertices.
-      vertex(-30, -30, 0);
-      vertex(30, -30, 0);
-      vertex(30, -10, 0);
-      vertex(-10, -10, 0);
-      vertex(-10, 10, 0);
-      vertex(30, 10, 0);
-      vertex(30, 30, 0);
-      vertex(-30, 30, 0);
-
-      // Stop drawing the shape.
-      // Connect the first and last vertices.
-      endShape(CLOSE);
-
-      describe('A blocky C shape drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag with the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A blocky C shape drawn in red, blue, and green on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Start drawing the shape.
-      // Draw a series of quadrilaterals.
-      beginShape(TESS);
-
-      // Add the vertices.
-      fill('red');
-      stroke('red');
-      vertex(-30, -30, 0);
-      vertex(30, -30, 0);
-      vertex(30, -10, 0);
-      fill('green');
-      stroke('green');
-      vertex(-10, -10, 0);
-      vertex(-10, 10, 0);
-      vertex(30, 10, 0);
-      fill('blue');
-      stroke('blue');
-      vertex(30, 30, 0);
-      vertex(-30, 30, 0);
-
-      // Stop drawing the shape.
-      // Connect the first and last vertices.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: kind
-    description: |
-      <p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
-                                     TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.</p>
-    type: Constant
-    optional: true
-chainable: true
----
-
-
-# beginShape
diff --git a/src/content/reference/en/p5 copy/bezier.mdx b/src/content/reference/en/p5 copy/bezier.mdx
deleted file mode 100644
index 50c15330b7..0000000000
--- a/src/content/reference/en/p5 copy/bezier.mdx	
+++ /dev/null
@@ -1,273 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L13
-title: bezier
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Draws a Bézier curve.</p>
-
-  <p>Bézier curves can form shapes and curves that slope gently. They're defined
-
-  by two anchor points and two control points. Bézier curves provide more
-
-  control than the spline curves created with the
-
-  <a href="/reference/p5/curve/">curve()</a> function.</p>
-
-  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
-  first anchor point. The
-
-  first anchor point is where the curve starts.</p>
-
-  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
-  <code>x3</code>, and <code>y3</code>, set the two control
-
-  points. The control points "pull" the curve towards them.</p>
-
-  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
-  the last anchor
-
-  point. The last anchor point is where the curve ends.</p>
-
-  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>bezier()</code> has twelve arguments because each point has x-, y-,
-
-  and z-coordinates.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(85, 20);
-      point(15, 80);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(10, 10);
-      point(90, 90);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(85, 20, 10, 10, 90, 90, 15, 80);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(85, 20, 10, 10);
-      line(15, 80, 90, 90);
-
-      describe(
-        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the top-left corner
-    // and drag to change the curve's shape.
-
-    let x2 = 10;
-    let y2 = 10;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(85, 20);
-      point(15, 80);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x2, y2);
-      point(90, 90);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(85, 20, x2, y2, 90, 90, 15, 80);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(85, 20, x2, y2);
-      line(15, 80, 90, 90);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x2, y2) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x2 = mouseX;
-        y2 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background('skyblue');
-
-      // Draw the red balloon.
-      fill('red');
-      bezier(50, 60, 5, 15, 95, 15, 50, 60);
-
-      // Draw the balloon string.
-      line(50, 60, 50, 80);
-
-      describe('A red balloon in a blue sky.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');
-    }
-
-    function draw() {
-      background('skyblue');
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the red balloon.
-      fill('red');
-      bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);
-
-      // Draw the balloon string.
-      line(0, 0, 0, 0, 20, 0);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 13
-    params:
-      - name: x1
-        description: |
-          <p>x-coordinate of the first anchor point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>y-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>x-coordinate of the first control point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the second control point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>x-coordinate of the second anchor point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>y-coordinate of the second anchor point.</p>
-        type: Number
-    chainable: 1
-  - line: 191
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>z-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>z-coordinate of the second anchor point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# bezier
diff --git a/src/content/reference/en/p5 copy/bezierDetail.mdx b/src/content/reference/en/p5 copy/bezierDetail.mdx
deleted file mode 100644
index b4f895a3fc..0000000000
--- a/src/content/reference/en/p5 copy/bezierDetail.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L221
-title: bezierDetail
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Sets the number of segments used to draw Bézier curves in WebGL mode.</p>
-
-  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
-
-  more flat segments makes shapes appear smoother.</p>
-
-  <p>The parameter, <code>detail</code>, is the number of segments to use while
-  drawing a
-
-  Bézier curve. For example, calling <code>bezierDetail(5)</code> will use 5
-  segments to
-
-  draw curves with the <a href="/reference/p5/bezier/">bezier()</a> function. By
-
-  default,<code>detail</code> is 20.</p>
-
-  <p>Note: <code>bezierDetail()</code> has no effect in 2D mode.</p>
-line: 221
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Draw the original curve.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(85, 20);
-      point(15, 80);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(10, 10);
-      point(90, 90);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(85, 20, 10, 10, 90, 90, 15, 80);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(85, 20, 10, 10);
-      line(15, 80, 90, 90);
-
-      describe(
-        'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Draw the curve with less detail.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Set the curveDetail() to 5.
-      bezierDetail(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(35, -30, 0);
-      point(-35, 30, 0);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(-40, -40, 0);
-      point(40, 40, 0);
-
-      // Draw a black bezier curve.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-      bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(35, -30, -40, -40);
-      line(-35, 30, 40, 40);
-
-      describe(
-        'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: detail
-    description: |
-      <p>number of segments to use. Defaults to 20.</p>
-    type: Number
-chainable: true
----
-
-
-# bezierDetail
diff --git a/src/content/reference/en/p5 copy/bezierPoint.mdx b/src/content/reference/en/p5 copy/bezierPoint.mdx
deleted file mode 100644
index a42c171121..0000000000
--- a/src/content/reference/en/p5 copy/bezierPoint.mdx	
+++ /dev/null
@@ -1,162 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L324
-title: bezierPoint
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a Bézier curve using interpolation.</p>
-
-  <p><code>bezierPoint()</code> calculates coordinates along a Bézier curve
-  using the
-
-  anchor and control points. It expects points in the same order as the
-
-  <a href="/reference/p5/bezier/">bezier()</a> function.
-  <code>bezierPoint()</code> works one axis
-
-  at a time. Passing the anchor and control points' x-coordinates will
-
-  calculate the x-coordinate of a point on the curve. Passing the anchor and
-
-  control points' y-coordinates will calculate the y-coordinate of a point on
-
-  the curve.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  control points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 324
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 85;
-      let x2 = 10;
-      let x3 = 90;
-      let x4 = 15;
-      let y1 = 20;
-      let y2 = 10;
-      let y3 = 90;
-      let y4 = 80;
-
-      // Style the curve.
-      noFill();
-
-      // Draw the curve.
-      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw circles along the curve's path.
-      fill(255);
-
-      // Top-right.
-      let x = bezierPoint(x1, x2, x3, x4, 0);
-      let y = bezierPoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Center.
-      x = bezierPoint(x1, x2, x3, x4, 0.5);
-      y = bezierPoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Bottom-left.
-      x = bezierPoint(x1, x2, x3, x4, 1);
-      y = bezierPoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 85;
-      let x2 = 10;
-      let x3 = 90;
-      let x4 = 15;
-      let y1 = 20;
-      let y2 = 10;
-      let y3 = 90;
-      let y4 = 80;
-
-      // Draw the curve.
-      noFill();
-      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Calculate the circle's coordinates.
-      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
-      let x = bezierPoint(x1, x2, x3, x4, t);
-      let y = bezierPoint(y1, y2, y3, y4, t);
-
-      // Draw the circle.
-      fill(255);
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of the point on the curve.
-  type: Number
-chainable: false
----
-
-
-# bezierPoint
diff --git a/src/content/reference/en/p5 copy/bezierTangent.mdx b/src/content/reference/en/p5 copy/bezierTangent.mdx
deleted file mode 100644
index 8fb0edfaa8..0000000000
--- a/src/content/reference/en/p5 copy/bezierTangent.mdx	
+++ /dev/null
@@ -1,155 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L450
-title: bezierTangent
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a line that's tangent to a Bézier curve.</p>
-
-  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
-
-  the curve's slope at the point where it intersects.</p>
-
-  <p><code>bezierTangent()</code> calculates coordinates along a tangent line
-  using the
-
-  Bézier curve's anchor and control points. It expects points in the same
-
-  order as the <a href="/reference/p5/bezier/">bezier()</a> function.
-  <code>bezierTangent()</code>
-
-  works one axis at a time. Passing the anchor and control points'
-
-  x-coordinates will calculate the x-coordinate of a point on the tangent
-
-  line. Passing the anchor and control points' y-coordinates will calculate
-
-  the y-coordinate of a point on the tangent line.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first anchor
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  control points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last anchor
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 450
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 85;
-      let x2 = 10;
-      let x3 = 90;
-      let x4 = 15;
-      let y1 = 20;
-      let y2 = 10;
-      let y3 = 90;
-      let y4 = 80;
-
-      // Style the curve.
-      noFill();
-
-      // Draw the curve.
-      bezier(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw tangents along the curve's path.
-      fill(255);
-
-      // Top-right circle.
-      stroke(0);
-      let x = bezierPoint(x1, x2, x3, x4, 0);
-      let y = bezierPoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Top-right tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);
-      let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Center circle.
-      stroke(0);
-      x = bezierPoint(x1, x2, x3, x4, 0.5);
-      y = bezierPoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Center tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);
-      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Bottom-left circle.
-      stroke(0);
-      x = bezierPoint(x1, x2, x3, x4, 1);
-      y = bezierPoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      // Bottom-left tangent.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);
-      ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      describe(
-        'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of a point on the tangent line.
-  type: Number
-chainable: false
----
-
-
-# bezierTangent
diff --git a/src/content/reference/en/p5 copy/bezierVertex.mdx b/src/content/reference/en/p5 copy/bezierVertex.mdx
deleted file mode 100644
index f4b5fb57cb..0000000000
--- a/src/content/reference/en/p5 copy/bezierVertex.mdx	
+++ /dev/null
@@ -1,337 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L543
-title: bezierVertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a Bézier curve segment to a custom shape.</p>
-
-  <p><code>bezierVertex()</code> adds a curved segment to custom shapes. The
-  Bézier curves
-
-  it creates are defined like those made by the
-
-  <a href="/reference/p5/bezier/">bezier()</a> function.
-  <code>bezierVertex()</code> must be
-
-  called between the
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
-  uses
-
-  the previous vertex as the first anchor point, so there must be at least
-
-  one call to <a href="/reference/p5/vertex/">vertex()</a> before
-  <code>bezierVertex()</code> can
-
-  be used.</p>
-
-  <p>The first four parameters, <code>x2</code>, <code>y2</code>,
-  <code>x3</code>, and <code>y3</code>, set the curve’s two
-
-  control points. The control points "pull" the curve towards them.</p>
-
-  <p>The fifth and sixth parameters, <code>x4</code>, and <code>y4</code>, set
-  the last anchor point.
-
-  The last anchor point is where the curve ends.</p>
-
-  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
-  and
-
-  z-coordinates.</p>
-
-  <p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to
-
-  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
-line: 543
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertex.
-      bezierVertex(80, 0, 80, 75, 30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A black C curve on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(30, 20);
-      point(30, 75);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(80, 0);
-      point(80, 75);
-
-      // Style the shape.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertex.
-      bezierVertex(80, 0, 80, 75, 30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(30, 20, 80, 0);
-      line(30, 75, 80, 75);
-
-      describe(
-        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the top-right corner
-    // and drag to change the curve's shape.
-
-    let x2 = 80;
-    let y2 = 0;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with three curves. A black curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      strokeWeight(5);
-      point(30, 20);
-      point(30, 75);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x2, y2);
-      point(80, 75);
-
-      // Style the shape.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertex.
-      bezierVertex(x2, y2, 80, 75, 30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Draw red lines from the anchor points to the control points.
-      stroke(255, 0, 0);
-      line(30, 20, x2, y2);
-      line(30, 75, 80, 75);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x2, y2) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x2 = mouseX;
-        y2 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first anchor point.
-      vertex(30, 20);
-
-      // Add the Bézier vertices.
-      bezierVertex(80, 0, 80, 75, 30, 75);
-      bezierVertex(50, 80, 60, 25, 30, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A crescent moon shape drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A crescent moon shape drawn in white on a blue background. When the user drags the mouse, the scene rotates and a second moon is revealed.');
-    }
-
-    function draw() {
-      background('midnightblue');
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the moons.
-      noStroke();
-      fill('lemonchiffon');
-
-      // Draw the first moon.
-      beginShape();
-      vertex(-20, -30, 0);
-      bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0);
-      bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0);
-      endShape();
-
-      // Draw the second moon.
-      beginShape();
-      vertex(-20, -30, -20);
-      bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20);
-      bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 543
-    params:
-      - name: x2
-        description: |
-          <p>x-coordinate of the first control point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the second control point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>x-coordinate of the anchor point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>y-coordinate of the anchor point.</p>
-        type: Number
-    chainable: 1
-  - line: 792
-    params:
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the first control point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the second control point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>z-coordinate of the anchor point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# bezierVertex
diff --git a/src/content/reference/en/p5 copy/blend.mdx b/src/content/reference/en/p5 copy/blend.mdx
deleted file mode 100644
index 53e9a94dc9..0000000000
--- a/src/content/reference/en/p5 copy/blend.mdx	
+++ /dev/null
@@ -1,214 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L148
-title: blend
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Copies a region of pixels from one image to another.</p>
-
-  <p>The first parameter, <code>srcImage</code>, is the
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
-
-  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-  <code>sw</code>, and <code>sh</code> determine the region
-
-  to blend from the source image. <code>(sx, sy)</code> is the top-left corner
-  of the
-
-  region. <code>sw</code> and <code>sh</code> are the regions width and
-  height.</p>
-
-  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-  <code>dw</code>, and <code>dh</code> determine the region
-
-  of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner of
-  the
-
-  region. <code>dw</code> and <code>dh</code> are the regions width and
-  height.</p>
-
-  <p>The tenth parameter, <code>blendMode</code>, sets the effect used to blend
-  the images'
-
-  colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
-  <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
-
-  <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
-  <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
-
-  <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
-  <code>ADD</code>, or <code>NORMAL</code></p>
-line: 148
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img0;
-    let img1;
-
-    // Load the images.
-    function preload() {
-      img0 = loadImage('/assets/rockies.jpg');
-      img1 = loadImage('/assets/bricks_third.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img0);
-
-      // Display the bricks.
-      image(img1, 0, 0);
-
-      // Display the bricks faded into the landscape.
-      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
-
-      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img0;
-    let img1;
-
-    // Load the images.
-    function preload() {
-      img0 = loadImage('/assets/rockies.jpg');
-      img1 = loadImage('/assets/bricks_third.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img0);
-
-      // Display the bricks.
-      image(img1, 0, 0);
-
-      // Display the bricks partially transparent.
-      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
-
-      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img0;
-    let img1;
-
-    // Load the images.
-    function preload() {
-      img0 = loadImage('/assets/rockies.jpg');
-      img1 = loadImage('/assets/bricks_third.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img0);
-
-      // Display the bricks.
-      image(img1, 0, 0);
-
-      // Display the bricks washed out into the landscape.
-      blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
-
-      describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 148
-    params:
-      - name: srcImage
-        description: |
-          <p>source image.</p>
-        type: p5.Image
-      - name: sx
-        description: |
-          <p>x-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sy
-        description: |
-          <p>y-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sw
-        description: |
-          <p>source image width.</p>
-        type: Integer
-      - name: sh
-        description: |
-          <p>source image height.</p>
-        type: Integer
-      - name: dx
-        description: |
-          <p>x-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dy
-        description: |
-          <p>y-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dw
-        description: |
-          <p>destination image width.</p>
-        type: Integer
-      - name: dh
-        description: |
-          <p>destination image height.</p>
-        type: Integer
-      - name: blendMode
-        description: |
-          <p>the blend mode. either
-              BLEND, DARKEST, LIGHTEST, DIFFERENCE,
-              MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
-              SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.</p>
-        type: Constant
-  - line: 267
-    params:
-      - name: sx
-        description: ''
-        type: Integer
-      - name: sy
-        description: ''
-        type: Integer
-      - name: sw
-        description: ''
-        type: Integer
-      - name: sh
-        description: ''
-        type: Integer
-      - name: dx
-        description: ''
-        type: Integer
-      - name: dy
-        description: ''
-        type: Integer
-      - name: dw
-        description: ''
-        type: Integer
-      - name: dh
-        description: ''
-        type: Integer
-      - name: blendMode
-        description: ''
-        type: Constant
-chainable: false
----
-
-
-# blend
diff --git a/src/content/reference/en/p5 copy/blendMode.mdx b/src/content/reference/en/p5 copy/blendMode.mdx
deleted file mode 100644
index 8f6365b78d..0000000000
--- a/src/content/reference/en/p5 copy/blendMode.mdx	
+++ /dev/null
@@ -1,541 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L720
-title: blendMode
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Sets the way colors blend when added to the canvas.</p>
-
-  <p>By default, drawing with a solid color paints over the current pixel values
-
-  on the canvas. <code>blendMode()</code> offers many options for blending
-  colors.</p>
-
-  <p>Shapes, images, and text can be used as sources for drawing to the canvas.
-
-  A source pixel changes the color of the canvas pixel where it's drawn. The
-
-  final color results from blending the source pixel's color with the canvas
-
-  pixel's color. RGB color values from the source and canvas pixels are
-
-  compared, added, subtracted, multiplied, and divided to create different
-
-  effects. Red values with red values, greens with greens, and blues with
-
-  blues.</p>
-
-  <p>The parameter, <code>mode</code>, sets the blend mode. For example, calling
-
-  <code>blendMode(ADD)</code> sets the blend mode to <code>ADD</code>. The
-  following blend modes
-
-  are available in both 2D and WebGL mode:</p>
-
-  <ul>
-
-  <li><code>BLEND</code>: color values from the source overwrite the canvas.
-  This is the default mode.</li>
-
-  <li><code>ADD</code>: color values from the source are added to values from
-  the canvas.</li>
-
-  <li><code>DARKEST</code>: keeps the darkest color value.</li>
-
-  <li><code>LIGHTEST</code>: keeps the lightest color value.</li>
-
-  <li><code>EXCLUSION</code>: similar to <code>DIFFERENCE</code> but with less
-  contrast.</li>
-
-  <li><code>MULTIPLY</code>: color values from the source are multiplied with
-  values from the canvas. The result is always darker.</li>
-
-  <li><code>SCREEN</code>: all color values are inverted, then multiplied, then
-  inverted again. The result is always lighter. (Opposite of
-  <code>MULTIPLY</code>)</li>
-
-  <li><code>REPLACE</code>: the last source drawn completely replaces the rest
-  of the canvas.</li>
-
-  <li><code>REMOVE</code>: overlapping pixels are removed by making them
-  completely transparent.</li>
-
-  </ul>
-
-  <p>The following blend modes are only available in 2D mode:</p>
-
-  <ul>
-
-  <li><code>DIFFERENCE</code>: color values from the source are subtracted from
-  the values from the canvas. If the difference is a negative number, it's made
-  positive.</li>
-
-  <li><code>OVERLAY</code>: combines <code>MULTIPLY</code> and
-  <code>SCREEN</code>. Dark values in the canvas get darker and light values get
-  lighter.</li>
-
-  <li><code>HARD_LIGHT</code>: combines <code>MULTIPLY</code> and
-  <code>SCREEN</code>. Dark values in the source get darker and light values get
-  lighter.</li>
-
-  <li><code>SOFT_LIGHT</code>: a softer version of <code>HARD_LIGHT</code>.</li>
-
-  <li><code>DODGE</code>: lightens light tones and increases contrast. Divides
-  the canvas color values by the inverted color values from the source.</li>
-
-  <li><code>BURN</code>: darkens dark tones and increases contrast. Divides the
-  source color values by the inverted color values from the canvas, then inverts
-  the result.</li>
-
-  </ul>
-
-  <p>The following blend modes are only available in WebGL mode:</p>
-
-  <ul>
-
-  <li><code>SUBTRACT</code>: RGB values from the source are subtracted from the
-  values from the canvas. If the difference is a negative number, it's made
-  positive. Alpha (transparency) values from the source and canvas are
-  added.</li>
-
-  </ul>
-line: 720
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Use the default blend mode.
-      blendMode(BLEND);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A Sky Blue line and a Deep Rose line form an X on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(HARD_LIGHT);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(ADD);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(DARKEST);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(BURN);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(LIGHTEST);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(EXCLUSION);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(MULTIPLY);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(SCREEN);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(REPLACE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A diagonal deep rose line.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(REMOVE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('The silhouette of an X is missing from a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(DIFFERENCE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(OVERLAY);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(SOFT_LIGHT);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Set the blend mode.
-      blendMode(DODGE);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the first line.
-      stroke('#1a85ff');
-      line(25, 25, 75, 75);
-
-      // Draw the second line.
-      stroke('#d41159');
-      line(75, 25, 25, 75);
-
-      describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create a canvas with WEBGL mode.
-      createCanvas(100, 100, WEBGL);
-
-      // Set the background color.
-      background(180);
-
-      // Set the blend mode to SUBTRACT.
-      blendMode(SUBTRACT);
-
-      // Style the lines.
-      strokeWeight(30);
-
-      // Draw the blue line.
-      stroke('#1a85ff');
-      line(-25, -25, 25, 25);
-
-      // Draw the red line.
-      stroke('#d41159');
-      line(25, -25, -25, 25);
-
-      describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>blend mode to set.
-                     either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
-                     EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
-                     SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT</p>
-    type: Constant
-chainable: false
----
-
-
-# blendMode
diff --git a/src/content/reference/en/p5 copy/blue.mdx b/src/content/reference/en/p5 copy/blue.mdx
deleted file mode 100644
index d3e05aae37..0000000000
--- a/src/content/reference/en/p5 copy/blue.mdx	
+++ /dev/null
@@ -1,158 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L117
-title: blue
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the blue value of a color.</p>
-
-  <p><code>blue()</code> extracts the blue value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>blue()</code> returns a color's blue value in the range 0
-
-  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  RGB, it
-
-  returns the blue value in the given range.</p>
-line: 117
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(175, 100, 220);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 220.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [175, 100, 220];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 220.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgb(175, 100, 220)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 220.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(69, 39, 86);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'blueValue' to 86.
-      let blueValue = blue(c);
-
-      // Draw the right rectangle.
-      fill(0, 0, blueValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is royal blue.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the blue value.
-  type: Number
-chainable: false
----
-
-
-# blue
diff --git a/src/content/reference/en/p5 copy/boolean.mdx b/src/content/reference/en/p5 copy/boolean.mdx
deleted file mode 100644
index 8eab48af5f..0000000000
--- a/src/content/reference/en/p5 copy/boolean.mdx	
+++ /dev/null
@@ -1,157 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L341
-title: boolean
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>String</code> or <code>Number</code> to a
-  <code>Boolean</code>.</p>
-
-  <p><code>boolean()</code> converts values to <code>true</code> or
-  <code>false</code>.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a string, then
-
-  <code>boolean('true')</code> will return <code>true</code> and every other
-  string value will
-
-  return <code>false</code>. If <code>n</code> is a number, then
-  <code>boolean(0)</code> will return <code>false</code>
-
-  and every other numeric value will return <code>true</code>. If an array is
-  passed, as
-
-  <code>in boolean([0, 1, 'true', 'blue'])</code>, then an array of Boolean
-  values will
-
-  be returned.</p>
-line: 341
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 0;
-
-      // Convert the number to a Boolean value.
-      let converted = boolean(original);
-
-      // Style the circle based on the converted value.
-      if (converted === true) {
-        fill('blue');
-      } else {
-        fill('red');
-      }
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A red circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = 'true';
-
-      // Convert the string to a Boolean value.
-      let converted = boolean(original);
-
-      // Style the circle based on the converted value.
-      if (converted === true) {
-        fill('blue');
-      } else {
-        fill('red');
-      }
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A blue circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of values.
-      let original = [0, 'hi', 123, 'true'];
-
-      // Convert the array to a Boolean values.
-      let converted = boolean(original);
-
-      // Iterate over the array of converted Boolean values.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Style the circle based on the converted value.
-        if (converted[i] === true) {
-          fill('blue');
-        } else {
-          fill('red');
-        }
-
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 20;
-
-        // Draw the circle.
-        circle(x, 50, 15);
-      }
-
-      describe(
-        'A row of circles on a gray background. The two circles on the left are red and the two on the right are blue.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted Boolean value.
-  type: Boolean
-overloads:
-  - line: 341
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Boolean|Number
-    return:
-      description: converted Boolean value.
-      type: Boolean
-  - line: 451
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted Boolean values.
-      type: 'Boolean[]'
-chainable: false
----
-
-
-# boolean
diff --git a/src/content/reference/en/p5 copy/box.mdx b/src/content/reference/en/p5 copy/box.mdx
deleted file mode 100644
index a4f5282947..0000000000
--- a/src/content/reference/en/p5 copy/box.mdx	
+++ /dev/null
@@ -1,186 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1009
-title: box
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a box (rectangular prism).</p>
-
-  <p>A box is a 3D shape with six faces. Each face makes a 90˚ with four
-
-  neighboring faces.</p>
-
-  <p>The first parameter, <code>width</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>box(20)</code>, it sets the box’s width and height. By default,
-  <code>width</code> is 50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>box(20, 30)</code>, it sets the box’s height. By default,
-  <code>height</code> is set
-
-  to the box’s <code>width</code>.</p>
-
-  <p>The third parameter, <code>depth</code>, is also optional. If a
-  <code>Number</code> is passed, as
-
-  in <code>box(20, 30, 40)</code>, it sets the box’s depth. By default,
-  <code>depth</code> is set
-
-  to the box’s <code>height</code>.</p>
-
-  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>box(20, 30, 40, 5)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the x-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailX</code> is 1.</p>
-
-  <p>The fifth parameter, <code>detailY</code>, is also optional. If a number is
-  passed, as
-
-  in <code>box(20, 30, 40, 5, 7)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailY</code> is 1.</p>
-
-  <p>Note: <code>box()</code> can only be used in WebGL mode.</p>
-line: 1009
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      // Set its width and height to 30.
-      box(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      // Set its width to 30 and height to 50.
-      box(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the box.
-      // Set its width to 30, height to 50, and depth to 10.
-      box(30, 50, 10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width of the box.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: |
-      <p>height of the box.</p>
-    type: Number
-    optional: true
-  - name: depth
-    description: |
-      <p>depth of the box.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# box
diff --git a/src/content/reference/en/p5 copy/brightness.mdx b/src/content/reference/en/p5 copy/brightness.mdx
deleted file mode 100644
index 2860cbf226..0000000000
--- a/src/content/reference/en/p5 copy/brightness.mdx	
+++ /dev/null
@@ -1,168 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L253
-title: brightness
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the brightness value of a color.</p>
-
-  <p><code>brightness()</code> extracts the HSB brightness value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>brightness()</code> returns a color's HSB brightness in
-  the range 0
-
-  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  HSB, it
-
-  returns the brightness value in the given range.</p>
-line: 253
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a p5.Color object.
-      let c = color(0, 50, 100);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 100.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a color array.
-      let c = [0, 50, 100];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 100.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 100.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color with values in the range 0-255.
-      colorMode(HSB, 255);
-
-      // Create a p5.Color object.
-      let c = color(0, 127, 255);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'brightValue' to 255.
-      let brightValue = brightness(c);
-
-      // Draw the right rectangle.
-      fill(brightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the brightness value.
-  type: Number
-chainable: false
----
-
-
-# brightness
diff --git a/src/content/reference/en/p5 copy/buildGeometry.mdx b/src/content/reference/en/p5 copy/buildGeometry.mdx
deleted file mode 100644
index ef58d7b650..0000000000
--- a/src/content/reference/en/p5 copy/buildGeometry.mdx	
+++ /dev/null
@@ -1,263 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L520
-title: buildGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Creates a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object
-  from
-
-  simpler 3D shapes.</p>
-
-  <p><code>buildGeometry()</code> helps with creating complex 3D shapes from
-  simpler ones
-
-  such as <a href="/reference/p5/sphere/">sphere()</a>. It can help to make
-  sketches
-
-  more performant. For example, if a complex 3D shape doesn’t change while a
-
-  sketch runs, then it can be created with <code>buildGeometry()</code>.
-  Creating a
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and then
-  drawing it
-
-  will run faster than repeatedly drawing the individual pieces.</p>
-
-  <p>The parameter, <code>callback</code>, is a function with the drawing
-  instructions for
-
-  the new <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object. It will be
-  called
-
-  once to create the new 3D shape.</p>
-
-  <p>See <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a> for another way to
-  build 3D
-
-  shapes.</p>
-
-  <p>Note: <code>buildGeometry()</code> can only be used in WebGL mode.</p>
-line: 520
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createShape);
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    // Create p5.Geometry object from a single cone.
-    function createShape() {
-      cone();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the arrow.
-      shape = buildGeometry(createArrow);
-
-      describe('A white arrow drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrow.
-      noStroke();
-
-      // Draw the arrow.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createArrow);
-
-      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the p5.Geometry object again.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-
-      describe('A set of white spheres on a gray background. The spheres are positioned randomly. Their positions reset when the user presses the Reset button.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = buildGeometry(createParticles);
-    }
-
-    function createParticles() {
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: callback
-    description: |
-      <p>function that draws the shape.</p>
-    type: Function
-return:
-  description: new 3D shape.
-  type: p5.Geometry
-chainable: false
----
-
-
-# buildGeometry
diff --git a/src/content/reference/en/p5 copy/byte.mdx b/src/content/reference/en/p5 copy/byte.mdx
deleted file mode 100644
index 0a6f3234a4..0000000000
--- a/src/content/reference/en/p5 copy/byte.mdx	
+++ /dev/null
@@ -1,180 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L468
-title: byte
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Boolean</code>, <code>String</code>, or
-  <code>Number</code> to its byte value.</p>
-
-  <p><code>byte()</code> converts a value to an integer (whole number) between
-  -128 and
-
-  127. Values greater than 127 wrap around while negative values are
-
-  unchanged. For example, 128 becomes -128 and -129 remains the same.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a Boolean, as in
-
-  <code>byte(false)</code> or <code>byte(true)</code>, the number 0
-  (<code>false</code>) or 1 (<code>true</code>) will be
-
-  returned. If <code>n</code> is a string or number, as in
-  <code>byte('256')</code> or <code>byte(256)</code>,
-
-  then the byte value will be returned. Decimal values are ignored. If an
-
-  array is passed, as in <code>byte([true, 123, '456'])</code>, then an array of
-  byte
-
-  values will be returned.</p>
-
-  <p>Note: If a value can't be converted to a number, as in
-  <code>byte('giraffe')</code>,
-
-  then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 468
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a Boolean variable.
-      let original = true;
-
-      // Convert the Boolean to its byte value.
-      let converted = byte(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "true : 1" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '256';
-
-      // Convert the string to its byte value.
-      let converted = byte(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "256 : 0" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 256;
-
-      // Convert the number to its byte value.
-      let converted = byte(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "256 : 0" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of values.
-      let original = [false, '64', 383];
-
-      // Convert the array elements to their byte values.
-      let converted = byte(original);
-
-      // Iterate over the converted array elements.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Style the circle.
-        fill(converted[i]);
-
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 25;
-
-        // Draw the circle.
-        circle(x, 50, 20);
-      }
-
-      describe(
-        'Three gray circles on a gray background. The circles get lighter from left to right.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted byte value.
-  type: Number
-overloads:
-  - line: 468
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Boolean|Number
-    return:
-      description: converted byte value.
-      type: Number
-  - line: 598
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted byte values.
-      type: 'Number[]'
-chainable: false
----
-
-
-# byte
diff --git a/src/content/reference/en/p5 copy/camera.mdx b/src/content/reference/en/p5 copy/camera.mdx
deleted file mode 100644
index 55f983385e..0000000000
--- a/src/content/reference/en/p5 copy/camera.mdx	
+++ /dev/null
@@ -1,200 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L13
-title: camera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets the position and orientation of the current camera in a 3D sketch.</p>
-
-  <p><code>camera()</code> allows objects to be viewed from different angles. It
-  has nine
-
-  parameters that are all optional.</p>
-
-  <p>The first three parameters, <code>x</code>, <code>y</code>, and
-  <code>z</code>, are the coordinates of the
-
-  camera’s position. For example, calling <code>camera(0, 0, 0)</code> places
-  the camera
-
-  at the origin <code>(0, 0, 0)</code>. By default, the camera is placed at
-
-  <code>(0, 0, 800)</code>.</p>
-
-  <p>The next three parameters, <code>centerX</code>, <code>centerY</code>, and
-  <code>centerZ</code> are the
-
-  coordinates of the point where the camera faces. For example, calling
-
-  <code>camera(0, 0, 0, 10, 20, 30)</code> places the camera at the origin
-  <code>(0, 0, 0)</code>
-
-  and points it at <code>(10, 20, 30)</code>. By default, the camera points at
-  the
-
-  origin <code>(0, 0, 0)</code>.</p>
-
-  <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
-  <code>upZ</code> are the components of
-
-  the "up" vector. The "up" vector orients the camera’s y-axis. For example,
-
-  calling <code>camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the camera
-  at the
-
-  origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
-  sets the "up" vector
-
-  to <code>(0, -1, 0)</code> which is like holding it upside-down. By default,
-  the "up"
-
-  vector is <code>(0, 1, 0)</code>.</p>
-
-  <p>Note: <code>camera()</code> can only be used in WebGL mode.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Move the camera to the top-right.
-      camera(200, -400, 800);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube apperas to sway left and right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the camera's x-coordinate.
-      let x = 400 * cos(frameCount * 0.01);
-
-      // Orbit the camera around the box.
-      camera(x, -400, 800);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Adjust the range sliders to change the camera's position.
-
-    let xSlider;
-    let ySlider;
-    let zSlider;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create slider objects to set the camera's coordinates.
-      xSlider = createSlider(-400, 400, 400);
-      xSlider.position(0, 100);
-      xSlider.size(100);
-      ySlider = createSlider(-400, 400, -200);
-      ySlider.position(0, 120);
-      ySlider.size(100);
-      zSlider = createSlider(0, 1600, 800);
-      zSlider.position(0, 140);
-      zSlider.size(100);
-
-      describe(
-        'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Get the camera's coordinates from the sliders.
-      let x = xSlider.value();
-      let y = ySlider.value();
-      let z = zSlider.value();
-
-      // Move the camera.
-      camera(x, y, z);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the camera. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the camera. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z-coordinate of the camera. Defaults to 800.</p>
-    type: Number
-    optional: true
-  - name: centerX
-    description: |
-      <p>x-coordinate of the point the camera faces. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: centerY
-    description: |
-      <p>y-coordinate of the point the camera faces. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: centerZ
-    description: |
-      <p>z-coordinate of the point the camera faces. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: upX
-    description: |
-      <p>x-component of the camera’s "up" vector. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: upY
-    description: |
-      <p>y-component of the camera’s "up" vector. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: upZ
-    description: |
-      <p>z-component of the camera’s "up" vector. Defaults to 0.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# camera
diff --git a/src/content/reference/en/p5 copy/ceil.mdx b/src/content/reference/en/p5 copy/ceil.mdx
deleted file mode 100644
index 45c17468bf..0000000000
--- a/src/content/reference/en/p5 copy/ceil.mdx	
+++ /dev/null
@@ -1,65 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L48
-title: ceil
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the closest integer value that is greater than or equal to a
-
-  number.</p>
-
-  <p>For example, calling <code>ceil(9.03)</code> and <code>ceil(9.97)</code>
-  both return the value
-
-  10.</p>
-line: 48
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values from 0 to 1.
-      colorMode(RGB, 1);
-
-      noStroke();
-
-      // Draw the left rectangle.
-      let r = 0.3;
-      fill(r, 0, 0);
-      rect(0, 0, 50, 100);
-
-      // Round r up to 1.
-      r = ceil(r);
-
-      // Draw the right rectangle.
-      fill(r, 0, 0);
-      rect(50, 0, 50, 100);
-
-      describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to round up.</p>
-    type: Number
-return:
-  description: rounded up number.
-  type: Integer
-chainable: false
----
-
-
-# ceil
diff --git a/src/content/reference/en/p5 copy/changed.mdx b/src/content/reference/en/p5 copy/changed.mdx
deleted file mode 100644
index 45289630e9..0000000000
--- a/src/content/reference/en/p5 copy/changed.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L330
-title: changed
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: |
-  <p>Calls a function when the element changes.</p>
-  <p>Calling <code>myElement.changed(false)</code> disables the function.</p>
-line: 330
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let dropdown;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a dropdown menu and add a few color options.
-      dropdown = createSelect();
-      dropdown.position(0, 0);
-      dropdown.option('red');
-      dropdown.option('green');
-      dropdown.option('blue');
-
-      // Call paintBackground() when the color option changes.
-      dropdown.changed(paintBackground);
-
-      describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');
-    }
-
-    // Paint the background with the selected color.
-    function paintBackground() {
-      let c = dropdown.value();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a checkbox and place it beneath the canvas.
-      checkbox = createCheckbox(' circle');
-      checkbox.position(0, 100);
-
-      // Call repaint() when the checkbox changes.
-      checkbox.changed(repaint);
-
-      describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.');
-    }
-
-    // Paint the background gray and determine whether to draw a circle.
-    function repaint() {
-      background(200);
-      if (checkbox.checked() === true) {
-        circle(50, 50, 30);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fxn
-    description: |
-      <p>function to call when the element changes.
-                                     <code>false</code> disables the function.</p>
-    type: Function|Boolean
-chainable: true
----
-
-
-# changed
diff --git a/src/content/reference/en/p5 copy/char.mdx b/src/content/reference/en/p5 copy/char.mdx
deleted file mode 100644
index e01e22a9f7..0000000000
--- a/src/content/reference/en/p5 copy/char.mdx	
+++ /dev/null
@@ -1,152 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L612
-title: char
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Number</code> or <code>String</code> to a single-character
-  <code>String</code>.</p>
-
-  <p><code>char()</code> converts numbers to their single-character string
-  representations.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If a number is
-  passed, as in
-
-  <code>char(65)</code>, the corresponding single-character string is returned.
-  If a
-
-  string is passed, as in <code>char('65')</code>, the string is converted to an
-  integer
-
-  (whole number) and the corresponding single-character string is returned.
-
-  If an array is passed, as in <code>char([65, 66, 67])</code>, an array of
-
-  single-character strings is returned.</p>
-
-  <p>See <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode/"
-  target="_blank">MDN</a>
-
-  for more information about conversions.</p>
-line: 612
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 65;
-
-      // Convert the number to a char.
-      let converted = char(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "65 : A" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '65';
-
-      // Convert the string to a char.
-      let converted = char(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "65 : A" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = ['65', 66, '67'];
-
-      // Convert the string to a char.
-      let converted = char(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Iterate over elements of the converted array.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${original[i]} : ${converted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "65 : A", "66 : B", and "67 : C" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted single-character string.
-  type: String
-overloads:
-  - line: 612
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Number
-    return:
-      description: converted single-character string.
-      type: String
-  - line: 716
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted single-character strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# char
diff --git a/src/content/reference/en/p5 copy/circle.mdx b/src/content/reference/en/p5 copy/circle.mdx
deleted file mode 100644
index 46069bea74..0000000000
--- a/src/content/reference/en/p5 copy/circle.mdx	
+++ /dev/null
@@ -1,77 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L488
-title: circle
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a circle.</p>
-
-  <p>A circle is a round shape defined by the <code>x</code>, <code>y</code>,
-  and <code>d</code> parameters.
-
-  <code>x</code> and <code>y</code> set the location of its center.
-  <code>d</code> sets its width and height (diameter).
-
-  Every point on the circle's edge is the same distance, <code>0.5 * d</code>,
-  from its center.
-
-  <code>0.5 * d</code> (half the diameter) is the circle's radius.
-
-  See <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to
-  set its position.</p>
-line: 488
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      circle(50, 50, 25);
-
-      describe('A white circle with black outline in the middle of a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      circle(0, 0, 25);
-
-      describe('A white circle with black outline in the middle of a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the center of the circle.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the center of the circle.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>diameter of the circle.</p>
-    type: Number
-chainable: true
----
-
-
-# circle
diff --git a/src/content/reference/en/p5 copy/class.mdx b/src/content/reference/en/p5 copy/class.mdx
deleted file mode 100644
index 94b64b75c2..0000000000
--- a/src/content/reference/en/p5 copy/class.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1329
-title: class
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: "<p>A template for creating objects of a particular type.</p>\n<p>Classes can make it easier to program with objects. For example, a <code>Frog</code>\nclass could create objects that behave like frogs. Each object created\nusing a class is called an instance of that class. All instances of a class\nare the same type. Here's an example of creating an instance of a <code>Frog</code>\nclass:</p>\n<pre><code class=\"language-js\">let fifi = new Frog(50, 50, 20);\n</code></pre>\n<p>The variable <code>fifi</code> refers to an instance of the <code>Frog</code> class. The keyword\n<code>new</code> is used to call the <code>Frog</code> class' constructor in the statement\n<code>new Frog()</code>. Altogether, a new <code>Frog</code> object was created and assigned to\nthe variable <code>fifi</code>. Classes are templates, so they can be used to create\nmore than one instance:</p>\n<pre><code class=\"language-js\">// First Frog instance.\nlet frog1 = new Frog(25, 50, 10);\n\n// Second Frog instance.\nlet frog2 = new Frog(75, 50, 10);\n</code></pre>\n<p>A simple <code>Frog</code> class could be declared as follows:</p>\n<pre><code class=\"language-js\">class Frog {\n  constructor(x, y, size) {\n    // This code runs once when an instance is created.\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    // This code runs once when myFrog.show() is called.\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    // This code runs once when myFrog.hop() is called.\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n}\n</code></pre>\n<p>Class declarations begin with the keyword <code>class</code> followed by the class\nname, such as <code>Frog</code>, and curly braces <code>{}</code>. Class names should use\n<code>PascalCase</code> and can't have spaces in their names. For example, naming a\nclass <code>Kermit The Frog</code> with spaces between each word would throw a\n<code>SyntaxError</code>. The code between the curly braces <code>{}</code> defines the class.</p>\n<p>Functions that belong to a class are called methods. <code>constructor()</code>,\n<code>show()</code>, and <code>hop()</code> are methods in the <code>Frog</code> class. Methods define an\nobject's behavior. Methods can accept parameters and return values, just\nlike functions. Note that methods don't use the <code>function</code> keyword.</p>\n<p><code>constructor()</code> is a special method that's called once when an instance of\nthe class is created. The statement <code>new Frog()</code> calls the <code>Frog</code> class'\n<code>constructor()</code> method.</p>\n<p>A class definition is a template for instances. The keyword <code>this</code> refers\nto an instance's data and methods. For example, each <code>Frog</code> instance has\nunique coordinates stored in <code>this.x</code> and <code>this.y</code>. The <code>show()</code> method\nuses those coordinates to draw the frog. The <code>hop()</code> method updates those\ncoordinates when called. Once a <code>Frog</code> instance is created, its data and\nmethods can be accessed using the dot operator <code>.</code> as follows:</p>\n<pre><code class=\"language-js\">// Draw a lily pad.\nfill('green');\nstroke('green');\ncircle(fifi.x, fifi.y, 2 * fifi.size);\n\n// Show the Frog.\nfifi.show();\n\n// Hop.\nfifi.hop();\n</code></pre>\n"
-line: 1329
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\n// Declare a frog variable.\nlet fifi;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variable a new Frog object.\n  fifi = new Frog(50, 50, 20);\n\n  describe('A frog face drawn on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frog.\n  fifi.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  describe('Two frog faces drawn next to each other on a blue background.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Declare two frog variables.\nlet frog1;\nlet frog2;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Assign the frog variables a new Frog object.\n  frog1 = new Frog(25, 50, 10);\n  frog2 = new Frog(75, 50, 20);\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe('Two frog faces on a blue background. The frogs hop around randomly.');\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  // Show the frogs.\n  frog1.show();\n  frog2.show();\n\n  // Move the frogs.\n  frog1.hop();\n  frog2.hop();\n\n  // Wrap around if they've hopped off the edge.\n  frog1.checkEdges();\n  frog2.checkEdges();\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\n// Create an array that will hold frogs.\nlet frogs = [];\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Add Frog objects to the array.\n  for (let i = 0; i < 5; i += 1) {\n    // Calculate random coordinates and size.\n    let x = random(0, 100);\n    let y = random(0, 100);\n    let s = random(2, 20);\n\n    // Create a new Frog object.\n    let frog = new Frog(x, y, s);\n\n    // Add the Frog to the array.\n    frogs.push(frog);\n  }\n\n  // Slow the frame rate.\n  frameRate(1);\n\n  describe(\n    'Five frog faces on a blue background. The frogs hop around randomly.'\n  );\n}\n\nfunction draw() {\n  background('cornflowerblue');\n\n  for (let frog of frogs) {\n    // Show the frog.\n    frog.show();\n\n    // Move the frog.\n    frog.hop();\n\n    // Wrap around if they've hopped off the edge.\n    frog.checkEdges();\n  }\n}\n\nclass Frog {\n  constructor(x, y, size) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n  }\n\n  show() {\n    textAlign(CENTER, CENTER);\n    textSize(this.size);\n    text('\U0001F438', this.x, this.y);\n  }\n\n  hop() {\n    this.x += random(-10, 10);\n    this.y += random(-10, 10);\n  }\n\n  checkEdges() {\n    if (this.x > width) {\n      this.x = this.x - width;\n    } else if (this.x < 0) {\n      this.x = width - this.x;\n    }\n\n    if (this.y > height) {\n      this.y = this.y - height;\n    } else if (this.y < 0) {\n      this.y = height - this.y;\n    }\n  }\n}\n</code>\n</div>"
-class: p5
----
-
-
-# class
diff --git a/src/content/reference/en/p5 copy/clear.mdx b/src/content/reference/en/p5 copy/clear.mdx
deleted file mode 100644
index a096184afc..0000000000
--- a/src/content/reference/en/p5 copy/clear.mdx	
+++ /dev/null
@@ -1,108 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L673
-title: clear
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Clears the pixels on the canvas.</p>
-
-  <p><code>clear()</code> makes every pixel 100% transparent. Calling
-  <code>clear()</code> doesn't
-
-  clear objects created by <code>createX()</code> functions such as
-
-  <a href="/reference/p5/createGraphics/">createGraphics()</a>,
-
-  <a href="/reference/p5/createVideo/">createVideo()</a>, and
-
-  <a href="/reference/p5/createImg/">createImg()</a>. These objects will remain
-
-  unchanged after calling <code>clear()</code> and can be redrawn.</p>
-
-  <p>In WebGL mode, this function can clear the screen to a specific color. It
-
-  interprets four numeric parameters as normalized RGBA color values. It also
-
-  clears the depth buffer. If you are not using the WebGL renderer, these
-
-  parameters will have no effect.</p>
-line: 673
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A gray square. White circles are drawn as the user moves the mouse. The circles disappear when the user presses the mouse.');
-    }
-
-    function draw() {
-      circle(mouseX, mouseY, 20);
-    }
-
-    function mousePressed() {
-      clear();
-      background(200);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-
-      pg = createGraphics(60, 60);
-      pg.background(200);
-      pg.noStroke();
-      pg.circle(pg.width / 2, pg.height / 2, 15);
-      image(pg, 20, 20);
-
-      describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
-    }
-
-    function mousePressed() {
-      clear();
-      image(pg, 20, 20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: r
-    description: |
-      <p>normalized red value.</p>
-    type: Number
-    optional: true
-  - name: g
-    description: |
-      <p>normalized green value.</p>
-    type: Number
-    optional: true
-  - name: b
-    description: |
-      <p>normalized blue value.</p>
-    type: Number
-    optional: true
-  - name: a
-    description: |
-      <p>normalized alpha value.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# clear
diff --git a/src/content/reference/en/p5 copy/clearDepth.mdx b/src/content/reference/en/p5 copy/clearDepth.mdx
deleted file mode 100644
index 25425d1920..0000000000
--- a/src/content/reference/en/p5 copy/clearDepth.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L635
-title: clearDepth
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Clears the depth buffer in WebGL mode.</p>
-
-  <p><code>clearDepth()</code> clears information about how far objects are from
-  the camera
-
-  in 3D space. This information is stored in an object called the
-
-  <em>depth buffer</em>. Clearing the depth buffer ensures new objects aren't
-  drawn
-
-  behind old ones. Doing so can be useful for feedback effects in which the
-
-  previous frame serves as the background for the current frame.</p>
-
-  <p>The parameter, <code>depth</code>, is optional. If a number is passed, as
-  in
-
-  <code>clearDepth(0.5)</code>, it determines the range of objects to clear from
-  the
-
-  depth buffer. 0 doesn't clear any depth information, 0.5 clears depth
-
-  information halfway between the near and far clipping planes, and 1 clears
-
-  depth information all the way to the far clipping plane. By default,
-
-  <code>depth</code> is 1.</p>
-
-  <p>Note: <code>clearDepth()</code> can only be used in WebGL mode.</p>
-line: 635
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let previous;
-    let current;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Framebuffer objects.
-      previous = createFramebuffer({ format: FLOAT });
-      current = createFramebuffer({ format: FLOAT });
-
-      describe(
-        'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'
-      );
-    }
-
-    function draw() {
-      // Swap the previous p5.Framebuffer and the
-      // current one so it can be used as a texture.
-      [previous, current] = [current, previous];
-
-      // Start drawing to the current p5.Framebuffer.
-      current.begin();
-
-      // Paint the background.
-      background(255);
-
-      // Draw the previous p5.Framebuffer.
-      // Clear the depth buffer so the previous
-      // frame doesn't block the current one.
-      push();
-      tint(255, 250);
-      image(previous, -50, -50);
-      clearDepth();
-      pop();
-
-      // Draw the box on top of the previous frame.
-      push();
-      let x = 25 * sin(frameCount * 0.01);
-      let y = 25 * sin(frameCount * 0.02);
-      translate(x, y, 0);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      normalMaterial();
-      box(12);
-      pop();
-
-      // Stop drawing to the current p5.Framebuffer.
-      current.end();
-
-      // Display the current p5.Framebuffer.
-      image(current, -50, -50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: depth
-    description: |
-      <p>amount of the depth buffer to clear between 0
-                              (none) and 1 (far clipping plane). Defaults to 1.</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# clearDepth
diff --git a/src/content/reference/en/p5 copy/clearStorage.mdx b/src/content/reference/en/p5 copy/clearStorage.mdx
deleted file mode 100644
index d2c89e63bf..0000000000
--- a/src/content/reference/en/p5 copy/clearStorage.mdx	
+++ /dev/null
@@ -1,81 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L313
-title: clearStorage
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Removes all items in the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs. Calling <code>clearStorage()</code> removes all data from
-  <code>localStorage</code>.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 313
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to clear localStorage.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe(
-        'The text "Feist: 1234" written in black on a gray background. The text "null: null" appears when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-
-    // Clear localStorage when the user double-clicks.
-    function doubleClicked() {
-      clearStorage();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# clearStorage
diff --git a/src/content/reference/en/p5 copy/clip.mdx b/src/content/reference/en/p5 copy/clip.mdx
deleted file mode 100644
index ae72687f03..0000000000
--- a/src/content/reference/en/p5 copy/clip.mdx	
+++ /dev/null
@@ -1,225 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L222
-title: clip
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Defines a shape that will mask any shapes drawn afterward.</p>
-
-  <p>The first parameter, <code>callback</code>, is a function that defines the
-  mask.
-
-  Any shapes drawn in  <code>callback</code> will add to the mask shape. The
-  mask
-
-  will apply to anything drawn after <code>clip()</code> is called.</p>
-
-  <p>The second parameter, <code>options</code>, is optional. If an object with
-  an <code>invert</code>
-
-  property is passed, as in <code>beginClip({ invert: true })</code>, it will be
-  used to
-
-  set the masking mode. <code>{ invert: true }</code> inverts the mask, creating
-  holes
-
-  in shapes that are masked. <code>invert</code> is <code>false</code> by
-  default.</p>
-
-  <p>Masks can be contained between the
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions.
-
-  Doing so allows unmasked shapes to be drawn after masked shapes.</p>
-
-  <p>Masks can also be defined with <a
-  href="/reference/p5/beginClip/">beginClip()</a>
-
-  and <a href="/reference/p5/endClip/">endClip()</a>.</p>
-line: 222
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white triangle and circle on a gray background.');
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an inverted mask.
-      clip(mask, { invert: true });
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      noStroke();
-
-      // Draw a masked shape.
-      push();
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw an inverted masked shape.
-      push();
-      // Create an inverted mask.
-      clip(mask, { invert: true });
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-      pop();
-
-      describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored fuchsia.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      noStroke();
-      fill('fuchsia');
-      plane(100);
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A silhouette of a rotating torus colored with a gradient from cyan to purple.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a mask.
-      clip(mask);
-
-      // Draw a backing shape.
-      noStroke();
-      beginShape(QUAD_STRIP);
-      fill(0, 255, 255);
-      vertex(-width / 2, -height / 2);
-      vertex(width / 2, -height / 2);
-      fill(100, 0, 100);
-      vertex(-width / 2, height / 2);
-      vertex(width / 2, height / 2);
-      endShape();
-    }
-
-    // Declare a function that defines the mask.
-    function mask() {
-      push();
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      scale(0.5);
-      torus(30, 15);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: callback
-    description: |
-      <p>a function that draws the mask shape.</p>
-    type: Function
-  - name: options
-    description: |
-      <p>an object containing clip settings.</p>
-    type: Object
-    optional: true
-chainable: false
----
-
-
-# clip
diff --git a/src/content/reference/en/p5 copy/color.mdx b/src/content/reference/en/p5 copy/color.mdx
deleted file mode 100644
index ad2bdbd8da..0000000000
--- a/src/content/reference/en/p5 copy/color.mdx	
+++ /dev/null
@@ -1,349 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L398
-title: color
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Creates a <a href="/reference/p5/p5.Color">p5.Color</a> object.</p>
-
-  <p>By default, the parameters are interpreted as RGB values. Calling
-
-  <code>color(255, 204, 0)</code> will return a bright yellow color. The way
-  these
-
-  parameters are interpreted may be changed with the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
-
-  <p>The version of <code>color()</code> with one parameter interprets the value
-  one of two
-
-  ways. If the parameter is a number, it's interpreted as a grayscale value.
-
-  If the parameter is a string, it's interpreted as a CSS color string.</p>
-
-  <p>The version of <code>color()</code> with two parameters interprets the
-  first one as a
-
-  grayscale value. The second parameter sets the alpha (transparency) value.</p>
-
-  <p>The version of <code>color()</code> with three parameters interprets them
-  as RGB, HSB,
-
-  or HSL colors, depending on the current <code>colorMode()</code>.</p>
-
-  <p>The version of <code>color()</code> with four parameters interprets them as
-  RGBA, HSBA,
-
-  or HSLA colors, depending on the current <code>colorMode()</code>. The last
-  parameter
-
-  sets the alpha (transparency) value.</p>
-line: 398
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(255, 204, 0);
-
-      // Draw the square.
-      fill(c);
-      noStroke();
-      square(30, 20, 55);
-
-      describe('A yellow square on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c1 = color(255, 204, 0);
-
-      // Draw the left circle.
-      fill(c1);
-      noStroke();
-      circle(25, 25, 80);
-
-      // Create a p5.Color object using a grayscale value.
-      let c2 = color(65);
-
-      // Draw the right circle.
-      fill(c2);
-      circle(75, 75, 80);
-
-      describe(
-        'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a named color.
-      let c = color('magenta');
-
-      // Draw the square.
-      fill(c);
-      noStroke();
-      square(20, 20, 60);
-
-      describe('A magenta square on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a hex color code.
-      let c1 = color('#0f0');
-
-      // Draw the left rectangle.
-      fill(c1);
-      noStroke();
-      rect(0, 10, 45, 80);
-
-      // Create a p5.Color object using a hex color code.
-      let c2 = color('#00ff00');
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two bright green rectangles on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a RGB color string.
-      let c1 = color('rgb(0, 0, 255)');
-
-      // Draw the top-left square.
-      fill(c1);
-      square(10, 10, 35);
-
-      // Create a p5.Color object using a RGB color string.
-      let c2 = color('rgb(0%, 0%, 100%)');
-
-      // Draw the top-right square.
-      fill(c2);
-      square(55, 10, 35);
-
-      // Create a p5.Color object using a RGBA color string.
-      let c3 = color('rgba(0, 0, 255, 1)');
-
-      // Draw the bottom-left square.
-      fill(c3);
-      square(10, 55, 35);
-
-      // Create a p5.Color object using a RGBA color string.
-      let c4 = color('rgba(0%, 0%, 100%, 1)');
-
-      // Draw the bottom-right square.
-      fill(c4);
-      square(55, 55, 35);
-
-      describe('Four blue squares in the corners of a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a HSL color string.
-      let c1 = color('hsl(160, 100%, 50%)');
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c1);
-      rect(0, 10, 45, 80);
-
-      // Create a p5.Color object using a HSLA color string.
-      let c2 = color('hsla(160, 100%, 50%, 0.5)');
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using a HSB color string.
-      let c1 = color('hsb(160, 100%, 50%)');
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c1);
-      rect(0, 10, 45, 80);
-
-      // Create a p5.Color object using a HSBA color string.
-      let c2 = color('hsba(160, 100%, 50%, 0.5)');
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object using RGB values.
-      let c1 = color(50, 55, 100);
-
-      // Draw the left rectangle.
-      fill(c1);
-      rect(0, 10, 45, 80);
-
-      // Switch the color mode to HSB.
-      colorMode(HSB, 100);
-
-      // Create a p5.Color object using HSB values.
-      let c2 = color(50, 55, 100);
-
-      // Draw the right rectangle.
-      fill(c2);
-      rect(55, 10, 45, 80);
-
-      describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: resulting color.
-  type: p5.Color
-overloads:
-  - line: 398
-    params:
-      - name: gray
-        description: |
-          <p>number specifying value between white and black.</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha value relative to current color range
-                                          (default is 0-255).</p>
-        type: Number
-        optional: true
-    return:
-      description: resulting color.
-      type: p5.Color
-  - line: 652
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value relative to
-                                          the current color range.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value
-                                          relative to the current color range.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue or brightness value
-                                          relative to the current color range.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    return:
-      description: ''
-      type: p5.Color
-  - line: 664
-    params:
-      - name: value
-        description: |
-          <p>a color string.</p>
-        type: String
-    return:
-      description: ''
-      type: p5.Color
-  - line: 670
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue,
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    return:
-      description: ''
-      type: p5.Color
-  - line: 677
-    params:
-      - name: color
-        description: ''
-        type: p5.Color
-    return:
-      description: ''
-      type: p5.Color
-chainable: false
----
-
-
-# color
diff --git a/src/content/reference/en/p5 copy/colorMode.mdx b/src/content/reference/en/p5 copy/colorMode.mdx
deleted file mode 100644
index b4aca3c9ce..0000000000
--- a/src/content/reference/en/p5 copy/colorMode.mdx	
+++ /dev/null
@@ -1,271 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L751
-title: colorMode
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Changes the way color values are interpreted.</p>
-
-  <p>By default, the <code>Number</code> parameters for <a
-  href="/reference/p5/fill/">fill()</a>,
-
-  <a href="/reference/p5/stroke/">stroke()</a>,
-
-  <a href="/reference/p5/background/">background()</a>, and
-
-  <a href="/reference/p5/color/">color()</a> are defined by values between 0 and
-  255
-
-  using the RGB color model. This is equivalent to calling
-
-  <code>colorMode(RGB, 255)</code>. Pure red is <code>color(255, 0, 0)</code> in
-  this model.</p>
-
-  <p>Calling <code>colorMode(RGB, 100)</code> sets colors to use RGB color
-  values
-
-  between 0 and 100. Pure red is <code>color(100, 0, 0)</code> in this
-  model.</p>
-
-  <p>Calling <code>colorMode(HSB)</code> or <code>colorMode(HSL)</code> changes
-  to HSB or HSL system
-
-  instead of RGB. Pure red is <code>color(0, 100, 100)</code> in HSB and
-
-  <code>color(0, 100, 50)</code> in HSL.</p>
-
-  <p><a href="/reference/p5/p5.Color">p5.Color</a> objects remember the mode
-  that they were
-
-  created in. Changing modes doesn't affect their appearance.</p>
-line: 751
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Fill with pure red.
-      fill(255, 0, 0);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Fill with pure red.
-      fill(100, 0, 0);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Fill with pure red.
-      fill(0, 100, 100);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Fill with pure red.
-      fill(0, 100, 50);
-
-      circle(50, 50, 25);
-
-      describe('A gray square with a red circle at its center.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      for (let x = 0; x < 100; x += 1) {
-        for (let y = 0; y < 100; y += 1) {
-          stroke(x, y, 0);
-          point(x, y);
-        }
-      }
-
-      describe(
-        'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use HSB color with values in the range 0-100.
-      colorMode(HSB, 100);
-
-      for (let x = 0; x < 100; x += 1) {
-        for (let y = 0; y < 100; y += 1) {
-          stroke(x, y, 100);
-          point(x, y);
-        }
-      }
-
-      describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let myColor = color(180, 175, 230);
-      background(myColor);
-
-      // Use RGB color with values in the range 0-1.
-      colorMode(RGB, 1);
-
-      // Get the red, green, and blue color components.
-      let redValue = red(myColor);
-      let greenValue = green(myColor);
-      let blueValue = blue(myColor);
-
-      // Round the color components for display.
-      redValue = round(redValue, 2);
-      greenValue = round(greenValue, 2);
-      blueValue = round(blueValue, 2);
-
-      // Display the color components.
-      text(`Red: ${redValue}`, 10, 10, 80, 80);
-      text(`Green: ${greenValue}`, 10, 40, 80, 80);
-      text(`Blue: ${blueValue}`, 10, 70, 80, 80);
-
-      describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Use RGB color with alpha values in the range 0-1.
-      colorMode(RGB, 255, 255, 255, 1);
-
-      noFill();
-      strokeWeight(4);
-      stroke(255, 0, 10, 0.3);
-      circle(40, 40, 50);
-      circle(50, 60, 50);
-
-      describe('Two overlapping translucent pink circle outlines.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 751
-    params:
-      - name: mode
-        description: |
-          <p>either RGB, HSB or HSL, corresponding to
-                                   Red/Green/Blue and Hue/Saturation/Brightness
-                                   (or Lightness).</p>
-        type: Constant
-      - name: max
-        description: |
-          <p>range for all values.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 956
-    params:
-      - name: mode
-        description: ''
-        type: Constant
-      - name: max1
-        description: |
-          <p>range for the red or hue depending on the
-                                       current color mode.</p>
-        type: Number
-      - name: max2
-        description: |
-          <p>range for the green or saturation depending
-                                       on the current color mode.</p>
-        type: Number
-      - name: max3
-        description: |
-          <p>range for the blue or brightness/lightness
-                                       depending on the current color mode.</p>
-        type: Number
-      - name: maxA
-        description: |
-          <p>range for the alpha.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# colorMode
diff --git a/src/content/reference/en/p5 copy/concat.mdx b/src/content/reference/en/p5 copy/concat.mdx
deleted file mode 100644
index 1e83bf84c0..0000000000
--- a/src/content/reference/en/p5 copy/concat.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L112
-title: concat
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Concatenates two arrays, maps to Array.concat(). Does not modify the
-  input arrays.</p>
-line: 112
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat">arr1.concat(arr2)</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let arr1 = ['A', 'B', 'C'];
-      let arr2 = [1, 2, 3];
-
-      print(arr1); // ['A','B','C']
-      print(arr2); // [1,2,3]
-
-      let arr3 = concat(arr1, arr2);
-
-      print(arr1); // ['A','B','C']
-      print(arr2); // [1, 2, 3]
-      print(arr3); // ['A','B','C', 1, 2, 3]
-    }
-    </code></div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>first Array to concatenate</p>
-    type: Array
-  - name: b
-    description: |
-      <p>second Array to concatenate</p>
-    type: Array
-return:
-  description: concatenated array
-  type: Array
-chainable: false
----
-
-
-# concat
diff --git a/src/content/reference/en/p5 copy/cone.mdx b/src/content/reference/en/p5 copy/cone.mdx
deleted file mode 100644
index ff0756d0a5..0000000000
--- a/src/content/reference/en/p5 copy/cone.mdx	
+++ /dev/null
@@ -1,265 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1730
-title: cone
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a cone.</p>
-
-  <p>A cone is a 3D shape with triangular faces that connect a flat bottom to a
-
-  single point. Cones with few faces look like pyramids. Cones with many
-
-  faces have smooth surfaces.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>cone(20)</code>, it sets the radius of the cone’s base. By default,
-  <code>radius</code> is
-
-  50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cone(20, 30)</code>, it sets the cone’s height. By default,
-  <code>height</code> is
-
-  set to the cone’s <code>radius</code>.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cone(20, 30, 5)</code>, it sets the number of edges used to form
-  the
-
-  cone's base. Using more edges makes the base look more like a circle. By
-
-  default, <code>detailX</code> is 24.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cone(20, 30, 5, 7)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis connecting the base to the tip. All 3D shapes are made
-
-  by connecting triangles to form their surfaces. By default,
-  <code>detailY</code> is 1.</p>
-
-  <p>The fifth parameter, <code>cap</code>, is also optional. If a
-  <code>false</code> is passed, as
-
-  in <code>cone(20, 30, 5, 7, false)</code> the cone’s base won’t be drawn. By
-  default,
-
-  <code>cap</code> is <code>true</code>.</p>
-
-  <p>Note: <code>cone()</code> can only be used in WebGL mode.</p>
-line: 1730
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      cone();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius and height to 30.
-      cone(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      cone(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 5.
-      cone(30, 50, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white pyramid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 5.
-      cone(30, 50, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 2.
-      cone(30, 50, 24, 2);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cone on a gray background. Its base is missing.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cone.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 1.
-      // Don't draw its base.
-      cone(30, 50, 24, 1, false);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the cone's base. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: |
-      <p>height of the cone. Defaults to the value of <code>radius</code>.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of edges used to draw the base. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
-    type: Integer
-    optional: true
-  - name: cap
-    description: |
-      <p>whether to draw the cone's base.  Defaults to <code>true</code>.</p>
-    type: Boolean
-    optional: true
-chainable: true
----
-
-
-# cone
diff --git a/src/content/reference/en/p5 copy/console.mdx b/src/content/reference/en/p5 copy/console.mdx
deleted file mode 100644
index 411b08357e..0000000000
--- a/src/content/reference/en/p5 copy/console.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1988
-title: console
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>Prints a message to the web browser's console.</p>
-
-  <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/console/"
-  target="_blank">console</a>
-
-  object is helpful for printing messages while debugging. For example, it's
-
-  common to add a <code>console.log()</code> statement while studying how a
-  section of
-
-  code works:</p>
-
-  <pre><code class="language-js">if (isPlaying === true) {
-    // Add a console.log() statement to make sure this block of code runs.
-    console.log('Got here!');
-
-    // Game logic.
-  }
-
-  </code></pre>
-
-  <p><code>console.error()</code> is helpful for tracking errors because it
-  prints
-
-  formatted messages. For example, it's common to encounter errors when
-
-  loading media assets:</p>
-
-  <pre><code class="language-js">// Logs an error message with special
-  formatting.
-
-  function handleFailure(error) {
-    console.error('Oops!', error);
-  }
-
-
-  // Try to load an image and call handleError() if it fails.
-
-  loadImage('https://example.com/cat.jpg', handleImage, handleError);
-
-  </code></pre>
-line: 1988
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Prints "Hello!" to the console.
-      console.log('Hello!');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Try to load an image from a fake URL.
-      // Call handleError() if the image fails to load.
-      loadImage('https://example.com/cat.jpg', handleImage, handleError);
-    }
-
-    // Displays the image.
-    function handleImage(img) {
-      image(img, 0, 0);
-
-      describe('A cat on a gray background.');
-    }
-
-    // Prints the error.
-    function handleError(error) {
-      console.error('Oops!', error);
-
-      describe('A gray square.');
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# console
diff --git a/src/content/reference/en/p5 copy/constants/ADD.mdx b/src/content/reference/en/p5 copy/constants/ADD.mdx
deleted file mode 100644
index 9148f688e9..0000000000
--- a/src/content/reference/en/p5 copy/constants/ADD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L905
-title: ADD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 905
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ADD
diff --git a/src/content/reference/en/p5 copy/constants/ALT.mdx b/src/content/reference/en/p5 copy/constants/ALT.mdx
deleted file mode 100644
index a039e3919b..0000000000
--- a/src/content/reference/en/p5 copy/constants/ALT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L820
-title: ALT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 820
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# ALT
diff --git a/src/content/reference/en/p5 copy/constants/ARROW.mdx b/src/content/reference/en/p5 copy/constants/ARROW.mdx
deleted file mode 100644
index d2a0e065a1..0000000000
--- a/src/content/reference/en/p5 copy/constants/ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L55
-title: ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 55
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ARROW
diff --git a/src/content/reference/en/p5 copy/constants/AUTO.mdx b/src/content/reference/en/p5 copy/constants/AUTO.mdx
deleted file mode 100644
index 185fb15902..0000000000
--- a/src/content/reference/en/p5 copy/constants/AUTO.mdx	
+++ /dev/null
@@ -1,25 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L810
-title: AUTO
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>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 <a href="/reference/p5.Element/size/">size</a> function as
-  AUTO, at a time.</p>
-line: 810
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# AUTO
diff --git a/src/content/reference/en/p5 copy/constants/AXES.mdx b/src/content/reference/en/p5 copy/constants/AXES.mdx
deleted file mode 100644
index c6f60b6b89..0000000000
--- a/src/content/reference/en/p5 copy/constants/AXES.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1171
-title: AXES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1171
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# AXES
diff --git a/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx b/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx
deleted file mode 100644
index ee299ffcff..0000000000
--- a/src/content/reference/en/p5 copy/constants/BACKSPACE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L826
-title: BACKSPACE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 826
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# BACKSPACE
diff --git a/src/content/reference/en/p5 copy/constants/BASELINE.mdx b/src/content/reference/en/p5 copy/constants/BASELINE.mdx
deleted file mode 100644
index 200aa201ec..0000000000
--- a/src/content/reference/en/p5 copy/constants/BASELINE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L675
-title: BASELINE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 675
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BASELINE
diff --git a/src/content/reference/en/p5 copy/constants/BEVEL.mdx b/src/content/reference/en/p5 copy/constants/BEVEL.mdx
deleted file mode 100644
index a4af3693f7..0000000000
--- a/src/content/reference/en/p5 copy/constants/BEVEL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L777
-title: BEVEL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 777
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BEVEL
diff --git a/src/content/reference/en/p5 copy/constants/BEZIER.mdx b/src/content/reference/en/p5 copy/constants/BEZIER.mdx
deleted file mode 100644
index b2993b2c33..0000000000
--- a/src/content/reference/en/p5 copy/constants/BEZIER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1073
-title: BEZIER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1073
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BEZIER
diff --git a/src/content/reference/en/p5 copy/constants/BLEND.mdx b/src/content/reference/en/p5 copy/constants/BLEND.mdx
deleted file mode 100644
index bf367f05eb..0000000000
--- a/src/content/reference/en/p5 copy/constants/BLEND.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L893
-title: BLEND
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 893
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BLEND
diff --git a/src/content/reference/en/p5 copy/constants/BLUR.mdx b/src/content/reference/en/p5 copy/constants/BLUR.mdx
deleted file mode 100644
index 5580994e74..0000000000
--- a/src/content/reference/en/p5 copy/constants/BLUR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1019
-title: BLUR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1019
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BLUR
diff --git a/src/content/reference/en/p5 copy/constants/BOLD.mdx b/src/content/reference/en/p5 copy/constants/BOLD.mdx
deleted file mode 100644
index 6069c955e8..0000000000
--- a/src/content/reference/en/p5 copy/constants/BOLD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1036
-title: BOLD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1036
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BOLD
diff --git a/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx b/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx
deleted file mode 100644
index 2967579a9c..0000000000
--- a/src/content/reference/en/p5 copy/constants/BOLDITALIC.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1041
-title: BOLDITALIC
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1041
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BOLDITALIC
diff --git a/src/content/reference/en/p5 copy/constants/BOTTOM.mdx b/src/content/reference/en/p5 copy/constants/BOTTOM.mdx
deleted file mode 100644
index b01ded11ea..0000000000
--- a/src/content/reference/en/p5 copy/constants/BOTTOM.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L670
-title: BOTTOM
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 670
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BOTTOM
diff --git a/src/content/reference/en/p5 copy/constants/BURN.mdx b/src/content/reference/en/p5 copy/constants/BURN.mdx
deleted file mode 100644
index 7ba3764dac..0000000000
--- a/src/content/reference/en/p5 copy/constants/BURN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L976
-title: BURN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 976
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# BURN
diff --git a/src/content/reference/en/p5 copy/constants/CENTER.mdx b/src/content/reference/en/p5 copy/constants/CENTER.mdx
deleted file mode 100644
index cab0205cef..0000000000
--- a/src/content/reference/en/p5 copy/constants/CENTER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L660
-title: CENTER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 660
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CENTER
diff --git a/src/content/reference/en/p5 copy/constants/CHAR.mdx b/src/content/reference/en/p5 copy/constants/CHAR.mdx
deleted file mode 100644
index 564855787a..0000000000
--- a/src/content/reference/en/p5 copy/constants/CHAR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1046
-title: CHAR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1046
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CHAR
diff --git a/src/content/reference/en/p5 copy/constants/CHORD.mdx b/src/content/reference/en/p5 copy/constants/CHORD.mdx
deleted file mode 100644
index 40896bb3a1..0000000000
--- a/src/content/reference/en/p5 copy/constants/CHORD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L750
-title: CHORD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 750
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CHORD
diff --git a/src/content/reference/en/p5 copy/constants/CLAMP.mdx b/src/content/reference/en/p5 copy/constants/CLAMP.mdx
deleted file mode 100644
index 977b02599d..0000000000
--- a/src/content/reference/en/p5 copy/constants/CLAMP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1126
-title: CLAMP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1126
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CLAMP
diff --git a/src/content/reference/en/p5 copy/constants/CLOSE.mdx b/src/content/reference/en/p5 copy/constants/CLOSE.mdx
deleted file mode 100644
index 34bc946fe5..0000000000
--- a/src/content/reference/en/p5 copy/constants/CLOSE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L740
-title: CLOSE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 740
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CLOSE
diff --git a/src/content/reference/en/p5 copy/constants/CONTAIN.mdx b/src/content/reference/en/p5 copy/constants/CONTAIN.mdx
deleted file mode 100644
index 59d56be350..0000000000
--- a/src/content/reference/en/p5 copy/constants/CONTAIN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1188
-title: CONTAIN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1188
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CONTAIN
diff --git a/src/content/reference/en/p5 copy/constants/CONTROL.mdx b/src/content/reference/en/p5 copy/constants/CONTROL.mdx
deleted file mode 100644
index d620bb502d..0000000000
--- a/src/content/reference/en/p5 copy/constants/CONTROL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L831
-title: CONTROL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 831
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# CONTROL
diff --git a/src/content/reference/en/p5 copy/constants/CORNER.mdx b/src/content/reference/en/p5 copy/constants/CORNER.mdx
deleted file mode 100644
index e8b5eced3e..0000000000
--- a/src/content/reference/en/p5 copy/constants/CORNER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L635
-title: CORNER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 635
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CORNER
diff --git a/src/content/reference/en/p5 copy/constants/CORNERS.mdx b/src/content/reference/en/p5 copy/constants/CORNERS.mdx
deleted file mode 100644
index 85e4226b1e..0000000000
--- a/src/content/reference/en/p5 copy/constants/CORNERS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L640
-title: CORNERS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 640
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CORNERS
diff --git a/src/content/reference/en/p5 copy/constants/COVER.mdx b/src/content/reference/en/p5 copy/constants/COVER.mdx
deleted file mode 100644
index 3714b4bec3..0000000000
--- a/src/content/reference/en/p5 copy/constants/COVER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1194
-title: COVER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1194
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# COVER
diff --git a/src/content/reference/en/p5 copy/constants/CROSS.mdx b/src/content/reference/en/p5 copy/constants/CROSS.mdx
deleted file mode 100644
index eba1238e34..0000000000
--- a/src/content/reference/en/p5 copy/constants/CROSS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L60
-title: CROSS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 60
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CROSS
diff --git a/src/content/reference/en/p5 copy/constants/CURVE.mdx b/src/content/reference/en/p5 copy/constants/CURVE.mdx
deleted file mode 100644
index 3e46bf2151..0000000000
--- a/src/content/reference/en/p5 copy/constants/CURVE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1078
-title: CURVE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1078
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# CURVE
diff --git a/src/content/reference/en/p5 copy/constants/DARKEST.mdx b/src/content/reference/en/p5 copy/constants/DARKEST.mdx
deleted file mode 100644
index b86d06dec4..0000000000
--- a/src/content/reference/en/p5 copy/constants/DARKEST.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L913
-title: DARKEST
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 913
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DARKEST
diff --git a/src/content/reference/en/p5 copy/constants/DEGREES.mdx b/src/content/reference/en/p5 copy/constants/DEGREES.mdx
deleted file mode 100644
index c259f456ad..0000000000
--- a/src/content/reference/en/p5 copy/constants/DEGREES.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L547
-title: DEGREES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>String</code> constant that's used to set the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
-  and
-
-  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
-  radians.
-
-  Calling <code>angleMode(DEGREES)</code> ensures that angles are measured in
-  units of
-
-  degrees.</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
-line: 547
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a red arc from 0 to HALF_PI radians.
-      fill(255, 0, 0);
-      arc(50, 50, 80, 80, 0, HALF_PI);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Draw a blue arc from 90˚ to 180˚.
-      fill(0, 0, 255);
-      arc(50, 50, 80, 80, 90, 180);
-
-      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# DEGREES
diff --git a/src/content/reference/en/p5 copy/constants/DELETE.mdx b/src/content/reference/en/p5 copy/constants/DELETE.mdx
deleted file mode 100644
index 3bef8a3983..0000000000
--- a/src/content/reference/en/p5 copy/constants/DELETE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L836
-title: DELETE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 836
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# DELETE
diff --git a/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx b/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx
deleted file mode 100644
index 27d7e0880c..0000000000
--- a/src/content/reference/en/p5 copy/constants/DIFFERENCE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L924
-title: DIFFERENCE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 924
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DIFFERENCE
diff --git a/src/content/reference/en/p5 copy/constants/DILATE.mdx b/src/content/reference/en/p5 copy/constants/DILATE.mdx
deleted file mode 100644
index 5eca5b06dd..0000000000
--- a/src/content/reference/en/p5 copy/constants/DILATE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1009
-title: DILATE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1009
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DILATE
diff --git a/src/content/reference/en/p5 copy/constants/DODGE.mdx b/src/content/reference/en/p5 copy/constants/DODGE.mdx
deleted file mode 100644
index ba1594bfe4..0000000000
--- a/src/content/reference/en/p5 copy/constants/DODGE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L970
-title: DODGE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 970
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# DODGE
diff --git a/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx b/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx
deleted file mode 100644
index c1d80ae679..0000000000
--- a/src/content/reference/en/p5 copy/constants/DOWN_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L841
-title: DOWN_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 841
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# DOWN\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ENTER.mdx b/src/content/reference/en/p5 copy/constants/ENTER.mdx
deleted file mode 100644
index 0ded2aec7f..0000000000
--- a/src/content/reference/en/p5 copy/constants/ENTER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L846
-title: ENTER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 846
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# ENTER
diff --git a/src/content/reference/en/p5 copy/constants/ERODE.mdx b/src/content/reference/en/p5 copy/constants/ERODE.mdx
deleted file mode 100644
index 9dba021043..0000000000
--- a/src/content/reference/en/p5 copy/constants/ERODE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1014
-title: ERODE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1014
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ERODE
diff --git a/src/content/reference/en/p5 copy/constants/ESCAPE.mdx b/src/content/reference/en/p5 copy/constants/ESCAPE.mdx
deleted file mode 100644
index 53256ed7ce..0000000000
--- a/src/content/reference/en/p5 copy/constants/ESCAPE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L851
-title: ESCAPE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 851
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# ESCAPE
diff --git a/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx b/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx
deleted file mode 100644
index 61c3572125..0000000000
--- a/src/content/reference/en/p5 copy/constants/EXCLUSION.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L934
-title: EXCLUSION
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 934
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# EXCLUSION
diff --git a/src/content/reference/en/p5 copy/constants/FALLBACK.mdx b/src/content/reference/en/p5 copy/constants/FALLBACK.mdx
deleted file mode 100644
index 6c9f4ec37c..0000000000
--- a/src/content/reference/en/p5 copy/constants/FALLBACK.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1182
-title: FALLBACK
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1182
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FALLBACK
diff --git a/src/content/reference/en/p5 copy/constants/FILL.mdx b/src/content/reference/en/p5 copy/constants/FILL.mdx
deleted file mode 100644
index 9e2ca1ce96..0000000000
--- a/src/content/reference/en/p5 copy/constants/FILL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1090
-title: FILL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1090
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FILL
diff --git a/src/content/reference/en/p5 copy/constants/FLAT.mdx b/src/content/reference/en/p5 copy/constants/FLAT.mdx
deleted file mode 100644
index 50d8b95b1e..0000000000
--- a/src/content/reference/en/p5 copy/constants/FLAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1138
-title: FLAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1138
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FLAT
diff --git a/src/content/reference/en/p5 copy/constants/FLOAT.mdx b/src/content/reference/en/p5 copy/constants/FLOAT.mdx
deleted file mode 100644
index b063ffc631..0000000000
--- a/src/content/reference/en/p5 copy/constants/FLOAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1212
-title: FLOAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1212
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/GRAY.mdx b/src/content/reference/en/p5 copy/constants/GRAY.mdx
deleted file mode 100644
index ca8a56d090..0000000000
--- a/src/content/reference/en/p5 copy/constants/GRAY.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L989
-title: GRAY
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 989
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# GRAY
diff --git a/src/content/reference/en/p5 copy/constants/GRID.mdx b/src/content/reference/en/p5 copy/constants/GRID.mdx
deleted file mode 100644
index 683bbf43f9..0000000000
--- a/src/content/reference/en/p5 copy/constants/GRID.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1165
-title: GRID
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1165
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# GRID
diff --git a/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx b/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx
deleted file mode 100644
index a70c409626..0000000000
--- a/src/content/reference/en/p5 copy/constants/HALF_FLOAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1218
-title: HALF_FLOAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1218
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HALF\_FLOAT
diff --git a/src/content/reference/en/p5 copy/constants/HALF_PI.mdx b/src/content/reference/en/p5 copy/constants/HALF_PI.mdx
deleted file mode 100644
index 212458ee9e..0000000000
--- a/src/content/reference/en/p5 copy/constants/HALF_PI.mdx	
+++ /dev/null
@@ -1,109 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L88
-title: HALF_PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 1.5708.</p>
-
-  <p><code>HALF_PI</code> is half the value of the mathematical constant π. It's
-  useful for
-
-  many tasks that involve rotation and oscillation. For example, calling
-
-  <code>rotate(HALF_PI)</code> rotates the coordinate system
-  <code>HALF_PI</code> radians, which is
-
-  a quarter turn (90˚).</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 88
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to HALF_PI.
-      arc(50, 50, 80, 80, 0, HALF_PI);
-
-      describe('The bottom-right quarter of a circle drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a quarter turn.
-      rotate(HALF_PI);
-
-      // Draw the same line, rotated.
-      line(0, 0, 40, 0);
-
-      describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator.
-      fill(0, 0, 255);
-      circle(x2, 0, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# HALF\_PI
diff --git a/src/content/reference/en/p5 copy/constants/HAND.mdx b/src/content/reference/en/p5 copy/constants/HAND.mdx
deleted file mode 100644
index 0bd864fb59..0000000000
--- a/src/content/reference/en/p5 copy/constants/HAND.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L65
-title: HAND
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 65
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HAND
diff --git a/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx
deleted file mode 100644
index 9f3f9742fc..0000000000
--- a/src/content/reference/en/p5 copy/constants/HARD_LIGHT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L960
-title: HARD_LIGHT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 960
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HARD\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/HSB.mdx b/src/content/reference/en/p5 copy/constants/HSB.mdx
deleted file mode 100644
index d921d5405e..0000000000
--- a/src/content/reference/en/p5 copy/constants/HSB.mdx	
+++ /dev/null
@@ -1,24 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L794
-title: HSB
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>HSB (hue, saturation, brightness) is a type of color model.
-
-  You can learn more about it at
-
-  <a
-  href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">HSB</a>.</p>
-line: 794
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HSB
diff --git a/src/content/reference/en/p5 copy/constants/HSL.mdx b/src/content/reference/en/p5 copy/constants/HSL.mdx
deleted file mode 100644
index aa660c2da5..0000000000
--- a/src/content/reference/en/p5 copy/constants/HSL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L803
-title: HSL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 803
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# HSL
diff --git a/src/content/reference/en/p5 copy/constants/IMAGE.mdx b/src/content/reference/en/p5 copy/constants/IMAGE.mdx
deleted file mode 100644
index 479af890bb..0000000000
--- a/src/content/reference/en/p5 copy/constants/IMAGE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1108
-title: IMAGE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1108
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# IMAGE
diff --git a/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx b/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx
deleted file mode 100644
index 52b38ee8b5..0000000000
--- a/src/content/reference/en/p5 copy/constants/IMMEDIATE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1100
-title: IMMEDIATE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1100
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# IMMEDIATE
diff --git a/src/content/reference/en/p5 copy/constants/INVERT.mdx b/src/content/reference/en/p5 copy/constants/INVERT.mdx
deleted file mode 100644
index 9c383dd4d1..0000000000
--- a/src/content/reference/en/p5 copy/constants/INVERT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L999
-title: INVERT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 999
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# INVERT
diff --git a/src/content/reference/en/p5 copy/constants/ITALIC.mdx b/src/content/reference/en/p5 copy/constants/ITALIC.mdx
deleted file mode 100644
index d0a9a1f2e5..0000000000
--- a/src/content/reference/en/p5 copy/constants/ITALIC.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1031
-title: ITALIC
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1031
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ITALIC
diff --git a/src/content/reference/en/p5 copy/constants/LABEL.mdx b/src/content/reference/en/p5 copy/constants/LABEL.mdx
deleted file mode 100644
index 92786b3feb..0000000000
--- a/src/content/reference/en/p5 copy/constants/LABEL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1177
-title: LABEL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1177
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LABEL
diff --git a/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx b/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx
deleted file mode 100644
index c1709051cd..0000000000
--- a/src/content/reference/en/p5 copy/constants/LANDSCAPE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1150
-title: LANDSCAPE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1150
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LANDSCAPE
diff --git a/src/content/reference/en/p5 copy/constants/LEFT.mdx b/src/content/reference/en/p5 copy/constants/LEFT.mdx
deleted file mode 100644
index 6e48fe2d99..0000000000
--- a/src/content/reference/en/p5 copy/constants/LEFT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L655
-title: LEFT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 655
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LEFT
diff --git a/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx
deleted file mode 100644
index 8628e56688..0000000000
--- a/src/content/reference/en/p5 copy/constants/LEFT_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L856
-title: LEFT_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 856
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LEFT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx b/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx
deleted file mode 100644
index bd15662468..0000000000
--- a/src/content/reference/en/p5 copy/constants/LIGHTEST.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L918
-title: LIGHTEST
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 918
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LIGHTEST
diff --git a/src/content/reference/en/p5 copy/constants/LINEAR.mdx b/src/content/reference/en/p5 copy/constants/LINEAR.mdx
deleted file mode 100644
index e56c663585..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINEAR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1063
-title: LINEAR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1063
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# LINEAR
diff --git a/src/content/reference/en/p5 copy/constants/LINES.mdx b/src/content/reference/en/p5 copy/constants/LINES.mdx
deleted file mode 100644
index 9d7d5d2abc..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINES.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L687
-title: LINES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 687
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LINES
diff --git a/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx b/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx
deleted file mode 100644
index 2a566fa4c7..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINE_LOOP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L699
-title: LINE_LOOP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 699
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LINE\_LOOP
diff --git a/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx
deleted file mode 100644
index 816e857d01..0000000000
--- a/src/content/reference/en/p5 copy/constants/LINE_STRIP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L693
-title: LINE_STRIP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 693
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# LINE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/MIRROR.mdx b/src/content/reference/en/p5 copy/constants/MIRROR.mdx
deleted file mode 100644
index 9b2bcd7146..0000000000
--- a/src/content/reference/en/p5 copy/constants/MIRROR.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1131
-title: MIRROR
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1131
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MIRROR
diff --git a/src/content/reference/en/p5 copy/constants/MITER.mdx b/src/content/reference/en/p5 copy/constants/MITER.mdx
deleted file mode 100644
index 533039ecc8..0000000000
--- a/src/content/reference/en/p5 copy/constants/MITER.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L782
-title: MITER
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 782
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MITER
diff --git a/src/content/reference/en/p5 copy/constants/MOVE.mdx b/src/content/reference/en/p5 copy/constants/MOVE.mdx
deleted file mode 100644
index aea9bf8a71..0000000000
--- a/src/content/reference/en/p5 copy/constants/MOVE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L70
-title: MOVE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 70
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MOVE
diff --git a/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx b/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx
deleted file mode 100644
index ce343b4bf2..0000000000
--- a/src/content/reference/en/p5 copy/constants/MULTIPLY.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L939
-title: MULTIPLY
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 939
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# MULTIPLY
diff --git a/src/content/reference/en/p5 copy/constants/NEAREST.mdx b/src/content/reference/en/p5 copy/constants/NEAREST.mdx
deleted file mode 100644
index 9fba7e46cf..0000000000
--- a/src/content/reference/en/p5 copy/constants/NEAREST.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1116
-title: NEAREST
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1116
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# NEAREST
diff --git a/src/content/reference/en/p5 copy/constants/NORMAL.mdx b/src/content/reference/en/p5 copy/constants/NORMAL.mdx
deleted file mode 100644
index 2c49e02fbf..0000000000
--- a/src/content/reference/en/p5 copy/constants/NORMAL.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1026
-title: NORMAL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1026
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# NORMAL
diff --git a/src/content/reference/en/p5 copy/constants/OPAQUE.mdx b/src/content/reference/en/p5 copy/constants/OPAQUE.mdx
deleted file mode 100644
index 9ddf599dd1..0000000000
--- a/src/content/reference/en/p5 copy/constants/OPAQUE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L994
-title: OPAQUE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 994
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# OPAQUE
diff --git a/src/content/reference/en/p5 copy/constants/OPEN.mdx b/src/content/reference/en/p5 copy/constants/OPEN.mdx
deleted file mode 100644
index 29011d1e69..0000000000
--- a/src/content/reference/en/p5 copy/constants/OPEN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L745
-title: OPEN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 745
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# OPEN
diff --git a/src/content/reference/en/p5 copy/constants/OPTION.mdx b/src/content/reference/en/p5 copy/constants/OPTION.mdx
deleted file mode 100644
index 8ea0e625db..0000000000
--- a/src/content/reference/en/p5 copy/constants/OPTION.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L861
-title: OPTION
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 861
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# OPTION
diff --git a/src/content/reference/en/p5 copy/constants/OVERLAY.mdx b/src/content/reference/en/p5 copy/constants/OVERLAY.mdx
deleted file mode 100644
index ccb03411bb..0000000000
--- a/src/content/reference/en/p5 copy/constants/OVERLAY.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L955
-title: OVERLAY
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 955
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# OVERLAY
diff --git a/src/content/reference/en/p5 copy/constants/P2D.mdx b/src/content/reference/en/p5 copy/constants/P2D.mdx
deleted file mode 100644
index 83f09b1d9c..0000000000
--- a/src/content/reference/en/p5 copy/constants/P2D.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L18
-title: P2D
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: |
-  <p>The default, two-dimensional renderer.</p>
-line: 18
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# P2D
diff --git a/src/content/reference/en/p5 copy/constants/PI.mdx b/src/content/reference/en/p5 copy/constants/PI.mdx
deleted file mode 100644
index bddf509592..0000000000
--- a/src/content/reference/en/p5 copy/constants/PI.mdx	
+++ /dev/null
@@ -1,108 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L178
-title: PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 3.1416.</p>
-
-  <p><code>PI</code> is the mathematical constant π. It's useful for many tasks
-  that
-
-  involve rotation and oscillation. For example, calling <code>rotate(PI)</code>
-  rotates
-
-  the coordinate system <code>PI</code> radians, which is a half turn
-  (180˚).</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 178
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to PI.
-      arc(50, 50, 80, 80, 0, PI);
-
-      describe('The bottom half of a circle drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a half turn.
-      rotate(PI);
-
-      // Draw the same line, rotated.
-      line(0, 0, 40, 0);
-
-      describe('A horizontal black line on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle and a blue circle oscillate from left to right on a gray background. The circles drift apart, then meet in the middle, over and over again.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator.
-      fill(0, 0, 255);
-      circle(x2, 0, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# PI
diff --git a/src/content/reference/en/p5 copy/constants/PIE.mdx b/src/content/reference/en/p5 copy/constants/PIE.mdx
deleted file mode 100644
index 7be0810e6e..0000000000
--- a/src/content/reference/en/p5 copy/constants/PIE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L755
-title: PIE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 755
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# PIE
diff --git a/src/content/reference/en/p5 copy/constants/POINTS.mdx b/src/content/reference/en/p5 copy/constants/POINTS.mdx
deleted file mode 100644
index 8dea326a14..0000000000
--- a/src/content/reference/en/p5 copy/constants/POINTS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L681
-title: POINTS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 681
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# POINTS
diff --git a/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx b/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx
deleted file mode 100644
index 492546578c..0000000000
--- a/src/content/reference/en/p5 copy/constants/PORTRAIT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1155
-title: PORTRAIT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1155
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# PORTRAIT
diff --git a/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx b/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx
deleted file mode 100644
index 198c365591..0000000000
--- a/src/content/reference/en/p5 copy/constants/POSTERIZE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1004
-title: POSTERIZE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1004
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# POSTERIZE
diff --git a/src/content/reference/en/p5 copy/constants/PROJECT.mdx b/src/content/reference/en/p5 copy/constants/PROJECT.mdx
deleted file mode 100644
index ce6f7dbaac..0000000000
--- a/src/content/reference/en/p5 copy/constants/PROJECT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L760
-title: PROJECT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 760
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# PROJECT
diff --git a/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx b/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx
deleted file mode 100644
index 49e8d2cc19..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUADRATIC.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1068
-title: QUADRATIC
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1068
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# QUADRATIC
diff --git a/src/content/reference/en/p5 copy/constants/QUADS.mdx b/src/content/reference/en/p5 copy/constants/QUADS.mdx
deleted file mode 100644
index c67a193a4f..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUADS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L723
-title: QUADS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 723
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# QUADS
diff --git a/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx b/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx
deleted file mode 100644
index c1ce9d4291..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUAD_STRIP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L728
-title: QUAD_STRIP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 728
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# QUAD\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx b/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx
deleted file mode 100644
index 5f4cc24bc1..0000000000
--- a/src/content/reference/en/p5 copy/constants/QUARTER_PI.mdx	
+++ /dev/null
@@ -1,109 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L267
-title: QUARTER_PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 0.7854.</p>
-
-  <p><code>QUARTER_PI</code> is one-fourth the value of the mathematical
-  constant π. It's
-
-  useful for many tasks that involve rotation and oscillation. For example,
-
-  calling <code>rotate(QUARTER_PI)</code> rotates the coordinate system
-  <code>QUARTER_PI</code>
-
-  radians, which is an eighth of a turn (45˚).</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 267
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to QUARTER_PI.
-      arc(50, 50, 80, 80, 0, QUARTER_PI);
-
-      describe('A one-eighth slice of a circle drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate an eighth turn.
-      rotate(QUARTER_PI);
-
-      // Draw the same line, rotated.
-      line(0, 0, 40, 0);
-
-      describe('Two black lines that form a "V" opening towards the bottom-right corner of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator.
-      fill(0, 0, 255);
-      circle(x2, 0, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# QUARTER\_PI
diff --git a/src/content/reference/en/p5 copy/constants/RADIANS.mdx b/src/content/reference/en/p5 copy/constants/RADIANS.mdx
deleted file mode 100644
index 856db37b9f..0000000000
--- a/src/content/reference/en/p5 copy/constants/RADIANS.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L587
-title: RADIANS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>String</code> constant that's used to set the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, functions such as <a href="/reference/p5/rotate/">rotate()</a>
-  and
-
-  <a href="/reference/p5/sin/">sin()</a> expect angles measured in units of
-  radians.
-
-  Calling <code>angleMode(RADIANS)</code> ensures that angles are measured in
-  units of
-
-  radians. Doing so can be useful if the
-
-  <a href="/reference/p5/angleMode/">angleMode()</a> has been set to
-
-  <a href="/reference/p5/DEGREES/">DEGREES</a>.</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚.</p>
-line: 587
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      // Draw a red arc from 0˚ to 90˚.
-      fill(255, 0, 0);
-      arc(50, 50, 80, 80, 0, 90);
-
-      // Use radians.
-      angleMode(RADIANS);
-
-      // Draw a blue arc from HALF_PI to PI.
-      fill(0, 0, 255);
-      arc(50, 50, 80, 80, HALF_PI, PI);
-
-      describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# RADIANS
diff --git a/src/content/reference/en/p5 copy/constants/RADIUS.mdx b/src/content/reference/en/p5 copy/constants/RADIUS.mdx
deleted file mode 100644
index 95f1dcdeef..0000000000
--- a/src/content/reference/en/p5 copy/constants/RADIUS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L645
-title: RADIUS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 645
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RADIUS
diff --git a/src/content/reference/en/p5 copy/constants/REMOVE.mdx b/src/content/reference/en/p5 copy/constants/REMOVE.mdx
deleted file mode 100644
index c2daffc564..0000000000
--- a/src/content/reference/en/p5 copy/constants/REMOVE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L899
-title: REMOVE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 899
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# REMOVE
diff --git a/src/content/reference/en/p5 copy/constants/REPEAT.mdx b/src/content/reference/en/p5 copy/constants/REPEAT.mdx
deleted file mode 100644
index c9e75c8bec..0000000000
--- a/src/content/reference/en/p5 copy/constants/REPEAT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1121
-title: REPEAT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1121
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# REPEAT
diff --git a/src/content/reference/en/p5 copy/constants/REPLACE.mdx b/src/content/reference/en/p5 copy/constants/REPLACE.mdx
deleted file mode 100644
index 8a04f06130..0000000000
--- a/src/content/reference/en/p5 copy/constants/REPLACE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L949
-title: REPLACE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 949
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# REPLACE
diff --git a/src/content/reference/en/p5 copy/constants/RETURN.mdx b/src/content/reference/en/p5 copy/constants/RETURN.mdx
deleted file mode 100644
index 3069efc256..0000000000
--- a/src/content/reference/en/p5 copy/constants/RETURN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L866
-title: RETURN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 866
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# RETURN
diff --git a/src/content/reference/en/p5 copy/constants/RGB.mdx b/src/content/reference/en/p5 copy/constants/RGB.mdx
deleted file mode 100644
index b0ae826064..0000000000
--- a/src/content/reference/en/p5 copy/constants/RGB.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L789
-title: RGB
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 789
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RGB
diff --git a/src/content/reference/en/p5 copy/constants/RGBA.mdx b/src/content/reference/en/p5 copy/constants/RGBA.mdx
deleted file mode 100644
index 256949cfd1..0000000000
--- a/src/content/reference/en/p5 copy/constants/RGBA.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1224
-title: RGBA
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1224
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RGBA
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT.mdx b/src/content/reference/en/p5 copy/constants/RIGHT.mdx
deleted file mode 100644
index e9f69e8a80..0000000000
--- a/src/content/reference/en/p5 copy/constants/RIGHT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L650
-title: RIGHT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 650
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# RIGHT
diff --git a/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx b/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx
deleted file mode 100644
index 731ab29fb5..0000000000
--- a/src/content/reference/en/p5 copy/constants/RIGHT_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L871
-title: RIGHT_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 871
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# RIGHT\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/ROUND.mdx b/src/content/reference/en/p5 copy/constants/ROUND.mdx
deleted file mode 100644
index 50426d2636..0000000000
--- a/src/content/reference/en/p5 copy/constants/ROUND.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L772
-title: ROUND
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 772
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# ROUND
diff --git a/src/content/reference/en/p5 copy/constants/SCREEN.mdx b/src/content/reference/en/p5 copy/constants/SCREEN.mdx
deleted file mode 100644
index 65f2e6192d..0000000000
--- a/src/content/reference/en/p5 copy/constants/SCREEN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L944
-title: SCREEN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 944
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SCREEN
diff --git a/src/content/reference/en/p5 copy/constants/SHIFT.mdx b/src/content/reference/en/p5 copy/constants/SHIFT.mdx
deleted file mode 100644
index e48b091ab3..0000000000
--- a/src/content/reference/en/p5 copy/constants/SHIFT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L876
-title: SHIFT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 876
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# SHIFT
diff --git a/src/content/reference/en/p5 copy/constants/SMOOTH.mdx b/src/content/reference/en/p5 copy/constants/SMOOTH.mdx
deleted file mode 100644
index 816be1029b..0000000000
--- a/src/content/reference/en/p5 copy/constants/SMOOTH.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1143
-title: SMOOTH
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1143
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SMOOTH
diff --git a/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx b/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx
deleted file mode 100644
index 846e6fe72b..0000000000
--- a/src/content/reference/en/p5 copy/constants/SOFT_LIGHT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L965
-title: SOFT_LIGHT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 965
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SOFT\_LIGHT
diff --git a/src/content/reference/en/p5 copy/constants/SQUARE.mdx b/src/content/reference/en/p5 copy/constants/SQUARE.mdx
deleted file mode 100644
index 7b5da139d7..0000000000
--- a/src/content/reference/en/p5 copy/constants/SQUARE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L766
-title: SQUARE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 766
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SQUARE
diff --git a/src/content/reference/en/p5 copy/constants/STROKE.mdx b/src/content/reference/en/p5 copy/constants/STROKE.mdx
deleted file mode 100644
index 16cfa32e5e..0000000000
--- a/src/content/reference/en/p5 copy/constants/STROKE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1085
-title: STROKE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1085
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# STROKE
diff --git a/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx b/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx
deleted file mode 100644
index 2bd6d94fe9..0000000000
--- a/src/content/reference/en/p5 copy/constants/SUBTRACT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L929
-title: SUBTRACT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 929
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# SUBTRACT
diff --git a/src/content/reference/en/p5 copy/constants/TAB.mdx b/src/content/reference/en/p5 copy/constants/TAB.mdx
deleted file mode 100644
index cf89117ae4..0000000000
--- a/src/content/reference/en/p5 copy/constants/TAB.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L881
-title: TAB
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 881
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TAB
diff --git a/src/content/reference/en/p5 copy/constants/TAU.mdx b/src/content/reference/en/p5 copy/constants/TAU.mdx
deleted file mode 100644
index a553339913..0000000000
--- a/src/content/reference/en/p5 copy/constants/TAU.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L357
-title: TAU
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
-
-  <p><code>TAU</code> is twice the value of the mathematical constant π. It's
-  useful for
-
-  many tasks that involve rotation and oscillation. For example, calling
-
-  <code>rotate(TAU)</code> rotates the coordinate system <code>TAU</code>
-  radians, which is one
-
-  full turn (360˚). <code>TAU</code> and <code>TWO_PI</code> are equal.</p>
-
-  <p>Note: <code>TAU</code> radians equals 360˚, <code>PI</code> radians equals
-  180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 357
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to TAU.
-      arc(50, 50, 80, 80, 0, TAU);
-
-      describe('A white circle drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a full turn.
-      rotate(TAU);
-
-      // Style the second line.
-      strokeWeight(5);
-
-      // Draw the same line, shorter and rotated.
-      line(0, 0, 20, 0);
-
-      describe(
-        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle with a blue center oscillates from left to right on a gray background.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + TAU);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator, smaller.
-      fill(0, 0, 255);
-      circle(x2, 0, 10);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# TAU
diff --git a/src/content/reference/en/p5 copy/constants/TESS.mdx b/src/content/reference/en/p5 copy/constants/TESS.mdx
deleted file mode 100644
index e6f853e8ab..0000000000
--- a/src/content/reference/en/p5 copy/constants/TESS.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L734
-title: TESS
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 734
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TESS
diff --git a/src/content/reference/en/p5 copy/constants/TEXT.mdx b/src/content/reference/en/p5 copy/constants/TEXT.mdx
deleted file mode 100644
index 157a90001a..0000000000
--- a/src/content/reference/en/p5 copy/constants/TEXT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L75
-title: TEXT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 75
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TEXT
diff --git a/src/content/reference/en/p5 copy/constants/TEXTURE.mdx b/src/content/reference/en/p5 copy/constants/TEXTURE.mdx
deleted file mode 100644
index 8ada92f376..0000000000
--- a/src/content/reference/en/p5 copy/constants/TEXTURE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1095
-title: TEXTURE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1095
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TEXTURE
diff --git a/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx b/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx
deleted file mode 100644
index f12e6ea336..0000000000
--- a/src/content/reference/en/p5 copy/constants/THRESHOLD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L984
-title: THRESHOLD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 984
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# THRESHOLD
diff --git a/src/content/reference/en/p5 copy/constants/TOP.mdx b/src/content/reference/en/p5 copy/constants/TOP.mdx
deleted file mode 100644
index a91b5f4824..0000000000
--- a/src/content/reference/en/p5 copy/constants/TOP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L665
-title: TOP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 665
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# TOP
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx
deleted file mode 100644
index ec281d033e..0000000000
--- a/src/content/reference/en/p5 copy/constants/TRIANGLES.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L705
-title: TRIANGLES
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 705
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TRIANGLES
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx
deleted file mode 100644
index bcd5d5f5a1..0000000000
--- a/src/content/reference/en/p5 copy/constants/TRIANGLE_FAN.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L711
-title: TRIANGLE_FAN
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 711
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TRIANGLE\_FAN
diff --git a/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx b/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx
deleted file mode 100644
index fefe226e17..0000000000
--- a/src/content/reference/en/p5 copy/constants/TRIANGLE_STRIP.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L717
-title: TRIANGLE_STRIP
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 717
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# TRIANGLE\_STRIP
diff --git a/src/content/reference/en/p5 copy/constants/TWO_PI.mdx b/src/content/reference/en/p5 copy/constants/TWO_PI.mdx
deleted file mode 100644
index ed62a10b0f..0000000000
--- a/src/content/reference/en/p5 copy/constants/TWO_PI.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L452
-title: TWO_PI
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>A <code>Number</code> constant that's approximately 6.2382.</p>
-
-  <p><code>TWO_PI</code> is twice the value of the mathematical constant π. It's
-  useful for
-
-  many tasks that involve rotation and oscillation. For example, calling
-
-  <code>rotate(TWO_PI)</code> rotates the coordinate system <code>TWO_PI</code>
-  radians, which is
-
-  one full turn (360˚). <code>TWO_PI</code> and <code>TAU</code> are equal.</p>
-
-  <p>Note: <code>TWO_PI</code> radians equals 360˚, <code>PI</code> radians
-  equals 180˚, <code>HALF_PI</code>
-
-  radians equals 90˚, and <code>QUARTER_PI</code> radians equals 45˚.</p>
-line: 452
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw an arc from 0 to TWO_PI.
-      arc(50, 50, 80, 80, 0, TWO_PI);
-
-      describe('A white circle drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a line.
-      line(0, 0, 40, 0);
-
-      // Rotate a full turn.
-      rotate(TWO_PI);
-
-      // Style the second line.
-      strokeWeight(5);
-
-      // Draw the same line, shorter and rotated.
-      line(0, 0, 20, 0);
-
-      describe(
-        'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A red circle with a blue center oscillates from left to right on a gray background.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Calculate the x-coordinates.
-      let x1 = 40 * sin(frameCount * 0.05);
-      let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);
-
-      // Style the oscillators.
-      noStroke();
-
-      // Draw the red oscillator.
-      fill(255, 0, 0);
-      circle(x1, 0, 20);
-
-      // Draw the blue oscillator, smaller.
-      fill(0, 0, 255);
-      circle(x2, 0, 10);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# TWO\_PI
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx
deleted file mode 100644
index 00acfe29c0..0000000000
--- a/src/content/reference/en/p5 copy/constants/UNSIGNED_BYTE.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1200
-title: UNSIGNED_BYTE
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1200
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# UNSIGNED\_BYTE
diff --git a/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx b/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx
deleted file mode 100644
index f060682a13..0000000000
--- a/src/content/reference/en/p5 copy/constants/UNSIGNED_INT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1206
-title: UNSIGNED_INT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1206
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# UNSIGNED\_INT
diff --git a/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx b/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx
deleted file mode 100644
index e0e0326aa6..0000000000
--- a/src/content/reference/en/p5 copy/constants/UP_ARROW.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L886
-title: UP_ARROW
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 886
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# UP\_ARROW
diff --git a/src/content/reference/en/p5 copy/constants/VERSION.mdx b/src/content/reference/en/p5 copy/constants/VERSION.mdx
deleted file mode 100644
index f9f62fca55..0000000000
--- a/src/content/reference/en/p5 copy/constants/VERSION.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L9
-title: VERSION
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: |
-  <p>Version of this p5.js.</p>
-line: 9
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# VERSION
diff --git a/src/content/reference/en/p5 copy/constants/WAIT.mdx b/src/content/reference/en/p5 copy/constants/WAIT.mdx
deleted file mode 100644
index 833f77ee4f..0000000000
--- a/src/content/reference/en/p5 copy/constants/WAIT.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L80
-title: WAIT
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 80
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WAIT
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL.mdx b/src/content/reference/en/p5 copy/constants/WEBGL.mdx
deleted file mode 100644
index 2919ec489c..0000000000
--- a/src/content/reference/en/p5 copy/constants/WEBGL.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L24
-title: WEBGL
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: >
-  <p>One of the two render modes in p5.js, used for computationally intensive
-  tasks like 3D rendering and shaders.</p>
-
-  <p><code>WEBGL</code> differs from the default <a
-  href="/reference/p5/P2D/"><code>P2D</code></a> renderer in the following
-  ways:</p>
-
-  <ul>
-
-  <li><strong>Coordinate System</strong> - When drawing in <code>WEBGL</code>
-  mode, the origin point (0,0,0) is located at the center of the screen, not the
-  top-left corner. See <a
-  href="https://p5js.org/tutorials/coordinates-and-transformations/">the
-  tutorial page about coordinates and transformations</a>.</li>
-
-  <li><strong>3D Shapes</strong> - <code>WEBGL</code> mode can be used to draw
-  3-dimensional shapes like <a href="/reference/p5/box/">box()</a>, <a
-  href="/reference/p5/sphere/">sphere()</a>, <a
-  href="/reference/p5/cone/">cone()</a>, and <a
-  href="https://p5js.org/reference/#3D%20Primitives/">more</a>. See <a
-  href="https://p5js.org/tutorials/custom-geometry/">the tutorial page about
-  custom geometry</a> to make more complex objects.</li>
-
-  <li><strong>Shape Detail</strong> - When drawing in <code>WEBGL</code> mode,
-  you can specify how smooth curves should be drawn by using a
-  <code>detail</code> parameter. See <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#3d-primitives-shapes">the
-  wiki section about shapes</a> for a more information and an example.</li>
-
-  <li><strong>Textures</strong> - A texture is like a skin that wraps onto a
-  shape. See <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#textures">the
-  wiki section about textures</a> for examples of mapping images onto surfaces
-  with textures.</li>
-
-  <li><strong>Materials and Lighting</strong> - <code>WEBGL</code> offers
-  different types of lights like <a
-  href="/reference/p5/ambientLight/">ambientLight()</a> to place around a scene.
-  Materials like <a
-  href="/reference/p5/specularMaterial/">specularMaterial()</a> reflect the
-  lighting to convey shape and depth. See <a
-  href="https://p5js.org/tutorials/lights-camera-materials/">the tutorial page
-  for styling and appearance</a> to experiment with different combinations.</li>
-
-  <li><strong>Camera</strong> - The viewport of a <code>WEBGL</code> sketch can
-  be adjusted by changing camera attributes. See <a
-  href="https://p5js.org/tutorials/lights-camera-materials#camera-and-view">the
-  tutorial page section about cameras</a> for an explanation of camera
-  controls.</li>
-
-  <li><strong>Text</strong> - <code>WEBGL</code> requires opentype/truetype font
-  files to be preloaded using <a href="/reference/p5/loadFont/">loadFont()</a>.
-  See <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#text">the
-  wiki section about text</a> for details, along with a workaround.</li>
-
-  <li><strong>Shaders</strong> - Shaders are hardware accelerated programs that
-  can be used for a variety of effects and graphics. See the <a
-  href="https://p5js.org/tutorials/intro-to-shaders/">introduction to
-  shaders</a> to get started with shaders in p5.js.</li>
-
-  <li><strong>Graphics Acceleration</strong> - <code>WEBGL</code> mode uses the
-  graphics card instead of the CPU, so it may help boost the performance of your
-  sketch (example: drawing more shapes on the screen at once).</li>
-
-  </ul>
-
-  <p>To learn more about WEBGL mode, check out <a
-  href="https://p5js.org/tutorials/#webgl">all the interactive WEBGL
-  tutorials</a> in the "Tutorials" section of this website, or read the wiki
-  article <a
-  href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/">"Getting
-  started with WebGL in p5"</a>.</p>
-line: 24
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WEBGL
diff --git a/src/content/reference/en/p5 copy/constants/WEBGL2.mdx b/src/content/reference/en/p5 copy/constants/WEBGL2.mdx
deleted file mode 100644
index 68c6ca83fa..0000000000
--- a/src/content/reference/en/p5 copy/constants/WEBGL2.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L45
-title: WEBGL2
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: |
-  <p>One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
-  which can be used to determine what capabilities the rendering environment
-  has.</p>
-line: 45
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WEBGL2
diff --git a/src/content/reference/en/p5 copy/constants/WORD.mdx b/src/content/reference/en/p5 copy/constants/WORD.mdx
deleted file mode 100644
index 03f13b4874..0000000000
--- a/src/content/reference/en/p5 copy/constants/WORD.mdx	
+++ /dev/null
@@ -1,18 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/constants.js#L1051
-title: WORD
-module: Constants
-submodule: Constants
-file: src/core/constants.js
-description: ''
-line: 1051
-isConstructor: false
-itemtype: property
-class: p5
-type: String
----
-
-
-# WORD
diff --git a/src/content/reference/en/p5 copy/constrain.mdx b/src/content/reference/en/p5 copy/constrain.mdx
deleted file mode 100644
index d869ce2e74..0000000000
--- a/src/content/reference/en/p5 copy/constrain.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L91
-title: constrain
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Constrains a number between a minimum and maximum value.</p>
-line: 91
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      let x = constrain(mouseX, 33, 67);
-      let y = 50;
-
-      strokeWeight(5);
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set boundaries and draw them.
-      let leftWall = 25;
-      let rightWall = 75;
-      line(leftWall, 0, leftWall, 100);
-      line(rightWall, 0, rightWall, 100);
-
-      // Draw a circle that follows the mouse freely.
-      fill(255);
-      circle(mouseX, 33, 9);
-
-      // Draw a circle that's constrained.
-      let xc = constrain(mouseX, leftWall, rightWall);
-      fill(0);
-      circle(xc, 67, 9);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to constrain.</p>
-    type: Number
-  - name: low
-    description: |
-      <p>minimum limit.</p>
-    type: Number
-  - name: high
-    description: |
-      <p>maximum limit.</p>
-    type: Number
-return:
-  description: constrained number.
-  type: Number
-chainable: false
----
-
-
-# constrain
diff --git a/src/content/reference/en/p5 copy/copy.mdx b/src/content/reference/en/p5 copy/copy.mdx
deleted file mode 100644
index 059df56434..0000000000
--- a/src/content/reference/en/p5 copy/copy.mdx	
+++ /dev/null
@@ -1,144 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L288
-title: copy
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Copies pixels from a source image to a region of the canvas.</p>
-
-  <p>The first parameter, <code>srcImage</code>, is the
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object to blend. The source
-  image can be
-
-  the canvas itself or a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object. <code>copy()</code> will
-  scale pixels from
-
-  the source region if it isn't the same size as the destination region.</p>
-
-  <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-  <code>sw</code>, and <code>sh</code> determine the region
-
-  to copy from the source image. <code>(sx, sy)</code> is the top-left corner of
-  the
-
-  region. <code>sw</code> and <code>sh</code> are the region's width and
-  height.</p>
-
-  <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-  <code>dw</code>, and <code>dh</code> determine the region
-
-  of the canvas to copy into. <code>(dx, dy)</code> is the top-left corner of
-  the
-
-  region. <code>dw</code> and <code>dh</code> are the region's width and
-  height.</p>
-line: 288
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the mountains as the background.
-      background(img);
-
-      // Copy a region of pixels to another spot.
-      copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
-
-      // Outline the copied region.
-      stroke(255);
-      noFill();
-      square(7, 22, 10);
-
-      describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 288
-    params:
-      - name: srcImage
-        description: |
-          <p>source image.</p>
-        type: p5.Image|p5.Element
-      - name: sx
-        description: |
-          <p>x-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sy
-        description: |
-          <p>y-coordinate of the source's upper-left corner.</p>
-        type: Integer
-      - name: sw
-        description: |
-          <p>source image width.</p>
-        type: Integer
-      - name: sh
-        description: |
-          <p>source image height.</p>
-        type: Integer
-      - name: dx
-        description: |
-          <p>x-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dy
-        description: |
-          <p>y-coordinate of the destination's upper-left corner.</p>
-        type: Integer
-      - name: dw
-        description: |
-          <p>destination image width.</p>
-        type: Integer
-      - name: dh
-        description: |
-          <p>destination image height.</p>
-        type: Integer
-  - line: 345
-    params:
-      - name: sx
-        description: ''
-        type: Integer
-      - name: sy
-        description: ''
-        type: Integer
-      - name: sw
-        description: ''
-        type: Integer
-      - name: sh
-        description: ''
-        type: Integer
-      - name: dx
-        description: ''
-        type: Integer
-      - name: dy
-        description: ''
-        type: Integer
-      - name: dw
-        description: ''
-        type: Integer
-      - name: dh
-        description: ''
-        type: Integer
-chainable: false
----
-
-
-# copy
diff --git a/src/content/reference/en/p5 copy/cos.mdx b/src/content/reference/en/p5 copy/cos.mdx
deleted file mode 100644
index cd6468fc4f..0000000000
--- a/src/content/reference/en/p5 copy/cos.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L281
-title: cos
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the cosine of an angle.</p>
-
-  <p><code>cos()</code> is useful for many geometric tasks in creative coding.
-  The values
-
-  returned oscillate between -1 and 1 as the input angle increases.
-  <code>cos()</code>
-
-  calculates the cosine of an angle, using radians by default, or according to
-
-  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-  DEGREES).</p>
-line: 281
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white ball on a string oscillates left and right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.05) + 50;
-      let y = 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form a wave pattern.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 30 * cos(x * 0.1) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form an infinity symbol.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.1) + 50;
-      let y = 10 * sin(frameCount * 0.2) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>the angle, in radians by default, or according to
-
-      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-      DEGREES).</p>
-    type: Number
-return:
-  description: cosine of the angle.
-  type: Number
-chainable: false
----
-
-
-# cos
diff --git a/src/content/reference/en/p5 copy/createA.mdx b/src/content/reference/en/p5 copy/createA.mdx
deleted file mode 100644
index 669ce45a27..0000000000
--- a/src/content/reference/en/p5 copy/createA.mdx	
+++ /dev/null
@@ -1,93 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L724
-title: createA
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates an <code><a></a></code> element that links to another web page.</p>
-
-  <p>The first parmeter, <code>href</code>, is a string that sets the URL of the
-  linked
-
-  page.</p>
-
-  <p>The second parameter, <code>html</code>, is a string that sets the inner
-  HTML of the
-
-  link. It's common to use text, images, or buttons as links.</p>
-
-  <p>The third parameter, <code>target</code>, is optional. It's a string that
-  tells the
-
-  web browser where to open the link. By default, links open in the current
-
-  browser tab. Passing <code>'_blank'</code> will cause the link to open in a
-  new
-
-  browser tab. MDN describes a few
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target"
-  target="_blank">other options</a>.</p>
-line: 724
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an anchor element that links to p5js.org.
-      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.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Create an anchor tag that links to p5js.org.
-      // Open the link in a new tab.
-      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.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: href
-    description: |
-      <p>URL of linked page.</p>
-    type: String
-  - name: html
-    description: |
-      <p>inner HTML of link element to display.</p>
-    type: String
-  - name: target
-    description: |
-      <p>target where the new link should open,
-                                  either <code>'_blank'</code>, <code>'_self'</code>, <code>'_parent'</code>, or <code>'_top'</code>.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createA
diff --git a/src/content/reference/en/p5 copy/createAudio.mdx b/src/content/reference/en/p5 copy/createAudio.mdx
deleted file mode 100644
index 24b3bce36b..0000000000
--- a/src/content/reference/en/p5 copy/createAudio.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2213
-title: createAudio
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a hidden <code><audio></code> element for simple audio
-  playback.</p>
-
-  <p><code>createAudio()</code> returns a new
-
-  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object.</p>
-
-  <p>The first parameter, <code>src</code>, is the path the video. If a single
-  string is
-
-  passed, as in <code>'/assets/video.mp4'</code>, a single video is loaded. An
-  array
-
-  of strings can be used to load the same video in different formats. For
-
-  example, <code>['/assets/video.mp4', '/assets/video.ogv',
-  '/assets/video.webm']</code>.
-
-  This is useful for ensuring that the video can play across different
-
-  browsers with different capabilities. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/"
-  target="_blank">MDN</a>
-
-  for more information about supported formats.</p>
-
-  <p>The second parameter, <code>callback</code>, is optional. It's a function
-  to call once
-
-  the audio is ready to play.</p>
-line: 2213
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Load the audio.
-      let beat = createAudio('/assets/beat.mp3');
-
-      // Show the default audio controls.
-      beat.showControls();
-
-      describe('An audio beat plays when the user double-clicks the square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: src
-    description: |
-      <p>path to an audio file, or an array of paths
-                                      for supporting different browsers.</p>
-    type: 'String|String[]'
-    optional: true
-  - name: callback
-    description: |
-      <p>function to call once the audio is ready to play.</p>
-    type: Function
-    optional: true
-return:
-  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
-  type: p5.MediaElement
-chainable: false
----
-
-
-# createAudio
diff --git a/src/content/reference/en/p5 copy/createButton.mdx b/src/content/reference/en/p5 copy/createButton.mdx
deleted file mode 100644
index 9ff2d66faf..0000000000
--- a/src/content/reference/en/p5 copy/createButton.mdx	
+++ /dev/null
@@ -1,109 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L924
-title: createButton
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><button></button></code> element.</p>
-
-  <p>The first parameter, <code>label</code>, is a string that sets the label
-  displayed on
-
-  the button.</p>
-
-  <p>The second parameter, <code>value</code>, is optional. It's a string that
-  sets the
-
-  button's value. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value"
-  target="_blank">MDN</a>
-
-  for more details.</p>
-line: 924
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a button and place it beneath the canvas.
-      let button = createButton('click me');
-      button.position(0, 100);
-
-      // Call repaint() when the button is pressed.
-      button.mousePressed(repaint);
-
-      describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
-    }
-
-    // Change the background color.
-    function repaint() {
-      let g = random(255);
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let button;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a button and set its value to 0.
-      // Place the button beneath the canvas.
-      button = createButton('click me', 'red');
-      button.position(0, 100);
-
-      // Call randomColor() when the button is pressed.
-      button.mousePressed(randomColor);
-
-      describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
-    }
-
-    function draw() {
-      // Use the button's value to set the background color.
-      let c = button.value();
-      background(c);
-    }
-
-    // Set the button's value to a random color.
-    function randomColor() {
-      let c = random(['red', 'green', 'blue', 'yellow']);
-      button.value(c);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: label
-    description: |
-      <p>label displayed on the button.</p>
-    type: String
-  - name: value
-    description: |
-      <p>value of the button.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createButton
diff --git a/src/content/reference/en/p5 copy/createCamera.mdx b/src/content/reference/en/p5 copy/createCamera.mdx
deleted file mode 100644
index 8fbb13ce5d..0000000000
--- a/src/content/reference/en/p5 copy/createCamera.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L638
-title: createCamera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Camera">p5.Camera</a> object and
-  sets it
-
-  as the current (active) camera.</p>
-
-  <p>The new camera is initialized with a default position <code>(0, 0,
-  800)</code> and a
-
-  default perspective projection. Its properties can be controlled with
-
-  <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
-
-  <code>myCamera.lookAt(0, 0, 0)</code>.</p>
-
-  <p>Note: Every 3D sketch starts with a default camera initialized.
-
-  This camera can be controlled with the functions
-
-  <a href="/reference/p5/camera/">camera()</a>,
-
-  <a href="/reference/p5/perspective/">perspective()</a>,
-
-  <a href="/reference/p5/ortho/">ortho()</a>, and
-
-  <a href="/reference/p5/frustum/">frustum()</a> if it's the only camera in the
-  scene.</p>
-
-  <p>Note: <code>createCamera()</code> can only be used in WebGL mode.</p>
-line: 638
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to toggle between cameras.
-
-    let cam1;
-    let cam2;
-    let usingCam1 = true;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the first camera.
-      // Keep its default settings.
-      cam1 = createCamera();
-
-      // Create the second camera.
-      // Place it at the top-left.
-      // Point it at the origin.
-      cam2 = createCamera();
-      cam2.setPosition(400, -400, 800);
-      cam2.lookAt(0, 0, 0);
-
-      // Set the current camera to cam1.
-      setCamera(cam1);
-
-      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the box.
-      box();
-    }
-
-    // Toggle the current camera when the user double-clicks.
-    function doubleClicked() {
-      if (usingCam1 === true) {
-        setCamera(cam2);
-        usingCam1 = false;
-      } else {
-        setCamera(cam1);
-        usingCam1 = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: the new camera.
-  type: p5.Camera
-chainable: false
----
-
-
-# createCamera
diff --git a/src/content/reference/en/p5 copy/createCanvas.mdx b/src/content/reference/en/p5 copy/createCanvas.mdx
deleted file mode 100644
index 600d7e3545..0000000000
--- a/src/content/reference/en/p5 copy/createCanvas.mdx	
+++ /dev/null
@@ -1,191 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L15
-title: createCanvas
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Creates a canvas element on the web page.</p>
-
-  <p><code>createCanvas()</code> creates the main drawing canvas for a sketch.
-  It should
-
-  only be called once at the beginning of <a
-  href="/reference/p5/setup/">setup()</a>.
-
-  Calling <code>createCanvas()</code> more than once causes unpredictable
-  behavior.</p>
-
-  <p>The first two parameters, <code>width</code> and <code>height</code>, are
-  optional. They set the
-
-  dimensions of the canvas and the values of the
-
-  <a href="/reference/p5/width/">width</a> and <a
-  href="/reference/p5/height/">height</a> system
-
-  variables. For example, calling <code>createCanvas(900, 500)</code> creates a
-  canvas
-
-  that's 900×500 pixels. By default, <code>width</code> and <code>height</code>
-  are both 100.</p>
-
-  <p>The third parameter is also optional. If either of the constants
-  <code>P2D</code> or
-
-  <code>WEBGL</code> is passed, as in <code>createCanvas(900, 500,
-  WEBGL)</code>, then it will set
-
-  the sketch's rendering mode. If an existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createCanvas(900, 500, myCanvas)</code>, then it will
-  be used
-
-  by the sketch.</p>
-
-  <p>The fourth parameter is also optional. If an existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createCanvas(900, 500, WEBGL, myCanvas)</code>, then it
-  will be
-
-  used by the sketch.</p>
-
-  <p>Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported
-
-  by the browser. Check the <a
-  href="/reference/p5/webglVersion/">webglVersion</a>
-
-  system variable to check what version is being used, or call
-
-  <code>setAttributes({ version: 1 })</code> to create a WebGL1 context.</p>
-line: 15
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(0, 0, width, height);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 50);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(0, 0, width, height);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Use WebGL mode.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(-width / 2, -height / 2, width / 2, height / 2);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create a p5.Renderer object.
-      let cnv = createCanvas(50, 50);
-
-      // Position the canvas.
-      cnv.position(10, 20);
-
-      background(180);
-
-      // Draw a diagonal line.
-      line(0, 0, width, height);
-
-      describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new `p5.Renderer` that holds the canvas.
-  type: p5.Renderer
-overloads:
-  - line: 15
-    params:
-      - name: width
-        description: |
-          <p>width of the canvas. Defaults to 100.</p>
-        type: Number
-        optional: true
-      - name: height
-        description: |
-          <p>height of the canvas. Defaults to 100.</p>
-        type: Number
-        optional: true
-      - name: renderer
-        description: |
-          <p>either P2D or WEBGL. Defaults to <code>P2D</code>.</p>
-        type: Constant
-        optional: true
-      - name: canvas
-        description: |
-          <p>existing canvas element that should be used for the sketch.</p>
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: new `p5.Renderer` that holds the canvas.
-      type: p5.Renderer
-  - line: 119
-    params:
-      - name: width
-        description: ''
-        type: Number
-        optional: true
-      - name: height
-        description: ''
-        type: Number
-        optional: true
-      - name: canvas
-        description: ''
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: ''
-      type: p5.Renderer
-chainable: false
----
-
-
-# createCanvas
diff --git a/src/content/reference/en/p5 copy/createCapture.mdx b/src/content/reference/en/p5 copy/createCapture.mdx
deleted file mode 100644
index 1087d14b1a..0000000000
--- a/src/content/reference/en/p5 copy/createCapture.mdx	
+++ /dev/null
@@ -1,189 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2295
-title: createCapture
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><video></code> element that "captures" the audio/video
-  stream from
-
-  the webcam and microphone.</p>
-
-  <p><code>createCapture()</code> returns a new
-
-  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
-  shown by
-
-  default. They can be hidden by calling <code>capture.hide()</code> and drawn
-  to the
-
-  canvas using <a href="/reference/p5/image/">image()</a>.</p>
-
-  <p>The first parameter, <code>type</code>, is optional. It sets the type of
-  capture to
-
-  use. By default, <code>createCapture()</code> captures both audio and video.
-  If <code>VIDEO</code>
-
-  is passed, as in <code>createCapture(VIDEO)</code>, only video will be
-  captured.
-
-  If <code>AUDIO</code> is passed, as in <code>createCapture(AUDIO)</code>, only
-  audio will be
-
-  captured. A constraints object can also be passed to customize the stream.
-
-  See the <a
-  href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints"
-  target="_blank">
-
-  W3C documentation</a> for possible properties. Different browsers support
-  different
-
-  properties.</p>
-
-  <p>The 'flipped' property is an optional property which can be set to
-  <code>{flipped:true}</code>
-
-  to mirror the video output.If it is true then it means that video will be
-  mirrored
-
-  or flipped and if nothing is mentioned then by default it will be
-  <code>false</code>.</p>
-
-  <p>The second parameter,<code>callback</code>, is optional. It's a function to
-  call once
-
-  the capture is ready for use. The callback function should have one
-
-  parameter, <code>stream</code>, that's a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/"
-  target="_blank">MediaStream</a> object.</p>
-
-  <p>Note: <code>createCapture()</code> only works when running a sketch locally
-  or using HTTPS. Learn more
-
-  <a
-  href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https/"
-  target="_blank">here</a>
-
-  and <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia/"
-  target="_blank">here</a>.</p>
-line: 2295
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Create the video capture.
-      createCapture(VIDEO);
-
-      describe('A video stream from the webcam.');
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    let capture;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the video capture and hide the element.
-      capture = createCapture(VIDEO);
-      capture.hide();
-
-      describe('A video stream from the webcam with inverted colors.');
-    }
-
-    function draw() {
-      // Draw the video capture within the canvas.
-      image(capture, 0, 0, width, width * capture.height / capture.width);
-
-      // Invert the colors in the stream.
-      filter(INVERT);
-    }
-    </code>
-    </div>
-    <div class='notest'>
-    <code>
-    let capture;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the video capture with mirrored output.
-      capture = createCapture(VIDEO,{ flipped:true });
-      capture.size(100,100);
-
-      describe('A video stream from the webcam with flipped or mirrored output.');
-    }
-
-    </code>
-    </div>
-
-    <div class='notest norender'>
-    <code>
-    function setup() {
-      createCanvas(480, 120);
-
-      // Create a constraints object.
-      let constraints = {
-        video: {
-          mandatory: {
-            minWidth: 1280,
-            minHeight: 720
-          },
-          optional: [{ maxFrameRate: 10 }]
-        },
-        audio: false
-      };
-
-      // Create the video capture.
-      createCapture(constraints);
-
-      describe('A video stream from the webcam.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: type
-    description: |
-      <p>type of capture, either AUDIO or VIDEO,
-                                        or a constraints object. Both video and audio
-                                        audio streams are captured by default.</p>
-    type: String|Constant|Object
-    optional: true
-  - name: flipped
-    description: >
-      <p>flip the capturing video and mirror the output with
-      <code>{flipped:true}</code>. By
-                                        default it is false.</p>
-    type: Object
-    optional: true
-  - name: callback
-    description: |
-      <p>function to call once the stream
-                                        has loaded.</p>
-    type: Function
-    optional: true
-return:
-  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
-  type: p5.MediaElement
-chainable: false
----
-
-
-# createCapture
diff --git a/src/content/reference/en/p5 copy/createCheckbox.mdx b/src/content/reference/en/p5 copy/createCheckbox.mdx
deleted file mode 100644
index 45335be2d4..0000000000
--- a/src/content/reference/en/p5 copy/createCheckbox.mdx	
+++ /dev/null
@@ -1,131 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1008
-title: createCheckbox
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a checkbox <code><input></input></code> element.</p>
-
-  <p>Checkboxes extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a
-
-  <code>checked()</code> method. Calling <code>myBox.checked()</code> returns
-  <code>true</code> if it the box
-
-  is checked and <code>false</code> if not.</p>
-
-  <p>The first parameter, <code>label</code>, is optional. It's a string that
-  sets the label
-
-  to display next to the checkbox.</p>
-
-  <p>The second parameter, <code>value</code>, is also optional. It's a boolean
-  that sets the
-
-  checkbox's value.</p>
-line: 1008
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a checkbox and place it beneath the canvas.
-      checkbox = createCheckbox();
-      checkbox.position(0, 100);
-
-      describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
-    }
-
-    function draw() {
-      // Use the checkbox to set the background color.
-      if (checkbox.checked()) {
-        background(255);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a checkbox and place it beneath the canvas.
-      // Label the checkbox "white".
-      checkbox = createCheckbox(' white');
-      checkbox.position(0, 100);
-
-      describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
-    }
-
-    function draw() {
-      // Use the checkbox to set the background color.
-      if (checkbox.checked()) {
-        background(255);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let checkbox;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a checkbox and place it beneath the canvas.
-      // Label the checkbox "white" and set its value to true.
-      checkbox = createCheckbox(' white', true);
-      checkbox.position(0, 100);
-
-      describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
-    }
-
-    function draw() {
-      // Use the checkbox to set the background color.
-      if (checkbox.checked()) {
-        background(255);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: label
-    description: |
-      <p>label displayed after the checkbox.</p>
-    type: String
-    optional: true
-  - name: value
-    description: >
-      <p>value of the checkbox. Checked is <code>true</code> and unchecked is
-      <code>false</code>.</p>
-    type: Boolean
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createCheckbox
diff --git a/src/content/reference/en/p5 copy/createColorPicker.mdx b/src/content/reference/en/p5 copy/createColorPicker.mdx
deleted file mode 100644
index 0c34a0593e..0000000000
--- a/src/content/reference/en/p5 copy/createColorPicker.mdx	
+++ /dev/null
@@ -1,101 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1759
-title: createColorPicker
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a color picker element.</p>
-
-  <p>The parameter, <code>value</code>, is optional. If a color string or
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object is passed, it will set
-  the default
-
-  color.</p>
-
-  <p>Color pickers extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a
-
-  couple of helpful methods for managing colors:</p>
-
-  <ul>
-
-  <li><code>myPicker.value()</code> returns the current color as a hex string in
-  the format <code>'#rrggbb'</code>.</li>
-
-  <li><code>myPicker.color()</code> returns the current color as a <a
-  href="/reference/p5/p5.Color">p5.Color</a> object.</li>
-
-  </ul>
-line: 1759
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myPicker;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a color picker and set its position.
-      myPicker = createColorPicker('deeppink');
-      myPicker.position(0, 100);
-
-      describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
-    }
-
-    function draw() {
-      // Use the color picker to paint the background.
-      let c = myPicker.color();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myPicker;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a color picker and set its position.
-      myPicker = createColorPicker('deeppink');
-      myPicker.position(0, 100);
-
-      describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
-    }
-
-    function draw() {
-      // Use the color picker to paint the background.
-      let c = myPicker.value();
-      background(c);
-
-      // Display the current color as a hex string.
-      text(c, 25, 55);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: >
-      <p>default color as a <a
-      href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"
-      target="_blank">CSS color string</a>.</p>
-    type: String|p5.Color
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createColorPicker
diff --git a/src/content/reference/en/p5 copy/createConvolver.mdx b/src/content/reference/en/p5 copy/createConvolver.mdx
deleted file mode 100644
index 89fba3be4e..0000000000
--- a/src/content/reference/en/p5 copy/createConvolver.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L8885
-title: createConvolver
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Create a p5.Convolver. Accepts a path to a soundfile
-  that will be used to generate an impulse response.</p>
-line: 8885
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    let cVerb, sound;
-    function preload() {
-      // We have both MP3 and OGG versions of all sound assets
-      soundFormats('ogg', 'mp3');
-
-      // Try replacing 'bx-spring' with other soundfiles like
-      // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'
-      cVerb = createConvolver('/assets/bx-spring.mp3');
-
-      // Try replacing 'Damscray_DancingTiger' with
-      // 'beat', 'doorbell', lucky_dragons_-_power_melody'
-      sound = loadSound('/assets/Damscray_DancingTiger.mp3');
-    }
-
-    function setup() {
-      let cnv = createCanvas(100, 100);
-      cnv.mousePressed(playSound);
-      background(220);
-      text('tap to play', 20, 20);
-
-      // disconnect from main output...
-      sound.disconnect();
-
-      // ...and process with cVerb
-      // so that we only hear the convolution
-      cVerb.process(sound);
-    }
-
-    function playSound() {
-      sound.play();
-    }
-    </code></div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path to a sound file</p>
-    type: String
-  - name: callback
-    description: |
-      <p>function to call if loading is successful.
-                                    The object will be passed in as the argument
-                                    to the callback function.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to call if loading is not successful.
-                                    A custom error will be passed in as the argument
-                                    to the callback function.</p>
-    type: Function
-    optional: true
-return:
-  description: ''
-  type: p5.Convolver
-chainable: false
----
-
-
-# createConvolver
diff --git a/src/content/reference/en/p5 copy/createDiv.mdx b/src/content/reference/en/p5 copy/createDiv.mdx
deleted file mode 100644
index 610e0a4f67..0000000000
--- a/src/content/reference/en/p5 copy/createDiv.mdx	
+++ /dev/null
@@ -1,72 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L491
-title: createDiv
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><div></div></code> element.</p>
-
-  <p><code><div></div></code> elements are commonly used as containers for
-
-  other elements.</p>
-
-  <p>The parameter <code>html</code> is optional. It accepts a string that sets
-  the
-
-  inner HTML of the new <code><div></div></code>.</p>
-line: 491
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a div element and set its position.
-      let div = createDiv('p5*js');
-      div.position(25, 35);
-
-      describe('A gray square with the text "p5*js" written in its center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an h3 element within the div.
-      let div = createDiv('<h3>p5*js</h3>');
-      div.position(20, 5);
-
-      describe('A gray square with the text "p5*js" written in its center.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: html
-    description: >
-      <p>inner HTML for the new <code>&lt;div&gt;&lt;/div&gt;</code>
-      element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createDiv
diff --git a/src/content/reference/en/p5 copy/createElement.mdx b/src/content/reference/en/p5 copy/createElement.mdx
deleted file mode 100644
index 5969416251..0000000000
--- a/src/content/reference/en/p5 copy/createElement.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2493
-title: createElement
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
-
-  <p>The first parameter, <code>tag</code>, is a string an HTML tag such as
-  <code>'h5'</code>.</p>
-
-  <p>The second parameter, <code>content</code>, is optional. It's a string that
-  sets the
-
-  HTML content to insert into the new element. New elements have no content
-
-  by default.</p>
-line: 2493
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an h5 element with nothing in it.
-      createElement('h5');
-
-      describe('A gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an h5 element with the content "p5*js".
-      let h5 = createElement('h5', 'p5*js');
-
-      // Set the element's style and position.
-      h5.style('color', 'deeppink');
-      h5.position(30, 15);
-
-      describe('The text "p5*js" written in pink in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: tag
-    description: |
-      <p>tag for the new element.</p>
-    type: String
-  - name: content
-    description: |
-      <p>HTML content to insert into the element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createElement
diff --git a/src/content/reference/en/p5 copy/createFileInput.mdx b/src/content/reference/en/p5 copy/createFileInput.mdx
deleted file mode 100644
index 295f2a0434..0000000000
--- a/src/content/reference/en/p5 copy/createFileInput.mdx	
+++ /dev/null
@@ -1,138 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1942
-title: createFileInput
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates an <code><input></input></code> element of type
-  <code>'file'</code>.</p>
-
-  <p><code>createFileInput()</code> allows users to select local files for use
-  in a sketch.
-
-  It returns a <a href="/reference/p5/p5.File">p5.File</a> object.</p>
-
-  <p>The first parameter, <code>callback</code>, is a function that's called
-  when the file
-
-  loads. The callback function should have one parameter, <code>file</code>,
-  that's a
-
-  <a href="/reference/p5/p5.File">p5.File</a> object.</p>
-
-  <p>The second parameter, <code>multiple</code>, is optional. It's a boolean
-  value that
-
-  allows loading multiple files if set to <code>true</code>. If
-  <code>true</code>, <code>callback</code>
-
-  will be called once per file.</p>
-line: 1942
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Use the file input to select an image to
-    // load and display.
-    let input;
-    let img;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a file input and place it beneath
-      // the canvas.
-      input = createFileInput(handleImage);
-      input.position(0, 100);
-
-      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the image if loaded.
-      if (img) {
-        image(img, 0, 0, width, height);
-      }
-    }
-
-    // Create an image if the file is an image.
-    function handleImage(file) {
-      if (file.type === 'image') {
-        img = createImg(file.data, '');
-        img.hide();
-      } else {
-        img = null;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Use the file input to select multiple images
-    // to load and display.
-    let input;
-    let images = [];
-
-    function setup() {
-      // Create a file input and place it beneath
-      // the canvas. Allow it to load multiple files.
-      input = createFileInput(handleImage, true);
-      input.position(0, 100);
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the images if loaded. Each image
-      // is drawn 20 pixels lower than the
-      // previous image.
-      for (let i = 0; i < images.length; i += 1) {
-        // Calculate the y-coordinate.
-        let y = i * 20;
-
-        // Draw the image.
-        image(images[i], 0, y, 100, 100);
-      }
-
-      describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
-    }
-
-    // Create an image if the file is an image,
-    // then add it to the images array.
-    function handleImage(file) {
-      if (file.type === 'image') {
-        let img = createImg(file.data, '');
-        img.hide();
-        images.push(img);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: callback
-    description: |
-      <p>function to call once the file loads.</p>
-    type: Function
-  - name: multiple
-    description: |
-      <p>allow multiple files to be selected.</p>
-    type: Boolean
-    optional: true
-return:
-  description: new <a href="#/p5.File">p5.File</a> object.
-  type: p5.File
-chainable: false
----
-
-
-# createFileInput
diff --git a/src/content/reference/en/p5 copy/createFilterShader.mdx b/src/content/reference/en/p5 copy/createFilterShader.mdx
deleted file mode 100644
index 5c6c9a4ec5..0000000000
--- a/src/content/reference/en/p5 copy/createFilterShader.mdx	
+++ /dev/null
@@ -1,148 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L540
-title: createFilterShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Creates a <a href="/reference/p5/p5.Shader">p5.Shader</a> object to be used
-  with the
-
-  <a href="/reference/p5/filter/">filter()</a> function.</p>
-
-  <p><code>createFilterShader()</code> works like
-
-  <a href="/reference/p5/createShader/">createShader()</a> but has a default
-  vertex
-
-  shader included. <code>createFilterShader()</code> is intended to be used
-  along with
-
-  <a href="/reference/p5/filter/">filter()</a> for filtering the contents of a
-  canvas.
-
-  A filter shader will be applied to the whole canvas instead of just
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects.</p>
-
-  <p>The parameter, <code>fragSrc</code>, sets the fragment shader. It’s a
-  string that
-
-  contains the fragment shader program written in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>.</p>
-
-  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> object that's created
-  has some
-
-  uniforms that can be set:</p>
-
-  <ul>
-
-  <li><code>sampler2D tex0</code>, which contains the canvas contents as a
-  texture.</li>
-
-  <li><code>vec2 canvasSize</code>, which is the width and height of the canvas,
-  not including pixel density.</li>
-
-  <li><code>vec2 texelSize</code>, which is the size of a physical pixel
-  including pixel density. This is calculated as <code>1.0 / (width *
-  density)</code> for the pixel width and <code>1.0 / (height * density)</code>
-  for the pixel height.</li>
-
-  </ul>
-
-  <p>The <a href="/reference/p5/p5.Shader">p5.Shader</a> that's created also
-  provides
-
-  <code>varying vec2 vTexCoord</code>, a coordinate with values between 0 and 1.
-
-  <code>vTexCoord</code> describes where on the canvas the pixel will be
-  drawn.</p>
-
-  <p>For more info about filters and shaders, see Adam Ferriss' <a
-  href="https://github.com/aferriss/p5jsShaderExamples/">repo of shader
-  examples</a>
-
-  or the <a href="https://p5js.org/tutorials/intro-to-shaders/">Introduction to
-  Shaders</a> tutorial.</p>
-line: 540
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    function setup() {
-      let fragSrc = `precision highp float;
-      void main() {
-        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-      }`;
-
-      createCanvas(100, 100, WEBGL);
-      let s = createFilterShader(fragSrc);
-      filter(s);
-      describe('a yellow canvas');
-    }
-    </code>
-    </div>
-
-    <div modernizr='webgl'>
-    <code>
-    let img, s;
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-    function setup() {
-      let fragSrc = `precision highp float;
-
-      // x,y coordinates, given from the vertex shader
-      varying vec2 vTexCoord;
-
-      // the canvas contents, given from filter()
-      uniform sampler2D tex0;
-      // other useful information from the canvas
-      uniform vec2 texelSize;
-      uniform vec2 canvasSize;
-      // a custom variable from this sketch
-      uniform float darkness;
-
-      void main() {
-        // get the color at current pixel
-        vec4 color = texture2D(tex0, vTexCoord);
-        // set the output color
-        color.b = 1.0;
-        color *= darkness;
-        gl_FragColor = vec4(color.rgb, 1.0);
-      }`;
-
-      createCanvas(100, 100, WEBGL);
-      s = createFilterShader(fragSrc);
-    }
-    function draw() {
-      image(img, -50, -50);
-      s.setUniform('darkness', 0.5);
-      filter(s);
-      describe('a image of bricks tinted dark blue');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fragSrc
-    description: |
-      <p>source code for the fragment shader.</p>
-    type: String
-return:
-  description: new shader object created from the fragment shader.
-  type: p5.Shader
-chainable: false
----
-
-
-# createFilterShader
diff --git a/src/content/reference/en/p5 copy/createFramebuffer.mdx b/src/content/reference/en/p5 copy/createFramebuffer.mdx
deleted file mode 100644
index 80d8199779..0000000000
--- a/src/content/reference/en/p5 copy/createFramebuffer.mdx	
+++ /dev/null
@@ -1,208 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L495
-title: createFramebuffer
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Creates and a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
-  object.</p>
-
-  <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
-  separate drawing
-
-  surfaces that can be used as textures in WebGL mode. They're similar to
-
-  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally run
-  much
-
-  faster when used as textures.</p>
-
-  <p>The parameter, <code>options</code>, is optional. An object can be passed
-  to configure
-
-  the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
-  available
-
-  properties are:</p>
-
-  <ul>
-
-  <li><code>format</code>: data format of the texture, either
-  <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or <code>HALF_FLOAT</code>.
-  Default is <code>UNSIGNED_BYTE</code>.</li>
-
-  <li><code>channels</code>: whether to store <code>RGB</code> or
-  <code>RGBA</code> color channels. Default is to match the main canvas which is
-  <code>RGBA</code>.</li>
-
-  <li><code>depth</code>: whether to include a depth buffer. Default is
-  <code>true</code>.</li>
-
-  <li><code>depthFormat</code>: data format of depth information, either
-  <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
-  <code>FLOAT</code>.</li>
-
-  <li><code>stencil</code>: whether to include a stencil buffer for masking.
-  <code>depth</code> must be <code>true</code> for this feature to work.
-  Defaults to the value of <code>depth</code> which is <code>true</code>.</li>
-
-  <li><code>antialias</code>: whether to perform anti-aliasing. If set to
-  <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will be
-  used by default. The number of samples can also be set, as in <code>{
-  antialias: 4 }</code>. Default is to match <a
-  href="/reference/p5/setAttributes/">setAttributes()</a> which is
-  <code>false</code> (<code>true</code> in Safari).</li>
-
-  <li><code>width</code>: width of the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
-  always match the main canvas width.</li>
-
-  <li><code>height</code>: height of the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
-  always match the main canvas height.</li>
-
-  <li><code>density</code>: pixel density of the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is to
-  always match the main canvas pixel density.</li>
-
-  <li><code>textureFiltering</code>: how to read values from the <a
-  href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
-  <code>LINEAR</code> (nearby pixels will be interpolated) or
-  <code>NEAREST</code> (no interpolation). Generally, use <code>LINEAR</code>
-  when using the texture as an image and <code>NEAREST</code> if reading the
-  texture as data. Default is <code>LINEAR</code>.</li>
-
-  </ul>
-
-  <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
-  attributes are set, they won't automatically match the main canvas and must be
-  changed manually.</p>
-
-  <p>Note: <code>createFramebuffer()</code> can only be used in WebGL mode.</p>
-line: 495
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myBuffer;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Framebuffer object.
-      myBuffer = createFramebuffer();
-
-      describe('A grid of white toruses rotating against a dark gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Start drawing to the p5.Framebuffer object.
-      myBuffer.begin();
-
-      // Clear the drawing surface.
-      clear();
-
-      // Turn on the lights.
-      lights();
-
-      // Rotate the coordinate system.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Style the torus.
-      noStroke();
-
-      // Draw the torus.
-      torus(20);
-
-      // Stop drawing to the p5.Framebuffer object.
-      myBuffer.end();
-
-      // Iterate from left to right.
-      for (let x = -50; x < 50; x += 25) {
-        // Iterate from top to bottom.
-        for (let y = -50; y < 50; y += 25) {
-          // Draw the p5.Framebuffer object to the canvas.
-          image(myBuffer, x, y, 25, 25);
-        }
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myBuffer;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create an options object.
-      let options = { width: 25, height: 25 };
-
-      // Create a p5.Framebuffer object.
-      // Use options for configuration.
-      myBuffer = createFramebuffer(options);
-
-      describe('A grid of white toruses rotating against a dark gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Start drawing to the p5.Framebuffer object.
-      myBuffer.begin();
-
-      // Clear the drawing surface.
-      clear();
-
-      // Turn on the lights.
-      lights();
-
-      // Rotate the coordinate system.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Style the torus.
-      noStroke();
-
-      // Draw the torus.
-      torus(5, 2.5);
-
-      // Stop drawing to the p5.Framebuffer object.
-      myBuffer.end();
-
-      // Iterate from left to right.
-      for (let x = -50; x < 50; x += 25) {
-        // Iterate from top to bottom.
-        for (let y = -50; y < 50; y += 25) {
-          // Draw the p5.Framebuffer object to the canvas.
-          image(myBuffer, x, y);
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: options
-    description: |
-      <p>configuration options.</p>
-    type: Object
-    optional: true
-return:
-  description: new framebuffer.
-  type: p5.Framebuffer
-chainable: false
----
-
-
-# createFramebuffer
diff --git a/src/content/reference/en/p5 copy/createGraphics.mdx b/src/content/reference/en/p5 copy/createGraphics.mdx
deleted file mode 100644
index 6d75f158f4..0000000000
--- a/src/content/reference/en/p5 copy/createGraphics.mdx	
+++ /dev/null
@@ -1,191 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L370
-title: createGraphics
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Creates a <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.</p>
-
-  <p><code>createGraphics()</code> creates an offscreen drawing canvas (graphics
-  buffer)
-
-  and returns it as a <a href="/reference/p5/p5.Graphics">p5.Graphics</a>
-  object. Drawing
-
-  to a separate graphics buffer can be helpful for performance and for
-
-  organizing code.</p>
-
-  <p>The first two parameters, <code>width</code> and <code>height</code>, are
-  optional. They set the
-
-  dimensions of the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object.
-  For
-
-  example, calling <code>createGraphics(900, 500)</code> creates a graphics
-  buffer
-
-  that's 900×500 pixels.</p>
-
-  <p>The third parameter is also optional. If either of the constants
-  <code>P2D</code> or
-
-  <code>WEBGL</code> is passed, as in <code>createGraphics(900, 500,
-  WEBGL)</code>, then it will set
-
-  the <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object's rendering
-  mode. If an
-
-  existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createGraphics(900, 500, myCanvas)</code>, then it will
-  be used
-
-  by the graphics buffer.</p>
-
-  <p>The fourth parameter is also optional. If an existing
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/"
-  target="_blank">HTMLCanvasElement</a>
-
-  is passed, as in <code>createGraphics(900, 500, WEBGL, myCanvas)</code>, then
-  it will be
-
-  used by the graphics buffer.</p>
-
-  <p>Note: In WebGL mode, the <a
-  href="/reference/p5/p5.Graphics">p5.Graphics</a> object
-
-  will use a WebGL2 context if it's supported by the browser. Check the
-
-  <a href="/reference/p5/webglVersion/">webglVersion</a> system variable to
-  check what
-
-  version is being used, or call <code>setAttributes({ version: 1 })</code> to
-  create a
-
-  WebGL1 context.</p>
-line: 370
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    //  Double-click to draw the contents of the graphics buffer.
-
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Create the p5.Graphics object.
-      pg = createGraphics(50, 50);
-
-      // Draw to the graphics buffer.
-      pg.background(100);
-      pg.circle(pg.width / 2, pg.height / 2, 20);
-
-      describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');
-    }
-
-    // Display the graphics buffer when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        image(pg, 25, 25);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    //  Double-click to draw the contents of the graphics buffer.
-
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Create the p5.Graphics object in WebGL mode.
-      pg = createGraphics(50, 50, WEBGL);
-
-      // Draw to the graphics buffer.
-      pg.background(100);
-      pg.lights();
-      pg.noStroke();
-      pg.rotateX(QUARTER_PI);
-      pg.rotateY(QUARTER_PI);
-      pg.torus(15, 5);
-
-      describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');
-    }
-
-    // Display the graphics buffer when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        image(pg, 25, 25);
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new graphics buffer.
-  type: p5.Graphics
-overloads:
-  - line: 370
-    params:
-      - name: width
-        description: |
-          <p>width of the graphics buffer.</p>
-        type: Number
-      - name: height
-        description: |
-          <p>height of the graphics buffer.</p>
-        type: Number
-      - name: renderer
-        description: |
-          <p>either P2D or WEBGL. Defaults to P2D.</p>
-        type: Constant
-        optional: true
-      - name: canvas
-        description: |
-          <p>existing canvas element that should be
-                                               used for the graphics buffer..</p>
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: new graphics buffer.
-      type: p5.Graphics
-  - line: 475
-    params:
-      - name: width
-        description: ''
-        type: Number
-      - name: height
-        description: ''
-        type: Number
-      - name: canvas
-        description: ''
-        type: HTMLCanvasElement
-        optional: true
-    return:
-      description: ''
-      type: p5.Graphics
-chainable: false
----
-
-
-# createGraphics
diff --git a/src/content/reference/en/p5 copy/createImage.mdx b/src/content/reference/en/p5 copy/createImage.mdx
deleted file mode 100644
index 33c151c315..0000000000
--- a/src/content/reference/en/p5 copy/createImage.mdx	
+++ /dev/null
@@ -1,172 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L15
-title: createImage
-module: Image
-submodule: Image
-file: src/image/image.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-  <p><code>createImage()</code> uses the <code>width</code> and
-  <code>height</code> parameters to set the new
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object's dimensions in pixels.
-  The new
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> can be modified by updating its
-
-  <a href="/reference/p5.Image/pixels/">pixels</a> array or by calling its
-
-  <a href="/reference/p5.Image/get/">get()</a> and
-
-  <a href="/reference/p5.Image/set/">set()</a> methods. The
-
-  <a href="/reference/p5.Image/loadPixels/">loadPixels()</a> method must be
-  called
-
-  before reading or modifying pixel values. The
-
-  <a href="/reference/p5.Image/updatePixels/">updatePixels()</a> method must be
-  called
-
-  for updates to take effect.</p>
-
-  <p>Note: The new <a href="/reference/p5/p5.Image">p5.Image</a> object is
-  transparent by
-
-  default.</p>
-line: 15
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the image's pixels into memory.
-      img.loadPixels();
-
-      // Set all the image's pixels to black.
-      for (let x = 0; x < img.width; x += 1) {
-        for (let y = 0; y < img.height; y += 1) {
-          img.set(x, y, 0);
-        }
-      }
-
-      // Update the image's pixel values.
-      img.updatePixels();
-
-      // Draw the image.
-      image(img, 17, 17);
-
-      describe('A black square drawn in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the image's pixels into memory.
-      img.loadPixels();
-
-      // Create a color gradient.
-      for (let x = 0; x < img.width; x += 1) {
-        for (let y = 0; y < img.height; y += 1) {
-          // Calculate the transparency.
-          let a = map(x, 0, img.width, 0, 255);
-
-          // Create a p5.Color object.
-          let c = color(0, a);
-
-          // Set the pixel's color.
-          img.set(x, y, c);
-        }
-      }
-
-      // Update the image's pixels.
-      img.updatePixels();
-
-      // Display the image.
-      image(img, 17, 17);
-
-      describe('A square with a horizontal color gradient that transitions from gray to black.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the pixels into memory.
-      img.loadPixels();
-      // Get the current pixel density.
-      let d = pixelDensity();
-
-      // Calculate the pixel that is halfway through the image's pixel array.
-      let halfImage = 4 * (d * img.width) * (d * img.height / 2);
-
-      // Set half of the image's pixels to black.
-      for (let i = 0; i < halfImage; i += 4) {
-        // Red.
-        img.pixels[i] = 0;
-        // Green.
-        img.pixels[i + 1] = 0;
-        // Blue.
-        img.pixels[i + 2] = 0;
-        // Alpha.
-        img.pixels[i + 3] = 255;
-      }
-
-      // Update the image's pixels.
-      img.updatePixels();
-
-      // Display the image.
-      image(img, 17, 17);
-
-      describe('A black square drawn in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width in pixels.</p>
-    type: Integer
-  - name: height
-    description: |
-      <p>height in pixels.</p>
-    type: Integer
-return:
-  description: new <a href="#/p5.Image">p5.Image</a> object.
-  type: p5.Image
-chainable: false
----
-
-
-# createImage
diff --git a/src/content/reference/en/p5 copy/createImg.mdx b/src/content/reference/en/p5 copy/createImg.mdx
deleted file mode 100644
index 22b71d22c4..0000000000
--- a/src/content/reference/en/p5 copy/createImg.mdx	
+++ /dev/null
@@ -1,115 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L649
-title: createImg
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates an <code><img></code> element that can appear outside of the
-  canvas.</p>
-
-  <p>The first parameter, <code>src</code>, is a string with the path to the
-  image file.
-
-  <code>src</code> should be a relative path, as in
-  <code>'/assets/image.png'</code>, or a URL, as
-
-  in <code>'https://example.com/image.png'</code>.</p>
-
-  <p>The second parameter, <code>alt</code>, is a string with the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes"
-  target="_blank">alternate text</a>
-
-  for the image. An empty string <code>''</code> can be used for images that
-  aren't displayed.</p>
-
-  <p>The third parameter, <code>crossOrigin</code>, is optional. It's a string
-  that sets the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes/"
-  target="_blank">crossOrigin property</a>
-
-  of the image. Use <code>'anonymous'</code> or <code>'use-credentials'</code>
-  to fetch the image
-
-  with cross-origin access.</p>
-
-  <p>The fourth parameter, <code>callback</code>, is also optional. It sets a
-  function to
-
-  call after the image loads. The new image is passed to the callback
-
-  function as a <a href="/reference/p5/p5.Element">p5.Element</a> object.</p>
-line: 649
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      let img = createImg(
-        'https://p5js.org//assets/img/asterisk-01.png',
-        'The p5.js magenta asterisk.'
-      );
-      img.position(0, -10);
-
-      describe('A gray square with a magenta asterisk in its center.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 649
-    params:
-      - name: src
-        description: |
-          <p>relative path or URL for the image.</p>
-        type: String
-      - name: alt
-        description: |
-          <p>alternate text for the image.</p>
-        type: String
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 693
-    params:
-      - name: src
-        description: ''
-        type: String
-      - name: alt
-        description: ''
-        type: String
-      - name: crossOrigin
-        description: |
-          <p>crossOrigin property to use when fetching the image.</p>
-        type: String
-        optional: true
-      - name: successCallback
-        description: |
-          <p>function to call once the image loads. The new image will be passed
-                                               to the function as a <a href="#/p5.Element">p5.Element</a> object.</p>
-        type: Function
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-chainable: false
----
-
-
-# createImg
diff --git a/src/content/reference/en/p5 copy/createInput.mdx b/src/content/reference/en/p5 copy/createInput.mdx
deleted file mode 100644
index 3a790ee6b2..0000000000
--- a/src/content/reference/en/p5 copy/createInput.mdx	
+++ /dev/null
@@ -1,118 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1859
-title: createInput
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a text <code><input></input></code> element.</p>
-
-  <p>Call <code>myInput.size()</code> to set the length of the text box.</p>
-
-  <p>The first parameter, <code>value</code>, is optional. It's a string that
-  sets the
-
-  input's default value. The input is blank by default.</p>
-
-  <p>The second parameter, <code>type</code>, is also optional. It's a string
-  that
-
-  specifies the type of text being input. See MDN for a full
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/"
-  target="_blank">list of options</a>.
-
-  The default is <code>'text'</code>.</p>
-line: 1859
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myInput;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an input element and place it
-      // beneath the canvas.
-      myInput = createInput();
-      myInput.position(0, 100);
-
-      describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use the input to display a message.
-      let msg = myInput.value();
-      text(msg, 25, 55);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myInput;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an input element and place it
-      // beneath the canvas. Set its default
-      // text to "hello!".
-      myInput = createInput('hello!');
-      myInput.position(0, 100);
-
-      describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use the input to display a message.
-      let msg = myInput.value();
-      text(msg, 25, 55);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 1859
-    params:
-      - name: value
-        description: >
-          <p>default value of the input box. Defaults to an empty string
-          <code>''</code>.</p>
-        type: String
-        optional: true
-      - name: type
-        description: |
-          <p>type of input. Defaults to <code>'text'</code>.</p>
-        type: String
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1929
-    params:
-      - name: value
-        description: ''
-        type: String
-        optional: true
-    return:
-      description: ''
-      type: p5.Element
-chainable: false
----
-
-
-# createInput
diff --git a/src/content/reference/en/p5 copy/createModel.mdx b/src/content/reference/en/p5 copy/createModel.mdx
deleted file mode 100644
index c94e95900f..0000000000
--- a/src/content/reference/en/p5 copy/createModel.mdx	
+++ /dev/null
@@ -1,193 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L1132
-title: createModel
-module: Shape
-submodule: 3D Models
-file: src/webgl/loading.js
-description: >
-  <p>Load a 3d model from an OBJ or STL string.</p>
-
-  <p>OBJ and STL files lack a built-in sense of scale, causing models exported
-  from different programs to vary in size.
-
-  If your model doesn't display correctly, consider using
-  <code>loadModel()</code> with <code>normalize</code> set to <code>true</code>
-  to standardize its size.
-
-  Further adjustments can be made using the <code>scale()</code> function.</p>
-
-  <p>Also, the support for colored STL files is not present. STL files with
-  color will be
-
-  rendered without color properties.</p>
-
-  <ul>
-
-  <li>Options can include:</li>
-
-  </ul>
-
-  <ul>
-
-  <li><code>modelString</code>: Specifies the plain text string of either an stl
-  or obj file to be loaded.</li>
-
-  <li><code>fileType</code>: Defines the file extension of the model.</li>
-
-  <li><code>normalize</code>: Enables standardized size scaling during loading
-  if set to true.</li>
-
-  <li><code>successCallback</code>: Callback for post-loading actions with the
-  3D model object.</li>
-
-  <li><code>failureCallback</code>: Handles errors if model loading fails,
-  receiving an event error.</li>
-
-  <li><code>flipU</code>: Flips the U texture coordinates of the model.</li>
-
-  <li><code>flipV</code>: Flips the V texture coordinates of the model.</li>
-
-  </ul>
-line: 1132
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    const octahedron_model = `
-    v 0.000000E+00 0.000000E+00 40.0000
-    v 22.5000 22.5000 0.000000E+00
-    v 22.5000 -22.5000 0.000000E+00
-    v -22.5000 -22.5000 0.000000E+00
-    v -22.5000 22.5000 0.000000E+00
-    v 0.000000E+00 0.000000E+00 -40.0000
-    f     1 2 3
-    f     1 3 4
-    f     1 4 5
-    f     1 5 2
-    f     6 5 4
-    f     6 4 3
-    f     6 3 2
-    f     6 2 5
-    `;
-    //draw a spinning octahedron
-    let octahedron;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-      octahedron = createModel(octahedron_model, '.obj');
-      describe('Vertically rotating 3D octahedron.');
-    }
-
-    function draw() {
-      background(200);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      model(octahedron);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-  type: p5.Geometry
-overloads:
-  - line: 1132
-    params:
-      - name: modelString
-        description: |
-          <p>String of the object to be loaded</p>
-        type: String
-      - name: fileType
-        description: |
-          <p>The file extension of the model
-                                               (<code>.stl</code>, <code>.obj</code>).</p>
-        type: String
-        optional: true
-      - name: normalize
-        description: |
-          <p>If true, scale the model to a
-                                               standardized size when loading</p>
-        type: Boolean
-      - name: successCallback
-        description: |
-          <p>Function to be called
-                                              once the model is loaded. Will be passed
-                                              the 3D model object.</p>
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: |
-          <p>called with event error if
-                                                  the model fails to load.</p>
-        type: Function(Event)
-        optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-  - line: 1202
-    params:
-      - name: modelString
-        description: ''
-        type: String
-      - name: fileType
-        description: ''
-        type: String
-        optional: true
-      - name: successCallback
-        description: ''
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: ''
-        type: Function(Event)
-        optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-  - line: 1210
-    params:
-      - name: modelString
-        description: ''
-        type: String
-      - name: fileType
-        description: ''
-        type: String
-        optional: true
-      - name: options
-        description: ''
-        type: Object
-        optional: true
-        props:
-          - name: successCallback
-            description: ''
-            type: function(p5.Geometry)
-            optional: true
-          - name: failureCallback
-            description: ''
-            type: Function(Event)
-            optional: true
-          - name: normalize
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipU
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipV
-            description: ''
-            type: Boolean
-            optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-chainable: false
----
-
-
-# createModel
diff --git a/src/content/reference/en/p5 copy/createNumberDict.mdx b/src/content/reference/en/p5 copy/createNumberDict.mdx
deleted file mode 100644
index 952410a222..0000000000
--- a/src/content/reference/en/p5 copy/createNumberDict.mdx	
+++ /dev/null
@@ -1,57 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L48
-title: createNumberDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: >
-  <p>Creates a new instance of <a
-  href="/reference/p5/p5.NumberDict">p5.NumberDict</a> using the key-value pair
-   or object you provide.</p>
-line: 48
-isConstructor: false
-itemtype: method
-example:
-  - |2-
-
-     <div class="norender">
-     <code>
-     function setup() {
-       let myDictionary = createNumberDict(100, 42);
-       print(myDictionary.hasKey(100)); // logs true to console
-      let anotherDictionary = createNumberDict({ 200: 84 });
-       print(anotherDictionary.hasKey(200)); // logs true to console
-     }
-     </code></div>
-class: p5
-return:
-  description: ''
-  type: p5.NumberDict
-overloads:
-  - line: 48
-    params:
-      - name: key
-        description: ''
-        type: Number
-      - name: value
-        description: ''
-        type: Number
-    return:
-      description: ''
-      type: p5.NumberDict
-  - line: 71
-    params:
-      - name: object
-        description: |
-          <p>object</p>
-        type: Object
-    return:
-      description: ''
-      type: p5.NumberDict
-chainable: false
----
-
-
-# createNumberDict
diff --git a/src/content/reference/en/p5 copy/createP.mdx b/src/content/reference/en/p5 copy/createP.mdx
deleted file mode 100644
index 6d3005fc37..0000000000
--- a/src/content/reference/en/p5 copy/createP.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L543
-title: createP
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a paragraph element.</p>
-
-  <p><code><p></p></code> elements are commonly used for paragraph-length
-  text.</p>
-
-  <p>The parameter <code>html</code> is optional. It accepts a string that sets
-  the
-
-  inner HTML of the new <code><p></p></code>.</p>
-line: 543
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a paragraph element and set its position.
-      let p = createP('Tell me a story.');
-      p.position(5, 0);
-
-      describe('A gray square displaying the text "Tell me a story." written in black.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: html
-    description: |
-      <p>inner HTML for the new <code>&lt;p&gt;&lt;/p&gt;</code> element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createP
diff --git a/src/content/reference/en/p5 copy/createRadio.mdx b/src/content/reference/en/p5 copy/createRadio.mdx
deleted file mode 100644
index f2b8a2a81c..0000000000
--- a/src/content/reference/en/p5 copy/createRadio.mdx	
+++ /dev/null
@@ -1,223 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1440
-title: createRadio
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a radio button element.</p>
-
-  <p>The parameter is optional. If a string is passed, as in
-
-  <code>let myRadio = createSelect('food')</code>, then each radio option will
-
-  have <code>"food"</code> as its <code>name</code> parameter: <code><input
-  name="food"></code>.
-
-  If an existing <code><div></div></code> or <code><span></span></code>
-
-  element is passed, as in <code>let myRadio = createSelect(container)</code>,
-  it will
-
-  become the radio button's parent element.</p>
-
-  <p>Radio buttons extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a few
-
-  helpful methods for managing options:</p>
-
-  <ul>
-
-  <li><code>myRadio.option(value, [label])</code> adds an option to the menu.
-  The first parameter, <code>value</code>, is a string that sets the option's
-  value and label. The second parameter, <code>label</code>, is optional. If
-  provided, it sets the label displayed for the <code>value</code>. If an option
-  with <code>value</code> already exists, its label is changed and its value is
-  returned.</li>
-
-  <li><code>myRadio.value()</code> returns the currently-selected option's
-  value.</li>
-
-  <li><code>myRadio.selected()</code> returns the currently-selected
-  option.</li>
-
-  <li><code>myRadio.selected(value)</code> selects the given option and returns
-  it as an <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/"
-  target="_blank"><code>HTMLInputElement</code></a>.</li>
-
-  <li><code>myRadio.disable(shouldDisable)</code> Disables the radio button if
-  <code>true</code> is passed, and enables it if <code>false</code> is
-  passed.</li>
-
-  </ul>
-line: 1440
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let style = document.createElement('style');
-    style.innerHTML = `
-    .p5-radio label {
-       display: flex;
-       align-items: center;
-     }
-     .p5-radio input {
-       margin-right: 5px;
-     }
-     `;
-    document.head.appendChild(style);
-
-    let myRadio;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a radio button element and place it
-      // in the top-left corner.
-      myRadio = createRadio();
-      myRadio.position(0, 0);
-      myRadio.class('p5-radio');
-      myRadio.size(60);
-
-      // Add a few color options.
-      myRadio.option('red');
-      myRadio.option('yellow');
-      myRadio.option('blue');
-
-      // Choose a default option.
-      myRadio.selected('yellow');
-
-      describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
-    }
-
-    function draw() {
-      // Set the background color using the radio button.
-      let g = myRadio.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myRadio;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a radio button element and place it
-      // in the top-left corner.
-      myRadio = createRadio();
-      myRadio.position(0, 0);
-      myRadio.size(50);
-
-      // Add a few color options.
-      // Color values are labeled with
-      // emotions they evoke.
-      myRadio.option('red', 'love');
-      myRadio.option('yellow', 'joy');
-      myRadio.option('blue', 'trust');
-
-      // Choose a default option.
-      myRadio.selected('yellow');
-
-      describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
-    }
-
-    function draw() {
-      // Set the background color using the radio button.
-      let c = myRadio.value();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myRadio;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a radio button element and place it
-      // in the top-left corner.
-      myRadio = createRadio();
-      myRadio.position(0, 0);
-      myRadio.class('p5-radio');
-      myRadio.size(50);
-
-      // Add a few color options.
-      myRadio.option('red');
-      myRadio.option('yellow');
-      myRadio.option('blue');
-
-      // Choose a default option.
-      myRadio.selected('yellow');
-
-      // Create a button and place it beneath the canvas.
-      let btn = createButton('disable');
-      btn.position(0, 100);
-
-      // Call disableRadio() when btn is pressed.
-      btn.mousePressed(disableRadio);
-
-      describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
-    }
-
-    function draw() {
-      // Set the background color using the radio button.
-      let c = myRadio.value();
-      background(c);
-    }
-
-    // Disable myRadio.
-    function disableRadio() {
-      myRadio.disable(true);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 1440
-    params:
-      - name: containerElement
-        description: >
-          <p>container HTML Element, either a
-          <code>&lt;div&gt;&lt;/div&gt;</code>
-
-          or <code>&lt;span&gt;&lt;/span&gt;</code>.</p>
-        type: Object
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1588
-    params:
-      - name: name
-        description: >
-          <p>name parameter assigned to each option's
-          <code>&lt;input&gt;&lt;/input&gt;</code> element.</p>
-        type: String
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1593
-    params: []
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-chainable: false
----
-
-
-# createRadio
diff --git a/src/content/reference/en/p5 copy/createSelect.mdx b/src/content/reference/en/p5 copy/createSelect.mdx
deleted file mode 100644
index 496f4082e6..0000000000
--- a/src/content/reference/en/p5 copy/createSelect.mdx	
+++ /dev/null
@@ -1,235 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L1159
-title: createSelect
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a dropdown menu <code><select></select></code> element.</p>
-
-  <p>The parameter is optional. If <code>true</code> is passed, as in
-
-  <code>let mySelect = createSelect(true)</code>, then the dropdown will support
-
-  multiple selections. If an existing <code><select></select></code> element
-
-  is passed, as in <code>let mySelect = createSelect(otherSelect)</code>, the
-  existing
-
-  element will be wrapped in a new <a
-  href="/reference/p5/p5.Element">p5.Element</a>
-
-  object.</p>
-
-  <p>Dropdowns extend the <a href="/reference/p5/p5.Element">p5.Element</a>
-  class with a few
-
-  helpful methods for managing options:</p>
-
-  <ul>
-
-  <li><code>mySelect.option(name, [value])</code> adds an option to the menu.
-  The first paremeter, <code>name</code>, is a string that sets the option's
-  name and value. The second parameter, <code>value</code>, is optional. If
-  provided, it sets the value that corresponds to the key <code>name</code>. If
-  an option with <code>name</code> already exists, its value is changed to
-  <code>value</code>.</li>
-
-  <li><code>mySelect.value()</code> returns the currently-selected option's
-  value.</li>
-
-  <li><code>mySelect.selected()</code> returns the currently-selected
-  option.</li>
-
-  <li><code>mySelect.selected(option)</code> selects the given option by
-  default.</li>
-
-  <li><code>mySelect.disable()</code> marks the whole dropdown element as
-  disabled.</li>
-
-  <li><code>mySelect.disable(option)</code> marks a given option as
-  disabled.</li>
-
-  <li><code>mySelect.enable()</code> marks the whole dropdown element as
-  enabled.</li>
-
-  <li><code>mySelect.enable(option)</code> marks a given option as enabled.</li>
-
-  </ul>
-line: 1159
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and place it beneath the canvas.
-      mySelect = createSelect();
-      mySelect.position(0, 100);
-
-      // Add color options.
-      mySelect.option('red');
-      mySelect.option('green');
-      mySelect.option('blue');
-      mySelect.option('yellow');
-
-      // Set the selected option to "red".
-      mySelect.selected('red');
-
-      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
-    }
-
-    function draw() {
-      // Use the selected value to paint the background.
-      let c = mySelect.selected();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and place it beneath the canvas.
-      mySelect = createSelect();
-      mySelect.position(0, 100);
-
-      // Add color options.
-      mySelect.option('red');
-      mySelect.option('green');
-      mySelect.option('blue');
-      mySelect.option('yellow');
-
-      // Set the selected option to "red".
-      mySelect.selected('red');
-
-      // Disable the "yellow" option.
-      mySelect.disable('yellow');
-
-      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
-    }
-
-    function draw() {
-      // Use the selected value to paint the background.
-      let c = mySelect.selected();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and place it beneath the canvas.
-      mySelect = createSelect();
-      mySelect.position(0, 100);
-
-      // Add color options with names and values.
-      mySelect.option('one', 'red');
-      mySelect.option('two', 'green');
-      mySelect.option('three', 'blue');
-      mySelect.option('four', 'yellow');
-
-      // Set the selected option to "one".
-      mySelect.selected('one');
-
-      describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
-    }
-
-    function draw() {
-      // Use the selected value to paint the background.
-      let c = mySelect.selected();
-      background(c);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Hold CTRL to select multiple options on Windows and Linux.
-    // Hold CMD to select multiple options on macOS.
-    let mySelect;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a dropdown and allow multiple selections.
-      // Place it beneath the canvas.
-      mySelect = createSelect(true);
-      mySelect.position(0, 100);
-
-      // Add color options.
-      mySelect.option('red');
-      mySelect.option('green');
-      mySelect.option('blue');
-      mySelect.option('yellow');
-
-      describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use the selected value(s) to draw circles.
-      let colors = mySelect.selected();
-      for (let i = 0; i < colors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = 10 + i * 20;
-
-        // Access the color.
-        let c = colors[i];
-
-        // Draw the circle.
-        fill(c);
-        circle(x, 50, 20);
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-overloads:
-  - line: 1159
-    params:
-      - name: multiple
-        description: |
-          <p>support multiple selections.</p>
-        type: Boolean
-        optional: true
-    return:
-      description: new <a href="#/p5.Element">p5.Element</a> object.
-      type: p5.Element
-  - line: 1324
-    params:
-      - name: existing
-        description: >
-          <p>select element to wrap, either as a <a
-          href="#/p5.Element">p5.Element</a> or
-                                   a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" target="_blank">HTMLSelectElement</a>.</p>
-        type: Object
-    return:
-      description: ''
-      type: p5.Element
-chainable: false
----
-
-
-# createSelect
diff --git a/src/content/reference/en/p5 copy/createShader.mdx b/src/content/reference/en/p5 copy/createShader.mdx
deleted file mode 100644
index c595145529..0000000000
--- a/src/content/reference/en/p5 copy/createShader.mdx	
+++ /dev/null
@@ -1,438 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L173
-title: createShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
-
-  <p>Shaders are programs that run on the graphics processing unit (GPU). They
-
-  can process many pixels at the same time, making them fast for many
-
-  graphics tasks. They’re written in a language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.</p>
-
-  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
-  it can be
-
-  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
-
-  <code>shader(myShader)</code>. A shader program consists of two parts, a
-  vertex shader
-
-  and a fragment shader. The vertex shader affects where 3D geometry is drawn
-
-  on the screen and the fragment shader affects color.</p>
-
-  <p>The first parameter, <code>vertSrc</code>, sets the vertex shader. It’s a
-  string that
-
-  contains the vertex shader program written in GLSL.</p>
-
-  <p>The second parameter, <code>fragSrc</code>, sets the fragment shader. It’s
-  a string
-
-  that contains the fragment shader program written in GLSL.</p>
-
-  <p>A shader can optionally describe <em>hooks,</em> which are functions in
-  GLSL that
-
-  users may choose to provide to customize the behavior of the shader using the
-
-  <a href="/reference/p5.Shader/modify/"><code>modify()</code></a> method of
-  <code>p5.Shader</code>. These are added by
-
-  describing the hooks in a third parameter, <code>options</code>, and
-  referencing the hooks in
-
-  your <code>vertSrc</code> or <code>fragSrc</code>. Hooks for the vertex or
-  fragment shader are described under
-
-  the <code>vertex</code> and <code>fragment</code> keys of
-  <code>options</code>. Each one is an object. where each key is
-
-  the type and name of a hook function, and each value is a string with the
-
-  parameter list and default implementation of the hook. For example, to let
-  users
-
-  optionally run code at the start of the vertex shader, the options object
-  could
-
-  include:</p>
-
-  <pre><code class="language-js">{
-    vertex: {
-      'void beforeVertex': '() {}'
-    }
-  }
-
-  </code></pre>
-
-  <p>Then, in your vertex shader source, you can run a hook by calling a
-  function
-
-  with the same name prefixed by <code>HOOK_</code>. If you want to check if the
-  default
-
-  hook has been replaced, maybe to avoid extra overhead, you can check if the
-
-  same name prefixed by <code>AUGMENTED_HOOK_</code> has been defined:</p>
-
-  <pre><code class="language-glsl">void main() {
-    // In most cases, just calling the hook is fine:
-    HOOK_beforeVertex();
-
-    // Alternatively, for more efficiency:
-    #ifdef AUGMENTED_HOOK_beforeVertex
-    HOOK_beforeVertex();
-    #endif
-
-    // Add the rest of your shader code here!
-  }
-
-  </code></pre>
-
-  <p>Note: Only filter shaders can be used in 2D mode. All shaders can be used
-
-  in WebGL mode.</p>
-line: 173
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-
-    void main() {
-      // Set each pixel's RGBA value to yellow.
-      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let shaderProgram = createShader(vertSrc, fragSrc);
-
-      // Compile and apply the p5.Shader object.
-      shader(shaderProgram);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A yellow square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-    uniform vec2 p;
-    uniform float r;
-    const int numIterations = 500;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vec2 c = p + gl_FragCoord.xy * r;
-      vec2 z = c;
-      float n = 0.0;
-
-      for (int i = numIterations; i > 0; i--) {
-        if (z.x * z.x + z.y * z.y > 4.0) {
-          n = float(i) / float(numIterations);
-          break;
-        }
-        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
-      }
-
-      gl_FragColor = vec4(
-        0.5 - cos(n * 17.0) / 2.0,
-        0.5 - cos(n * 13.0) / 2.0,
-        0.5 - cos(n * 23.0) / 2.0,
-        1.0
-      );
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let mandelbrot = createShader(vertSrc, fragSrc);
-
-      // Compile and apply the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      // p is the center point of the Mandelbrot image.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      // Set the shader uniform r to 0.005.
-      // r is the size of the image in Mandelbrot-space.
-      mandelbrot.setUniform('r', 0.005);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A black fractal image on a magenta background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-    uniform vec2 p;
-    uniform float r;
-    const int numIterations = 500;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vec2 c = p + gl_FragCoord.xy * r;
-      vec2 z = c;
-      float n = 0.0;
-
-      for (int i = numIterations; i > 0; i--) {
-        if (z.x * z.x + z.y * z.y > 4.0) {
-          n = float(i) / float(numIterations);
-          break;
-        }
-
-        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
-      }
-
-      gl_FragColor = vec4(
-        0.5 - cos(n * 17.0) / 2.0,
-        0.5 - cos(n * 13.0) / 2.0,
-        0.5 - cos(n * 23.0) / 2.0,
-        1.0
-      );
-    }
-    `;
-
-    let mandelbrot;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      mandelbrot = createShader(vertSrc, fragSrc);
-
-      // Apply the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      // p is the center point of the Mandelbrot image.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates
-      // between 0 and 0.005.
-      // r is the size of the image in Mandelbrot-space.
-      let radius = 0.005 * (sin(frameCount * 0.01) + 1);
-      mandelbrot.setUniform('r', radius);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // A shader with hooks.
-    let myShader;
-
-    // A shader with modified hooks.
-    let modifiedShader;
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-
-    void main() {
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a fragment shader that uses a hook.
-    let fragSrc = `
-    precision highp float;
-    void main() {
-      // Let users override the color
-      gl_FragColor = HOOK_getColor(vec4(1., 0., 0., 1.));
-    }
-    `;
-
-    function setup() {
-      createCanvas(50, 50, WEBGL);
-
-      // Create a shader with hooks
-      myShader = createShader(vertSrc, fragSrc, {
-        fragment: {
-          'vec4 getColor': '(vec4 color) { return color; }'
-        }
-      });
-
-      // Make a version of the shader with a hook overridden
-      modifiedShader = myShader.modify({
-        'vec4 getColor': `(vec4 color) {
-          return vec4(0., 0., 1., 1.);
-        }`
-      });
-    }
-
-    function draw() {
-      noStroke();
-
-      push();
-      shader(myShader);
-      translate(-width/3, 0);
-      sphere(10);
-      pop();
-
-      push();
-      shader(modifiedShader);
-      translate(width/3, 0);
-      sphere(10);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: vertSrc
-    description: |
-      <p>source code for the vertex shader.</p>
-    type: String
-  - name: fragSrc
-    description: |
-      <p>source code for the fragment shader.</p>
-    type: String
-  - name: options
-    description: >
-      <p>An optional object describing how this shader can
-
-      be augmented with hooks. It can include:</p>
-
-      <ul>
-
-      <li><code>vertex</code>: An object describing the available vertex shader
-      hooks.</li>
-
-      <li><code>fragment</code>: An object describing the available frament
-      shader hooks.</li>
-
-      </ul>
-    type: Object
-    optional: true
-return:
-  description: |-
-    new shader object created from the
-    vertex and fragment shaders.
-  type: p5.Shader
-chainable: false
----
-
-
-# createShader
diff --git a/src/content/reference/en/p5 copy/createSlider.mdx b/src/content/reference/en/p5 copy/createSlider.mdx
deleted file mode 100644
index 7bdf510078..0000000000
--- a/src/content/reference/en/p5 copy/createSlider.mdx	
+++ /dev/null
@@ -1,162 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L789
-title: createSlider
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a slider <code><input></input></code> element.</p>
-
-  <p>Range sliders are useful for quickly selecting numbers from a given
-  range.</p>
-
-  <p>The first two parameters, <code>min</code> and <code>max</code>, are
-  numbers that set the
-
-  slider's minimum and maximum.</p>
-
-  <p>The third parameter, <code>value</code>, is optional. It's a number that
-  sets the
-
-  slider's default value.</p>
-
-  <p>The fourth parameter, <code>step</code>, is also optional. It's a number
-  that sets the
-
-  spacing between each value in the slider's range. Setting <code>step</code> to
-  0
-
-  allows the slider to move smoothly from <code>min</code> to
-  <code>max</code>.</p>
-line: 789
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      slider = createSlider(0, 255);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      // Set its default value to 0.
-      slider = createSlider(0, 255, 0);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      // Set its default value to 0.
-      // Set its step size to 50.
-      slider = createSlider(0, 255, 0, 50);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a slider and place it at the top of the canvas.
-      // Set its default value to 0.
-      // Set its step size to 0 so that it moves smoothly.
-      slider = createSlider(0, 255, 0, 0);
-      slider.position(10, 10);
-      slider.size(80);
-
-      describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
-    }
-
-    function draw() {
-      // Use the slider as a grayscale value.
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: min
-    description: |
-      <p>minimum value of the slider.</p>
-    type: Number
-  - name: max
-    description: |
-      <p>maximum value of the slider.</p>
-    type: Number
-  - name: value
-    description: |
-      <p>default value of the slider.</p>
-    type: Number
-    optional: true
-  - name: step
-    description: |
-      <p>size for each step in the slider's range.</p>
-    type: Number
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createSlider
diff --git a/src/content/reference/en/p5 copy/createSpan.mdx b/src/content/reference/en/p5 copy/createSpan.mdx
deleted file mode 100644
index ed346b35dc..0000000000
--- a/src/content/reference/en/p5 copy/createSpan.mdx	
+++ /dev/null
@@ -1,93 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L578
-title: createSpan
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><span></span></code> element.</p>
-
-  <p><code><span></span></code> elements are commonly used as containers
-
-  for inline elements. For example, a <code><span></span></code>
-
-  can hold part of a sentence that's a
-
-  <span style="color: deeppink;">different</span> style.</p>
-
-  <p>The parameter <code>html</code> is optional. It accepts a string that sets
-  the
-
-  inner HTML of the new <code><span></span></code>.</p>
-line: 578
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a span element and set its position.
-      let span = createSpan('p5*js');
-      span.position(25, 35);
-
-      describe('A gray square with the text "p5*js" written in its center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Create a div element as a container.
-      let div = createDiv();
-
-      // Place the div at the center.
-      div.position(25, 35);
-
-      // Create a span element.
-      let s1 = createSpan('p5');
-
-      // Create a second span element.
-      let s2 = createSpan('*');
-
-      // Set the second span's font color.
-      s2.style('color', 'deeppink');
-
-      // Create a third span element.
-      let s3 = createSpan('js');
-
-      // Add all the spans to the container div.
-      s1.parent(div);
-      s2.parent(div);
-      s3.parent(div);
-
-      describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: html
-    description: >
-      <p>inner HTML for the new <code>&lt;span&gt;&lt;/span&gt;</code>
-      element.</p>
-    type: String
-    optional: true
-return:
-  description: new <a href="#/p5.Element">p5.Element</a> object.
-  type: p5.Element
-chainable: false
----
-
-
-# createSpan
diff --git a/src/content/reference/en/p5 copy/createStringDict.mdx b/src/content/reference/en/p5 copy/createStringDict.mdx
deleted file mode 100644
index bc080c1276..0000000000
--- a/src/content/reference/en/p5 copy/createStringDict.mdx	
+++ /dev/null
@@ -1,56 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L14
-title: createStringDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>Creates a new instance of p5.StringDict using the key-value pair
-   or the object you provide.</p>
-line: 14
-isConstructor: false
-itemtype: method
-example:
-  - |2-
-
-     <div class="norender">
-     <code>
-     function setup() {
-       let myDictionary = createStringDict('p5', 'js');
-       print(myDictionary.hasKey('p5')); // logs true to console
-      let anotherDictionary = createStringDict({ happy: 'coding' });
-       print(anotherDictionary.hasKey('happy')); // logs true to console
-     }
-     </code></div>
-class: p5
-return:
-  description: ''
-  type: p5.StringDict
-overloads:
-  - line: 14
-    params:
-      - name: key
-        description: ''
-        type: String
-      - name: value
-        description: ''
-        type: String
-    return:
-      description: ''
-      type: p5.StringDict
-  - line: 37
-    params:
-      - name: object
-        description: |
-          <p>object</p>
-        type: Object
-    return:
-      description: ''
-      type: p5.StringDict
-chainable: false
----
-
-
-# createStringDict
diff --git a/src/content/reference/en/p5 copy/createVector.mdx b/src/content/reference/en/p5 copy/createVector.mdx
deleted file mode 100644
index 07ca75ec36..0000000000
--- a/src/content/reference/en/p5 copy/createVector.mdx	
+++ /dev/null
@@ -1,133 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/math.js#L10
-title: createVector
-module: Math
-submodule: Vector
-file: src/math/math.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-
-  <p>A vector can be thought of in different ways. In one view, a vector is like
-
-  an arrow pointing in space. Vectors have both magnitude (length) and
-
-  direction. This view is helpful for programming motion.</p>
-
-  <p>A vector's components determine its magnitude and direction. For example,
-
-  calling <code>createVector(3, 4)</code> creates a new
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object with an x-component of
-  3 and a
-
-  y-component of 4. From the origin, this vector's tip is 3 units to the
-
-  right and 4 units down.</p>
-
-  <p><a href="/reference/p5/p5.Vector">p5.Vector</a> objects are often used to
-  program
-
-  motion because they simplify the math. For example, a moving ball has a
-
-  position and a velocity. Position describes where the ball is in space. The
-
-  ball's position vector extends from the origin to the ball's center.
-
-  Velocity describes the ball's speed and the direction it's moving. If the
-
-  ball is moving straight up, its velocity vector points straight up. Adding
-
-  the ball's velocity vector to its position vector moves it, as in
-
-  <code>pos.add(vel)</code>. Vector math relies on methods inside the
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> class.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create p5.Vector objects.
-      let p1 = createVector(25, 25);
-      let p2 = createVector(50, 50);
-      let p3 = createVector(75, 75);
-
-      // Draw the dots.
-      strokeWeight(5);
-      point(p1);
-      point(p2);
-      point(p3);
-
-      describe('Three black dots form a diagonal line from top left to bottom right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pos;
-    let vel;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create p5.Vector objects.
-      pos = createVector(50, 100);
-      vel = createVector(0, -1);
-
-      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Add velocity to position.
-      pos.add(vel);
-
-      // If the dot reaches the top of the canvas,
-      // restart from the bottom.
-      if (pos.y < 0) {
-        pos.y = 100;
-      }
-
-      // Draw the dot.
-      strokeWeight(5);
-      point(pos);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x component of the vector.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y component of the vector.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z component of the vector.</p>
-    type: Number
-    optional: true
-return:
-  description: new <a href="#/p5.Vector">p5.Vector</a> object.
-  type: p5.Vector
-chainable: false
----
-
-
-# createVector
diff --git a/src/content/reference/en/p5 copy/createVideo.mdx b/src/content/reference/en/p5 copy/createVideo.mdx
deleted file mode 100644
index a7053f80a0..0000000000
--- a/src/content/reference/en/p5 copy/createVideo.mdx	
+++ /dev/null
@@ -1,135 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L2115
-title: createVideo
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Creates a <code><video></code> element for simple audio/video playback.</p>
-
-  <p><code>createVideo()</code> returns a new
-
-  <a href="/reference/p5/p5.MediaElement">p5.MediaElement</a> object. Videos are
-  shown by
-
-  default. They can be hidden by calling <code>video.hide()</code> and drawn to
-  the
-
-  canvas using <a href="/reference/p5/image/">image()</a>.</p>
-
-  <p>The first parameter, <code>src</code>, is the path the video. If a single
-  string is
-
-  passed, as in <code>'/assets/topsecret.mp4'</code>, a single video is loaded.
-  An array
-
-  of strings can be used to load the same video in different formats. For
-
-  example, <code>['/assets/topsecret.mp4', '/assets/topsecret.ogv',
-  '/assets/topsecret.webm']</code>.
-
-  This is useful for ensuring that the video can play across different browsers
-  with
-
-  different capabilities. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats/">MDN</a>
-
-  for more information about supported formats.</p>
-
-  <p>The second parameter, <code>callback</code>, is optional. It's a function
-  to call once
-
-  the video is ready to play.</p>
-line: 2115
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Load a video and add it to the page.
-      // Note: this may not work in some browsers.
-      let video = createVideo('/assets/small.mp4');
-
-      // Show the default video controls.
-      video.showControls();
-
-      describe('A video of a toy robot with playback controls beneath it.');
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      noCanvas();
-
-      // Load a video and add it to the page.
-      // Provide an array options for different file formats.
-      let video = createVideo(
-        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm']
-      );
-
-      // Show the default video controls.
-      video.showControls();
-
-      describe('A video of a toy robot with playback controls beneath it.');
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    let video;
-
-    function setup() {
-      noCanvas();
-
-      // Load a video and add it to the page.
-      // Provide an array options for different file formats.
-      // Call mute() once the video loads.
-      video = createVideo(
-        ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm'],
-        muteVideo
-      );
-
-      // Show the default video controls.
-      video.showControls();
-
-      describe('A video of a toy robot with playback controls beneath it.');
-    }
-
-    // Mute the video once it loads.
-    function muteVideo() {
-      video.volume(0);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: src
-    description: |
-      <p>path to a video file, or an array of paths for
-                                    supporting different browsers.</p>
-    type: 'String|String[]'
-  - name: callback
-    description: |
-      <p>function to call once the video is ready to play.</p>
-    type: Function
-    optional: true
-return:
-  description: new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
-  type: p5.MediaElement
-chainable: false
----
-
-
-# createVideo
diff --git a/src/content/reference/en/p5 copy/createWriter.mdx b/src/content/reference/en/p5 copy/createWriter.mdx
deleted file mode 100644
index 18928ff461..0000000000
--- a/src/content/reference/en/p5 copy/createWriter.mdx	
+++ /dev/null
@@ -1,146 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1444
-title: createWriter
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Creates a new <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a>
-  object.</p>
-
-  <p><a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> objects provide a
-  way to
-
-  save a sequence of text data, called the <em>print stream</em>, to the user's
-
-  computer. They're low-level objects that enable precise control of text
-
-  output. Functions such as
-
-  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
-
-  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
-  file
-
-  saving.</p>
-
-  <p>The first parameter, <code>filename</code>, is the name of the file to be
-  written. If
-
-  a string is passed, as in <code>createWriter('words.txt')</code>, a new
-
-  <a href="/reference/p5/p5.PrintWriter">p5.PrintWriter</a> object will be
-  created that
-
-  writes to a file named <code>words.txt</code>.</p>
-
-  <p>The second parameter, <code>extension</code>, is optional. If a string is
-  passed, as
-
-  in <code>createWriter('words', 'csv')</code>, the first parameter will be
-  interpreted
-
-  as the file name and the second parameter as the extension.</p>
-line: 1444
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create a p5.PrintWriter object.
-        let myWriter = createWriter('xo.txt');
-
-        // Add some lines to the print stream.
-        myWriter.print('XOO');
-        myWriter.print('OXO');
-        myWriter.print('OOX');
-
-        // Save the file and close the print stream.
-        myWriter.close();
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create a p5.PrintWriter object.
-        // Use the file format .csv.
-        let myWriter = createWriter('mauna_loa_co2', 'csv');
-
-        // Add some lines to the print stream.
-        myWriter.print('date,ppm_co2');
-        myWriter.print('1960-01-01,316.43');
-        myWriter.print('1970-01-01,325.06');
-        myWriter.print('1980-01-01,337.9');
-        myWriter.print('1990-01-01,353.86');
-        myWriter.print('2000-01-01,369.45');
-        myWriter.print('2020-01-01,413.61');
-
-        // Save the file and close the print stream.
-        myWriter.close();
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: name
-    description: |
-      <p>name of the file to create.</p>
-    type: String
-  - name: extension
-    description: |
-      <p>format to use for the file.</p>
-    type: String
-    optional: true
-return:
-  description: stream for writing data.
-  type: p5.PrintWriter
-chainable: false
----
-
-
-# createWriter
diff --git a/src/content/reference/en/p5 copy/cursor.mdx b/src/content/reference/en/p5 copy/cursor.mdx
deleted file mode 100644
index 8ada3a4379..0000000000
--- a/src/content/reference/en/p5 copy/cursor.mdx	
+++ /dev/null
@@ -1,139 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L209
-title: cursor
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Changes the cursor's appearance.</p>
-
-  <p>The first parameter, <code>type</code>, sets the type of cursor to display.
-  The
-
-  built-in options are <code>ARROW</code>, <code>CROSS</code>,
-  <code>HAND</code>, <code>MOVE</code>, <code>TEXT</code>, and
-  <code>WAIT</code>.
-
-  <code>cursor()</code> also recognizes standard CSS cursor properties passed as
-
-  strings: <code>'help'</code>, <code>'wait'</code>, <code>'crosshair'</code>,
-  <code>'not-allowed'</code>, <code>'zoom-in'</code>,
-
-  and <code>'grab'</code>. If the path to an image is passed, as in
-
-  <code>cursor('/assets/target.png')</code>, then the image will be used as the
-  cursor.
-
-  Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be <a
-  href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits">at
-  most 32 by 32 pixels large.</a></p>
-
-  <p>The parameters <code>x</code> and <code>y</code> are optional. If an image
-  is used for the
-
-  cursor, <code>x</code> and <code>y</code> set the location pointed to within
-  the image. They are
-
-  both 0 by default, so the cursor points to the image's top-left corner.
-  <code>x</code>
-
-  and <code>y</code> must be less than the image's width and height,
-  respectively.</p>
-line: 209
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square. The cursor appears as crosshairs.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the cursor to crosshairs: +
-      cursor(CROSS);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Divide the canvas into quadrants.
-      line(50, 0, 50, 100);
-      line(0, 50, 100, 50);
-
-      // Change cursor based on mouse position.
-      if (mouseX < 50 && mouseY < 50) {
-        cursor(CROSS);
-      } else if (mouseX > 50 && mouseY < 50) {
-        cursor('progress');
-      } else if (mouseX > 50 && mouseY > 50) {
-        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
-      } else {
-        cursor('grab');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Change the cursor's active spot
-      // when the mouse is pressed.
-      if (mouseIsPressed === true) {
-        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);
-      } else {
-        cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: type
-    description: |
-      <p>Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
-                                    Native CSS properties: 'grab', 'progress', and so on.
-                                    Path to cursor image.</p>
-    type: String|Constant
-  - name: x
-    description: |
-      <p>horizontal active spot of the cursor.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>vertical active spot of the cursor.</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# cursor
diff --git a/src/content/reference/en/p5 copy/curve.mdx b/src/content/reference/en/p5 copy/curve.mdx
deleted file mode 100644
index 9631e551e8..0000000000
--- a/src/content/reference/en/p5 copy/curve.mdx	
+++ /dev/null
@@ -1,272 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L570
-title: curve
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Draws a curve using a Catmull-Rom spline.</p>
-
-  <p>Spline curves can form shapes and curves that slope gently. They’re like
-
-  cables that are attached to a set of points. Splines are defined by two
-
-  anchor points and two control points.</p>
-
-  <p>The first two parameters, <code>x1</code> and <code>y1</code>, set the
-  first control point. This
-
-  point isn’t drawn and can be thought of as the curve’s starting point.</p>
-
-  <p>The next four parameters, <code>x2</code>, <code>y2</code>,
-  <code>x3</code>, and <code>y3</code>, set the two anchor
-
-  points. The anchor points are the start and end points of the curve’s
-
-  visible segment.</p>
-
-  <p>The seventh and eighth parameters, <code>x4</code> and <code>y4</code>, set
-  the last control
-
-  point. This point isn’t drawn and can be thought of as the curve’s ending
-
-  point.</p>
-
-  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>curve()</code> has twelve arguments because each point has x-, y-, and
-
-  z-coordinates.</p>
-line: 570
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(5, 26, 73, 24, 73, 61, 15, 65);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(5, 26, 5, 26, 73, 24, 73, 61);
-      curve(73, 24, 73, 61, 15, 65, 15, 65);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(73, 24);
-      point(73, 61);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(5, 26);
-      point(15, 65);
-
-      describe(
-        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let x1 = 5;
-    let y1 = 26;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(x1, y1, 73, 24, 73, 61, 15, 65);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(x1, y1, x1, y1, 73, 24, 73, 61);
-      curve(73, 24, 73, 61, 15, 65, 15, 65);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(73, 24);
-      point(73, 61);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x1, y1);
-      point(15, 65);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x1, y1) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x1 = mouseX;
-        y1 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background('skyblue');
-
-      // Draw the red balloon.
-      fill('red');
-      curve(-150, 275, 50, 60, 50, 60, 250, 275);
-
-      // Draw the balloon string.
-      line(50, 60, 50, 80);
-
-      describe('A red balloon in a blue sky.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red balloon in a blue sky.');
-    }
-
-    function draw() {
-      background('skyblue');
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the red balloon.
-      fill('red');
-      curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
-
-      // Draw the balloon string.
-      line(0, 10, 0, 0, 30, 0);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 570
-    params:
-      - name: x1
-        description: |
-          <p>x-coordinate of the first control point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>y-coordinate of the first control point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>x-coordinate of the first anchor point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the second anchor point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the second anchor point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>x-coordinate of the second control point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>y-coordinate of the second control point.</p>
-        type: Number
-    chainable: 1
-  - line: 746
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>z-coordinate of the first control point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the first anchor point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the second anchor point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>z-coordinate of the second control point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# curve
diff --git a/src/content/reference/en/p5 copy/curveDetail.mdx b/src/content/reference/en/p5 copy/curveDetail.mdx
deleted file mode 100644
index 796ca5a026..0000000000
--- a/src/content/reference/en/p5 copy/curveDetail.mdx	
+++ /dev/null
@@ -1,117 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L772
-title: curveDetail
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Sets the number of segments used to draw spline curves in WebGL mode.</p>
-
-  <p>In WebGL mode, smooth shapes are drawn using many flat segments. Adding
-
-  more flat segments makes shapes appear smoother.</p>
-
-  <p>The parameter, <code>detail</code>, is the number of segments to use while
-  drawing a
-
-  spline curve. For example, calling <code>curveDetail(5)</code> will use 5
-  segments to
-
-  draw curves with the <a href="/reference/p5/curve/">curve()</a> function. By
-
-  default,<code>detail</code> is 20.</p>
-
-  <p>Note: <code>curveDetail()</code> has no effect in 2D mode.</p>
-line: 772
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(5, 26, 73, 24, 73, 61, 15, 65);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(5, 26, 5, 26, 73, 24, 73, 61);
-      curve(73, 24, 73, 61, 15, 65, 15, 65);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(73, 24);
-      point(73, 61);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(5, 26);
-      point(15, 65);
-
-      describe(
-        'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Set the curveDetail() to 3.
-      curveDetail(3);
-
-      // Draw a black spline curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-      curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0);
-
-      // Draw red spline curves from the anchor points to the control points.
-      stroke(255, 0, 0);
-      curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0);
-      curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(23, -26);
-      point(23, 11);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(-45, -24);
-      point(-35, 15);
-
-      describe(
-        'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: resolution
-    description: |
-      <p>number of segments to use. Defaults to 20.</p>
-    type: Number
-chainable: true
----
-
-
-# curveDetail
diff --git a/src/content/reference/en/p5 copy/curvePoint.mdx b/src/content/reference/en/p5 copy/curvePoint.mdx
deleted file mode 100644
index 761b468ca6..0000000000
--- a/src/content/reference/en/p5 copy/curvePoint.mdx	
+++ /dev/null
@@ -1,160 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L930
-title: curvePoint
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a spline curve using interpolation.</p>
-
-  <p><code>curvePoint()</code> calculates coordinates along a spline curve using
-  the
-
-  anchor and control points. It expects points in the same order as the
-
-  <a href="/reference/p5/curve/">curve()</a> function. <code>curvePoint()</code>
-  works one axis
-
-  at a time. Passing the anchor and control points' x-coordinates will
-
-  calculate the x-coordinate of a point on the curve. Passing the anchor and
-
-  control points' y-coordinates will calculate the y-coordinate of a point on
-
-  the curve.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first control
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  anchor points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 930
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 5;
-      let y1 = 26;
-      let x2 = 73;
-      let y2 = 24;
-      let x3 = 73;
-      let y3 = 61;
-      let x4 = 15;
-      let y4 = 65;
-
-      // Draw the curve.
-      noFill();
-      curve(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw circles along the curve's path.
-      fill(255);
-
-      // Top.
-      let x = curvePoint(x1, x2, x3, x4, 0);
-      let y = curvePoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Center.
-      x = curvePoint(x1, x2, x3, x4, 0.5);
-      y = curvePoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Bottom.
-      x = curvePoint(x1, x2, x3, x4, 1);
-      y = curvePoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black curve on a gray square. A white circle moves back and forth along the curve.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 5;
-      let y1 = 26;
-      let x2 = 73;
-      let y2 = 24;
-      let x3 = 73;
-      let y3 = 61;
-      let x4 = 15;
-      let y4 = 65;
-
-      // Draw the curve.
-      noFill();
-      curve(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Calculate the circle's coordinates.
-      let t = 0.5 * sin(frameCount * 0.01) + 0.5;
-      let x = curvePoint(x1, x2, x3, x4, t);
-      let y = curvePoint(y1, y2, y3, y4, t);
-
-      // Draw the circle.
-      fill(255);
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of a point on the curve.
-  type: Number
-chainable: false
----
-
-
-# curvePoint
diff --git a/src/content/reference/en/p5 copy/curveTangent.mdx b/src/content/reference/en/p5 copy/curveTangent.mdx
deleted file mode 100644
index 005ade9aab..0000000000
--- a/src/content/reference/en/p5 copy/curveTangent.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L1054
-title: curveTangent
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Calculates coordinates along a line that's tangent to a spline curve.</p>
-
-  <p>Tangent lines skim the surface of a curve. A tangent line's slope equals
-
-  the curve's slope at the point where it intersects.</p>
-
-  <p><code>curveTangent()</code> calculates coordinates along a tangent line
-  using the
-
-  spline curve's anchor and control points. It expects points in the same
-
-  order as the <a href="/reference/p5/curve/">curve()</a> function.
-  <code>curveTangent()</code>
-
-  works one axis at a time. Passing the anchor and control points'
-
-  x-coordinates will calculate the x-coordinate of a point on the tangent
-
-  line. Passing the anchor and control points' y-coordinates will calculate
-
-  the y-coordinate of a point on the tangent line.</p>
-
-  <p>The first parameter, <code>a</code>, is the coordinate of the first control
-  point.</p>
-
-  <p>The second and third parameters, <code>b</code> and <code>c</code>, are the
-  coordinates of the
-
-  anchor points.</p>
-
-  <p>The fourth parameter, <code>d</code>, is the coordinate of the last control
-  point.</p>
-
-  <p>The fifth parameter, <code>t</code>, is the amount to interpolate along the
-  curve. 0
-
-  is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
-
-  between them.</p>
-line: 1054
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates for the curve's anchor and control points.
-      let x1 = 5;
-      let y1 = 26;
-      let x2 = 73;
-      let y2 = 24;
-      let x3 = 73;
-      let y3 = 61;
-      let x4 = 15;
-      let y4 = 65;
-
-      // Draw the curve.
-      noFill();
-      curve(x1, y1, x2, y2, x3, y3, x4, y4);
-
-      // Draw tangents along the curve's path.
-      fill(255);
-
-      // Top circle.
-      stroke(0);
-      let x = curvePoint(x1, x2, x3, x4, 0);
-      let y = curvePoint(y1, y2, y3, y4, 0);
-      circle(x, y, 5);
-
-      // Top tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);
-      let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Center circle.
-      stroke(0);
-      x = curvePoint(x1, x2, x3, x4, 0.5);
-      y = curvePoint(y1, y2, y3, y4, 0.5);
-      circle(x, y, 5);
-
-      // Center tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);
-      ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      // Bottom circle.
-      stroke(0);
-      x = curvePoint(x1, x2, x3, x4, 1);
-      y = curvePoint(y1, y2, y3, y4, 1);
-      circle(x, y, 5);
-
-      // Bottom tangent line.
-      // Scale the tangent point to draw a shorter line.
-      stroke(255, 0, 0);
-      tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);
-      ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);
-      line(x + tx, y + ty, x - tx, y - ty);
-
-      describe(
-        'A black curve on a gray square. A white circle moves back and forth along the curve.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: a
-    description: |
-      <p>coordinate of first control point.</p>
-    type: Number
-  - name: b
-    description: |
-      <p>coordinate of first anchor point.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>coordinate of second anchor point.</p>
-    type: Number
-  - name: d
-    description: |
-      <p>coordinate of second control point.</p>
-    type: Number
-  - name: t
-    description: |
-      <p>amount to interpolate between 0 and 1.</p>
-    type: Number
-return:
-  description: coordinate of a point on the tangent line.
-  type: Number
-chainable: false
----
-
-
-# curveTangent
diff --git a/src/content/reference/en/p5 copy/curveTightness.mdx b/src/content/reference/en/p5 copy/curveTightness.mdx
deleted file mode 100644
index 506066be18..0000000000
--- a/src/content/reference/en/p5 copy/curveTightness.mdx	
+++ /dev/null
@@ -1,77 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/curves.js#L875
-title: curveTightness
-module: Shape
-submodule: Curves
-file: src/core/shape/curves.js
-description: >
-  <p>Adjusts the way <a href="/reference/p5/curve/">curve()</a> and
-
-  <a href="/reference/p5/curveVertex/">curveVertex()</a> draw.</p>
-
-  <p>Spline curves are like cables that are attached to a set of points.
-
-  <code>curveTightness()</code> adjusts how tightly the cable is attached to the
-  points.</p>
-
-  <p>The parameter, <code>tightness</code>, determines how the curve fits to the
-  vertex
-
-  points. By default, <code>tightness</code> is set to 0. Setting tightness to
-  1,
-
-  as in <code>curveTightness(1)</code>, connects the curve's points using
-  straight
-
-  lines. Values in the range from –5 to  5 deform curves while leaving them
-
-  recognizable.</p>
-line: 875
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Move the mouse left and right to see the curve change.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the curve's tightness using the mouse.
-      let t = map(mouseX, 0, 100, -5, 5, true);
-      curveTightness(t);
-
-      // Draw the curve.
-      noFill();
-      beginShape();
-      curveVertex(10, 26);
-      curveVertex(10, 26);
-      curveVertex(83, 24);
-      curveVertex(83, 61);
-      curveVertex(25, 65);
-      curveVertex(25, 65);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: amount
-    description: |
-      <p>amount of tightness.</p>
-    type: Number
-chainable: true
----
-
-
-# curveTightness
diff --git a/src/content/reference/en/p5 copy/curveVertex.mdx b/src/content/reference/en/p5 copy/curveVertex.mdx
deleted file mode 100644
index 3d928fc0ce..0000000000
--- a/src/content/reference/en/p5 copy/curveVertex.mdx	
+++ /dev/null
@@ -1,407 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L832
-title: curveVertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a spline curve segment to a custom shape.</p>
-
-  <p><code>curveVertex()</code> adds a curved segment to custom shapes. The
-  spline curves
-
-  it creates are defined like those made by the
-
-  <a href="/reference/p5/curve/">curve()</a> function.
-  <code>curveVertex()</code> must be called
-
-  between the <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
-
-  <p>Spline curves can form shapes and curves that slope gently. They’re like
-
-  cables that are attached to a set of points. Splines are defined by two
-
-  anchor points and two control points. <code>curveVertex()</code> must be
-  called at
-
-  least four times between
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> in order to draw a curve:</p>
-
-  <pre><code class="language-js">beginShape();
-
-
-  // Add the first control point.
-
-  curveVertex(84, 91);
-
-
-  // Add the anchor points to draw between.
-
-  curveVertex(68, 19);
-
-  curveVertex(21, 17);
-
-
-  // Add the second control point.
-
-  curveVertex(32, 91);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p>The code snippet above would only draw the curve between the anchor points,
-
-  similar to the <a href="/reference/p5/curve/">curve()</a> function. The
-  segments
-
-  between the control and anchor points can be drawn by calling
-
-  <code>curveVertex()</code> with the coordinates of the control points:</p>
-
-  <pre><code class="language-js">beginShape();
-
-
-  // Add the first control point and draw a segment to it.
-
-  curveVertex(84, 91);
-
-  curveVertex(84, 91);
-
-
-  // Add the anchor points to draw between.
-
-  curveVertex(68, 19);
-
-  curveVertex(21, 17);
-
-
-  // Add the second control point.
-
-  curveVertex(32, 91);
-
-
-  // Uncomment the next line to draw the segment to the second control point.
-
-  // curveVertex(32, 91);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p>The first two parameters, <code>x</code> and <code>y</code>, set the
-  vertex’s location. For
-
-  example, calling <code>curveVertex(10, 10)</code> adds a point to the curve at
-
-  <code>(10, 10)</code>.</p>
-
-  <p>Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>curveVertex()</code> has three arguments because each point has x-, y-,
-  and
-
-  z-coordinates. By default, the vertex’s z-coordinate is set to 0.</p>
-
-  <p>Note: <code>curveVertex()</code> won’t work when an argument is passed to
-
-  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
-line: 832
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point.
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point.
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(32, 91);
-      point(84, 91);
-
-      describe(
-        'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(32, 91);
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point.
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(32, 91);
-      point(84, 91);
-
-      describe(
-        'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      noFill();
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(32, 91);
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point and draw a segment to it.
-      curveVertex(84, 91);
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(32, 91);
-      point(84, 91);
-
-      describe(
-        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the bottom-left corner
-    // and drag to change the curve's shape.
-
-    let x1 = 32;
-    let y1 = 91;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the shape.
-      noFill();
-      stroke(0);
-      strokeWeight(1);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(x1, y1);
-      curveVertex(x1, y1);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point and draw a segment to it.
-      curveVertex(84, 91);
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      // Style the anchor and control points.
-      strokeWeight(5);
-
-      // Draw the anchor points in black.
-      stroke(0);
-      point(21, 17);
-      point(68, 19);
-
-      // Draw the control points in red.
-      stroke(255, 0, 0);
-      point(x1, y1);
-      point(84, 91);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x1, y1) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x1 = mouseX;
-        y1 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the first control point and draw a segment to it.
-      curveVertex(32, 91);
-      curveVertex(32, 91);
-
-      // Add the anchor points.
-      curveVertex(21, 17);
-      curveVertex(68, 19);
-
-      // Add the second control point.
-      curveVertex(84, 91);
-      curveVertex(84, 91);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A ghost shape drawn in white on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 832
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the vertex</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the vertex</p>
-        type: Number
-    chainable: 1
-  - line: 1160
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the vertex.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# curveVertex
diff --git a/src/content/reference/en/p5 copy/cylinder.mdx b/src/content/reference/en/p5 copy/cylinder.mdx
deleted file mode 100644
index dd81cd687f..0000000000
--- a/src/content/reference/en/p5 copy/cylinder.mdx	
+++ /dev/null
@@ -1,282 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1477
-title: cylinder
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a cylinder.</p>
-
-  <p>A cylinder is a 3D shape with triangular faces that connect a flat bottom
-
-  to a flat top. Cylinders with few faces look like boxes. Cylinders with
-
-  many faces have smooth surfaces.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>cylinder(20)</code>, it sets the radius of the cylinder’s base. By
-  default,
-
-  <code>radius</code> is 50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cylinder(20, 30)</code>, it sets the cylinder’s height. By
-  default,
-
-  <code>height</code> is set to the cylinder’s <code>radius</code>.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cylinder(20, 30, 5)</code>, it sets the number of edges used to
-  form the
-
-  cylinder's top and bottom. Using more edges makes the top and bottom look
-
-  more like circles. By default, <code>detailX</code> is 24.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>cylinder(20, 30, 5, 2)</code>, it sets the number of triangle
-  subdivisions
-
-  to use along the y-axis, between cylinder's the top and bottom. All 3D
-
-  shapes are made by connecting triangles to form their surfaces. By default,
-
-  <code>detailY</code> is 1.</p>
-
-  <p>The fifth parameter, <code>bottomCap</code>, is also optional. If a
-  <code>false</code> is passed,
-
-  as in <code>cylinder(20, 30, 5, 2, false)</code> the cylinder’s bottom won’t
-  be drawn.
-
-  By default, <code>bottomCap</code> is <code>true</code>.</p>
-
-  <p>The sixth parameter, <code>topCap</code>, is also optional. If a
-  <code>false</code> is passed, as
-
-  in <code>cylinder(20, 30, 5, 2, false, false)</code> the cylinder’s top won’t
-  be
-
-  drawn. By default, <code>topCap</code> is <code>true</code>.</p>
-
-  <p>Note: <code>cylinder()</code> can only be used in WebGL mode.</p>
-line: 1477
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      cylinder();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius and height to 30.
-      cylinder(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      cylinder(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 5.
-      cylinder(30, 50, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 2.
-      cylinder(30, 50, 24, 2);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background. Its top is missing.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 1.
-      // Don't draw its bottom.
-      cylinder(30, 50, 24, 1, false);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cylinder on a gray background. Its top and bottom are missing.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the cylinder.
-      // Set its radius to 30 and height to 50.
-      // Set its detailX to 24 and detailY to 1.
-      // Don't draw its bottom or top.
-      cylinder(30, 50, 24, 1, false, false);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the cylinder. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: >
-      <p>height of the cylinder. Defaults to the value of
-      <code>radius</code>.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of edges along the top and bottom. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 1.</p>
-    type: Integer
-    optional: true
-  - name: bottomCap
-    description: >
-      <p>whether to draw the cylinder's bottom. Defaults to
-      <code>true</code>.</p>
-    type: Boolean
-    optional: true
-  - name: topCap
-    description: |
-      <p>whether to draw the cylinder's top. Defaults to <code>true</code>.</p>
-    type: Boolean
-    optional: true
-chainable: true
----
-
-
-# cylinder
diff --git a/src/content/reference/en/p5 copy/day.mdx b/src/content/reference/en/p5 copy/day.mdx
deleted file mode 100644
index f029fcb983..0000000000
--- a/src/content/reference/en/p5 copy/day.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L10
-title: day
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current day as a number from 1–31.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current day.
-      let d = day();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the day.
-      text(`Current day: ${d}`, 20, 50, 60);
-
-      describe(`The text 'Current day: ${d}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current day between 1 and 31.
-  type: Integer
-chainable: false
----
-
-
-# day
diff --git a/src/content/reference/en/p5 copy/debugMode.mdx b/src/content/reference/en/p5 copy/debugMode.mdx
deleted file mode 100644
index 19ccdfb63f..0000000000
--- a/src/content/reference/en/p5 copy/debugMode.mdx	
+++ /dev/null
@@ -1,362 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L471
-title: debugMode
-module: 3D
-submodule: Interaction
-file: src/webgl/interaction.js
-description: >
-  <p>Adds a grid and an axes icon to clarify orientation in 3D sketches.</p>
-
-  <p><code>debugMode()</code> adds a grid that shows where the “ground” is in a
-  sketch. By
-
-  default, the grid will run through the origin <code>(0, 0, 0)</code> of the
-  sketch
-
-  along the XZ plane. <code>debugMode()</code> also adds an axes icon that
-  points along
-
-  the positive x-, y-, and z-axes. Calling <code>debugMode()</code> displays the
-  grid
-
-  and axes icon with their default size and position.</p>
-
-  <p>There are four ways to call <code>debugMode()</code> with optional
-  parameters to
-
-  customize the debugging environment.</p>
-
-  <p>The first way to call <code>debugMode()</code> has one parameter,
-  <code>mode</code>. If the
-
-  system constant <code>GRID</code> is passed, as in
-  <code>debugMode(GRID)</code>, then the grid
-
-  will be displayed and the axes icon will be hidden. If the constant
-  <code>AXES</code>
-
-  is passed, as in <code>debugMode(AXES)</code>, then the axes icon will be
-  displayed
-
-  and the grid will be hidden.</p>
-
-  <p>The second way to call <code>debugMode()</code> has six parameters. The
-  first
-
-  parameter, <code>mode</code>, selects either <code>GRID</code> or
-  <code>AXES</code> to be displayed. The
-
-  next five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
-  <code>xOff</code>, <code>yOff</code>, and
-
-  <code>zOff</code> are optional. They’re numbers that set the appearance of the
-  grid
-
-  (<code>gridSize</code> and <code>gridDivisions</code>) and the placement of
-  the axes icon
-
-  (<code>xOff</code>, <code>yOff</code>, and <code>zOff</code>). For example,
-  calling
-
-  <code>debugMode(20, 5, 10, 10, 10)</code> sets the <code>gridSize</code> to 20
-  pixels, the number
-
-  of <code>gridDivisions</code> to 5, and offsets the axes icon by 10 pixels
-  along the
-
-  x-, y-, and z-axes.</p>
-
-  <p>The third way to call <code>debugMode()</code> has five parameters. The
-  first
-
-  parameter, <code>mode</code>, selects either <code>GRID</code> or
-  <code>AXES</code> to be displayed. The
-
-  next four parameters, <code>axesSize</code>, <code>xOff</code>,
-  <code>yOff</code>, and <code>zOff</code> are optional.
-
-  They’re numbers that set the appearance of the size of the axes icon
-
-  (<code>axesSize</code>) and its placement (<code>xOff</code>,
-  <code>yOff</code>, and <code>zOff</code>).</p>
-
-  <p>The fourth way to call <code>debugMode()</code> has nine optional
-  parameters. The
-
-  first five parameters, <code>gridSize</code>, <code>gridDivisions</code>,
-  <code>gridXOff</code>, <code>gridYOff</code>,
-
-  and <code>gridZOff</code> are numbers that set the appearance of the grid. For
-
-  example, calling <code>debugMode(100, 5, 0, 0, 0)</code> sets the
-  <code>gridSize</code> to 100,
-
-  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
-  so that
-
-  the grid is centered at the origin. The next four parameters,
-  <code>axesSize</code>,
-
-  <code>xOff</code>, <code>yOff</code>, and <code>zOff</code> are numbers that
-  set the appearance of the size
-
-  of the axes icon (<code>axesSize</code>) and its placement
-  (<code>axesXOff</code>, <code>axesYOff</code>,
-
-  and <code>axesZOff</code>). For example, calling
-
-  <code>debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)</code> sets the
-  <code>gridSize</code> to 100,
-
-  the number of <code>gridDivisions</code> to 5, and sets all the offsets to 0
-  so that
-
-  the grid is centered at the origin. It then sets the <code>axesSize</code> to
-  50 and
-
-  offsets the icon 10 pixels along each axis.</p>
-line: 471
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      debugMode();
-
-      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      // Only display the axes icon.
-      debugMode(AXES);
-
-      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      // Only display the grid and customize it:
-      // - size: 50
-      // - divisions: 10
-      // - offsets: 0, 20, 0
-      debugMode(GRID, 50, 10, 0, 20, 0);
-
-      describe('A multicolor box on a gray background. A grid is displayed below the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      // Display the grid and axes icon and customize them:
-      // Grid
-      // ----
-      // - size: 50
-      // - divisions: 10
-      // - offsets: 0, 20, 0
-      // Axes
-      // ----
-      // - size: 50
-      // - offsets: 0, 0, 0
-      debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);
-
-      describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(20, 40);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 471
-    params: []
-  - line: 650
-    params:
-      - name: mode
-        description: |
-          <p>either GRID or AXES</p>
-        type: Constant
-  - line: 655
-    params:
-      - name: mode
-        description: ''
-        type: Constant
-      - name: gridSize
-        description: |
-          <p>side length of the grid.</p>
-        type: Number
-        optional: true
-      - name: gridDivisions
-        description: |
-          <p>number of divisions in the grid.</p>
-        type: Number
-        optional: true
-      - name: xOff
-        description: |
-          <p>offset from origin along the x-axis.</p>
-        type: Number
-        optional: true
-      - name: yOff
-        description: |
-          <p>offset from origin along the y-axis.</p>
-        type: Number
-        optional: true
-      - name: zOff
-        description: |
-          <p>offset from origin along the z-axis.</p>
-        type: Number
-        optional: true
-  - line: 665
-    params:
-      - name: mode
-        description: ''
-        type: Constant
-      - name: axesSize
-        description: |
-          <p>length of axes icon markers.</p>
-        type: Number
-        optional: true
-      - name: xOff
-        description: ''
-        type: Number
-        optional: true
-      - name: yOff
-        description: ''
-        type: Number
-        optional: true
-      - name: zOff
-        description: ''
-        type: Number
-        optional: true
-  - line: 674
-    params:
-      - name: gridSize
-        description: ''
-        type: Number
-        optional: true
-      - name: gridDivisions
-        description: ''
-        type: Number
-        optional: true
-      - name: gridXOff
-        description: |
-          <p>grid offset from the origin along the x-axis.</p>
-        type: Number
-        optional: true
-      - name: gridYOff
-        description: |
-          <p>grid offset from the origin along the y-axis.</p>
-        type: Number
-        optional: true
-      - name: gridZOff
-        description: |
-          <p>grid offset from the origin along the z-axis.</p>
-        type: Number
-        optional: true
-      - name: axesSize
-        description: ''
-        type: Number
-        optional: true
-      - name: axesXOff
-        description: |
-          <p>axes icon offset from the origin along the x-axis.</p>
-        type: Number
-        optional: true
-      - name: axesYOff
-        description: |
-          <p>axes icon offset from the origin along the y-axis.</p>
-        type: Number
-        optional: true
-      - name: axesZOff
-        description: |
-          <p>axes icon offset from the origin along the z-axis.</p>
-        type: Number
-        optional: true
-chainable: false
----
-
-
-# debugMode
diff --git a/src/content/reference/en/p5 copy/degrees.mdx b/src/content/reference/en/p5 copy/degrees.mdx
deleted file mode 100644
index 730b361384..0000000000
--- a/src/content/reference/en/p5 copy/degrees.mdx	
+++ /dev/null
@@ -1,53 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L485
-title: degrees
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: |
-  <p>Converts an angle measured in radians to its value in degrees.</p>
-  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
-  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
-  <p>The same angle can be expressed in with either unit. For example, 90° is a
-  quarter of a full rotation. The same angle is 2 × π ÷ 4
-  (about 1.57) radians.</p>
-line: 485
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the angle conversion.
-      let rad = QUARTER_PI;
-      let deg = degrees(rad);
-
-      // Display the conversion.
-      text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
-
-      describe('The text "0.79 rad = 45˚".');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radians
-    description: |
-      <p>radians value to convert to degrees.</p>
-    type: Number
-return:
-  description: converted angle.
-  type: Number
-chainable: false
----
-
-
-# degrees
diff --git a/src/content/reference/en/p5 copy/deltaTime.mdx b/src/content/reference/en/p5 copy/deltaTime.mdx
deleted file mode 100644
index 0915a014c2..0000000000
--- a/src/content/reference/en/p5 copy/deltaTime.mdx	
+++ /dev/null
@@ -1,68 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L124
-title: deltaTime
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that tracks the number of milliseconds it
-  took to draw
-
-  the last frame.</p>
-
-  <p><code>deltaTime</code> contains the amount of time it took
-
-  <a href="/reference/p5/draw/">draw()</a> to execute during the previous frame.
-  It's
-
-  useful for simulating physics.</p>
-line: 124
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    let x = 0;
-    let speed = 0.05;
-
-    function setup()  {
-      createCanvas(100, 100);
-
-      // Set the frameRate to 30.
-      frameRate(30);
-
-      describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Use deltaTime to calculate
-      // a change in position.
-      let deltaX = speed * deltaTime;
-
-      // Update the x variable.
-      x += deltaX;
-
-      // Reset x to 0 if it's
-      // greater than 100.
-      if (x > 100)  {
-        x = 0;
-      }
-
-      // Use x to set the circle's
-      // position.
-      circle(x, 50, 20);
-    }
-    </code>
-    </div>
-class: p5
-type: Integer
----
-
-
-# deltaTime
diff --git a/src/content/reference/en/p5 copy/describe.mdx b/src/content/reference/en/p5 copy/describe.mdx
deleted file mode 100644
index dee815b9f1..0000000000
--- a/src/content/reference/en/p5 copy/describe.mdx	
+++ /dev/null
@@ -1,137 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L18
-title: describe
-module: Environment
-submodule: Environment
-file: src/accessibility/describe.js
-description: >
-  <p>Creates a screen reader-accessible description of the canvas.</p>
-
-  <p>The first parameter, <code>text</code>, is the description of the
-  canvas.</p>
-
-  <p>The second parameter, <code>display</code>, is optional. It determines how
-  the
-
-  description is displayed. If <code>LABEL</code> is passed, as in
-
-  <code>describe('A description.', LABEL)</code>, the description will be
-  visible in
-
-  a div element next to the canvas. If <code>FALLBACK</code> is passed, as in
-
-  <code>describe('A description.', FALLBACK)</code>, the description will only
-  be
-
-  visible to screen readers. This is the default mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-line: 18
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Draw a heart.
-      fill('red');
-      noStroke();
-      circle(67, 67, 20);
-      circle(83, 67, 20);
-      triangle(91, 73, 75, 95, 59, 73);
-
-      // Add a general description of the canvas.
-      describe('A pink square with a red heart in the bottom-right corner.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Draw a heart.
-      fill('red');
-      noStroke();
-      circle(67, 67, 20);
-      circle(83, 67, 20);
-      triangle(91, 73, 75, 95, 59, 73);
-
-      // Add a general description of the canvas
-      // and display it for debugging.
-      describe('A pink square with a red heart in the bottom-right corner.', LABEL);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function draw() {
-      background(200);
-
-      // The expression
-      // frameCount % 100
-      // causes x to increase from 0
-      // to 99, then restart from 0.
-      let x = frameCount % 100;
-
-      // Draw the circle.
-      fill(0, 255, 0);
-      circle(x, 50, 40);
-
-      // Add a general description of the canvas.
-      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function draw() {
-      background(200);
-
-      // The expression
-      // frameCount % 100
-      // causes x to increase from 0
-      // to 99, then restart from 0.
-      let x = frameCount % 100;
-
-      // Draw the circle.
-      fill(0, 255, 0);
-      circle(x, 50, 40);
-
-      // Add a general description of the canvas
-      // and display it for debugging.
-      describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: text
-    description: |
-      <p>description of the canvas.</p>
-    type: String
-  - name: display
-    description: |
-      <p>either LABEL or FALLBACK.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# describe
diff --git a/src/content/reference/en/p5 copy/describeElement.mdx b/src/content/reference/en/p5 copy/describeElement.mdx
deleted file mode 100644
index 0b7bc8b330..0000000000
--- a/src/content/reference/en/p5 copy/describeElement.mdx	
+++ /dev/null
@@ -1,127 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/describe.js#L162
-title: describeElement
-module: Environment
-submodule: Environment
-file: src/accessibility/describe.js
-description: >
-  <p>Creates a screen reader-accessible description of elements in the
-  canvas.</p>
-
-  <p>Elements are shapes or groups of shapes that create meaning together. For
-
-  example, a few overlapping circles could make an "eye" element.</p>
-
-  <p>The first parameter, <code>name</code>, is the name of the element.</p>
-
-  <p>The second parameter, <code>text</code>, is the description of the
-  element.</p>
-
-  <p>The third parameter, <code>display</code>, is optional. It determines how
-  the
-
-  description is displayed. If <code>LABEL</code> is passed, as in
-
-  <code>describe('A description.', LABEL)</code>, the description will be
-  visible in
-
-  a div element next to the canvas. Using <code>LABEL</code> creates unhelpful
-
-  duplicates for screen readers. Only use <code>LABEL</code> during development.
-  If
-
-  <code>FALLBACK</code> is passed, as in <code>describe('A description.',
-  FALLBACK)</code>, the
-
-  description will only be visible to screen readers. This is the default
-
-  mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-line: 162
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Describe the first element
-      // and draw it.
-      describeElement('Circle', 'A yellow circle in the top-left corner.');
-      noStroke();
-      fill('yellow');
-      circle(25, 25, 40);
-
-      // Describe the second element
-      // and draw it.
-      describeElement('Heart', 'A red heart in the bottom-right corner.');
-      fill('red');
-      circle(66.6, 66.6, 20);
-      circle(83.2, 66.6, 20);
-      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
-
-      // Add a general description of the canvas.
-      describe('A red heart and yellow circle over a pink background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background('pink');
-
-      // Describe the first element
-      // and draw it. Display the
-      // description for debugging.
-      describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
-      noStroke();
-      fill('yellow');
-      circle(25, 25, 40);
-
-      // Describe the second element
-      // and draw it. Display the
-      // description for debugging.
-      describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
-      fill('red');
-      circle(66.6, 66.6, 20);
-      circle(83.2, 66.6, 20);
-      triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
-
-      // Add a general description of the canvas.
-      describe('A red heart and yellow circle over a pink background.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: name
-    description: |
-      <p>name of the element.</p>
-    type: String
-  - name: text
-    description: |
-      <p>description of the element.</p>
-    type: String
-  - name: display
-    description: |
-      <p>either LABEL or FALLBACK.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# describeElement
diff --git a/src/content/reference/en/p5 copy/deviceMoved.mdx b/src/content/reference/en/p5 copy/deviceMoved.mdx
deleted file mode 100644
index 90e9ce91fb..0000000000
--- a/src/content/reference/en/p5 copy/deviceMoved.mdx	
+++ /dev/null
@@ -1,49 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L501
-title: deviceMoved
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function is
-  called when the device is moved by more than
-
-  the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
-
-  The threshold value can be changed using <a
-  href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>.</p>
-line: 501
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // Move the device around
-    // to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device moves`);
-    }
-    function deviceMoved() {
-      value = value + 5;
-      if (value > 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# deviceMoved
diff --git a/src/content/reference/en/p5 copy/deviceOrientation.mdx b/src/content/reference/en/p5 copy/deviceOrientation.mdx
deleted file mode 100644
index a18763fc87..0000000000
--- a/src/content/reference/en/p5 copy/deviceOrientation.mdx	
+++ /dev/null
@@ -1,22 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L11
-title: deviceOrientation
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable deviceOrientation always contains the orientation of
-  the device. The value of this variable will either be set 'landscape'
-  or 'portrait'. If no data is available it will be set to 'undefined'.
-  either LANDSCAPE or PORTRAIT.</p>
-line: 11
-isConstructor: false
-itemtype: property
-class: p5
-type: Constant
----
-
-
-# deviceOrientation
diff --git a/src/content/reference/en/p5 copy/deviceShaken.mdx b/src/content/reference/en/p5 copy/deviceShaken.mdx
deleted file mode 100644
index 0c1cce17f8..0000000000
--- a/src/content/reference/en/p5 copy/deviceShaken.mdx	
+++ /dev/null
@@ -1,50 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L589
-title: deviceShaken
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function is
-  called when the device total acceleration
-
-  changes of accelerationX and accelerationY values is more than
-
-  the threshold value. The default threshold is set to 30.
-
-  The threshold value can be changed using <a
-  href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>.</p>
-line: 589
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // Shake the device to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device shakes`);
-    }
-    function deviceShaken() {
-      value = value + 5;
-      if (value > 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# deviceShaken
diff --git a/src/content/reference/en/p5 copy/deviceTurned.mdx b/src/content/reference/en/p5 copy/deviceTurned.mdx
deleted file mode 100644
index 28f760eb6f..0000000000
--- a/src/content/reference/en/p5 copy/deviceTurned.mdx	
+++ /dev/null
@@ -1,80 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L531
-title: deviceTurned
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> function is
-  called when the device rotates by
-
-  more than 90 degrees continuously.</p>
-
-  <p>The axis that triggers the <a
-  href="/reference/p5/deviceTurned/">deviceTurned()</a> method is stored in the
-  turnAxis
-
-  variable. The <a href="/reference/p5/deviceTurned/">deviceTurned()</a> method
-  can be locked to trigger on any axis:
-
-  X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>
-line: 531
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // Rotate the device by 90 degrees
-    // to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device turns`);
-    }
-    function deviceTurned() {
-      if (value === 0) {
-        value = 255;
-      } else if (value === 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-    <div>
-    <code>
-    // Run this example on a mobile device
-    // Rotate the device by 90 degrees in the
-    // X-axis to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when x-axis turns`);
-    }
-    function deviceTurned() {
-      if (turnAxis === 'X') {
-        if (value === 0) {
-          value = 255;
-        } else if (value === 255) {
-          value = 0;
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# deviceTurned
diff --git a/src/content/reference/en/p5 copy/directionalLight.mdx b/src/content/reference/en/p5 copy/directionalLight.mdx
deleted file mode 100644
index b2b3e011a3..0000000000
--- a/src/content/reference/en/p5 copy/directionalLight.mdx	
+++ /dev/null
@@ -1,277 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L461
-title: directionalLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines in one direction.</p>
-
-  <p>Directional lights don’t shine from a specific point. They’re like a sun
-
-  that shines from somewhere offscreen. The light’s direction is set using
-
-  three <code>(x, y, z)</code> values between -1 and 1. For example, setting a
-  light’s
-
-  direction as <code>(1, 0, 0)</code> will light <a
-  href="/reference/p5/p5.Geometry">p5.Geometry</a>
-
-  objects from the left since the light faces directly to the right. A
-
-  maximum of 5 directional lights can be active at once.</p>
-
-  <p>There are four ways to call <code>directionalLight()</code> with parameters
-  to set the
-
-  light’s color and direction.</p>
-
-  <p>The first way to call <code>directionalLight()</code> has six parameters.
-  The first
-
-  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
-  the light’s color using the
-
-  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last three
-
-  parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set the
-  light’s direction. For example,
-
-  <code>directionalLight(255, 0, 0, 1, 0, 0)</code> creates a red <code>(255, 0,
-  0)</code> light
-
-  that shines to the right <code>(1, 0, 0)</code>.</p>
-
-  <p>The second way to call <code>directionalLight()</code> has four parameters.
-  The first
-
-  three parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set
-  the light’s color using the
-
-  current <a href="/reference/p5/colorMode/">colorMode()</a>. The last
-  parameter,
-
-  <code>direction</code> sets the light’s direction using a
-   <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
-  <code>directionalLight(255, 0, 0, lightDir)</code> creates a red <code>(255,
-  0, 0)</code> light
-
-  that shines in the direction the <code>lightDir</code> vector points.</p>
-
-  <p>The third way to call <code>directionalLight()</code> has four parameters.
-  The first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
-  the light’s direction. For
-
-  example, <code>directionalLight(myColor, 1, 0, 0)</code> creates a light that
-  shines
-
-  to the right <code>(1, 0, 0)</code> with the color value of
-  <code>myColor</code>.</p>
-
-  <p>The fourth way to call <code>directionalLight()</code> has two parameters.
-  The first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  second parameter, <code>direction</code>, sets the light’s direction using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object. For example,
-
-  <code>directionalLight(myColor, lightDir)</code> creates a light that shines
-  in the
-
-  direction the <code>lightDir</code> vector points with the color value of
-  <code>myColor</code>.</p>
-line: 461
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to turn on the directional light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the light.
-      if (isLit === true) {
-        // Add a red directional light from above.
-        // Use RGB values and XYZ directions.
-        directionalLight(255, 0, 0, 0, 1, 0);
-      }
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red directional light from above.
-      // Use a p5.Color object and XYZ directions.
-      let c = color(255, 0, 0);
-      directionalLight(c, 0, 1, 0);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red directional light from above.
-      // Use a p5.Color object and a p5.Vector object.
-      let c = color(255, 0, 0);
-      let lightDir = createVector(0, 1, 0);
-      directionalLight(c, lightDir);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 461
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: x
-        description: |
-          <p>x-component of the light's direction between -1 and 1.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-component of the light's direction between -1 and 1.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-component of the light's direction between -1 and 1.</p>
-        type: Number
-    chainable: 1
-  - line: 614
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: direction
-        description: |
-          <p>direction of the light as a
-                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
-        type: p5.Vector
-    chainable: 1
-  - line: 624
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                                                    an array of color values, or as a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-    chainable: 1
-  - line: 634
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: direction
-        description: ''
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# directionalLight
diff --git a/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx b/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx
deleted file mode 100644
index a72ec28678..0000000000
--- a/src/content/reference/en/p5 copy/disableFriendlyErrors.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L872
-title: disableFriendlyErrors
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>Turns off the parts of the Friendly Error System (FES) that impact
-  performance.</p>
-
-  <p>The <a
-  href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md"
-  target="_blank">FES</a>
-
-  can cause sketches to draw slowly because it does extra work behind the
-
-  scenes. For example, the FES checks the arguments passed to functions,
-
-  which takes time to process. Disabling the FES can significantly improve
-
-  performance by turning off these checks.</p>
-line: 872
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Disable the FES.
-    p5.disableFriendlyErrors = true;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // The circle() function requires three arguments. The
-      // next line would normally display a friendly error that
-      // points this out. Instead, nothing happens and it fails
-      // silently.
-      circle(50, 50);
-
-      describe('A gray square.');
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# disableFriendlyErrors
diff --git a/src/content/reference/en/p5 copy/displayDensity.mdx b/src/content/reference/en/p5 copy/displayDensity.mdx
deleted file mode 100644
index e52be83ec2..0000000000
--- a/src/content/reference/en/p5 copy/displayDensity.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1078
-title: displayDensity
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: |
-  <p>Returns the display's current pixel density.</p>
-line: 1078
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Set the pixel density to 1.
-      pixelDensity(1);
-
-      // Create a canvas and draw
-      // a circle.
-      createCanvas(100, 100);
-      background(200);
-      circle(50, 50, 70);
-
-      describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');
-    }
-
-    function mousePressed() {
-      // Get the current display density.
-      let d = displayDensity();
-
-      // Use the display density to set
-      // the sketch's pixel density.
-      pixelDensity(d);
-
-      // Paint the background and
-      // draw a circle.
-      background(200);
-      circle(50, 50, 70);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current pixel density of the display.
-  type: Number
-chainable: false
----
-
-
-# displayDensity
diff --git a/src/content/reference/en/p5 copy/displayHeight.mdx b/src/content/reference/en/p5 copy/displayHeight.mdx
deleted file mode 100644
index d392419e70..0000000000
--- a/src/content/reference/en/p5 copy/displayHeight.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L621
-title: displayHeight
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the height of the screen
-  display.</p>
-
-  <p><code>displayHeight</code> is useful for running full-screen programs. Its
-  value
-
-  depends on the current <a
-  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
-
-  <p>Note: The actual screen height can be computed as
-
-  <code>displayHeight * pixelDensity()</code>.</p>
-line: 621
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the display's dimensions.
-      createCanvas(displayWidth, displayHeight);
-
-      background(200);
-
-      describe('A gray canvas that is the same size as the display.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# displayHeight
diff --git a/src/content/reference/en/p5 copy/displayWidth.mdx b/src/content/reference/en/p5 copy/displayWidth.mdx
deleted file mode 100644
index 9ab79a09db..0000000000
--- a/src/content/reference/en/p5 copy/displayWidth.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L590
-title: displayWidth
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the width of the screen
-  display.</p>
-
-  <p><code>displayWidth</code> is useful for running full-screen programs. Its
-  value
-
-  depends on the current <a
-  href="/reference/p5/pixelDensity/">pixelDensity()</a>.</p>
-
-  <p>Note: The actual screen width can be computed as
-
-  <code>displayWidth * pixelDensity()</code>.</p>
-line: 590
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the display's dimensions.
-      createCanvas(displayWidth, displayHeight);
-
-      background(200);
-
-      describe('A gray canvas that is the same size as the display.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# displayWidth
diff --git a/src/content/reference/en/p5 copy/dist.mdx b/src/content/reference/en/p5 copy/dist.mdx
deleted file mode 100644
index 60b7155b9b..0000000000
--- a/src/content/reference/en/p5 copy/dist.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L155
-title: dist
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the distance between two points.</p>
-
-  <p>The version of <code>dist()</code> with four parameters calculates distance
-  in two
-
-  dimensions.</p>
-
-  <p>The version of <code>dist()</code> with six parameters calculates distance
-  in three
-
-  dimensions.</p>
-
-  <p>Use <a href="/reference/p5.Vector/dist/">p5.Vector.dist()</a> to calculate
-  the
-
-  distance between two <a href="/reference/p5/p5.Vector">p5.Vector</a>
-  objects.</p>
-line: 155
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the coordinates.
-      let x1 = 10;
-      let y1 = 50;
-      let x2 = 90;
-      let y2 = 50;
-
-      // Draw the points and a line connecting them.
-      line(x1, y1, x2, y2);
-      strokeWeight(5);
-      point(x1, y1);
-      point(x2, y2);
-
-      // Calculate the distance.
-      let d = dist(x1, y1, x2, y2);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the distance.
-      text(d, 43, 40);
-
-      describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: distance between the two points.
-  type: Number
-overloads:
-  - line: 155
-    params:
-      - name: x1
-        description: |
-          <p>x-coordinate of the first point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>y-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>x-coordinate of the second point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>y-coordinate of the second point.</p>
-        type: Number
-    return:
-      description: distance between the two points.
-      type: Number
-  - line: 209
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>z-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>z-coordinate of the second point.</p>
-        type: Number
-    return:
-      description: distance between the two points.
-      type: Number
-chainable: false
----
-
-
-# dist
diff --git a/src/content/reference/en/p5 copy/doubleClicked.mdx b/src/content/reference/en/p5 copy/doubleClicked.mdx
deleted file mode 100644
index 3e148c677f..0000000000
--- a/src/content/reference/en/p5 copy/doubleClicked.mdx	
+++ /dev/null
@@ -1,157 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1599
-title: doubleClicked
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when a mouse button is clicked twice
-  quickly.</p>
-
-  <p>Declaring the function <code>doubleClicked()</code> sets a code block to
-  run
-
-  automatically when the user presses and releases the mouse button twice
-
-  quickly:</p>
-
-  <pre><code class="language-js">function doubleClicked() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>doubleClicked()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function doubleClicked() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional.
-  <code>doubleClicked()</code> is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the double-click event:</p>
-
-  <pre><code class="language-js">function doubleClicked(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, code placed in <code>doubleClicked()</code> will
-  run after two
-
-  touches that occur within a short time.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-line: 1599
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the square's color when the user double-clicks.
-    function doubleClicked() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black circle at its center. When the user double-clicks on the circle, it changes color to white.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the circle.
-      fill(value);
-
-      // Draw the circle.
-      circle(50, 50, 80);
-    }
-
-    // Reassign value to 255 when the user double-clicks on the circle.
-    function doubleClicked() {
-      if (dist(50, 50, mouseX, mouseY) < 40) {
-        value = 255;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# doubleClicked
diff --git a/src/content/reference/en/p5 copy/draw.mdx b/src/content/reference/en/p5 copy/draw.mdx
deleted file mode 100644
index dba2e2b44a..0000000000
--- a/src/content/reference/en/p5 copy/draw.mdx	
+++ /dev/null
@@ -1,129 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L176
-title: draw
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>A function that's called repeatedly while the sketch runs.</p>
-
-  <p>Declaring the function <code>draw()</code> sets a code block to run
-  repeatedly
-
-  once the sketch starts. It’s used to create animations and respond to
-
-  user inputs:</p>
-
-  <pre><code class="language-js">function draw() {
-    // Code to run repeatedly.
-  }
-
-  </code></pre>
-
-  <p>This is often called the "draw loop" because p5.js calls the code in
-
-  <code>draw()</code> in a loop behind the scenes. By default,
-  <code>draw()</code> tries to run
-
-  60 times per second. The actual rate depends on many factors. The
-
-  drawing rate, called the "frame rate", can be controlled by calling
-
-  <a href="/reference/p5/frameRate/">frameRate()</a>. The number of times
-  <code>draw()</code>
-
-  has run is stored in the system variable
-
-  <a href="/reference/p5/frameCount/">frameCount()</a>.</p>
-
-  <p>Code placed within <code>draw()</code> begins looping after
-
-  <a href="/reference/p5/setup/">setup()</a> runs. <code>draw()</code> will run
-  until the user
-
-  closes the sketch. <code>draw()</code> can be stopped by calling the
-
-  <a href="/reference/p5/noLoop/">noLoop()</a> function. <code>draw()</code> can
-  be resumed by
-
-  calling the <a href="/reference/p5/loop/">loop()</a> function.</p>
-line: 176
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Paint the background once.
-      background(200);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
-      );
-    }
-
-    function draw() {
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves.'
-      );
-    }
-
-    function draw() {
-      // Paint the background repeatedly.
-      background(200);
-
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click the canvas to change the circle's color.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      // Paint the background repeatedly.
-      background(200);
-
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-
-    // Change the fill color when the user double-clicks.
-    function doubleClicked() {
-      fill('deeppink');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# draw
diff --git a/src/content/reference/en/p5 copy/drawingContext.mdx b/src/content/reference/en/p5 copy/drawingContext.mdx
deleted file mode 100644
index 3cf1335733..0000000000
--- a/src/content/reference/en/p5 copy/drawingContext.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L1198
-title: drawingContext
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>A system variable that provides direct access to the sketch's
-
-  <code><canvas></code> element.</p>
-
-  <p>The <code><canvas></code> element provides many specialized features that
-  aren't
-
-  included in the p5.js library. The <code>drawingContext</code> system variable
-
-  provides access to these features by exposing the sketch's
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/">CanvasRenderingContext2D</a>
-
-  object.</p>
-line: 1198
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(180);
-
-      // Style the circle using shadows.
-      drawingContext.shadowOffsetX = 5;
-      drawingContext.shadowOffsetY = -5;
-      drawingContext.shadowBlur = 10;
-      drawingContext.shadowColor = 'black';
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe("A white circle on a gray background. The circle's edges are shadowy.");
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background('skyblue');
-
-      // Style the circle using a color gradient.
-      let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);
-      myGradient.addColorStop(0, 'yellow');
-      myGradient.addColorStop(0.6, 'orangered');
-      myGradient.addColorStop(1, 'yellow');
-      drawingContext.fillStyle = myGradient;
-      drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A fiery sun drawn on a light blue background.');
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# drawingContext
diff --git a/src/content/reference/en/p5 copy/ellipse.mdx b/src/content/reference/en/p5 copy/ellipse.mdx
deleted file mode 100644
index 6c07765230..0000000000
--- a/src/content/reference/en/p5 copy/ellipse.mdx	
+++ /dev/null
@@ -1,164 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L371
-title: ellipse
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws an ellipse (oval).</p>
-
-  <p>An ellipse is a round shape defined by the <code>x</code>, <code>y</code>,
-  <code>w</code>, and
-
-  <code>h</code> parameters. <code>x</code> and <code>y</code> set the location
-  of its center. <code>w</code> and
-
-  <code>h</code> set its width and height. See
-
-  <a href="/reference/p5/ellipseMode/">ellipseMode()</a> for other ways to set
-
-  its position.</p>
-
-  <p>If no height is set, the value of width is used for both the width and
-
-  height. If a negative height or width is specified, the absolute value is
-
-  taken.</p>
-
-  <p>The fifth parameter, <code>detail</code>, is also optional. It determines
-  how many
-
-  vertices are used to draw the ellipse in WebGL mode. The default value is
-
-  25.</p>
-line: 371
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      ellipse(50, 50, 80, 80);
-
-      describe('A white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      ellipse(50, 50, 80);
-
-      describe('A white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      ellipse(50, 50, 80, 40);
-
-      describe('A white ellipse on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      ellipse(0, 0, 80, 40);
-
-      describe('A white ellipse on a gray canvas.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Use 6 vertices.
-      ellipse(0, 0, 80, 40, 6);
-
-      describe('A white hexagon on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 371
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the center of the ellipse.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the center of the ellipse.</p>
-        type: Number
-      - name: w
-        description: |
-          <p>width of the ellipse.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>height of the ellipse.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 472
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: w
-        description: ''
-        type: Number
-      - name: h
-        description: ''
-        type: Number
-      - name: detail
-        description: |
-          <p>optional parameter for WebGL mode only. This is to
-                                  specify the number of vertices that makes up the
-                                  perimeter of the ellipse. Default value is 25. Won't
-                                  draw a stroke for a detail of more than 50.</p>
-        type: Integer
-        optional: true
-chainable: true
----
-
-
-# ellipse
diff --git a/src/content/reference/en/p5 copy/ellipseMode.mdx b/src/content/reference/en/p5 copy/ellipseMode.mdx
deleted file mode 100644
index 0826de63f4..0000000000
--- a/src/content/reference/en/p5 copy/ellipseMode.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L12
-title: ellipseMode
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Changes where ellipses, circles, and arcs are drawn.</p>
-
-  <p>By default, the first two parameters of
-
-  <a href="/reference/p5/ellipse/">ellipse()</a>, <a
-  href="/reference/p5/circle/">circle()</a>,
-
-  and <a href="/reference/p5/arc/">arc()</a>
-
-  are the x- and y-coordinates of the shape's center. The next parameters set
-
-  the shape's width and height. This is the same as calling
-
-  <code>ellipseMode(CENTER)</code>.</p>
-
-  <p><code>ellipseMode(RADIUS)</code> also uses the first two parameters to set
-  the x- and
-
-  y-coordinates of the shape's center. The next parameters are half of the
-
-  shapes's width and height. Calling <code>ellipse(0, 0, 10, 15)</code> draws a
-  shape
-
-  with a width of 20 and height of 30.</p>
-
-  <p><code>ellipseMode(CORNER)</code> uses the first two parameters as the
-  upper-left
-
-  corner of the shape. The next parameters are its width and height.</p>
-
-  <p><code>ellipseMode(CORNERS)</code> uses the first two parameters as the
-  location of one
-
-  corner of the ellipse's bounding box. The next parameters are the location
-
-  of the opposite corner.</p>
-
-  <p>The argument passed to <code>ellipseMode()</code> must be written in ALL
-  CAPS because
-
-  the constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>,
-  and <code>CORNERS</code> are defined this
-
-  way. JavaScript is a case-sensitive language.</p>
-line: 12
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // White ellipse.
-      ellipseMode(RADIUS);
-      fill(255);
-      ellipse(50, 50, 30, 30);
-
-      // Gray ellipse.
-      ellipseMode(CENTER);
-      fill(100);
-      ellipse(50, 50, 30, 30);
-
-      describe('A white circle with a gray circle at its center. Both circles have black outlines.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // White ellipse.
-      ellipseMode(CORNER);
-      fill(255);
-      ellipse(25, 25, 50, 50);
-
-      // Gray ellipse.
-      ellipseMode(CORNERS);
-      fill(100);
-      ellipse(25, 25, 50, 50);
-
-      describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either CENTER, RADIUS, CORNER, or CORNERS</p>
-    type: Constant
-chainable: true
----
-
-
-# ellipseMode
diff --git a/src/content/reference/en/p5 copy/ellipsoid.mdx b/src/content/reference/en/p5 copy/ellipsoid.mdx
deleted file mode 100644
index 56d86709b7..0000000000
--- a/src/content/reference/en/p5 copy/ellipsoid.mdx	
+++ /dev/null
@@ -1,233 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1965
-title: ellipsoid
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws an ellipsoid.</p>
-
-  <p>An ellipsoid is a 3D shape with triangular faces that connect to form a
-
-  round surface. Ellipsoids with few faces look like crystals. Ellipsoids
-
-  with many faces have smooth surfaces and look like eggs.
-  <code>ellipsoid()</code>
-
-  defines a shape by its radii. This is different from
-
-  <a href="/reference/p5/ellipse/">ellipse()</a> which uses diameters
-
-  (width and height).</p>
-
-  <p>The first parameter, <code>radiusX</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>ellipsoid(20)</code>, it sets the radius of the ellipsoid along the
-  x-axis. By
-
-  default, <code>radiusX</code> is 50.</p>
-
-  <p>The second parameter, <code>radiusY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30)</code>, it sets the ellipsoid’s radius along the
-  y-axis.
-
-  By default, <code>radiusY</code> is set to the ellipsoid’s
-  <code>radiusX</code>.</p>
-
-  <p>The third parameter, <code>radiusZ</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30, 40)</code>, it sets the ellipsoid’s radius along
-  the
-
-  z-axis. By default, <code>radiusZ</code> is set to the ellipsoid’s
-  <code>radiusY</code>.</p>
-
-  <p>The fourth parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30, 40, 5)</code>, it sets the number of triangle
-
-  subdivisions to use along the x-axis. All 3D shapes are made by connecting
-
-  triangles to form their surfaces. By default, <code>detailX</code> is 24.</p>
-
-  <p>The fifth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>ellipsoid(20, 30, 40, 5, 7)</code>, it sets the number of triangle
-
-  subdivisions to use along the y-axis. All 3D shapes are made by connecting
-
-  triangles to form their surfaces. By default, <code>detailY</code> is 16.</p>
-
-  <p>Note: <code>ellipsoid()</code> can only be used in WebGL mode.</p>
-line: 1965
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      ellipsoid(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      ellipsoid(30, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      // Set its radiusZ to 50.
-      ellipsoid(30, 40, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      // Set its radiusZ to 50.
-      // Set its detailX to 4.
-      ellipsoid(30, 40, 50, 4);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white ellipsoid on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the ellipsoid.
-      // Set its radiusX to 30.
-      // Set its radiusY to 40.
-      // Set its radiusZ to 50.
-      // Set its detailX to 4.
-      // Set its detailY to 3.
-      ellipsoid(30, 40, 50, 4, 3);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radiusX
-    description: |
-      <p>radius of the ellipsoid along the x-axis. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: radiusY
-    description: >
-      <p>radius of the ellipsoid along the y-axis. Defaults to
-      <code>radiusX</code>.</p>
-    type: Number
-    optional: true
-  - name: radiusZ
-    description: >
-      <p>radius of the ellipsoid along the z-axis. Defaults to
-      <code>radiusY</code>.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# ellipsoid
diff --git a/src/content/reference/en/p5 copy/emissiveMaterial.mdx b/src/content/reference/en/p5 copy/emissiveMaterial.mdx
deleted file mode 100644
index 10037c3c86..0000000000
--- a/src/content/reference/en/p5 copy/emissiveMaterial.mdx	
+++ /dev/null
@@ -1,140 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2647
-title: emissiveMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the emissive color of shapes’ surface material.</p>
-
-  <p>The <code>emissiveMaterial()</code> color sets a color shapes display at
-  full
-
-  strength, regardless of lighting. This can give the appearance that a shape
-
-  is glowing. However, emissive materials don’t actually emit light that
-
-  can affect surrounding objects.</p>
-
-  <p><code>emissiveMaterial()</code> can be called three ways with different
-  parameters to
-
-  set the material’s color.</p>
-
-  <p>The first way to call <code>emissiveMaterial()</code> has one parameter,
-  <code>gray</code>.
-
-  Grayscale values between 0 and 255, as in <code>emissiveMaterial(50)</code>,
-  can be
-
-  passed to set the material’s color. Higher grayscale values make shapes
-
-  appear brighter.</p>
-
-  <p>The second way to call <code>emissiveMaterial()</code> has one parameter,
-  <code>color</code>. A
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  values, or a
-
-  CSS color string, as in <code>emissiveMaterial('magenta')</code>, can be
-  passed to set
-
-  the material’s color.</p>
-
-  <p>The third way to call <code>emissiveMaterial()</code> has four parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
-  HSBA, or HSLA values can be
-
-  passed to set the material’s colors, as in <code>emissiveMaterial(255, 0,
-  0)</code> or
-
-  <code>emissiveMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
-  using
-
-  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-
-  <p>Note: <code>emissiveMaterial()</code> can only be used in WebGL mode.</p>
-line: 2647
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red cube drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white ambient light.
-      ambientLight(255, 255, 255);
-
-      // Add a red emissive material using RGB values.
-      emissiveMaterial(255, 0, 0);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2647
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the
-                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the
-                                    current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha value in the current
-                                    <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2717
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 (black) and 255 (white).</p>
-        type: Number
-    chainable: 1
-  - line: 2723
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                     an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-    chainable: 1
-chainable: true
----
-
-
-# emissiveMaterial
diff --git a/src/content/reference/en/p5 copy/endClip.mdx b/src/content/reference/en/p5 copy/endClip.mdx
deleted file mode 100644
index 69bf243858..0000000000
--- a/src/content/reference/en/p5 copy/endClip.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L190
-title: endClip
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: |
-  <p>Ends defining a mask that was started with
-  <a href="/reference/p5/beginClip/">beginClip()</a>.</p>
-line: 190
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a mask.
-      beginClip();
-      triangle(15, 37, 30, 13, 43, 37);
-      circle(45, 45, 7);
-      endClip();
-
-      // Draw a backing shape.
-      square(5, 5, 45);
-
-      describe('A white triangle and circle on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# endClip
diff --git a/src/content/reference/en/p5 copy/endContour.mdx b/src/content/reference/en/p5 copy/endContour.mdx
deleted file mode 100644
index 5965b72db8..0000000000
--- a/src/content/reference/en/p5 copy/endContour.mdx	
+++ /dev/null
@@ -1,133 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1224
-title: endContour
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Stops creating a hole within a flat shape.</p>
-
-  <p>The <a href="/reference/p5/beginContour/">beginContour()</a> and
-  <code>endContour()</code>
-
-  functions allow for creating negative space within custom shapes that are
-
-  flat. <a href="/reference/p5/beginContour/">beginContour()</a> begins adding
-  vertices
-
-  to a negative space and <code>endContour()</code> stops adding them.
-
-  <a href="/reference/p5/beginContour/">beginContour()</a> and
-  <code>endContour()</code> must be
-
-  called between <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a>.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and <a
-  href="/reference/p5/scale/">scale()</a>
-
-  don't work between <a href="/reference/p5/beginContour/">beginContour()</a>
-  and
-
-  <code>endContour()</code>. It's also not possible to use other shapes, such as
-
-  <a href="/reference/p5/ellipse/">ellipse()</a> or <a
-  href="/reference/p5/rect/">rect()</a>,
-
-  between <a href="/reference/p5/beginContour/">beginContour()</a> and
-  <code>endContour()</code>.</p>
-
-  <p>Note: The vertices that define a negative space must "wind" in the opposite
-
-  direction from the outer shape. First, draw vertices for the outer shape
-
-  clockwise order. Then, draw vertices for the negative space in
-
-  counter-clockwise order.</p>
-line: 1224
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(10, 10);
-      vertex(90, 10);
-      vertex(90, 90);
-      vertex(10, 90);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(30, 30);
-      vertex(30, 70);
-      vertex(70, 70);
-      vertex(70, 30);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square with a square hole in its center drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Exterior vertices, clockwise winding.
-      vertex(-40, -40);
-      vertex(40, -40);
-      vertex(40, 40);
-      vertex(-40, 40);
-
-      // Interior vertices, counter-clockwise winding.
-      beginContour();
-      vertex(-20, -20);
-      vertex(-20, 20);
-      vertex(20, 20);
-      vertex(20, -20);
-      endContour();
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# endContour
diff --git a/src/content/reference/en/p5 copy/endGeometry.mdx b/src/content/reference/en/p5 copy/endGeometry.mdx
deleted file mode 100644
index bfbeb81c7b..0000000000
--- a/src/content/reference/en/p5 copy/endGeometry.mdx	
+++ /dev/null
@@ -1,285 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L266
-title: endGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Stops adding shapes to a new
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and returns the
-  object.</p>
-
-  <p>The <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>
-
-  functions help with creating complex 3D shapes from simpler ones such as
-
-  <a href="/reference/p5/sphere/">sphere()</a>. <code>beginGeometry()</code>
-  begins adding shapes
-
-  to a custom <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a> stops adding them.</p>
-
-  <p><code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a> can help
-
-  to make sketches more performant. For example, if a complex 3D shape
-
-  doesn’t change while a sketch runs, then it can be created with
-
-  <code>beginGeometry()</code> and <a
-  href="/reference/p5/endGeometry/">endGeometry()</a>.
-
-  Creating a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object once and
-  then
-
-  drawing it will run faster than repeatedly drawing the individual pieces.</p>
-
-  <p>See <a href="/reference/p5/buildGeometry/">buildGeometry()</a> for another
-  way to
-
-  build 3D shapes.</p>
-
-  <p>Note: <code>endGeometry()</code> can only be used in WebGL mode.</p>
-line: 266
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add a cone.
-      cone();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      createArrow();
-
-      describe('A white arrow drawn on a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      shape = endGeometry();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let blueArrow;
-    let redArrow;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the arrows.
-      redArrow = createArrow('red');
-      blueArrow = createArrow('blue');
-
-      describe('A red arrow and a blue arrow drawn on a gray background. The blue arrow rotates slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the red arrow.
-      model(redArrow);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the blue arrow.
-      model(blueArrow);
-    }
-
-    function createArrow(fillColor) {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      fill(fillColor);
-
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = createParticles();
-    }
-
-    function createParticles() {
-      // Start building the p5.Geometry object.
-      beginGeometry();
-
-      // Add shapes.
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-
-      // Stop building the p5.Geometry object.
-      let shape = endGeometry();
-
-      return shape;
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: new 3D shape.
-  type: p5.Geometry
-chainable: false
----
-
-
-# endGeometry
diff --git a/src/content/reference/en/p5 copy/endShape.mdx b/src/content/reference/en/p5 copy/endShape.mdx
deleted file mode 100644
index 198b6d7497..0000000000
--- a/src/content/reference/en/p5 copy/endShape.mdx	
+++ /dev/null
@@ -1,256 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1344
-title: endShape
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Stops adding vertices to a custom shape.</p>
-
-  <p>The <a href="/reference/p5/beginShape/">beginShape()</a> and
-  <code>endShape()</code> functions
-
-  allow for creating custom shapes in 2D or 3D.
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> begins adding vertices to
-  a
-
-  custom shape and <code>endShape()</code> stops adding them.</p>
-
-  <p>The first parameter, <code>mode</code>, is optional. By default, the first
-  and last
-
-  vertices of a shape aren't connected. If the constant <code>CLOSE</code> is
-  passed, as
-
-  in <code>endShape(CLOSE)</code>, then the first and last vertices will be
-  connected.</p>
-
-  <p>The second parameter, <code>count</code>, is also optional. In WebGL mode,
-  it’s more
-
-  efficient to draw many copies of the same shape using a technique called
-
-  <a
-  href="https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html"
-  target="_blank">instancing</a>.
-
-  The <code>count</code> parameter tells WebGL mode how many copies to draw. For
-
-  example, calling <code>endShape(CLOSE, 400)</code> after drawing a custom
-  shape will
-
-  make it efficient to draw 400 copies. This feature requires
-
-  <a href="https://p5js.org/tutorials/intro-to-shaders/" target="_blank">writing
-  a custom shader</a>.</p>
-
-  <p>After calling <a href="/reference/p5/beginShape/">beginShape()</a>, shapes
-  can be
-
-  built by calling <a href="/reference/p5/vertex/">vertex()</a>,
-
-  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
-
-  <a href="/reference/p5/quadraticVertex/">quadraticVertex()</a>, and/or
-
-  <a href="/reference/p5/curveVertex/">curveVertex()</a>. Calling
-
-  <code>endShape()</code> will stop adding vertices to the
-
-  shape. Each shape will be outlined with the current stroke color and filled
-
-  with the current fill color.</p>
-
-  <p>Transformations such as <a href="/reference/p5/translate/">translate()</a>,
-
-  <a href="/reference/p5/rotate/">rotate()</a>, and
-
-  <a href="/reference/p5/scale/">scale()</a> don't work between
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-  <code>endShape()</code>. It's also not
-
-  possible to use other shapes, such as <a
-  href="/reference/p5/ellipse/">ellipse()</a> or
-
-  <a href="/reference/p5/rect/">rect()</a>, between
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-  <code>endShape()</code>.</p>
-line: 1344
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shapes.
-      noFill();
-
-      // Left triangle.
-      beginShape();
-      vertex(20, 20);
-      vertex(45, 20);
-      vertex(45, 80);
-      endShape(CLOSE);
-
-      // Right triangle.
-      beginShape();
-      vertex(50, 20);
-      vertex(75, 20);
-      vertex(75, 80);
-      endShape();
-
-      describe(
-        'Two sets of black lines drawn on a gray background. The three lines on the left form a right triangle. The two lines on the right form a right angle.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(200, 100);
-
-      background(240);
-
-      noFill();
-      stroke(0);
-
-      // Open shape (left)
-      beginShape();
-      vertex(20, 20);
-      vertex(80, 20);
-      vertex(80, 80);
-      endShape();  // Not closed
-
-      // Closed shape (right)
-      beginShape();
-      vertex(120, 20);
-      vertex(180, 20);
-      vertex(180, 80);
-      endShape(CLOSE);  // Closed
-
-      describe(
-        'Two right-angled shapes on a light gray background. The left shape is open with three lines. The right shape is closed, forming a triangle.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `#version 300 es
-
-    precision mediump float;
-
-    in vec3 aPosition;
-    flat out int instanceID;
-
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    void main() {
-
-      // Copy the instance ID to the fragment shader.
-      instanceID = gl_InstanceID;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-
-      // gl_InstanceID represents a numeric value for each instance.
-      // Using gl_InstanceID allows us to move each instance separately.
-      // Here we move each instance horizontally by ID * 23.
-      float xOffset = float(gl_InstanceID) * 23.0;
-
-      // Apply the offset to the final position.
-      gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
-        vec4(xOffset, 0.0, 0.0, 0.0));
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `#version 300 es
-
-    precision mediump float;
-
-    out vec4 outColor;
-    flat in int instanceID;
-    uniform float numInstances;
-
-    void main() {
-      vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
-      vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
-
-      // Normalize the instance ID.
-      float normId = float(instanceID) / numInstances;
-
-      // Mix between two colors using the normalized instance ID.
-      outColor = mix(red, blue, normId);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let myShader = createShader(vertSrc, fragSrc);
-
-      background(220);
-
-      // Compile and apply the p5.Shader.
-      shader(myShader);
-
-      // Set the numInstances uniform.
-      myShader.setUniform('numInstances', 4);
-
-      // Translate the origin to help align the drawing.
-      translate(25, -10);
-
-      // Style the shapes.
-      noStroke();
-
-      // Draw the shapes.
-      beginShape();
-      vertex(0, 0);
-      vertex(0, 20);
-      vertex(20, 20);
-      vertex(20, 0);
-      vertex(0, 0);
-      endShape(CLOSE, 4);
-
-      describe('A row of four squares. Their colors transition from purple on the left to red on the right');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>use CLOSE to close the shape</p>
-    type: Constant
-    optional: true
-  - name: count
-    description: >
-      <p>number of times you want to draw/instance the shape (for WebGL
-      mode).</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# endShape
diff --git a/src/content/reference/en/p5 copy/erase.mdx b/src/content/reference/en/p5 copy/erase.mdx
deleted file mode 100644
index 24f1397e8e..0000000000
--- a/src/content/reference/en/p5 copy/erase.mdx	
+++ /dev/null
@@ -1,123 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1629
-title: erase
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Starts using shapes to erase parts of the canvas.</p>
-
-  <p>All drawing that follows <code>erase()</code> will subtract from the
-  canvas, revealing
-
-  the web page underneath. The erased areas will become transparent, allowing
-
-  the content behind the canvas to show through. The
-
-  <a href="/reference/p5/fill/">fill()</a>, <a
-  href="/reference/p5/stroke/">stroke()</a>, and
-
-  <a href="/reference/p5/blendMode/">blendMode()</a> have no effect once
-  <code>erase()</code> is
-
-  called.</p>
-
-  <p>The <code>erase()</code> function has two optional parameters. The first
-  parameter
-
-  sets the strength of erasing by the shape's interior. A value of 0 means
-
-  that no erasing will occur. A value of 255 means that the shape's interior
-
-  will fully erase the content underneath. The default value is 255
-
-  (full strength).</p>
-
-  <p>The second parameter sets the strength of erasing by the shape's edge. A
-
-  value of 0 means that no erasing will occur. A value of 255 means that the
-
-  shape's edge will fully erase the content underneath. The default value is
-
-  255 (full strength).</p>
-
-  <p>To cancel the erasing effect, use the <a
-  href="/reference/p5/noErase/">noErase()</a>
-
-  function.</p>
-
-  <p><code>erase()</code> has no effect on drawing done with the
-
-  <a href="/reference/p5/image/">image()</a> and
-
-  <a href="/reference/p5/background/">background()</a> functions.</p>
-line: 1629
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(100, 100, 250);
-
-      // Draw a pink square.
-      fill(250, 100, 100);
-      square(20, 20, 60);
-
-      // Erase a circular area.
-      erase();
-      circle(25, 30, 30);
-      noErase();
-
-      describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(100, 100, 250);
-
-      // Draw a pink square.
-      fill(250, 100, 100);
-      square(20, 20, 60);
-
-      // Erase a circular area.
-      strokeWeight(5);
-      erase(150, 255);
-      circle(25, 30, 30);
-      noErase();
-
-      describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: strengthFill
-    description: |
-      <p>a number (0-255) for the strength of erasing under a shape's interior.
-                                             Defaults to 255, which is full strength.</p>
-    type: Number
-    optional: true
-  - name: strengthStroke
-    description: |
-      <p>a number (0-255) for the strength of erasing under a shape's edge.
-                                             Defaults to 255, which is full strength.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# erase
diff --git a/src/content/reference/en/p5 copy/exitPointerLock.mdx b/src/content/reference/en/p5 copy/exitPointerLock.mdx
deleted file mode 100644
index db8a989422..0000000000
--- a/src/content/reference/en/p5 copy/exitPointerLock.mdx	
+++ /dev/null
@@ -1,82 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1946
-title: exitPointerLock
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>Exits a pointer lock started with
-
-  <a href="/reference/p5/requestPointerLock/">requestPointerLock</a>.</p>
-
-  <p>Calling <code>requestPointerLock()</code> locks the values of
-
-  <a href="/reference/p5/mouseX/">mouseX</a>, <a
-  href="/reference/p5/mouseY/">mouseY</a>,
-
-  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
-  href="/reference/p5/pmouseY/">pmouseY</a>.
-
-  Calling <code>exitPointerLock()</code> resumes updating the mouse system
-  variables.</p>
-
-  <p>Note: Most browsers require an input, such as a click, before calling
-
-  <code>requestPointerLock()</code>. It’s recommended to call
-  <code>requestPointerLock()</code> in
-
-  an event function such as <a
-  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
-line: 1946
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let isLocked = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a word at its center. The word changes between "Unlocked" and "Locked" when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Tell the user whether the pointer is locked.
-      if (isLocked === true) {
-        text('Locked', 50, 50);
-      } else {
-        text('Unlocked', 50, 50);
-      }
-    }
-
-    // Toggle the pointer lock when the user double-clicks.
-    function doubleClicked() {
-      if (isLocked === true) {
-        exitPointerLock();
-        isLocked = false;
-      } else {
-        requestPointerLock();
-        isLocked = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# exitPointerLock
diff --git a/src/content/reference/en/p5 copy/exp.mdx b/src/content/reference/en/p5 copy/exp.mdx
deleted file mode 100644
index e75a420dab..0000000000
--- a/src/content/reference/en/p5 copy/exp.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L230
-title: exp
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates the value of Euler's number e (2.71828...) raised to the power
-  of a number.</p>
-line: 230
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = exp(1);
-      circle(10, 10, d);
-
-      // Left-center.
-      d = exp(2);
-      circle(20, 20, d);
-
-      // Right-center.
-      d = exp(3);
-      circle(40, 40, d);
-
-      // Bottom-right.
-      d = exp(4);
-      circle(80, 80, d);
-
-      describe('A series of circles that grow exponentially from top left to bottom right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that grow exponentially from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 0.005 * exp(x * 0.1);
-
-      // Draw a point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>exponent to raise.</p>
-    type: Number
-return:
-  description: e^n
-  type: Number
-chainable: false
----
-
-
-# exp
diff --git a/src/content/reference/en/p5 copy/fill.mdx b/src/content/reference/en/p5 copy/fill.mdx
deleted file mode 100644
index 84f074abd4..0000000000
--- a/src/content/reference/en/p5 copy/fill.mdx	
+++ /dev/null
@@ -1,312 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1000
-title: fill
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Sets the color used to fill shapes.</p>
-
-  <p>Calling <code>fill(255, 165, 0)</code> or <code>fill('orange')</code> means
-  all shapes drawn
-
-  after the fill command will be filled with the color orange.</p>
-
-  <p>The version of <code>fill()</code> with one parameter interprets the value
-  one of
-
-  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
-  grayscale
-
-  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
-  color
-
-  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
-  provided to
-
-  set the fill color.</p>
-
-  <p>The version of <code>fill()</code> with three parameters interprets them as
-  RGB, HSB,
-
-  or HSL colors, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The default color space is
-  RGB,
-
-  with each value in the range from 0 to 255.</p>
-
-  <p>The version of <code>fill()</code> with four parameters interprets them as
-  <code>RGBA</code>, <code>HSBA</code>,
-
-  or <code>HSLA</code> colors, depending on the current <a
-  href="/reference/p5/colorMode/">colorMode()</a>. The last parameter
-
-  sets the alpha (transparency) value.</p>
-line: 1000
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A grayscale value.
-      fill(51);
-      square(20, 20, 60);
-
-      describe('A dark charcoal gray square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // R, G & B values.
-      fill(255, 204, 0);
-      square(20, 20, 60);
-
-      describe('A yellow square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // R, G, B, and Alpha values.
-      fill(255, 0, 0, 128);
-      square(20, 20, 60);
-
-      describe('A semi-transparent red square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(100);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // H, S & B values.
-      fill(255, 204, 100);
-      square(20, 20, 60);
-
-      describe('A royal blue square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A CSS named color.
-      fill('red');
-      square(20, 20, 60);
-
-      describe('A red square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Three-digit hex RGB notation.
-      fill('#fae');
-      square(20, 20, 60);
-
-      describe('A pink square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Six-digit hex RGB notation.
-      fill('#A251FA');
-      square(20, 20, 60);
-
-      describe('A purple square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGB notation.
-      fill('rgb(0, 255, 0)');
-      square(20, 20, 60);
-
-      describe('A bright green square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGBA notation.
-      fill('rgba(0, 255, 0, 0.25)');
-      square(20, 20, 60);
-
-      describe('A soft green rectange with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGB notation.
-      fill('rgb(100%, 0%, 10%)');
-      square(20, 20, 60);
-
-      describe('A red square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGBA notation.
-      fill('rgba(100%, 0%, 100%, 0.5)');
-      square(20, 20, 60);
-
-      describe('A dark fuchsia square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A p5.Color object.
-      let c = color(0, 0, 255);
-      fill(c);
-      square(20, 20, 60);
-
-      describe('A blue square with a black outline.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1000
-    params:
-      - name: v1
-        description: >
-          <p>red value if color mode is RGB or hue value if color mode is
-          HSB.</p>
-        type: Number
-      - name: v2
-        description: >
-          <p>green value if color mode is RGB or saturation value if color mode
-          is HSB.</p>
-        type: Number
-      - name: v3
-        description: >
-          <p>blue value if color mode is RGB or brightness value if color mode
-          is HSB.</p>
-        type: Number
-      - name: alpha
-        description: >
-          <p>alpha value, controls transparency (0 - transparent, 255 -
-          opaque).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1225
-    params:
-      - name: value
-        description: |
-          <p>a color string.</p>
-        type: String
-    chainable: 1
-  - line: 1231
-    params:
-      - name: gray
-        description: |
-          <p>a grayscale value.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1238
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue &
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 1245
-    params:
-      - name: color
-        description: |
-          <p>the fill color.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# fill
diff --git a/src/content/reference/en/p5 copy/filter.mdx b/src/content/reference/en/p5 copy/filter.mdx
deleted file mode 100644
index 5496568d48..0000000000
--- a/src/content/reference/en/p5 copy/filter.mdx	
+++ /dev/null
@@ -1,330 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L442
-title: filter
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Applies an image filter to the canvas.</p>
-
-  <p>The preset options are:</p>
-
-  <p><code>INVERT</code>
-
-  Inverts the colors in the image. No parameter is used.</p>
-
-  <p><code>GRAY</code>
-
-  Converts the image to grayscale. No parameter is used.</p>
-
-  <p><code>THRESHOLD</code>
-
-  Converts the image to black and white. Pixels with a grayscale value
-
-  above a given threshold are converted to white. The rest are converted to
-
-  black. The threshold must be between 0.0 (black) and 1.0 (white). If no
-
-  value is specified, 0.5 is used.</p>
-
-  <p><code>OPAQUE</code>
-
-  Sets the alpha channel to entirely opaque. No parameter is used.</p>
-
-  <p><code>POSTERIZE</code>
-
-  Limits the number of colors in the image. Each color channel is limited to
-
-  the number of colors specified. Values between 2 and 255 are valid, but
-
-  results are most noticeable with lower values. The default value is 4.</p>
-
-  <p><code>BLUR</code>
-
-  Blurs the image. The level of blurring is specified by a blur radius. Larger
-
-  values increase the blur. The default value is 4. A gaussian blur is used
-
-  in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code> mode.</p>
-
-  <p><code>ERODE</code>
-
-  Reduces the light areas. No parameter is used.</p>
-
-  <p><code>DILATE</code>
-
-  Increases the light areas. No parameter is used.</p>
-
-  <p><code>filter()</code> uses WebGL in the background by default because it's
-  faster.
-
-  This can be disabled in <code>P2D</code> mode by adding a <code>false</code>
-  argument, as in
-
-  <code>filter(BLUR, false)</code>. This may be useful to keep computation off
-  the GPU
-
-  or to work around a lack of WebGL support.</p>
-
-  <p>In WebgL mode, <code>filter()</code> can also use custom shaders. See
-
-  <a href="/reference/p5/createFilterShader/">createFilterShader()</a> for more
-
-  information.</p>
-line: 442
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the INVERT filter.
-      filter(INVERT);
-
-      describe('A blue brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the GRAY filter.
-      filter(GRAY);
-
-      describe('A brick wall drawn in grayscale.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the THRESHOLD filter.
-      filter(THRESHOLD);
-
-      describe('A brick wall drawn in black and white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the OPAQUE filter.
-      filter(OPAQUE);
-
-      describe('A red brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the POSTERIZE filter.
-      filter(POSTERIZE, 3);
-
-      describe('An image of a red brick wall drawn with limited color palette.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the BLUR filter.
-      filter(BLUR, 3);
-
-      describe('A blurry image of a red brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the DILATE filter.
-      filter(DILATE);
-
-      describe('A red brick wall with bright lines between each brick.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the ERODE filter.
-      filter(ERODE);
-
-      describe('A red brick wall with faint lines between each brick.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Apply the BLUR filter.
-      // Don't use WebGL.
-      filter(BLUR, 3, false);
-
-      describe('A blurry image of a red brick wall.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 442
-    params:
-      - name: filterType
-        description: |
-          <p>either THRESHOLD, GRAY, OPAQUE, INVERT,
-                                         POSTERIZE, BLUR, ERODE, DILATE or BLUR.</p>
-        type: Constant
-      - name: filterParam
-        description: |
-          <p>parameter unique to each filter.</p>
-        type: Number
-        optional: true
-      - name: useWebGL
-        description: |
-          <p>flag to control whether to use fast
-                                         WebGL filters (GPU) or original image
-                                         filters (CPU); defaults to <code>true</code>.</p>
-        type: Boolean
-        optional: true
-  - line: 715
-    params:
-      - name: filterType
-        description: ''
-        type: Constant
-      - name: useWebGL
-        description: ''
-        type: Boolean
-        optional: true
-  - line: 720
-    params:
-      - name: shaderFilter
-        description: |
-          <p>shader that's been loaded, with the
-                                            frag shader using a <code>tex0</code> uniform.</p>
-        type: p5.Shader
-chainable: false
----
-
-
-# filter
diff --git a/src/content/reference/en/p5 copy/float.mdx b/src/content/reference/en/p5 copy/float.mdx
deleted file mode 100644
index fffd6bfc1b..0000000000
--- a/src/content/reference/en/p5 copy/float.mdx	
+++ /dev/null
@@ -1,116 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L10
-title: float
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>String</code> to a floating point (decimal)
-  <code>Number</code>.</p>
-
-  <p><code>float()</code> converts strings that resemble numbers, such as
-  <code>'12.34'</code>, into
-
-  numbers.</p>
-
-  <p>The parameter, <code>str</code>, is the string value to convert. For
-  example, calling
-
-  <code>float('12.34')</code> returns the number <code>12.34</code>.  If an
-  array of strings is
-
-  passed, as in <code>float(['12.34', '56.78'])</code>, then an array of numbers
-  will be
-
-  returned.</p>
-
-  <p>Note: If a string can't be converted to a number, as in
-  <code>float('giraffe')</code>,
-
-  then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '12.3';
-
-      // Convert the string to a number.
-      let converted = float(original);
-
-      // Double the converted value.
-      let twice = converted * 2;
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(12);
-
-      // Display the original and converted values.
-      text(`${original} × 2 = ${twice}`, 50, 50);
-
-      describe('The text "12.3 × 2 = 24.6" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let original = ['60', '30', '15'];
-
-      // Convert the strings to numbers.
-      let diameters = float(original);
-
-      for (let d of diameters) {
-        // Draw a circle.
-        circle(50, 50, d);
-      }
-
-      describe('Three white, concentric circles on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 10
-    params:
-      - name: str
-        description: |
-          <p>string to convert.</p>
-        type: String
-    return:
-      description: converted number.
-      type: Number
-  - line: 80
-    params:
-      - name: ns
-        description: |
-          <p>array of strings to convert.</p>
-        type: 'String[]'
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# float
diff --git a/src/content/reference/en/p5 copy/floor.mdx b/src/content/reference/en/p5 copy/floor.mdx
deleted file mode 100644
index a9e97965a3..0000000000
--- a/src/content/reference/en/p5 copy/floor.mdx	
+++ /dev/null
@@ -1,57 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L294
-title: floor
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates the closest integer value that is less than or equal to the
-  value of a number.</p>
-line: 294
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use RGB color with values from 0 to 1.
-      colorMode(RGB, 1);
-
-      noStroke();
-
-      // Draw the left rectangle.
-      let r = 0.8;
-      fill(r, 0, 0);
-      rect(0, 0, 50, 100);
-
-      // Round r down to 0.
-      r = floor(r);
-
-      // Draw the right rectangle.
-      fill(r, 0, 0);
-      rect(50, 0, 50, 100);
-
-      describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to round down.</p>
-    type: Number
-return:
-  description: rounded down number.
-  type: Integer
-chainable: false
----
-
-
-# floor
diff --git a/src/content/reference/en/p5 copy/focused.mdx b/src/content/reference/en/p5 copy/focused.mdx
deleted file mode 100644
index 1e95f25927..0000000000
--- a/src/content/reference/en/p5 copy/focused.mdx	
+++ /dev/null
@@ -1,50 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L174
-title: focused
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Boolean</code> variable that's <code>true</code> if the browser is
-  focused and <code>false</code> if
-
-  not.</p>
-
-  <p>Note: The browser window can only receive input if it's focused.</p>
-line: 174
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Open this example in two separate browser
-    // windows placed side-by-side to demonstrate.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A square changes color from green to red when the browser window is out of focus.');
-    }
-
-    function draw() {
-      // Change the background color
-      // when the browser window
-      // goes in/out of focus.
-      if (focused === true) {
-        background(0, 255, 0);
-      } else {
-        background(255, 0, 0);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# focused
diff --git a/src/content/reference/en/p5 copy/for.mdx b/src/content/reference/en/p5 copy/for.mdx
deleted file mode 100644
index dc71d1c2ca..0000000000
--- a/src/content/reference/en/p5 copy/for.mdx	
+++ /dev/null
@@ -1,290 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1648
-title: for
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A way to repeat a block of code when the number of iterations is known.</p>
-
-  <p><code>for</code> loops are helpful for repeating statements a certain
-  number of times.
-
-  For example, a <code>for</code> loop makes it easy to express the idea
-
-  "draw five lines" like so:</p>
-
-  <pre><code class="language-js">for (let x = 10; x < 100; x += 20) {
-    line(x, 25, x, 75);
-  }
-
-  </code></pre>
-
-  <p>The loop's header begins with the keyword <code>for</code>. Loops generally
-  count up
-
-  or count down as they repeat, or iterate. The statements in parentheses
-
-  <code>let x = 10; x < 100; x += 20</code> tell the loop how it should
-  repeat:</p>
-
-  <ul>
-
-  <li><code>let x = 10</code> tells the loop to start counting at
-  <code>10</code> and keep track of iterations using the variable
-  <code>x</code>.</li>
-
-  <li><code>x < 100</code> tells the loop to count up to, but not including,
-  <code>100</code>.</li>
-
-  <li><code>x += 20</code>  tells the loop to count up by <code>20</code> at the
-  end of each iteration.</li>
-
-  </ul>
-
-  <p>The code between the curly braces <code>{}</code> is the loop's body.
-  Statements in the
-
-  loop body are repeated during each iteration of the loop.</p>
-
-  <p>It's common to create infinite loops accidentally. When this happens,
-
-  sketches may become unresponsive and the web browser may display a warning.
-
-  For example, the following loop never stops iterating because it doesn't
-
-  count up:</p>
-
-  <pre><code class="language-js">for (let x = 10; x < 100; x = 20) {
-    line(x, 25, x, 75);
-  }
-
-  </code></pre>
-
-  <p>The statement <code>x = 20</code> keeps the variable <code>x</code> stuck
-  at <code>20</code>, which is
-
-  always less than <code>100</code>.</p>
-
-  <p><code>for</code> loops can also count down:</p>
-
-  <pre><code class="language-js">for (let d = 100; d > 0; d -= 10) {
-    circle(50, 50, d);
-  }
-
-  </code></pre>
-
-  <p><code>for</code> loops can also contain other loops. The following nested
-  loop draws a
-
-  grid of points:</p>
-
-  <pre><code class="language-js">// Loop from left to right.
-
-  for (let x = 10; x < 100; x += 10) {
-
-    // Loop from top to bottom.
-    for (let y = 10; y < 100; y += 10) {
-      point(x, y);
-    }
-
-  }
-
-  </code></pre>
-
-  <p><code>for</code> loops are also helpful for iterating through the elements
-  of an
-
-  array. For example, it's common to iterate through an array that contains
-
-  information about where or what to draw:</p>
-
-  <pre><code class="language-js">// Create an array of x-coordinates.
-
-  let xCoordinates = [20, 40, 60];
-
-
-  for (let i = 0; i < xCoordinates.length; i += 1) {
-    // Update the element.
-    xCoordinates[i] += random(-1, 1);
-
-    // Draw a circle.
-    circle(xCoordinates[i], 50, 20);
-  }
-
-  </code></pre>
-
-  <p>If the array's values aren't modified, the <code>for...of</code> statement
-  can
-
-  simplify the code. They're similar to <code>for</code> loops in Python and
-  <code>for-each</code>
-
-  loops in C++ and Java. The following loops have the same effect:</p>
-
-  <pre><code class="language-js">// Draw circles with a for loop.
-
-  let xCoordinates = [20, 40, 60];
-
-
-  for (let i = 0; i < xCoordinates.length; i += 1) {
-    circle(xCoordinates[i], 50, 20);
-  }
-
-  </code></pre>
-
-  <pre><code class="language-js">// Draw circles with a for...of statement.
-
-  let xCoordinates = [20, 40, 60];
-
-
-  for (let x of xCoordinates) {
-    circle(x, 50, 20);
-  }
-
-  </code></pre>
-
-  <p>In the code snippets above, the variables <code>i</code> and <code>x</code>
-  have different roles.</p>
-
-  <p>In the first snippet, <code>i</code> counts from <code>0</code> up to
-  <code>2</code>, which is one less than
-
-  <code>xCoordinates.length</code>. <code>i</code> is used to access the element
-  in <code>xCoordinates</code>
-
-  at index <code>i</code>.</p>
-
-  <p>In the second code snippet, <code>x</code> isn't keeping track of the
-  loop's progress
-
-  or an index. During each iteration, <code>x</code> contains the next element
-  of
-
-  <code>xCoordinates</code>. <code>x</code> starts from the beginning of
-  <code>xCoordinates</code> (<code>20</code>) and
-
-  updates its value to <code>40</code> and then <code>60</code> during the next
-  iterations.</p>
-line: 1648
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Five black vertical lines on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw vertical lines using a loop.
-      for (let x = 10; x < 100; x += 20) {
-        line(x, 25, x, 75);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Five white concentric circles drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw concentric circles using a loop.
-      for (let d = 100; d > 0; d -= 20) {
-        circle(50, 50, d);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A grid of black dots on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the spacing for points on the grid.
-      let space = 10;
-
-      // Increase the stroke weight.
-      strokeWeight(3);
-
-      // Loop from the left to the right.
-      for (let x = space; x < 100; x += space) {
-        // Loop from the top to the bottom.
-        for (let y = space; y < 100; y += space) {
-          point(x, y);
-        }
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable xCoordinates and assign it an array of numbers.
-    let xCoordinates = [20, 40, 60, 80];
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the element at index i and use it to draw a circle.
-      for (let i = 0; i < xCoordinates.length; i += 1) {
-        circle(xCoordinates[i], 50, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable xCoordinates and assign it an array of numbers.
-    let xCoordinates = [20, 40, 60, 80];
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access each element of the array and use it to draw a circle.
-      for (let x of xCoordinates) {
-        circle(x, 50, 20);
-      }
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# for
diff --git a/src/content/reference/en/p5 copy/fract.mdx b/src/content/reference/en/p5 copy/fract.mdx
deleted file mode 100644
index 399f144c09..0000000000
--- a/src/content/reference/en/p5 copy/fract.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L1048
-title: fract
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates the fractional part of a number.</p>
-  <p>A number's fractional part includes its decimal values. For example,
-  <code>fract(12.34)</code> returns 0.34.</p>
-line: 1048
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Original number.
-      let n = 56.78;
-      text(n, 50, 33);
-
-      // Fractional part.
-      let f = fract(n);
-      text(f, 50, 67);
-
-      describe('The number 56.78 written above the number 0.78.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number whose fractional part will be found.</p>
-    type: Number
-return:
-  description: fractional part of n.
-  type: Number
-chainable: false
----
-
-
-# fract
diff --git a/src/content/reference/en/p5 copy/frameCount.mdx b/src/content/reference/en/p5 copy/frameCount.mdx
deleted file mode 100644
index f2d02603a0..0000000000
--- a/src/content/reference/en/p5 copy/frameCount.mdx	
+++ /dev/null
@@ -1,73 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L69
-title: frameCount
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that tracks the number of frames drawn since
-  the sketch
-
-  started.</p>
-
-  <p><code>frameCount</code>'s value is 0 inside <a
-  href="/reference/p5/setup/">setup()</a>. It
-
-  increments by 1 each time the code in <a href="/reference/p5/draw/">draw()</a>
-
-  finishes executing.</p>
-line: 69
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Display the value of
-      // frameCount.
-      textSize(30);
-      textAlign(CENTER, CENTER);
-      text(frameCount, 50, 50);
-
-      describe('The number 0 written in black in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Set the frameRate to 30.
-      frameRate(30);
-
-      textSize(30);
-      textAlign(CENTER, CENTER);
-
-      describe('A number written in black in the middle of a gray square. Its value increases rapidly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Display the value of
-      // frameCount.
-      text(frameCount, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Integer
----
-
-
-# frameCount
diff --git a/src/content/reference/en/p5 copy/frameRate.mdx b/src/content/reference/en/p5 copy/frameRate.mdx
deleted file mode 100644
index 38ccddd0d6..0000000000
--- a/src/content/reference/en/p5 copy/frameRate.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L330
-title: frameRate
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Sets the number of frames to draw per second.</p>
-
-  <p>Calling <code>frameRate()</code> with one numeric argument, as in
-  <code>frameRate(30)</code>,
-
-  attempts to draw 30 frames per second (FPS). The target frame rate may not
-
-  be achieved depending on the sketch's processing needs. Most computers
-
-  default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
-
-  fast enough for smooth animations.</p>
-
-  <p>Calling <code>frameRate()</code> without an argument returns the current
-  frame rate.
-
-  The value returned is an approximation.</p>
-line: 330
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the x variable based
-      // on the current frameCount.
-      let x = frameCount % 100;
-
-      // If the mouse is pressed,
-      // decrease the frame rate.
-      if (mouseIsPressed === true) {
-        frameRate(10);
-      } else {
-        frameRate(60);
-      }
-
-      // Use x to set the circle's
-      // position.
-      circle(x, 50, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the mouse is pressed, do lots
-      // of math to slow down drawing.
-      if (mouseIsPressed === true) {
-        for (let i = 0; i < 1000000; i += 1) {
-          random();
-        }
-      }
-
-      // Get the current frame rate
-      // and display it.
-      let fps = frameRate();
-      text(fps, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 330
-    params:
-      - name: fps
-        description: |
-          <p>number of frames to draw per second.</p>
-        type: Number
-    chainable: 1
-  - line: 404
-    params: []
-    return:
-      description: current frame rate.
-      type: Number
-chainable: true
----
-
-
-# frameRate
diff --git a/src/content/reference/en/p5 copy/freeGeometry.mdx b/src/content/reference/en/p5 copy/freeGeometry.mdx
deleted file mode 100644
index 7af36d8620..0000000000
--- a/src/content/reference/en/p5 copy/freeGeometry.mdx	
+++ /dev/null
@@ -1,152 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L748
-title: freeGeometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Clears a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object from
-  the graphics
-
-  processing unit (GPU) memory.</p>
-
-  <p><a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can contain
-  lots of data
-
-  about their vertices, surface normals, colors, and so on. Complex 3D shapes
-
-  can use lots of memory which is a limited resource in many GPUs. Calling
-
-  <code>freeGeometry()</code> can improve performance by freeing a
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object’s resources from
-  GPU memory.
-
-  <code>freeGeometry()</code> works with <a
-  href="/reference/p5/p5.Geometry">p5.Geometry</a> objects
-
-  created with <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a>,
-
-  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, and
-
-  <a href="/reference/p5/loadModel/">loadModel()</a>.</p>
-
-  <p>The parameter, <code>geometry</code>, is the <a
-  href="/reference/p5/p5.Geometry">p5.Geometry</a>
-
-  object to be freed.</p>
-
-  <p>Note: A <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object can
-  still be drawn
-
-  after its resources are cleared from GPU memory. It may take longer to draw
-
-  the first time it’s redrawn.</p>
-
-  <p>Note: <code>freeGeometry()</code> can only be used in WebGL mode.</p>
-line: 748
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Create a p5.Geometry object.
-      beginGeometry();
-      cone();
-      let shape = endGeometry();
-
-      // Draw the shape.
-      model(shape);
-
-      // Free the shape's resources.
-      freeGeometry(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let button;
-    let particles;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a button to reset the particle system.
-      button = createButton('Reset');
-
-      // Call resetModel() when the user presses the button.
-      button.mousePressed(resetModel);
-
-      // Add the original set of particles.
-      resetModel();
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the particles.
-      noStroke();
-
-      // Draw the particles.
-      model(particles);
-    }
-
-    function resetModel() {
-      // If the p5.Geometry object has already been created,
-      // free those resources.
-      if (particles) {
-        freeGeometry(particles);
-      }
-
-      // Create a new p5.Geometry object with random spheres.
-      particles = buildGeometry(createParticles);
-    }
-
-    function createParticles() {
-      for (let i = 0; i < 60; i += 1) {
-        // Calculate random coordinates.
-        let x = randomGaussian(0, 20);
-        let y = randomGaussian(0, 20);
-        let z = randomGaussian(0, 20);
-
-        push();
-        // Translate to the particle's coordinates.
-        translate(x, y, z);
-        // Draw the particle.
-        sphere(5);
-        pop();
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: geometry
-    description: |
-      <p>3D shape whose resources should be freed.</p>
-    type: p5.Geometry
-chainable: false
----
-
-
-# freeGeometry
diff --git a/src/content/reference/en/p5 copy/freqToMidi.mdx b/src/content/reference/en/p5 copy/freqToMidi.mdx
deleted file mode 100644
index 12c6e1eff9..0000000000
--- a/src/content/reference/en/p5 copy/freqToMidi.mdx	
+++ /dev/null
@@ -1,29 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L825
-title: freqToMidi
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns the closest MIDI note value for
-  a given frequency.</p>
-line: 825
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: frequency
-    description: |
-      <p>A freqeuncy, for example, the "A"
-                                 above Middle C is 440Hz</p>
-    type: Number
-return:
-  description: MIDI note value
-  type: Number
-chainable: false
----
-
-
-# freqToMidi
diff --git a/src/content/reference/en/p5 copy/frustum.mdx b/src/content/reference/en/p5 copy/frustum.mdx
deleted file mode 100644
index 01ffd87883..0000000000
--- a/src/content/reference/en/p5 copy/frustum.mdx	
+++ /dev/null
@@ -1,175 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L522
-title: frustum
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets the frustum of the current camera in a 3D sketch.</p>
-
-  <p>In a frustum projection, shapes that are further from the camera appear
-
-  smaller than shapes that are near the camera. This technique, called
-
-  foreshortening, creates realistic 3D scenes.</p>
-
-  <p><code>frustum()</code> changes the default camera’s perspective by changing
-  its
-
-  viewing frustum. The frustum is the volume of space that’s visible to the
-
-  camera. The frustum’s shape is a pyramid with its top cut off. The camera
-
-  is placed where the top of the pyramid should be and points towards the
-
-  base of the pyramid. It views everything within the frustum.</p>
-
-  <p>The first four parameters, <code>left</code>, <code>right</code>,
-  <code>bottom</code>, and <code>top</code>, set the
-
-  coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-  <code>frustum(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
-  wide
-
-  and 400 pixels tall. By default, these coordinates are set based on the
-
-  sketch’s width and height, as in
-
-  <code>ortho(-width / 20, width / 20, height / 20, -height / 20)</code>.</p>
-
-  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
-  distance of the
-
-  frustum’s near and far plane from the camera. For example, calling
-
-  <code>ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s
-  200 pixels
-
-  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
-
-  pixels from the camera. By default, near is set to <code>0.1 * 800</code>,
-  which is
-
-  1/10th the default distance between the camera and the origin.
-  <code>far</code> is set
-
-  to <code>10 * 800</code>, which is 10 times the default distance between the
-  camera
-
-  and the origin.</p>
-
-  <p>Note: <code>frustum()</code> can only be used in WebGL mode.</p>
-line: 522
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A row of white cubes on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Apply the default frustum projection.
-      frustum();
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust the frustum.
-      // Center it.
-      // Set its width and height to 20 pixels.
-      // Place its near plane 300 pixels from the camera.
-      // Place its far plane 350 pixels from the camera.
-      frustum(-10, 10, -10, 10, 300, 350);
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: left
-    description: >
-      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: right
-    description: >
-      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: bottom
-    description: >
-      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: top
-    description: >
-      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
-      20</code>.</p>
-    type: Number
-    optional: true
-  - name: near
-    description: >
-      <p>z-coordinate of the frustum’s near plane. Defaults to <code>0.1 *
-      800</code>.</p>
-    type: Number
-    optional: true
-  - name: far
-    description: >
-      <p>z-coordinate of the frustum’s far plane. Defaults to <code>10 *
-      800</code>.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# frustum
diff --git a/src/content/reference/en/p5 copy/fullscreen.mdx b/src/content/reference/en/p5 copy/fullscreen.mdx
deleted file mode 100644
index 1c6b2eb7fe..0000000000
--- a/src/content/reference/en/p5 copy/fullscreen.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L950
-title: fullscreen
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Toggles full-screen mode or returns the current mode.</p>
-
-  <p>Calling <code>fullscreen(true)</code> makes the sketch full-screen. Calling
-
-  <code>fullscreen(false)</code> makes the sketch its original size.</p>
-
-  <p>Calling <code>fullscreen()</code> without an argument returns
-  <code>true</code> if the sketch
-
-  is in full-screen mode and <code>false</code> if not.</p>
-
-  <p>Note: Due to browser restrictions, <code>fullscreen()</code> can only be
-  called with
-
-  user input such as a mouse press.</p>
-line: 950
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      describe('A gray canvas that switches between default and full-screen display when clicked.');
-    }
-
-    // If the mouse is pressed,
-    // toggle full-screen mode.
-    function mousePressed() {
-      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
-        let fs = fullscreen();
-        fullscreen(!fs);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: val
-    description: |
-      <p>whether the sketch should be in fullscreen mode.</p>
-    type: Boolean
-    optional: true
-return:
-  description: current fullscreen state.
-  type: Boolean
-chainable: false
----
-
-
-# fullscreen
diff --git a/src/content/reference/en/p5 copy/function.mdx b/src/content/reference/en/p5 copy/function.mdx
deleted file mode 100644
index e213633c86..0000000000
--- a/src/content/reference/en/p5 copy/function.mdx	
+++ /dev/null
@@ -1,19 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L317
-title: function
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: "<p>A named group of statements.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions/\" target=\"_blank\">Functions</a>\nhelp with organizing and reusing code. For example, functions make it easy\nto express the idea \"Draw a flower.\":</p>\n<pre><code class=\"language-js\">function drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>The function header begins with the keyword <code>function</code>. The function's\nname, <code>drawFlower</code>, is followed by parentheses <code>()</code> and curly braces <code>{}</code>.\nThe code between the curly braces is called the function's body. The\nfunction's body runs when the function is called like so:</p>\n<pre><code class=\"language-js\">drawFlower();\n</code></pre>\n<p>Functions can accept inputs by adding parameters to their headers.\nParameters are placeholders for values that will be provided when the\nfunction is called. For example, the <code>drawFlower()</code> function could include\na parameter for the flower's size:</p>\n<pre><code class=\"language-js\">function drawFlower(size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code></pre>\n<p>Parameters are part of the function's declaration. Arguments are provided\nby the code that calls a function. When a function is called, arguments are\nassigned to parameters:</p>\n<pre><code class=\"language-js\">// The argument 20 is assigned to the parameter size.\ndrawFlower(20);\n</code></pre>\n<p>Functions can have multiple parameters separated by commas. Parameters\ncan have any type. For example, the <code>drawFlower()</code> function could accept\n<code>Number</code> parameters for the flower's x- and y-coordinates along with its\nsize:</p>\n<pre><code class=\"language-js\">function drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code></pre>\n<p>Functions can also produce outputs by adding a <code>return</code> statement:</p>\n<pre><code class=\"language-js\">function double(x) {\n  let answer = 2 * x;\n  return answer;\n}\n</code></pre>\n<p>The expression following <code>return</code> can produce an output that's used\nelsewhere. For example, the output of the <code>double()</code> function can be\nassigned to a variable:</p>\n<pre><code class=\"language-js\">let six = double(3);\ntext(`3 x 2 = ${six}`, 50, 50);\n</code></pre>\n"
-line: 317
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function.\n  drawFlower();\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower() {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Draw a flower emoji.\n  text('\U0001F338', 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A pink flower on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Call the drawFlower() function and pass values for\n  // its position and size.\n  drawFlower(50, 50, 20);\n}\n\n// Declare a function that draws a flower at the\n// center of the canvas.\nfunction drawFlower(x, y, size) {\n  // Style the text.\n  textAlign(CENTER, CENTER);\n\n  // Use the size parameter.\n  textSize(size);\n\n  // Draw a flower emoji.\n  // Use the x and y parameters.\n  text('\U0001F338', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('The message \"Hello, \U0001F30D!\" written on a gray background.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Create a greeting.\n  let greeting = createGreeting('\U0001F30D');\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(16);\n\n  // Display the greeting.\n  text(greeting, 50, 50);\n}\n\n// Return a string with a personalized greeting.\nfunction createGreeting(name) {\n  let message = `Hello, ${name}!`;\n  return message;\n}\n</code>\n</div>"
-class: p5
----
-
-
-# function
diff --git a/src/content/reference/en/p5 copy/get.mdx b/src/content/reference/en/p5 copy/get.mdx
deleted file mode 100644
index 42cbb8e7f8..0000000000
--- a/src/content/reference/en/p5 copy/get.mdx	
+++ /dev/null
@@ -1,178 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L820
-title: get
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Gets a pixel or a region of pixels from the canvas.</p>
-
-  <p><code>get()</code> is easy to use but it's not as fast as
-
-  <a href="/reference/p5/pixels/">pixels</a>. Use <a
-  href="/reference/p5/pixels/">pixels</a>
-
-  to read many pixel values.</p>
-
-  <p>The version of <code>get()</code> with no parameters returns the entire
-  canvas.</p>
-
-  <p>The version of <code>get()</code> with two parameters interprets them as
-
-  coordinates. It returns an array with the <code>[R, G, B, A]</code> values of
-  the
-
-  pixel at the given point.</p>
-
-  <p>The version of <code>get()</code> with four parameters interprets them as
-  coordinates
-
-  and dimensions. It returns a subsection of the canvas as a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two parameters
-  are the
-
-  coordinates for the upper-left corner of the subsection. The last two
-
-  parameters are the width and height of the subsection.</p>
-
-  <p>Use <a href="/reference/p5.Image/get/">p5.Image.get()</a> to work directly
-  with
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> objects.</p>
-line: 820
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Get the entire canvas.
-      let c = get();
-
-      // Display half the canvas.
-      image(c, 50, 0);
-
-      describe('Two identical mountain landscapes shown side-by-side.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Get the color of a pixel.
-      let c = get(50, 90);
-
-      // Style the square with the pixel's color.
-      fill(c);
-      noStroke();
-
-      // Display the square.
-      square(25, 25, 50);
-
-      describe('A mountain landscape with an olive green square in its center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      // Get a region of the image.
-      let c = get(0, 0, 50, 50);
-
-      // Display the region.
-      image(c, 50, 50);
-
-      describe('A mountain landscape drawn on top of another mountain landscape.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
-  type: p5.Image
-overloads:
-  - line: 820
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the pixel.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the pixel.</p>
-        type: Number
-      - name: w
-        description: |
-          <p>width of the subsection to be returned.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>height of the subsection to be returned.</p>
-        type: Number
-    return:
-      description: subsection as a <a href="#/p5.Image">p5.Image</a> object.
-      type: p5.Image
-  - line: 931
-    params: []
-    return:
-      description: whole canvas as a <a href="#/p5.Image">p5.Image</a>.
-      type: p5.Image
-  - line: 935
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-    return:
-      description: 'color of the pixel at (x, y) in array format `[R, G, B, A]`.'
-      type: 'Number[]'
-chainable: false
----
-
-
-# get
diff --git a/src/content/reference/en/p5 copy/getAudioContext.mdx b/src/content/reference/en/p5 copy/getAudioContext.mdx
deleted file mode 100644
index c7291c5cdf..0000000000
--- a/src/content/reference/en/p5 copy/getAudioContext.mdx	
+++ /dev/null
@@ -1,56 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L159
-title: getAudioContext
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >-
-  <p>Returns the Audio Context for this sketch. Useful for users
-
-  who would like to dig deeper into the <a target="_blank"
-  href="http://webaudio.github.io/web-audio-api/">Web Audio API
-
-  </a>.</p>
-
-
-  <p>Some browsers require users to startAudioContext
-
-  with a user gesture, such as touchStarted in the example below.</p>
-line: 159
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-     function draw() {
-       background(255);
-       textAlign(CENTER);
-
-       if (getAudioContext().state !== 'running') {
-         text('click to start audio', width/2, height/2);
-       } else {
-         text('audio is enabled', width/2, height/2);
-       }
-     }
-
-     function touchStarted() {
-       if (getAudioContext().state !== 'running') {
-         getAudioContext().resume();
-       }
-       var synth = new p5.MonoSynth();
-       synth.play('A4', 0.5, 0, 0.2);
-     }
-
-    </div></code>
-class: p5
-return:
-  description: AudioContext for this sketch
-  type: Object
-chainable: false
----
-
-
-# getAudioContext
diff --git a/src/content/reference/en/p5 copy/getItem.mdx b/src/content/reference/en/p5 copy/getItem.mdx
deleted file mode 100644
index 5747f67366..0000000000
--- a/src/content/reference/en/p5 copy/getItem.mdx	
+++ /dev/null
@@ -1,151 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L164
-title: getItem
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Returns a value in the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs.</p>
-
-  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
-  values in
-
-  <code>localStorage</code> and <code>getItem()</code> makes it easy to retrieve
-  them.</p>
-
-  <p>The first parameter, <code>key</code>, is the name of the value to be
-  stored as a
-
-  string.</p>
-
-  <p>The second parameter, <code>value</code>, is the value to be retrieved a
-  string. For
-
-  example, calling <code>getItem('size')</code> retrieves the value with the key
-  <code>size</code>.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 164
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe('The text "Feist: 1234" written in black on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an object.
-      let p = { x: 50, y: 50 };
-
-      // Store the object.
-      storeItem('position', p);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let p = getItem('position');
-
-      // Draw the circle.
-      circle(p.x, p.y, 30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let c = color('deeppink');
-
-      // Store the object.
-      storeItem('color', c);
-
-      describe('A pink circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let c = getItem('color');
-
-      // Style the circle.
-      fill(c);
-
-      // Draw the circle.
-      circle(50, 50, 30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: key
-    description: |
-      <p>name of the value.</p>
-    type: String
-return:
-  description: stored item.
-  type: String|Number|Boolean|Object|Array
-chainable: false
----
-
-
-# getItem
diff --git a/src/content/reference/en/p5 copy/getOutputVolume.mdx b/src/content/reference/en/p5 copy/getOutputVolume.mdx
deleted file mode 100644
index 6542c5edb6..0000000000
--- a/src/content/reference/en/p5 copy/getOutputVolume.mdx	
+++ /dev/null
@@ -1,25 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L726
-title: getOutputVolume
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns a number representing the output volume for sound
-  in this sketch.</p>
-line: 726
-isConstructor: false
-itemtype: method
-class: p5
-return:
-  description: |-
-    Output volume for sound in this sketch.
-                     Should be between 0.0 (silence) and 1.0.
-  type: Number
-chainable: false
----
-
-
-# getOutputVolume
diff --git a/src/content/reference/en/p5 copy/getTargetFrameRate.mdx b/src/content/reference/en/p5 copy/getTargetFrameRate.mdx
deleted file mode 100644
index 10e3c74a4b..0000000000
--- a/src/content/reference/en/p5 copy/getTargetFrameRate.mdx	
+++ /dev/null
@@ -1,48 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L447
-title: getTargetFrameRate
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: |
-  <p>Returns the target frame rate.</p>
-  <p>The value is either the system frame rate or the last value passed to
-  <a href="/reference/p5/frameRate/">frameRate()</a>.</p>
-line: 447
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('The number 20 written in black on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the frame rate to 20.
-      frameRate(20);
-
-      // Get the target frame rate and
-      // display it.
-      let fps = getTargetFrameRate();
-      text(fps, 43, 54);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: _targetFrameRate
-  type: Number
-chainable: false
----
-
-
-# getTargetFrameRate
diff --git a/src/content/reference/en/p5 copy/getURL.mdx b/src/content/reference/en/p5 copy/getURL.mdx
deleted file mode 100644
index 01ccdc8e11..0000000000
--- a/src/content/reference/en/p5 copy/getURL.mdx	
+++ /dev/null
@@ -1,46 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1149
-title: getURL
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Returns the sketch's current
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/"
-  target="_blank">URL</a>
-
-  as a <code>String</code>.</p>
-line: 1149
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Get the sketch's URL
-      // and display it.
-      let url = getURL();
-      textWrap(CHAR);
-      text(url, 0, 40, 100);
-
-      describe('The URL "https://p5js.org/reference/p5/getURL" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: url
-  type: String
-chainable: false
----
-
-
-# getURL
diff --git a/src/content/reference/en/p5 copy/getURLParams.mdx b/src/content/reference/en/p5 copy/getURLParams.mdx
deleted file mode 100644
index c08c77f23f..0000000000
--- a/src/content/reference/en/p5 copy/getURLParams.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1208
-title: getURLParams
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Returns the current
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters"
-  target="_blank">URL parameters</a>
-
-  in an <code>Object</code>.</p>
-
-  <p>For example, calling <code>getURLParams()</code> in a sketch hosted at the
-  URL
-
-  <code>https://p5js.org?year=2014&month=May&day=15</code> returns
-
-  <code>{ year: 2014, month: 'May', day: 15 }</code>.</p>
-line: 1208
-isConstructor: false
-itemtype: method
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class='norender notest'>
-    <code>
-    // Imagine this sketch is hosted at the following URL:
-    // https://p5js.org?year=2014&month=May&day=15
-
-    function setup() {
-      background(200);
-
-      // Get the sketch's URL
-      // parameters and display
-      // them.
-      let params = getURLParams();
-      text(params.day, 10, 20);
-      text(params.month, 10, 40);
-      text(params.year, 10, 60);
-
-      describe('The text "15", "May", and "2014" written in black on separate lines.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: URL params
-  type: Object
-chainable: false
----
-
-
-# getURLParams
diff --git a/src/content/reference/en/p5 copy/getURLPath.mdx b/src/content/reference/en/p5 copy/getURLPath.mdx
deleted file mode 100644
index e71b7746ad..0000000000
--- a/src/content/reference/en/p5 copy/getURLPath.mdx	
+++ /dev/null
@@ -1,58 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1175
-title: getURLPath
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Returns the current
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource"
-  target="_blank">URL</a>
-
-  path as an <code>Array</code> of <code>String</code>s.</p>
-
-  <p>For example, consider a sketch hosted at the URL
-
-  <code>https://example.com/sketchbook</code>. Calling <code>getURLPath()</code>
-  returns
-
-  <code>['sketchbook']</code>. For a sketch hosted at the URL
-
-  <code>https://example.com/sketchbook/monday</code>, <code>getURLPath()</code>
-  returns
-
-  <code>['sketchbook', 'monday']</code>.</p>
-line: 1175
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Get the sketch's URL path
-      // and display the first
-      // part.
-      let path = getURLPath();
-      text(path[0], 25, 54);
-
-      describe('The word "reference" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: path components.
-  type: 'String[]'
-chainable: false
----
-
-
-# getURLPath
diff --git a/src/content/reference/en/p5 copy/green.mdx b/src/content/reference/en/p5 copy/green.mdx
deleted file mode 100644
index 72634492fb..0000000000
--- a/src/content/reference/en/p5 copy/green.mdx	
+++ /dev/null
@@ -1,159 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L692
-title: green
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the green value of a color.</p>
-
-  <p><code>green()</code> extracts the green value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>green()</code> returns a color's green value in the range
-  0
-
-  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  RGB, it
-
-  returns the green value in the given range.</p>
-line: 692
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let c = color(175, 100, 220);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 100.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [175, 100, 220];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 100.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgb(175, 100, 220)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 100.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Create a p5.Color object using RGB values.
-      let c = color(69, 39, 86);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'greenValue' to 39.
-      let greenValue = green(c);
-
-      // Draw the right rectangle.
-      fill(0, greenValue, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is dark green.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the green value.
-  type: Number
-chainable: false
----
-
-
-# green
diff --git a/src/content/reference/en/p5 copy/gridOutput.mdx b/src/content/reference/en/p5 copy/gridOutput.mdx
deleted file mode 100644
index c80c3efaf2..0000000000
--- a/src/content/reference/en/p5 copy/gridOutput.mdx	
+++ /dev/null
@@ -1,189 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L161
-title: gridOutput
-module: Environment
-submodule: Environment
-file: src/accessibility/outputs.js
-description: >
-  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
-
-  <p><code>gridOutput()</code> adds a general description, table of shapes, and
-  list of
-
-  shapes to the web page. The general description includes the canvas size,
-
-  canvas color, and number of shapes. For example,
-
-  <code>gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1
-  square</code>.</p>
-
-  <p><code>gridOutput()</code> uses its table of shapes as a grid. Each shape in
-  the grid
-
-  is placed in a cell whose row and column correspond to the shape's location
-
-  on the canvas. The grid cells describe the color and type of shape at that
-
-  location. For example, <code>red circle</code>. These descriptions can be
-  selected
-
-  individually to get more details. This is different from
-
-  <a href="/reference/p5/textOutput/">textOutput()</a>, which uses its table as
-  a list.</p>
-
-  <p>A list of shapes follows the table. The list describes the color, type,
-
-  location, and area of each shape. For example,
-
-  <code>red circle, location = middle, area = 3 %</code>.</p>
-
-  <p>The <code>display</code> parameter is optional. It determines how the
-  description is
-
-  displayed. If <code>LABEL</code> is passed, as in
-  <code>gridOutput(LABEL)</code>, the description
-
-  will be visible in a div element next to the canvas. Using <code>LABEL</code>
-  creates
-
-  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
-
-  development. If <code>FALLBACK</code> is passed, as in
-  <code>gridOutput(FALLBACK)</code>, the
-
-  description will only be visible to screen readers. This is the default
-
-  mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-
-  <p><code>gridOutput()</code> generates descriptions in English only. Text
-  drawn with
-
-  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
-  mode
-
-  and 3D shapes are not supported.</p>
-
-  <p>Use <a href="/reference/p5/describe/">describe()</a> and
-
-  <a href="/reference/p5/describeElement/">describeElement()</a> for more
-  control
-
-  over canvas descriptions.</p>
-line: 161
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Add the grid description.
-      gridOutput();
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Add the grid description and
-      // display it for debugging.
-      gridOutput(LABEL);
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the grid description.
-      gridOutput();
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the grid description and
-      // display it for debugging.
-      gridOutput(LABEL);
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: display
-    description: |
-      <p>either FALLBACK or LABEL.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# gridOutput
diff --git a/src/content/reference/en/p5 copy/height.mdx b/src/content/reference/en/p5 copy/height.mdx
deleted file mode 100644
index f6321218df..0000000000
--- a/src/content/reference/en/p5 copy/height.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L881
-title: height
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the height of the canvas in
-  pixels.</p>
-
-  <p><code>height</code>'s default value is 100. Calling
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
-
-  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
-
-  <code>height</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
-  sets its value to
-
-  0.</p>
-line: 881
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Display the canvas' height.
-      text(height, 42, 54);
-
-      describe('The number 100 written in black on a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 50);
-
-      background(200);
-
-      // Display the canvas' height.
-      text(height, 42, 27);
-
-      describe('The number 50 written in black on a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Display the canvas' height.
-      text(height, 42, 54);
-
-      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
-    }
-
-    // If the mouse is pressed, reisze
-    // the canvas and display its new
-    // height.
-    function mousePressed() {
-      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
-        resizeCanvas(100, 50);
-        background(200);
-        text(height, 42, 27);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# height
diff --git a/src/content/reference/en/p5 copy/hex.mdx b/src/content/reference/en/p5 copy/hex.mdx
deleted file mode 100644
index 5475af324a..0000000000
--- a/src/content/reference/en/p5 copy/hex.mdx	
+++ /dev/null
@@ -1,166 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L818
-title: hex
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Number</code> to a <code>String</code> with its
-  hexadecimal value.</p>
-
-  <p><code>hex()</code> converts a number to a string with its hexadecimal
-  number value.
-
-  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
-
-  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
-
-  number <code>11</code> (eleven) in base-10 is written as the letter
-  <code>B</code> in hex.</p>
-
-  <p>The first parameter, <code>n</code>, is the number to convert. For example,
-  <code>hex(20)</code>,
-
-  returns the string <code>'00000014'</code>. If an array is passed, as in
-
-  <code>hex([1, 10, 100])</code>, an array of hexadecimal strings is
-  returned.</p>
-
-  <p>The second parameter, <code>digits</code>, is optional. If a number is
-  passed, as in
-
-  <code>hex(20, 2)</code>, it sets the number of hexadecimal digits to display.
-  For
-
-  example, calling <code>hex(20, 2)</code> returns the string
-  <code>'14'</code>.</p>
-line: 818
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 20;
-
-      // Convert the number to a hex string.
-      let converted = hex(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "20 = 00000014" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 20;
-
-      // Convert the number to a hex string.
-      // Only display two hex digits.
-      let converted = hex(original, 2);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "20 = 14" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = [1, 10, 100];
-
-      // Convert the numbers to hex strings.
-      // Only use two hex digits.
-      let converted = hex(original, 2);
-
-      // Style the text.
-      textAlign(RIGHT, CENTER);
-      textSize(16);
-
-      // Iterate over the converted values.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${ original[i]} = ${converted[i]}`, 75, y);
-      }
-
-      describe(
-        'The text "1 = 01", "10 = 0A", and "100 = 64" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted hexadecimal value.
-  type: String
-overloads:
-  - line: 818
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: Number
-      - name: digits
-        description: |
-          <p>number of digits to include.</p>
-        type: Number
-        optional: true
-    return:
-      description: converted hexadecimal value.
-      type: String
-  - line: 926
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: 'Number[]'
-      - name: digits
-        description: ''
-        type: Number
-        optional: true
-    return:
-      description: converted hexadecimal values.
-      type: 'String[]'
-chainable: false
----
-
-
-# hex
diff --git a/src/content/reference/en/p5 copy/hour.mdx b/src/content/reference/en/p5 copy/hour.mdx
deleted file mode 100644
index 802a809d72..0000000000
--- a/src/content/reference/en/p5 copy/hour.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L44
-title: hour
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current hour as a number from 0–23.</p>
-line: 44
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current hour.
-      let h = hour();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the hour.
-      text(`Current hour: ${h}`, 20, 50, 60);
-
-      describe(`The text 'Current hour: ${h}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current hour between 0 and 23.
-  type: Integer
-chainable: false
----
-
-
-# hour
diff --git a/src/content/reference/en/p5 copy/httpDo.mdx b/src/content/reference/en/p5 copy/httpDo.mdx
deleted file mode 100644
index 52d6553248..0000000000
--- a/src/content/reference/en/p5 copy/httpDo.mdx	
+++ /dev/null
@@ -1,150 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1208
-title: httpDo
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Method for executing an HTTP request. If data type is not specified,
-
-  p5 will try to guess based on the URL, defaulting to text.<br><br>
-
-  For more advanced use, you may also pass in the path as the first argument
-
-  and a object as the second argument, the signature follows the one specified
-
-  in the Fetch API specification.
-
-  This method is suitable for fetching files up to size of 64MB when "GET" is
-  used.</br></br></p>
-line: 1208
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Examples use USGS Earthquake API:
-    // https://earthquake.usgs.gov/fdsnws/event/1/#methods
-
-    // displays an animation of all USGS earthquakes
-    let earthquakes;
-    let eqFeatureIndex = 0;
-
-    function preload() {
-      let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
-      httpDo(
-        url,
-        {
-          method: 'GET',
-          // Other Request options, like special headers for apis
-          headers: { authorization: 'Bearer secretKey' }
-        },
-        function(res) {
-          earthquakes = res;
-        }
-      );
-    }
-
-    function draw() {
-      // wait until the data is loaded
-      if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
-        return;
-      }
-      clear();
-
-      let feature = earthquakes.features[eqFeatureIndex];
-      let mag = feature.properties.mag;
-      let rad = mag / 11 * ((width + height) / 2);
-      fill(255, 0, 0, 100);
-      ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
-
-      if (eqFeatureIndex >= earthquakes.features.length) {
-        eqFeatureIndex = 0;
-      } else {
-        eqFeatureIndex += 1;
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: |-
-    A promise that resolves with the data when the operation
-                      completes successfully or rejects with the error after
-                      one occurs.
-  type: Promise
-overloads:
-  - line: 1208
-    params:
-      - name: path
-        description: |
-          <p>name of the file or url to load</p>
-        type: String
-      - name: method
-        description: |
-          <p>either "GET", "POST", or "PUT",
-                                             defaults to "GET"</p>
-        type: String
-        optional: true
-      - name: datatype
-        description: |
-          <p>"json", "jsonp", "xml", or "text"</p>
-        type: String
-        optional: true
-      - name: data
-        description: |
-          <p>param data passed sent with request</p>
-        type: Object
-        optional: true
-      - name: callback
-        description: |
-          <p>function to be executed after
-                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
-                                             as first argument</p>
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: |
-          <p>function to be executed if
-                                             there is an error, response is passed
-                                             in as first argument</p>
-        type: Function
-        optional: true
-    return:
-      description: |-
-        A promise that resolves with the data when the operation
-                          completes successfully or rejects with the error after
-                          one occurs.
-      type: Promise
-  - line: 1279
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: options
-        description: >
-          <p>Request object options as documented in the
-                                             "fetch" API
-          <a
-          href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API">reference</a></p>
-        type: Object
-      - name: callback
-        description: ''
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-chainable: false
----
-
-
-# httpDo
diff --git a/src/content/reference/en/p5 copy/httpGet.mdx b/src/content/reference/en/p5 copy/httpGet.mdx
deleted file mode 100644
index 9e8591e059..0000000000
--- a/src/content/reference/en/p5 copy/httpGet.mdx	
+++ /dev/null
@@ -1,140 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1043
-title: httpGet
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Method for executing an HTTP GET request. If data type is not specified,
-
-  p5 will try to guess based on the URL, defaulting to text. This is equivalent
-  to
-
-  calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
-
-  a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
-
-  which can be used to initialize typed arrays (such as Uint8Array).</p>
-line: 1043
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    // Examples use USGS Earthquake API:
-    //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
-    let earthquakes;
-    function preload() {
-      // Get the most recent earthquake in the database
-      let url =
-       'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
-        'format=geojson&limit=1&orderby=time';
-      httpGet(url, 'jsonp', false, function(response) {
-        // when the HTTP request completes, populate the variable that holds the
-        // earthquake data used in the visualization.
-        earthquakes = response;
-      });
-    }
-
-    function draw() {
-      if (!earthquakes) {
-        // Wait until the earthquake data has loaded before drawing.
-        return;
-      }
-      background(200);
-      // Get the magnitude and name of the earthquake out of the loaded JSON
-      let earthquakeMag = earthquakes.features[0].properties.mag;
-      let earthquakeName = earthquakes.features[0].properties.place;
-      ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
-      textAlign(CENTER);
-      text(earthquakeName, 0, height - 30, width, 30);
-      noLoop();
-    }
-    </code></div>
-class: p5
-return:
-  description: |-
-    A promise that resolves with the data when the operation
-                      completes successfully or rejects with the error after
-                      one occurs.
-  type: Promise
-overloads:
-  - line: 1043
-    params:
-      - name: path
-        description: |
-          <p>name of the file or url to load</p>
-        type: String
-      - name: datatype
-        description: |
-          <p>"json", "jsonp", "binary", "arrayBuffer",
-                                             "xml", or "text"</p>
-        type: String
-        optional: true
-      - name: data
-        description: |
-          <p>param data passed sent with request</p>
-        type: Object|Boolean
-        optional: true
-      - name: callback
-        description: |
-          <p>function to be executed after
-                                             <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
-                                             as first argument</p>
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: |
-          <p>function to be executed if
-                                             there is an error, response is passed
-                                             in as first argument</p>
-        type: Function
-        optional: true
-    return:
-      description: |-
-        A promise that resolves with the data when the operation
-                          completes successfully or rejects with the error after
-                          one occurs.
-      type: Promise
-  - line: 1097
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: data
-        description: ''
-        type: Object|Boolean
-      - name: callback
-        description: ''
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-  - line: 1105
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: callback
-        description: ''
-        type: Function
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-chainable: false
----
-
-
-# httpGet
diff --git a/src/content/reference/en/p5 copy/httpPost.mdx b/src/content/reference/en/p5 copy/httpPost.mdx
deleted file mode 100644
index 39f4fc75a0..0000000000
--- a/src/content/reference/en/p5 copy/httpPost.mdx	
+++ /dev/null
@@ -1,165 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1119
-title: httpPost
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Method for executing an HTTP POST request. If data type is not specified,
-
-  p5 will try to guess based on the URL, defaulting to text. This is equivalent
-  to
-
-  calling <code>httpDo(path, 'POST')</code>.</p>
-line: 1119
-isConstructor: false
-itemtype: method
-example:
-  - >-
-
-    <div>
-
-    <code>
-
-    // Examples use jsonplaceholder.typicode.com for a Mock Data API
-
-
-    let url = 'https://jsonplaceholder.typicode.com/posts';
-
-    let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very
-    cool.' };
-
-
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-    }
-
-
-    function mousePressed() {
-      httpPost(url, 'json', postData, function(result) {
-        strokeWeight(2);
-        text(result.body, mouseX, mouseY);
-      });
-    }
-
-    </code>
-
-    </div>
-
-
-    <div><code>
-
-    let url = 'ttps://invalidURL'; // A bad URL that will cause errors
-
-    let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
-
-
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-    }
-
-
-    function mousePressed() {
-      httpPost(
-        url,
-        'json',
-        postData,
-        function(result) {
-          // ... won't be called
-        },
-        function(error) {
-          strokeWeight(2);
-          text(error.toString(), mouseX, mouseY);
-        }
-      );
-    }
-
-    </code></div>
-class: p5
-return:
-  description: |-
-    A promise that resolves with the data when the operation
-                      completes successfully or rejects with the error after
-                      one occurs.
-  type: Promise
-overloads:
-  - line: 1119
-    params:
-      - name: path
-        description: |
-          <p>name of the file or url to load</p>
-        type: String
-      - name: datatype
-        description: |
-          <p>"json", "jsonp", "xml", or "text".
-                                             If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.</p>
-        type: String
-        optional: true
-      - name: data
-        description: |
-          <p>param data passed sent with request</p>
-        type: Object|Boolean
-        optional: true
-      - name: callback
-        description: |
-          <p>function to be executed after
-                                             <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
-                                             as first argument</p>
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: |
-          <p>function to be executed if
-                                             there is an error, response is passed
-                                             in as first argument</p>
-        type: Function
-        optional: true
-    return:
-      description: |-
-        A promise that resolves with the data when the operation
-                          completes successfully or rejects with the error after
-                          one occurs.
-      type: Promise
-  - line: 1186
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: data
-        description: ''
-        type: Object|Boolean
-      - name: callback
-        description: ''
-        type: Function
-        optional: true
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-  - line: 1194
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: callback
-        description: ''
-        type: Function
-      - name: errorCallback
-        description: ''
-        type: Function
-        optional: true
-    return:
-      description: ''
-      type: Promise
-chainable: false
----
-
-
-# httpPost
diff --git a/src/content/reference/en/p5 copy/hue.mdx b/src/content/reference/en/p5 copy/hue.mdx
deleted file mode 100644
index 6baca2b9ce..0000000000
--- a/src/content/reference/en/p5 copy/hue.mdx	
+++ /dev/null
@@ -1,145 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L828
-title: hue
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the hue value of a color.</p>
-
-  <p><code>hue()</code> extracts the hue value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>Hue describes a color's position on the color wheel. By default,
-  <code>hue()</code>
-
-  returns a color's HSL hue in the range 0 to 360. If the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
-  returns the hue
-
-  value in the given mode.</p>
-line: 828
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a p5.Color object.
-      let c = color(0, 50, 100);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 20, 35, 60);
-
-      // Set 'hueValue' to 0.
-      let hueValue = hue(c);
-
-      // Draw the right rectangle.
-      fill(hueValue);
-      rect(50, 20, 35, 60);
-
-      describe(
-        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a color array.
-      let c = [0, 50, 100];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 20, 35, 60);
-
-      // Set 'hueValue' to 0.
-      let hueValue = hue(c);
-
-      // Draw the right rectangle.
-      fill(hueValue);
-      rect(50, 20, 35, 60);
-
-      describe(
-        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 20, 35, 60);
-
-      // Set 'hueValue' to 0.
-      let hueValue = hue(c);
-
-      // Draw the right rectangle.
-      fill(hueValue);
-      rect(50, 20, 35, 60);
-
-      describe(
-        'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the hue value.
-  type: Number
-chainable: false
----
-
-
-# hue
diff --git a/src/content/reference/en/p5 copy/if.mdx b/src/content/reference/en/p5 copy/if.mdx
deleted file mode 100644
index 88228b3ed0..0000000000
--- a/src/content/reference/en/p5 copy/if.mdx	
+++ /dev/null
@@ -1,268 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L110
-title: if
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A way to choose whether to run a block of code.</p>
-
-  <p><code>if</code> statements are helpful for running a block of code based on
-  a
-
-  condition. For example, an <code>if</code> statement makes it easy to express
-  the
-
-  idea "Draw a circle if the mouse is pressed.":</p>
-
-  <pre><code class="language-js">if (mouseIsPressed === true) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>The statement header begins with the keyword <code>if</code>. The
-  expression in
-
-  parentheses <code>mouseIsPressed === true</code> is a <code>Boolean</code>
-  expression that's
-
-  either <code>true</code> or <code>false</code>. The code between the curly
-  braces <code>{}</code> is the if
-
-  statement's body. The body only runs if the <code>Boolean</code> expression is
-  <code>true</code>.</p>
-
-  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
-  variable is
-
-  always <code>true</code> or <code>false</code>, so the code snippet above
-  could also be written
-
-  as follows:</p>
-
-  <pre><code class="language-js">if (mouseIsPressed) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>An <code>if</code>-<code>else</code> statement adds a block of code that
-  runs if the <code>Boolean</code>
-
-  expression is <code>false</code>. For example, here's an
-  <code>if</code>-<code>else</code> statement that
-
-  expresses the idea "Draw a circle if the mouse is pressed. Otherwise,
-
-  display a message.":</p>
-
-  <pre><code class="language-js">if (mouseIsPressed === true) {
-    // When true.
-    circle(mouseX, mouseY, 20);
-  } else {
-    // When false.
-    text('Click me!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>There are two possible paths, or branches, in this code snippet. The
-
-  program must follow one branch or the other.</p>
-
-  <p>An <code>else</code>-<code>if</code> statement makes it possible to add
-  more branches.
-
-  <code>else</code>-<code>if</code> statements run different blocks of code
-  under different
-
-  conditions. For example, an <code>else</code>-<code>if</code> statement makes
-  it easy to express
-
-  the idea "If the mouse is on the left, paint the canvas white. If the mouse
-
-  is in the middle, paint the canvas gray. Otherwise, paint the canvas
-
-  black.":</p>
-
-  <pre><code class="language-js">if (mouseX < 33) {
-    background(255);
-  } else if (mouseX < 67) {
-    background(200);
-  } else {
-    background(0);
-  }
-
-  </code></pre>
-
-  <p><code>if</code> statements can add as many
-  <code>else</code>-<code>if</code> statements as needed. However,
-
-  there can only be one <code>else</code> statement and it must be last.</p>
-
-  <p><code>if</code> statements can also check for multiple conditions at once.
-  For
-
-  example, the <code>Boolean</code> operator <code>&&</code> (AND) checks
-  whether two expressions
-
-  are both <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
-    text('You pressed the "p" key!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
-  message will
-
-  display.</p>
-
-  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
-  least one of two
-
-  expressions is <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
-  true) {
-    text('You did something!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user presses a key, or presses a mouse button, or both, then a
-
-  message will display.</p>
-
-  <p>The body of an <code>if</code> statement can contain another
-  <code>if</code> statement. This is
-
-  called a "nested <code>if</code> statement." For example, nested
-  <code>if</code> statements make
-
-  it easy to express the idea "If a key is pressed, then check if the key is
-
-  <code>'r'</code>. If it is, then set the fill to red.":</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true) {
-    if (key === 'r') {
-      fill('red');
-    }
-  }
-
-  </code></pre>
-
-  <p>See <a href="/reference/p5/Boolean/">Boolean</a> and <a
-  href="/reference/p5/Number/">Number</a>
-
-  to learn more about these data types and the operations they support.</p>
-line: 110
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click the mouse to show the circle.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse user clicks on the canvas.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (mouseIsPressed === true) {
-        circle(mouseX, mouseY, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse to show different shapes.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white ellipse on a gray background. The ellipse becomes a circle when the user presses the mouse.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (mouseIsPressed === true) {
-        circle(50, 50, 20);
-      } else {
-        ellipse(50, 50, 20, 50);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Move the mouse to change the background color.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A square changes color from white to black as the user moves the mouse from left to right.'
-      );
-    }
-
-    function draw() {
-      if (mouseX < 33) {
-        background(255);
-      } else if (mouseX < 67) {
-        background(200);
-      } else {
-        background(0);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle drawn on a gray background. The circle changes color to red when the user presses the "r" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (keyIsPressed === true) {
-        if (key === 'r') {
-          fill('red');
-        }
-      }
-
-      circle(50, 50, 40);
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# if
diff --git a/src/content/reference/en/p5 copy/image.mdx b/src/content/reference/en/p5 copy/image.mdx
deleted file mode 100644
index 9dbd36fd22..0000000000
--- a/src/content/reference/en/p5 copy/image.mdx	
+++ /dev/null
@@ -1,327 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L888
-title: image
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Draws an image to the canvas.</p>
-
-  <p>The first parameter, <code>img</code>, is the source image to be drawn.
-  <code>img</code> can be
-
-  any of the following objects:</p>
-
-  <ul>
-
-  <li><a href="/reference/p5/p5.Image">p5.Image</a></li>
-
-  <li><a href="/reference/p5/p5.Element">p5.Element</a></li>
-
-  <li><a href="/reference/p5/p5.Texture">p5.Texture</a></li>
-
-  <li><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a></li>
-
-  <li><a
-  href="/reference/p5/p5.FramebufferTexture">p5.FramebufferTexture</a></li>
-
-  </ul>
-
-  <p>The second and third parameters, <code>dx</code> and <code>dy</code>, set
-  the coordinates of the
-
-  destination image's top left corner. See
-
-  <a href="/reference/p5/imageMode/">imageMode()</a> for other ways to position
-  images.</p>
-
-  <p>Here's a diagram that explains how optional parameters work in
-  <code>image()</code>:</p>
-
-  <p><img src="/assets/drawImage.png"/></p>
-
-  <p>The fourth and fifth parameters, <code>dw</code> and <code>dh</code>, are
-  optional. They set the
-
-  the width and height to draw the destination image. By default,
-  <code>image()</code>
-
-  draws the full source image at its original size.</p>
-
-  <p>The sixth and seventh parameters, <code>sx</code> and <code>sy</code>, are
-  also optional.
-
-  These coordinates define the top left corner of a subsection to draw from
-
-  the source image.</p>
-
-  <p>The eighth and ninth parameters, <code>sw</code> and <code>sh</code>, are
-  also optional.
-
-  They define the width and height of a subsection to draw from the source
-
-  image. By default, <code>image()</code> draws the full subsection that begins
-  at
-
-  <code>(sx, sy)</code> and extends to the edges of the source image.</p>
-
-  <p>The ninth parameter, <code>fit</code>, is also optional. It enables a
-  subsection of
-
-  the source image to be drawn without affecting its aspect ratio. If
-
-  <code>CONTAIN</code> is passed, the full subsection will appear within the
-  destination
-
-  rectangle. If <code>COVER</code> is passed, the subsection will completely
-  cover the
-
-  destination rectangle. This may have the effect of zooming into the
-
-  subsection.</p>
-
-  <p>The tenth and eleventh parameters, <code>xAlign</code> and
-  <code>yAlign</code>, are also
-
-  optional. They determine how to align the fitted subsection.
-  <code>xAlign</code> can
-
-  be set to either <code>LEFT</code>, <code>RIGHT</code>, or
-  <code>CENTER</code>. <code>yAlign</code> can be set to
-
-  either <code>TOP</code>, <code>BOTTOM</code>, or <code>CENTER</code>. By
-  default, both <code>xAlign</code> and <code>yAlign</code>
-
-  are set to <code>CENTER</code>.</p>
-line: 888
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe('An image of the underside of a white umbrella with a gridded ceiling above.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image.
-      image(img, 10, 10);
-
-      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image 50x50.
-      image(img, 0, 0, 50, 50);
-
-      describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the center of the image.
-      image(img, 25, 25, 50, 50, 25, 25, 50, 50);
-
-      describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/moonwalk.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image and scale it to fit within the canvas.
-      image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
-
-      describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      // Image is 50 x 50 pixels.
-      img = loadImage('/assets/laDefense50.png');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Draw the image and scale it to cover the canvas.
-      image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
-
-      describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 888
-    params:
-      - name: img
-        description: |
-          <p>image to display.</p>
-        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
-      - name: x
-        description: |
-          <p>x-coordinate of the top-left corner of the image.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the top-left corner of the image.</p>
-        type: Number
-      - name: width
-        description: |
-          <p>width to draw the image.</p>
-        type: Number
-        optional: true
-      - name: height
-        description: |
-          <p>height to draw the image.</p>
-        type: Number
-        optional: true
-  - line: 1074
-    params:
-      - name: img
-        description: ''
-        type: p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
-      - name: dx
-        description: |
-          <p>the x-coordinate of the destination
-                                    rectangle in which to draw the source image</p>
-        type: Number
-      - name: dy
-        description: |
-          <p>the y-coordinate of the destination
-                                    rectangle in which to draw the source image</p>
-        type: Number
-      - name: dWidth
-        description: |
-          <p>the width of the destination rectangle</p>
-        type: Number
-      - name: dHeight
-        description: |
-          <p>the height of the destination rectangle</p>
-        type: Number
-      - name: sx
-        description: |
-          <p>the x-coordinate of the subsection of the source
-          image to draw into the destination rectangle</p>
-        type: Number
-      - name: sy
-        description: |
-          <p>the y-coordinate of the subsection of the source
-          image to draw into the destination rectangle</p>
-        type: Number
-      - name: sWidth
-        description: |
-          <p>the width of the subsection of the
-                                    source image to draw into the destination
-                                    rectangle</p>
-        type: Number
-        optional: true
-      - name: sHeight
-        description: |
-          <p>the height of the subsection of the
-                                     source image to draw into the destination rectangle</p>
-        type: Number
-        optional: true
-      - name: fit
-        description: |
-          <p>either CONTAIN or COVER</p>
-        type: Constant
-        optional: true
-      - name: xAlign
-        description: |
-          <p>either LEFT, RIGHT or CENTER default is CENTER</p>
-        type: Constant
-        optional: true
-      - name: yAlign
-        description: |
-          <p>either TOP, BOTTOM or CENTER default is CENTER</p>
-        type: Constant
-        optional: true
-chainable: false
----
-
-
-# image
diff --git a/src/content/reference/en/p5 copy/imageLight.mdx b/src/content/reference/en/p5 copy/imageLight.mdx
deleted file mode 100644
index 70b001f3e5..0000000000
--- a/src/content/reference/en/p5 copy/imageLight.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L956
-title: imageLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates an ambient light from an image.</p>
-
-  <p><code>imageLight()</code> simulates a light shining from all directions.
-  The effect is
-
-  like placing the sketch at the center of a giant sphere that uses the image
-
-  as its texture. The image's diffuse light will be affected by
-
-  <a href="/reference/p5/fill/">fill()</a> and the specular reflections will be
-
-  affected by <a href="/reference/p5/specularMaterial/">specularMaterial()</a>
-  and
-
-  <a href="/reference/p5/shininess/">shininess()</a>.</p>
-
-  <p>The parameter, <code>img</code>, is the <a
-  href="/reference/p5/p5.Image">p5.Image</a> object to
-
-  use as the light source.</p>
-line: 956
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="notest">
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
-    }
-
-    function draw() {
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the image as a panorama (360˚ background).
-      panorama(img);
-
-      // Add a soft ambient light.
-      ambientLight(50);
-
-      // Add light from the image.
-      imageLight(img);
-
-      // Style the sphere.
-      specularMaterial(20);
-      shininess(100);
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: img
-    description: |
-      <p>image to use as the light source.</p>
-    type: p5.image
-chainable: false
----
-
-
-# imageLight
diff --git a/src/content/reference/en/p5 copy/imageMode.mdx b/src/content/reference/en/p5 copy/imageMode.mdx
deleted file mode 100644
index f7d41c6d54..0000000000
--- a/src/content/reference/en/p5 copy/imageMode.mdx	
+++ /dev/null
@@ -1,129 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1395
-title: imageMode
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Changes the location from which images are drawn when
-
-  <a href="/reference/p5/image/">image()</a> is called.</p>
-
-  <p>By default, the first
-
-  two parameters of <a href="/reference/p5/image/">image()</a> are the x- and
-
-  y-coordinates of the image's upper-left corner. The next parameters are
-
-  its width and height. This is the same as calling
-  <code>imageMode(CORNER)</code>.</p>
-
-  <p><code>imageMode(CORNERS)</code> also uses the first two parameters of
-
-  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
-  image's
-
-  top-left corner. The third and fourth parameters are the coordinates of its
-
-  bottom-right corner.</p>
-
-  <p><code>imageMode(CENTER)</code> uses the first two parameters of
-
-  <a href="/reference/p5/image/">image()</a> as the x- and y-coordinates of the
-  image's
-
-  center. The next parameters are its width and height.</p>
-line: 1395
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use CORNER mode.
-      imageMode(CORNER);
-
-      // Display the image.
-      image(img, 10, 10, 50, 50);
-
-      describe('A square image of a brick wall is drawn at the top left of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use CORNERS mode.
-      imageMode(CORNERS);
-
-      // Display the image.
-      image(img, 10, 10, 90, 40);
-
-      describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use CENTER mode.
-      imageMode(CENTER);
-
-      // Display the image.
-      image(img, 50, 50, 80, 80);
-
-      describe('A square image of a brick wall is drawn on a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either CORNER, CORNERS, or CENTER.</p>
-    type: Constant
-chainable: false
----
-
-
-# imageMode
diff --git a/src/content/reference/en/p5 copy/input.mdx b/src/content/reference/en/p5 copy/input.mdx
deleted file mode 100644
index 83f71feabc..0000000000
--- a/src/content/reference/en/p5 copy/input.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L405
-title: input
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Calls a function when the element receives input.</p>
-
-  <p><code>myElement.input()</code> is often used to with text inputs and
-  sliders. Calling
-
-  <code>myElement.input(false)</code> disables the function.</p>
-line: 405
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a slider and place it beneath the canvas.
-      slider = createSlider(0, 255, 200);
-      slider.position(0, 100);
-
-      // Call repaint() when the slider changes.
-      slider.input(repaint);
-
-      describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');
-    }
-
-    // Paint the background using slider's value.
-    function repaint() {
-      let g = slider.value();
-      background(g);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let input;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an input and place it beneath the canvas.
-      input = createInput('');
-      input.position(0, 100);
-
-      // Call repaint() when input is detected.
-      input.input(repaint);
-
-      describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');
-    }
-
-    // Paint the background gray and display the input's value.
-    function repaint() {
-      background(200);
-      let msg = input.value();
-      text(msg, 5, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fxn
-    description: |
-      <p>function to call when input is detected within
-                                     the element.
-                                     <code>false</code> disables the function.</p>
-    type: Function|Boolean
-chainable: true
----
-
-
-# input
diff --git a/src/content/reference/en/p5 copy/int.mdx b/src/content/reference/en/p5 copy/int.mdx
deleted file mode 100644
index 5d5fe8826a..0000000000
--- a/src/content/reference/en/p5 copy/int.mdx	
+++ /dev/null
@@ -1,169 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L92
-title: int
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Boolean</code>, <code>String</code>, or decimal
-  <code>Number</code> to an integer.</p>
-
-  <p><code>int()</code> converts values to integers. Integers are positive or
-  negative
-
-  numbers without decimals. If the original value has decimals, as in -34.56,
-
-  they're removed to produce an integer such as -34.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a Boolean, as in
-
-  <code>int(false)</code> or <code>int(true)</code>, then the number 0
-  (<code>false</code>) or 1 (<code>true</code>) will
-
-  be returned. If <code>n</code> is a string or number, as in
-  <code>int('45')</code> or
-
-  <code>int(67.89)</code>, then an integer will be returned. If an array is
-  passed, as
-
-  in <code>int([12.34, 56.78])</code>, then an array of integers will be
-  returned.</p>
-
-  <p>Note: If a value can't be converted to a number, as in
-  <code>int('giraffe')</code>,
-
-  then the value <code>NaN</code> (not a number) will be returned.</p>
-line: 92
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a Boolean variable.
-      let original = false;
-
-      // Convert the Boolean to an integer.
-      let converted = int(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "false : 0" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = '12.34';
-
-      // Convert the string to an integer.
-      let converted = int(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and converted values.
-      text(`${original} ≈ ${converted}`, 50, 50);
-
-      describe('The text "12.34 ≈ 12" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a decimal number variable.
-      let original = 12.34;
-
-      // Convert the decimal number to an integer.
-      let converted = int(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and converted values.
-      text(`${original} ≈ ${converted}`, 50, 50);
-
-      describe('The text "12.34 ≈ 12" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let original = ['60', '30', '15'];
-
-      // Convert the strings to integers.
-      let diameters = int(original);
-
-      for (let d of diameters) {
-        // Draw a circle.
-        circle(50, 50, d);
-      }
-
-      describe('Three white, concentric circles on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 92
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String|Boolean|Number
-    return:
-      description: converted number.
-      type: Number
-  - line: 211
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: Array
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# int
diff --git a/src/content/reference/en/p5 copy/isLooping.mdx b/src/content/reference/en/p5 copy/isLooping.mdx
deleted file mode 100644
index 622fd77d9b..0000000000
--- a/src/content/reference/en/p5 copy/isLooping.mdx	
+++ /dev/null
@@ -1,65 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L224
-title: isLooping
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Returns <code>true</code> if the draw loop is running and
-  <code>false</code> if not.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
-
-  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
-
-  restarted by calling <a href="/reference/p5/loop/">loop()</a>.</p>
-
-  <p>The <code>isLooping()</code> function can be used to check whether a sketch
-  is
-
-  looping, as in <code>isLooping() === true</code>.</p>
-line: 224
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle at the mouse's position.
-      circle(mouseX, mouseY, 20);
-    }
-
-    // Toggle the draw loop when the user double-clicks.
-    function doubleClicked() {
-      if (isLooping() === true) {
-        noLoop();
-      } else {
-        loop();
-      }
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: ''
-  type: Boolean
-chainable: false
----
-
-
-# isLooping
diff --git a/src/content/reference/en/p5 copy/join.mdx b/src/content/reference/en/p5 copy/join.mdx
deleted file mode 100644
index 23222a6db4..0000000000
--- a/src/content/reference/en/p5 copy/join.mdx	
+++ /dev/null
@@ -1,70 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L15
-title: join
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Combines an array of strings into one string.</p>
-
-  <p>The first parameter, <code>list</code>, is the array of strings to
-  join.</p>
-
-  <p>The second parameter, <code>separator</code>, is the character(s) that
-  should be used
-
-  to separate the combined strings. For example, calling
-
-  <code>join(myWords, ' : ')</code> would return a string of words each
-  separated by a
-
-  colon and spaces.</p>
-line: 15
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let myWords = ['one', 'two', 'three'];
-
-      // Create a combined string
-      let combined = join(myWords, ' : ');
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-
-      // Display the combined string.
-      text(combined, 50, 50);
-
-      describe('The text "one : two : three" written in black on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>array of strings to combine.</p>
-    type: Array
-  - name: separator
-    description: |
-      <p>character(s) to place between strings when they're combined.</p>
-    type: String
-return:
-  description: combined string.
-  type: String
-chainable: false
----
-
-
-# join
diff --git a/src/content/reference/en/p5 copy/key.mdx b/src/content/reference/en/p5 copy/key.mdx
deleted file mode 100644
index 63fc144fa3..0000000000
--- a/src/content/reference/en/p5 copy/key.mdx	
+++ /dev/null
@@ -1,106 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L102
-title: key
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A <code>String</code> system variable that contains the value of the last
-  key typed.</p>
-
-  <p>The key variable is helpful for checking whether an
-
-  <a href="https://en.wikipedia.org/wiki/ASCII#Printable_characters"
-  target="_blank">ASCII</a>
-
-  key has been typed. For example, the expression <code>key === "a"</code>
-  evaluates to
-
-  <code>true</code> if the <code>a</code> key was typed and <code>false</code>
-  if not. <code>key</code> doesn’t update
-
-  for special keys such as <code>LEFT_ARROW</code> and <code>ENTER</code>. Use
-  keyCode instead for
-
-  special keys. The <a href="/reference/p5/keyIsDown/">keyIsDown()</a> function
-  should
-
-  be used to check for multiple different key presses at the same time.</p>
-line: 102
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The last key pressed is displayed at the center.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the last key pressed.
-      text(key, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses the keys "w", "a", "s", or "d". It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if a key is pressed.
-      if (keyIsPressed === true) {
-        if (key === 'w') {
-          y -= 1;
-        } else if (key === 's') {
-          y += 1;
-        } else if (key === 'a') {
-          x -= 1;
-        } else if (key === 'd') {
-          x += 1;
-        }
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle at (x, y).
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# key
diff --git a/src/content/reference/en/p5 copy/keyCode.mdx b/src/content/reference/en/p5 copy/keyCode.mdx
deleted file mode 100644
index 808526b788..0000000000
--- a/src/content/reference/en/p5 copy/keyCode.mdx	
+++ /dev/null
@@ -1,128 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L184
-title: keyCode
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A <code>Number</code> system variable that contains the code of the last
-  key typed.</p>
-
-  <p>All keys have a <code>keyCode</code>. For example, the <code>a</code> key
-  has the <code>keyCode</code> 65.
-
-  The <code>keyCode</code> variable is helpful for checking whether a special
-  key has
-
-  been typed. For example, the following conditional checks whether the enter
-
-  key has been typed:</p>
-
-  <pre><code class="language-js">if (keyCode === 13) {
-    // Code to run if the enter key was pressed.
-  }
-
-  </code></pre>
-
-  <p>The same code can be written more clearly using the system variable
-  <code>ENTER</code>
-
-  which has a value of 13:</p>
-
-  <pre><code class="language-js">if (keyCode === ENTER) {
-    // Code to run if the enter key was pressed.
-  }
-
-  </code></pre>
-
-  <p>The system variables <code>BACKSPACE</code>, <code>DELETE</code>,
-  <code>ENTER</code>, <code>RETURN</code>, <code>TAB</code>,
-
-  <code>ESCAPE</code>, <code>SHIFT</code>, <code>CONTROL</code>,
-  <code>OPTION</code>, <code>ALT</code>, <code>UP_ARROW</code>,
-  <code>DOWN_ARROW</code>,
-
-  <code>LEFT_ARROW</code>, and <code>RIGHT_ARROW</code> are all helpful
-  shorthands the key codes of
-
-  special keys. Key codes can be found on websites such as
-
-  <a href="http://keycode.info/">keycode.info</a>.</p>
-line: 184
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The last key pressed and its code are displayed at the center.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the last key pressed and its code.
-      text(`${key} : ${keyCode}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if an arrow key is pressed.
-      if (keyIsPressed === true) {
-        if (keyCode === UP_ARROW) {
-          y -= 1;
-        } else if (keyCode === DOWN_ARROW) {
-          y += 1;
-        } else if (keyCode === LEFT_ARROW) {
-          x -= 1;
-        } else if (keyCode === RIGHT_ARROW) {
-          x += 1;
-        }
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle at (x, y).
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-type: Integer
----
-
-
-# keyCode
diff --git a/src/content/reference/en/p5 copy/keyIsDown.mdx b/src/content/reference/en/p5 copy/keyIsDown.mdx
deleted file mode 100644
index 8afe4b0bdf..0000000000
--- a/src/content/reference/en/p5 copy/keyIsDown.mdx	
+++ /dev/null
@@ -1,142 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L811
-title: keyIsDown
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>Returns <code>true</code> if the key it’s checking is pressed and
-  <code>false</code> if not.</p>
-
-  <p><code>keyIsDown()</code> is helpful when checking for multiple different
-  key presses.
-
-  For example, <code>keyIsDown()</code> can be used to check if both
-  <code>LEFT_ARROW</code> and
-
-  <code>UP_ARROW</code> are pressed:</p>
-
-  <pre><code class="language-js">if (keyIsDown(LEFT_ARROW) &&
-  keyIsDown(UP_ARROW)) {
-    // Move diagonally.
-  }
-
-  </code></pre>
-
-  <p><code>keyIsDown()</code> can check for key presses using
-
-  <a href="/reference/p5/keyCode/">keyCode</a> values, as in
-  <code>keyIsDown(37)</code> or
-
-  <code>keyIsDown(LEFT_ARROW)</code>. Key codes can be found on websites such as
-
-  <a href="https://keycode.info" target="_blank">keycode.info</a>.</p>
-line: 811
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if an arrow key is pressed.
-      if (keyIsDown(LEFT_ARROW) === true) {
-        x -= 1;
-      }
-
-      if (keyIsDown(RIGHT_ARROW) === true) {
-        x += 1;
-      }
-
-      if (keyIsDown(UP_ARROW) === true) {
-        y -= 1;
-      }
-
-      if (keyIsDown(DOWN_ARROW) === true) {
-        y += 1;
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle.
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let x = 50;
-    let y = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe(
-        'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.'
-      );
-    }
-
-    function draw() {
-      // Update x and y if an arrow key is pressed.
-      if (keyIsDown(37) === true) {
-        x -= 1;
-      }
-
-      if (keyIsDown(39) === true) {
-        x += 1;
-      }
-
-      if (keyIsDown(38) === true) {
-        y -= 1;
-      }
-
-      if (keyIsDown(40) === true) {
-        y += 1;
-      }
-
-      // Style the circle.
-      fill(0);
-
-      // Draw the circle.
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: code
-    description: |
-      <p>key to check.</p>
-    type: Number
-return:
-  description: whether the key is down or not.
-  type: Boolean
-chainable: false
----
-
-
-# keyIsDown
diff --git a/src/content/reference/en/p5 copy/keyIsPressed.mdx b/src/content/reference/en/p5 copy/keyIsPressed.mdx
deleted file mode 100644
index 0b129c49e8..0000000000
--- a/src/content/reference/en/p5 copy/keyIsPressed.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L10
-title: keyIsPressed
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A <code>Boolean</code> system variable that's <code>true</code> if any key
-  is currently pressed
-
-  and <code>false</code> if not.</p>
-line: 10
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      if (keyIsPressed === true) {
-        fill(0);
-      } else {
-        fill(255);
-      }
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The white square turns black when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      if (keyIsPressed) {
-        fill(0);
-      } else {
-        fill(255);
-      }
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the word "false" at its center. The word switches to "true" when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the value of keyIsPressed.
-      text(keyIsPressed, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# keyIsPressed
diff --git a/src/content/reference/en/p5 copy/keyPressed.mdx b/src/content/reference/en/p5 copy/keyPressed.mdx
deleted file mode 100644
index 4a4007f09a..0000000000
--- a/src/content/reference/en/p5 copy/keyPressed.mdx	
+++ /dev/null
@@ -1,192 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L284
-title: keyPressed
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A function that's called once when any key is pressed.</p>
-
-  <p>Declaring the function <code>keyPressed()</code> sets a code block to run
-  once
-
-  automatically when the user presses any key:</p>
-
-  <pre><code class="language-js">function keyPressed() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/key/">key</a> and <a
-  href="/reference/p5/keyCode/">keyCode</a>
-
-  variables will be updated with the most recently typed value when
-
-  <code>keyPressed()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function keyPressed() {
-    if (key === 'c') {
-      // Code to run.
-    }
-
-    if (keyCode === ENTER) {
-      // Code to run.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>keyPressed()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
-  target="_blank">KeyboardEvent</a>
-
-  object with properties that describe the key press event:</p>
-
-  <pre><code class="language-js">function keyPressed(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Browsers may have default behaviors attached to various key events. For
-
-  example, some browsers may jump to the bottom of a web page when the
-
-  <code>SPACE</code> key is pressed. To prevent any default behavior for this
-  event, add
-
-  <code>return false;</code> to the end of the function.</p>
-line: 284
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the background color when the user presses a key.
-    function keyPressed() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square turns black when the user presses the "b" key. It turns white when the user presses the "a" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Reassign value when the user presses the 'a' or 'b' key.
-    function keyPressed() {
-      if (key === 'a') {
-        value = 255;
-      } else if (key === 'b') {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square turns white when the user presses the left arrow key. It turns black when the user presses the right arrow key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the background color when the user presses an arrow key.
-    function keyPressed() {
-      if (keyCode === LEFT_ARROW) {
-        value = 255;
-      } else if (keyCode === RIGHT_ARROW) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>KeyboardEvent</code> callback argument.</p>
-    type: KeyboardEvent
-    optional: true
-chainable: false
----
-
-
-# keyPressed
diff --git a/src/content/reference/en/p5 copy/keyReleased.mdx b/src/content/reference/en/p5 copy/keyReleased.mdx
deleted file mode 100644
index e19da953f1..0000000000
--- a/src/content/reference/en/p5 copy/keyReleased.mdx	
+++ /dev/null
@@ -1,188 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L474
-title: keyReleased
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A function that's called once when any key is released.</p>
-
-  <p>Declaring the function <code>keyReleased()</code> sets a code block to run
-  once
-
-  automatically when the user releases any key:</p>
-
-  <pre><code class="language-js">function keyReleased() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/key/">key</a> and <a
-  href="/reference/p5/keyCode/">keyCode</a>
-
-  variables will be updated with the most recently released value when
-
-  <code>keyReleased()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function keyReleased() {
-    if (key === 'c') {
-      // Code to run.
-    }
-
-    if (keyCode === ENTER) {
-      // Code to run.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>keyReleased()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
-  target="_blank">KeyboardEvent</a>
-
-  object with properties that describe the key press event:</p>
-
-  <pre><code class="language-js">function keyReleased(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Browsers may have default behaviors attached to various key events. To
-
-  prevent any default behavior for this event, add <code>return false;</code> to
-  the end
-
-  of the function.</p>
-line: 474
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user releases a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle value when the user releases a key.
-    function keyReleased() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes white when the user releases the "w" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Set value to 255 the user releases the 'w' key.
-    function keyReleased() {
-      if (key === 'w') {
-        value = 255;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square turns white when the user presses and releases the left arrow key. It turns black when the user presses and releases the right arrow key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the background color when the user releases an arrow key.
-    function keyReleased() {
-      if (keyCode === LEFT_ARROW) {
-        value = 255;
-      } else if (keyCode === RIGHT_ARROW) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>KeyboardEvent</code> callback argument.</p>
-    type: KeyboardEvent
-    optional: true
-chainable: false
----
-
-
-# keyReleased
diff --git a/src/content/reference/en/p5 copy/keyTyped.mdx b/src/content/reference/en/p5 copy/keyTyped.mdx
deleted file mode 100644
index a591db9e60..0000000000
--- a/src/content/reference/en/p5 copy/keyTyped.mdx	
+++ /dev/null
@@ -1,170 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/keyboard.js#L655
-title: keyTyped
-module: Events
-submodule: Keyboard
-file: src/events/keyboard.js
-description: >
-  <p>A function that's called once when keys with printable characters are
-  pressed.</p>
-
-  <p>Declaring the function <code>keyTyped()</code> sets a code block to run
-  once
-
-  automatically when the user presses any key with a printable character such
-
-  as <code>a</code> or 1. Modifier keys such as <code>SHIFT</code>,
-  <code>CONTROL</code>, and the arrow keys
-
-  will be ignored:</p>
-
-  <pre><code class="language-js">function keyTyped() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/key/">key</a> and <a
-  href="/reference/p5/keyCode/">keyCode</a>
-
-  variables will be updated with the most recently released value when
-
-  <code>keyTyped()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function keyTyped() {
-    // Check for the "c" character using key.
-    if (key === 'c') {
-      // Code to run.
-    }
-
-    // Check for "c" using keyCode.
-    if (keyCode === 67) {
-      // Code to run.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>keyTyped()</code> is
-  always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/"
-  target="_blank">KeyboardEvent</a>
-
-  object with properties that describe the key press event:</p>
-
-  <pre><code class="language-js">function keyReleased(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Note: Use the <a href="/reference/p5/keyPressed/">keyPressed()</a> function
-  and
-
-  <a href="/reference/p5/keyCode/">keyCode</a> system variable to respond to
-  modifier
-
-  keys such as <code>ALT</code>.</p>
-
-  <p>Browsers may have default behaviors attached to various key events. To
-
-  prevent any default behavior for this event, add <code>return false;</code> to
-  the end
-
-  of the function.</p>
-line: 655
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-    // Note: Pressing special keys such as SPACE have no effect.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square changes color when the user presses a key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the square's color when the user types a printable key.
-    function keyTyped() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square turns black when the user types the "b" key. It turns white when the user types the "a" key.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Reassign value when the user types the 'a' or 'b' key.
-    function keyTyped() {
-      if (key === 'a') {
-        value = 255;
-      } else if (key === 'b') {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>KeyboardEvent</code> callback argument.</p>
-    type: KeyboardEvent
-    optional: true
-chainable: false
----
-
-
-# keyTyped
diff --git a/src/content/reference/en/p5 copy/lerp.mdx b/src/content/reference/en/p5 copy/lerp.mdx
deleted file mode 100644
index 84c4b5bc7a..0000000000
--- a/src/content/reference/en/p5 copy/lerp.mdx	
+++ /dev/null
@@ -1,122 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L332
-title: lerp
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates a number between two numbers at a specific increment.</p>
-
-  <p>The <code>amt</code> parameter is the amount to interpolate between the two
-  numbers.
-
-  0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is
-
-  half-way in between, and 1.0 is equal to the second number. The
-  <code>lerp()</code>
-
-  function is convenient for creating motion along a straight path and for
-
-  drawing dotted lines.</p>
-
-  <p>If the value of <code>amt</code> is less than 0 or more than 1,
-  <code>lerp()</code> will return a
-
-  number outside of the original interval. For example, calling
-
-  <code>lerp(0, 10, 1.5)</code> will return 15.</p>
-line: 332
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Declare variables for coordinates.
-      let a = 20;
-      let b = 80;
-      let c = lerp(a, b, 0.2);
-      let d = lerp(a, b, 0.5);
-      let e = lerp(a, b, 0.8);
-
-      strokeWeight(5);
-
-      // Draw the original points in black.
-      stroke(0);
-      point(a, 50);
-      point(b, 50);
-
-      // Draw the lerped points in gray.
-      stroke(100);
-      point(c, 50);
-      point(d, 50);
-      point(e, 50);
-
-      describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let x = 50;
-    let y = 50;
-    let targetX = 50;
-    let targetY = 50;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');
-    }
-
-    function draw() {
-      background(220);
-
-      // Move x and y toward the target.
-      x = lerp(x, targetX, 0.05);
-      y = lerp(y, targetY, 0.05);
-
-      // Draw the circle.
-      circle(x, y, 20);
-    }
-
-    // Set x and y when the user clicks the mouse.
-    function mouseClicked() {
-      x = mouseX;
-      y = mouseY;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: start
-    description: |
-      <p>first value.</p>
-    type: Number
-  - name: stop
-    description: |
-      <p>second value.</p>
-    type: Number
-  - name: amt
-    description: |
-      <p>number.</p>
-    type: Number
-return:
-  description: lerped value.
-  type: Number
-chainable: false
----
-
-
-# lerp
diff --git a/src/content/reference/en/p5 copy/lerpColor.mdx b/src/content/reference/en/p5 copy/lerpColor.mdx
deleted file mode 100644
index d815ba9ddb..0000000000
--- a/src/content/reference/en/p5 copy/lerpColor.mdx	
+++ /dev/null
@@ -1,96 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L949
-title: lerpColor
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Blends two colors to find a third color between them.</p>
-
-  <p>The <code>amt</code> parameter specifies the amount to interpolate between
-  the two
-
-  values. 0 is equal to the first color, 0.1 is very near the first color,
-
-  0.5 is halfway between the two colors, and so on. Negative numbers are set
-
-  to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
-
-  <a href="/reference/p5/lerp/">lerp</a>. It's necessary because numbers outside
-  of the
-
-  interval [0, 1] will produce strange and unexpected colors.</p>
-
-  <p>The way that colors are interpolated depends on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 949
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create p5.Color objects to interpolate between.
-      let from = color(218, 165, 32);
-      let to = color(72, 61, 139);
-
-      // Create intermediate colors.
-      let interA = lerpColor(from, to, 0.33);
-      let interB = lerpColor(from, to, 0.66);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(from);
-      rect(10, 20, 20, 60);
-
-      // Draw the left-center rectangle.
-      fill(interA);
-      rect(30, 20, 20, 60);
-
-      // Draw the right-center rectangle.
-      fill(interB);
-      rect(50, 20, 20, 60);
-
-      // Draw the right rectangle.
-      fill(to);
-      rect(70, 20, 20, 60);
-
-      describe(
-        'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: c1
-    description: >
-      <p>interpolate from this color (any value created by the color()
-      function).</p>
-    type: p5.Color
-  - name: c2
-    description: >
-      <p>interpolate to this color (any value created by the color()
-      function).</p>
-    type: p5.Color
-  - name: amt
-    description: |
-      <p>number between 0 and 1.</p>
-    type: Number
-return:
-  description: interpolated color.
-  type: p5.Color
-chainable: false
----
-
-
-# lerpColor
diff --git a/src/content/reference/en/p5 copy/let.mdx b/src/content/reference/en/p5 copy/let.mdx
deleted file mode 100644
index f04902a9b0..0000000000
--- a/src/content/reference/en/p5 copy/let.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L7
-title: let
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>Declares a new variable.</p>
-
-  <p>A variable is a container for a value. For example, a variable might
-
-  contain a creature's x-coordinate as a <code>Number</code> or its name as a
-
-  <code>String</code>. Variables can change value by reassigning them as
-  follows:</p>
-
-  <pre><code class="language-js">// Declare the variable x and assign it the
-  value 10.
-
-  let x = 10;
-
-
-  // Reassign x to 50.
-
-  x = 50;
-
-  </code></pre>
-
-  <p>Variables have block scope. When a variable is declared between curly
-
-  braces <code>{}</code>, it only exists within the block defined by those
-  braces. For
-
-  example, the following code would throw a <code>ReferenceError</code> because
-  <code>x</code> is
-
-  declared within the <code>setup()</code> function's block:</p>
-
-  <pre><code class="language-js">function setup() {
-    createCanvas(100, 100);
-
-    let x = 50;
-  }
-
-
-  function draw() {
-    background(200);
-
-    // x was declared in setup(), so it can't be referenced here.
-    circle(x, 50, 20);
-  }
-
-  </code></pre>
-
-  <p>Variables declared outside of all curly braces <code>{}</code> are in the
-  global
-
-  scope. A variable that's in the global scope can be used and changed
-
-  anywhere in a sketch:</p>
-
-  <pre><code class="language-js">let x = 50;
-
-
-  function setup() {
-    createCanvas(100, 100);
-  }
-
-
-  function draw() {
-    background(200);
-
-    // Change the value of x.
-    x += 10;
-
-    circle(x, 50, 20);
-  }
-
-  </code></pre>
-line: 7
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(220);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(16);\n\n  // Create the message variable.\n  let message = 'Hello, \U0001F30D!';\n\n  // Display the message.\n  text(message, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  describe('A white circle moves from left to right against a gray background.');\n}\n\nfunction draw() {\n  background(220);\n\n  // Change the value of x.\n  x += 1;\n\n  circle(x, 50, 20);\n}\n</code>\n</div>"
-class: p5
----
-
-
-# let
diff --git a/src/content/reference/en/p5 copy/lightFalloff.mdx b/src/content/reference/en/p5 copy/lightFalloff.mdx
deleted file mode 100644
index e8b8245064..0000000000
--- a/src/content/reference/en/p5 copy/lightFalloff.mdx	
+++ /dev/null
@@ -1,100 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1161
-title: lightFalloff
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Sets the falloff rate for <a
-  href="/reference/p5/pointLight/">pointLight()</a>
-
-  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
-
-  <p>A light’s falloff describes the intensity of its beam at a distance. For
-
-  example, a lantern has a slow falloff, a flashlight has a medium falloff,
-
-  and a laser pointer has a sharp falloff.</p>
-
-  <p><code>lightFalloff()</code> has three parameters, <code>constant</code>,
-  <code>linear</code>, and
-
-  <code>quadratic</code>. They’re numbers used to calculate falloff at a
-  distance, <code>d</code>,
-
-  as follows:</p>
-
-  <p><code>falloff = 1 / (constant + d * linear + (d * d) *
-  quadratic)</code></p>
-
-  <p>Note: <code>constant</code>, <code>linear</code>, and
-  <code>quadratic</code> should always be set to values
-
-  greater than 0.</p>
-line: 1161
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to change the falloff rate.
-
-    let useFalloff = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Set the light falloff.
-      if (useFalloff === true) {
-        lightFalloff(2, 0, 0);
-      }
-
-      // Add a white point light from the front.
-      pointLight(255, 255, 255, 0, 0, 100);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Change the falloff value when the user double-clicks.
-    function doubleClicked() {
-      useFalloff = true;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: constant
-    description: |
-      <p>constant value for calculating falloff.</p>
-    type: Number
-  - name: linear
-    description: |
-      <p>linear value for calculating falloff.</p>
-    type: Number
-  - name: quadratic
-    description: |
-      <p>quadratic value for calculating falloff.</p>
-    type: Number
-chainable: true
----
-
-
-# lightFalloff
diff --git a/src/content/reference/en/p5 copy/lightness.mdx b/src/content/reference/en/p5 copy/lightness.mdx
deleted file mode 100644
index 284523dcc8..0000000000
--- a/src/content/reference/en/p5 copy/lightness.mdx	
+++ /dev/null
@@ -1,168 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1134
-title: lightness
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the lightness value of a color.</p>
-
-  <p><code>lightness()</code> extracts the HSL lightness value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>lightness()</code> returns a color's HSL lightness in the
-  range 0
-
-  to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  HSL, it
-
-  returns the lightness value in the given range.</p>
-line: 1134
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a p5.Color object using HSL values.
-      let c = color(0, 100, 75);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 75.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a color array.
-      let c = [0, 100, 75];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 75.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 75.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color with values in the range 0-255.
-      colorMode(HSL, 255);
-
-      // Create a p5.Color object using HSL values.
-      let c = color(0, 255, 191.5);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'lightValue' to 191.5.
-      let lightValue = lightness(c);
-
-      // Draw the right rectangle.
-      fill(lightValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the lightness value.
-  type: Number
-chainable: false
----
-
-
-# lightness
diff --git a/src/content/reference/en/p5 copy/lights.mdx b/src/content/reference/en/p5 copy/lights.mdx
deleted file mode 100644
index a7cf3ba7ae..0000000000
--- a/src/content/reference/en/p5 copy/lights.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1077
-title: lights
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: |
-  <p>Places an ambient and directional light in the scene.
-  The lights are set to ambientLight(128, 128, 128) and
-  directionalLight(128, 128, 128, 0, 0, -1).</p>
-  <p>Note: lights need to be called (whether directly or indirectly)
-  within draw() to remain persistent in a looping program.
-  Placing them in setup() will cause them to only have an effect
-  the first time through the loop.</p>
-line: 1077
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to turn on the lights.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the lights.
-      if (isLit === true) {
-        lights();
-      }
-
-      // Draw the box.
-      box();
-    }
-
-    // Turn on the lights when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white box drawn against a gray background.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      ambientLight(128, 128, 128);
-      directionalLight(128, 128, 128, 0, 0, -1);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# lights
diff --git a/src/content/reference/en/p5 copy/line.mdx b/src/content/reference/en/p5 copy/line.mdx
deleted file mode 100644
index b225222235..0000000000
--- a/src/content/reference/en/p5 copy/line.mdx	
+++ /dev/null
@@ -1,194 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L564
-title: line
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a straight line between two points.</p>
-
-  <p>A line's default width is one pixel. The version of <code>line()</code>
-  with four
-
-  parameters draws the line in 2D. To color a line, use the
-
-  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
-  use the
-
-  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A line
-
-  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
-  won't
-
-  affect the line's color.</p>
-
-  <p>The version of <code>line()</code> with six parameters allows the line to
-  be drawn in
-
-  3D space. Doing so requires adding the <code>WEBGL</code> argument to
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
-line: 564
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      line(30, 20, 85, 75);
-
-      describe(
-        'A black line on a gray canvas running from top-center to bottom-right.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      stroke('magenta');
-      strokeWeight(5);
-
-      line(30, 20, 85, 75);
-
-      describe(
-        'A thick, magenta line on a gray canvas running from top-center to bottom-right.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      line(30, 20, 85, 20);
-
-      // Right.
-      stroke(126);
-      line(85, 20, 85, 75);
-
-      // Bottom.
-      stroke(255);
-      line(85, 75, 30, 75);
-
-      describe(
-        'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
-      );
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      line(-20, -30, 35, 25);
-
-      describe(
-        'A black line on a gray canvas running from top-center to bottom-right.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black line connecting two spheres. The scene spins slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw a line.
-      line(0, 0, 0, 30, 20, -10);
-
-      // Draw the center sphere.
-      sphere(10);
-
-      // Translate to the second point.
-      translate(30, 20, -10);
-
-      // Draw the bottom-right sphere.
-      sphere(10);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 564
-    params:
-      - name: x1
-        description: |
-          <p>the x-coordinate of the first point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>the y-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>the x-coordinate of the second point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>the y-coordinate of the second point.</p>
-        type: Number
-    chainable: 1
-  - line: 696
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>the z-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>the z-coordinate of the second point.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# line
diff --git a/src/content/reference/en/p5 copy/linePerspective.mdx b/src/content/reference/en/p5 copy/linePerspective.mdx
deleted file mode 100644
index 80bf539c73..0000000000
--- a/src/content/reference/en/p5 copy/linePerspective.mdx	
+++ /dev/null
@@ -1,164 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L280
-title: linePerspective
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Enables or disables perspective for lines in 3D sketches.</p>
-
-  <p>In WebGL mode, lines can be drawn with a thinner stroke when they’re
-
-  further from the camera. Doing so gives them a more realistic appearance.</p>
-
-  <p>By default, lines are drawn differently based on the type of perspective
-
-  being used:</p>
-
-  <ul>
-
-  <li><code>perspective()</code> and <code>frustum()</code> simulate a realistic
-  perspective. In
-
-  these modes, stroke weight is affected by the line’s distance from the
-
-  camera. Doing so results in a more natural appearance.
-  <code>perspective()</code> is
-
-  the default mode for 3D sketches.</li>
-
-  <li><code>ortho()</code> doesn’t simulate a realistic perspective. In this
-  mode, stroke
-
-  weights are consistent regardless of the line’s distance from the camera.
-
-  Doing so results in a more predictable and consistent appearance.</li>
-
-  </ul>
-
-  <p><code>linePerspective()</code> can override the default line drawing
-  mode.</p>
-
-  <p>The parameter, <code>enable</code>, is optional. It’s a
-  <code>Boolean</code> value that sets the
-
-  way lines are drawn. If <code>true</code> is passed, as in
-  <code>linePerspective(true)</code>,
-
-  then lines will appear thinner when they are further from the camera. If
-
-  <code>false</code> is passed, as in <code>linePerspective(false)</code>, then
-  lines will have
-
-  consistent stroke weights regardless of their distance from the camera. By
-
-  default, <code>linePerspective()</code> is enabled.</p>
-
-  <p>Calling <code>linePerspective()</code> without passing an argument returns
-  <code>true</code> if
-
-  it's enabled and <code>false</code> if not.</p>
-
-  <p>Note: <code>linePerspective()</code> can only be used in WebGL mode.</p>
-line: 280
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click the canvas to toggle the line perspective.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-
-    // Toggle the line perspective when the user double-clicks.
-    function doubleClicked() {
-      let isEnabled = linePerspective();
-      linePerspective(!isEnabled);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click the canvas to toggle the line perspective.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Use an orthographic projection.
-      ortho();
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-
-    // Toggle the line perspective when the user double-clicks.
-    function doubleClicked() {
-      let isEnabled = linePerspective();
-      linePerspective(!isEnabled);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 280
-    params:
-      - name: enable
-        description: |
-          <p>whether to enable line perspective.</p>
-        type: Boolean
-  - line: 392
-    params: []
-    return:
-      description: whether line perspective is enabled.
-      type: Boolean
-chainable: false
----
-
-
-# linePerspective
diff --git a/src/content/reference/en/p5 copy/loadBytes.mdx b/src/content/reference/en/p5 copy/loadBytes.mdx
deleted file mode 100644
index 8b02c0683e..0000000000
--- a/src/content/reference/en/p5 copy/loadBytes.mdx	
+++ /dev/null
@@ -1,56 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L986
-title: loadBytes
-module: IO
-submodule: Input
-file: src/io/files.js
-description: |
-  <p>This method is suitable for fetching files up to size of 64MB.</p>
-line: 986
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    let data;
-
-    function preload() {
-      data = loadBytes('/assets/mammals.xml');
-    }
-
-    function setup() {
-      for (let i = 0; i < 5; i++) {
-        console.log(data.bytes[i].toString(16));
-      }
-      describe('no image displayed');
-    }
-    </code></div>
-class: p5
-params:
-  - name: file
-    description: |
-      <p>name of the file or URL to load</p>
-    type: String
-  - name: callback
-    description: |
-      <p>function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
-                                         completes</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to be executed if there
-                                         is an error</p>
-    type: Function
-    optional: true
-return:
-  description: an object whose 'bytes' property will be the loaded buffer
-  type: Object
-chainable: false
----
-
-
-# loadBytes
diff --git a/src/content/reference/en/p5 copy/loadFont.mdx b/src/content/reference/en/p5 copy/loadFont.mdx
deleted file mode 100644
index 86af4b7123..0000000000
--- a/src/content/reference/en/p5 copy/loadFont.mdx	
+++ /dev/null
@@ -1,171 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L16
-title: loadFont
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/loading_displaying.js
-description: >
-  <p>Loads a font and creates a <a href="/reference/p5/p5.Font">p5.Font</a>
-  object.
-
-  <code>loadFont()</code> can load fonts in either .otf or .ttf format. Loaded
-  fonts can
-
-  be used to style text on the canvas and in HTML elements.</p>
-
-  <p>The first parameter, <code>path</code>, is the path to a font file.
-
-  Paths to local files should be relative. For example,
-
-  <code>'/assets/inconsolata.otf'</code>. The Inconsolata font used in the
-  following
-
-  examples can be downloaded for free
-
-  <a href="https://www.fontsquirrel.com/fonts/inconsolata/"
-  target="_blank">here</a>.
-
-  Paths to remote files should be URLs. For example,
-
-  <code>'https://example.com/inconsolata.otf'</code>. URLs may be blocked due to
-  browser
-
-  security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, it will be called once the font has loaded. The callback function
-
-  may use the new <a href="/reference/p5/p5.Font">p5.Font</a> object if
-  needed.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, it will be called if the font fails to load. The callback function
-
-  may use the error
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/"
-  target="_blank">Event</a>
-
-  object if needed.</p>
-
-  <p>Fonts can take time to load. Calling <code>loadFont()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures fonts load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or
-
-  <a href="/reference/p5/draw/">draw()</a>.</p>
-line: 16
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      fill('deeppink');
-      textFont(font);
-      textSize(36);
-      text('p5*js', 10, 50);
-
-      describe('The text "p5*js" written in pink on a white background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      loadFont('/assets/inconsolata.otf', font => {
-        fill('deeppink');
-        textFont(font);
-        textSize(36);
-        text('p5*js', 10, 50);
-
-        describe('The text "p5*js" written in pink on a white background.');
-      });
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      loadFont('/assets/inconsolata.otf', success, failure);
-    }
-
-    function success(font) {
-      fill('deeppink');
-      textFont(font);
-      textSize(36);
-      text('p5*js', 10, 50);
-
-      describe('The text "p5*js" written in pink on a white background.');
-    }
-
-    function failure(event) {
-      console.error('Oops!', event);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function preload() {
-      loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      let p = createP('p5*js');
-      p.style('color', 'deeppink');
-      p.style('font-family', 'Inconsolata');
-      p.style('font-size', '36px');
-      p.position(10, 50);
-
-      describe('The text "p5*js" written in pink on a white background.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the font to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function called with the
-                                                <a href="#/p5.Font">p5.Font</a> object after it
-                                                loads.</p>
-    type: Function
-    optional: true
-  - name: failureCallback
-    description: |
-      <p>function called with the error
-                                                <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
-                                                object if the font fails to load.</p>
-    type: Function
-    optional: true
-return:
-  description: <a href="#/p5.Font">p5.Font</a> object.
-  type: p5.Font
-chainable: false
----
-
-
-# loadFont
diff --git a/src/content/reference/en/p5 copy/loadImage.mdx b/src/content/reference/en/p5 copy/loadImage.mdx
deleted file mode 100644
index 7e5b8bf0b7..0000000000
--- a/src/content/reference/en/p5 copy/loadImage.mdx	
+++ /dev/null
@@ -1,137 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L18
-title: loadImage
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Loads an image to create a <a href="/reference/p5/p5.Image">p5.Image</a>
-  object.</p>
-
-  <p><code>loadImage()</code> interprets the first parameter one of three ways.
-  If the path
-
-  to an image file is provided, <code>loadImage()</code> will load it. Paths to
-  local
-
-  files should be relative, such as <code>'/assets/thundercat.jpg'</code>. URLs
-  such as
-
-  <code>'https://example.com/thundercat.jpg'</code> may be blocked due to
-  browser
-
-  security. Raw image data can also be passed as a base64 encoded image in
-
-  the form <code>'data:image/png;base64,arandomsequenceofcharacters'</code>.</p>
-
-  <p>The second parameter is optional. If a function is passed, it will be
-
-  called once the image has loaded. The callback function can optionally use
-
-  the new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-  <p>The third parameter is also optional. If a function is passed, it will be
-
-  called if the image fails to load. The callback function can optionally use
-
-  the event error.</p>
-
-  <p>Images can take time to load. Calling <code>loadImage()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures images load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 18
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe('Image of the underside of a white umbrella and a gridded ceiling.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Call handleImage() once the image loads.
-      loadImage('/assets/laDefense.jpg', handleImage);
-
-      describe('Image of the underside of a white umbrella and a gridded ceiling.');
-    }
-
-    // Display the image.
-    function handleImage(img) {
-      image(img, 0, 0);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Call handleImage() once the image loads or
-      // call handleError() if an error occurs.
-      loadImage('/assets/laDefense.jpg', handleImage, handleError);
-    }
-
-    // Display the image.
-    function handleImage(img) {
-      image(img, 0, 0);
-
-      describe('Image of the underside of a white umbrella and a gridded ceiling.');
-    }
-
-    // Log the error.
-    function handleError(event) {
-      console.error('Oops!', event);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the image to be loaded or base64 encoded image.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function called with
-                                    <a href="#/p5.Image">p5.Image</a> once it
-                                    loads.</p>
-    type: function(p5.Image)
-    optional: true
-  - name: failureCallback
-    description: |
-      <p>function called with event
-                                    error if the image fails to load.</p>
-    type: Function(Event)
-    optional: true
-return:
-  description: the <a href="#/p5.Image">p5.Image</a> object.
-  type: p5.Image
-chainable: false
----
-
-
-# loadImage
diff --git a/src/content/reference/en/p5 copy/loadJSON.mdx b/src/content/reference/en/p5 copy/loadJSON.mdx
deleted file mode 100644
index 95fd0552b5..0000000000
--- a/src/content/reference/en/p5 copy/loadJSON.mdx	
+++ /dev/null
@@ -1,288 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L17
-title: loadJSON
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Loads a JSON file to create an <code>Object</code>.</p>
-
-  <p>JavaScript Object Notation
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
-  target="_blank">JSON</a>)
-
-  is a standard format for sending data between applications. The format is
-
-  based on JavaScript objects which have keys and values. JSON files store
-
-  data in an object with strings as keys. Values can be strings, numbers,
-
-  Booleans, arrays, <code>null</code>, or other objects.</p>
-
-  <p>The first parameter, <code>path</code>, is always a string with the path to
-  the file.
-
-  Paths to local files should be relative, as in
-
-  <code>loadJSON('/assets/data.json')</code>. URLs such as
-
-  <code>'https://example.com/data.json'</code> may be blocked due to browser
-  security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, as in <code>loadJSON('/assets/data.json', handleData)</code>, then the
-
-  <code>handleData()</code> function will be called once the data loads. The
-  object
-
-  created from the JSON data will be passed to <code>handleData()</code> as its
-  only argument.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, as in <code>loadJSON('/assets/data.json', handleData,
-  handleFailure)</code>,
-
-  then the <code>handleFailure()</code> function will be called if an error
-  occurs while
-
-  loading. The <code>Error</code> object will be passed to
-  <code>handleFailure()</code> as its only
-
-  argument.</p>
-
-  <p>Note: Data can take time to load. Calling <code>loadJSON()</code> within
-
-  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
-  used in
-
-  <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 17
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the JSON and create an object.
-    function preload() {
-      myData = loadJSON('/assets/data.json');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the circle.
-      fill(myData.color);
-      noStroke();
-
-      // Draw the circle.
-      circle(myData.x, myData.y, myData.d);
-
-      describe('A pink circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the JSON and create an object.
-    function preload() {
-      myData = loadJSON('/assets/data.json');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object and make it transparent.
-      let c = color(myData.color);
-      c.setAlpha(80);
-
-      // Style the circles.
-      fill(c);
-      noStroke();
-
-      // Iterate over the myData.bubbles array.
-      for (let b of myData.bubbles) {
-        // Draw a circle for each bubble.
-        circle(b.x, b.y, b.d);
-      }
-
-      describe('Several pink bubbles floating in a blue sky.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the GeoJSON and create an object.
-    function preload() {
-      myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get data about the most recent earthquake.
-      let quake = myData.features[0].properties;
-
-      // Draw a circle based on the earthquake's magnitude.
-      circle(50, 50, quake.mag * 10);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display the earthquake's location.
-      text(quake.place, 5, 80, 100);
-
-      describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let bigQuake;
-
-    // Load the GeoJSON and preprocess it.
-    function preload() {
-      loadJSON(
-        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
-        handleData
-      );
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a circle based on the earthquake's magnitude.
-      circle(50, 50, bigQuake.mag * 10);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display the earthquake's location.
-      text(bigQuake.place, 5, 80, 100);
-
-      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
-    }
-
-    // Find the biggest recent earthquake.
-    function handleData(data) {
-      let maxMag = 0;
-      // Iterate over the earthquakes array.
-      for (let quake of data.features) {
-        // Reassign bigQuake if a larger
-        // magnitude quake is found.
-        if (quake.properties.mag > maxMag) {
-          bigQuake = quake.properties;
-        }
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let bigQuake;
-
-    // Load the GeoJSON and preprocess it.
-    function preload() {
-      loadJSON(
-        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',
-        handleData,
-        handleError
-      );
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a circle based on the earthquake's magnitude.
-      circle(50, 50, bigQuake.mag * 10);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display the earthquake's location.
-      text(bigQuake.place, 5, 80, 100);
-
-      describe(`A white circle on a gray background. The text "${bigQuake.place}" is written beneath the circle.`);
-    }
-
-    // Find the biggest recent earthquake.
-    function handleData(data) {
-      let maxMag = 0;
-      // Iterate over the earthquakes array.
-      for (let quake of data.features) {
-        // Reassign bigQuake if a larger
-        // magnitude quake is found.
-        if (quake.properties.mag > maxMag) {
-          bigQuake = quake.properties;
-        }
-      }
-    }
-
-    // Log any errors to the console.
-    function handleError(error) {
-      console.log('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the JSON file to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: >
-      <p>function to call once the data is loaded. Will be passed the
-      object.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: >
-      <p>function to call if the data fails to load. Will be passed an
-      <code>Error</code> event object.</p>
-    type: Function
-    optional: true
-return:
-  description: object containing the loaded data.
-  type: Object
-chainable: false
----
-
-
-# loadJSON
diff --git a/src/content/reference/en/p5 copy/loadModel.mdx b/src/content/reference/en/p5 copy/loadModel.mdx
deleted file mode 100644
index 56b2230e1e..0000000000
--- a/src/content/reference/en/p5 copy/loadModel.mdx	
+++ /dev/null
@@ -1,469 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L13
-title: loadModel
-module: Shape
-submodule: 3D Models
-file: src/webgl/loading.js
-description: >
-  <p>Loads a 3D model to create a
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object.</p>
-
-  <p><code>loadModel()</code> can load 3D models from OBJ and STL files. Once
-  the model is
-
-  loaded, it can be displayed with the
-
-  <a href="/reference/p5/model/">model()</a> function, as in
-  <code>model(shape)</code>.</p>
-
-  <p>There are three ways to call <code>loadModel()</code> with optional
-  parameters to help
-
-  process the model.</p>
-
-  <p>The first parameter, <code>path</code>, is always a <code>String</code>
-  with the path to the
-
-  file. Paths to local files should be relative, as in
-
-  <code>loadModel('/assets/model.obj')</code>. URLs such as
-
-  <code>'https://example.com/model.obj'</code> may be blocked due to browser
-  security.</p>
-
-  <p>Note: When loading a <code>.obj</code> file that references materials
-  stored in
-
-  <code>.mtl</code> files, p5.js will attempt to load and apply those materials.
-
-  To ensure that the <code>.obj</code> file reads the <code>.mtl</code> file
-  correctly include the
-
-  <code>.mtl</code> file alongside it.</p>
-
-  <p>The first way to call <code>loadModel()</code> has three optional
-  parameters after the
-
-  file path. The first optional parameter, <code>successCallback</code>, is a
-  function
-
-  to call once the model loads. For example,
-
-  <code>loadModel('/assets/model.obj', handleModel)</code> will call the
-  <code>handleModel()</code>
-
-  function once the model loads. The second optional parameter,
-
-  <code>failureCallback</code>, is a function to call if the model fails to
-  load. For
-
-  example, <code>loadModel('/assets/model.obj', handleModel,
-  handleFailure)</code> will
-
-  call the <code>handleFailure()</code> function if an error occurs while
-  loading. The
-
-  third optional parameter, <code>fileType</code>, is the model’s file extension
-  as a
-
-  string. For example,
-
-  <code>loadModel('/assets/model', handleModel, handleFailure, '.obj')</code>
-  will try to
-
-  load the file model as a <code>.obj</code> file.</p>
-
-  <p>The second way to call <code>loadModel()</code> has four optional
-  parameters after the
-
-  file path. The first optional parameter is a <code>Boolean</code> value. If
-  <code>true</code> is
-
-  passed, as in <code>loadModel('/assets/model.obj', true)</code>, then the
-  model will be
-
-  resized to ensure it fits the canvas. The next three parameters are
-
-  <code>successCallback</code>, <code>failureCallback</code>, and
-  <code>fileType</code> as described above.</p>
-
-  <p>The third way to call <code>loadModel()</code> has one optional parameter
-  after the
-
-  file path. The optional parameter, <code>options</code>, is an
-  <code>Object</code> with options,
-
-  as in <code>loadModel('/assets/model.obj', options)</code>. The
-  <code>options</code> object can
-
-  have the following properties:</p>
-
-  <pre><code class="language-js">let options = {
-    // Enables standardized size scaling during loading if set to true.
-    normalize: true,
-
-    // Function to call once the model loads.
-    successCallback: handleModel,
-
-    // Function to call if an error occurs while loading.
-    failureCallback: handleError,
-
-    // Model's file extension.
-    fileType: '.stl',
-
-    // Flips the U texture coordinates of the model.
-    flipU: false,
-
-    // Flips the V texture coordinates of the model.
-    flipV: false
-  };
-
-
-  // Pass the options object to loadModel().
-
-  loadModel('/assets/model.obj', options);
-
-  </code></pre>
-
-  <p>Models can take time to load. Calling <code>loadModel()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures models load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-
-  <p>Note: There’s no support for colored STL files. STL files with color will
-
-  be rendered without color.</p>
-line: 13
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      shape = loadModel('/assets/teapot.obj');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    // Normalize the geometry's size to fit the canvas.
-    function preload() {
-      shape = loadModel('/assets/teapot.obj', true);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/teapot.obj', true, handleModel);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and log the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/wrong.obj', true, handleModel, handleError);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and print the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-
-    // Print an error message if the file doesn't load.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/teapot.obj', true, handleModel, handleError, '.obj');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and print the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-
-    // Print an error message if the file doesn't load.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-    let options = {
-      normalize: true,
-      successCallback: handleModel,
-      failureCallback: handleError,
-      fileType: '.obj'
-    };
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      loadModel('/assets/teapot.obj', options);
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white teapot drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-
-    // Set the shape variable and print the geometry's
-    // ID to the console.
-    function handleModel(data) {
-      shape = data;
-      console.log(shape.gid);
-    }
-
-    // Print an error message if the file doesn't load.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-  type: p5.Geometry
-overloads:
-  - line: 13
-    params:
-      - name: path
-        description: |
-          <p>path of the model to be loaded.</p>
-        type: String
-      - name: normalize
-        description: |
-          <p>if <code>true</code>, scale the model to fit the canvas.</p>
-        type: Boolean
-      - name: successCallback
-        description: |
-          <p>function to call once the model is loaded. Will be passed
-                                                            the <a href="#/p5.Geometry">p5.Geometry</a> object.</p>
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: >
-          <p>function to call if the model fails to load. Will be passed an
-          <code>Error</code> event object.</p>
-        type: Function(Event)
-        optional: true
-      - name: fileType
-        description: >
-          <p>model’s file extension. Either <code>'.obj'</code> or
-          <code>'.stl'</code>.</p>
-        type: String
-        optional: true
-    return:
-      description: the <a href="#/p5.Geometry">p5.Geometry</a> object
-      type: p5.Geometry
-  - line: 324
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: successCallback
-        description: ''
-        type: function(p5.Geometry)
-        optional: true
-      - name: failureCallback
-        description: ''
-        type: Function(Event)
-        optional: true
-      - name: fileType
-        description: ''
-        type: String
-        optional: true
-    return:
-      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
-      type: p5.Geometry
-  - line: 332
-    params:
-      - name: path
-        description: ''
-        type: String
-      - name: options
-        description: |
-          <p>loading options.</p>
-        type: Object
-        optional: true
-        props:
-          - name: successCallback
-            description: ''
-            type: function(p5.Geometry)
-            optional: true
-          - name: failureCallback
-            description: ''
-            type: Function(Event)
-            optional: true
-          - name: fileType
-            description: ''
-            type: String
-            optional: true
-          - name: normalize
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipU
-            description: ''
-            type: Boolean
-            optional: true
-          - name: flipV
-            description: ''
-            type: Boolean
-            optional: true
-    return:
-      description: new <a href="#/p5.Geometry">p5.Geometry</a> object.
-      type: p5.Geometry
-chainable: false
----
-
-
-# loadModel
diff --git a/src/content/reference/en/p5 copy/loadPixels.mdx b/src/content/reference/en/p5 copy/loadPixels.mdx
deleted file mode 100644
index 424a87765f..0000000000
--- a/src/content/reference/en/p5 copy/loadPixels.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L946
-title: loadPixels
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: |
-  <p>Loads the current value of each pixel on the canvas into the
-  <a href="/reference/p5/pixels/">pixels</a> array.</p>
-  <p><code>loadPixels()</code> must be called before reading from or writing to
-  <a href="/reference/p5/pixels/">pixels</a>.</p>
-line: 946
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0, 100, 100);
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Copy the top half of the canvas to the bottom.
-      for (let i = 0; i < halfImage; i += 1) {
-        pixels[i + halfImage] = pixels[i];
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Two identical images of mountain landscapes, one on top of the other.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# loadPixels
diff --git a/src/content/reference/en/p5 copy/loadShader.mdx b/src/content/reference/en/p5 copy/loadShader.mdx
deleted file mode 100644
index 1180e6c487..0000000000
--- a/src/content/reference/en/p5 copy/loadShader.mdx	
+++ /dev/null
@@ -1,172 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L12
-title: loadShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Loads vertex and fragment shaders to create a
-
-  <a href="/reference/p5/p5.Shader">p5.Shader</a> object.</p>
-
-  <p>Shaders are programs that run on the graphics processing unit (GPU). They
-
-  can process many pixels at the same time, making them fast for many
-
-  graphics tasks. They’re written in a language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.</p>
-
-  <p>Once the <a href="/reference/p5/p5.Shader">p5.Shader</a> object is created,
-  it can be
-
-  used with the <a href="/reference/p5/shader/">shader()</a> function, as in
-
-  <code>shader(myShader)</code>. A shader program consists of two files, a
-  vertex shader
-
-  and a fragment shader. The vertex shader affects where 3D geometry is drawn
-
-  on the screen and the fragment shader affects color.</p>
-
-  <p><code>loadShader()</code> loads the vertex and fragment shaders from their
-  <code>.vert</code> and
-
-  <code>.frag</code> files. For example, calling
-
-  <code>loadShader('/assets/shader.vert', '/assets/shader.frag')</code> loads
-  both
-
-  required shaders and returns a <a href="/reference/p5/p5.Shader">p5.Shader</a>
-  object.</p>
-
-  <p>The third parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, it will be called once the shader has loaded. The callback function
-
-  can use the new <a href="/reference/p5/p5.Shader">p5.Shader</a> object as its
-
-  parameter.</p>
-
-  <p>The fourth parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, it will be called if the shader fails to load. The callback
-
-  function can use the event error as its parameter.</p>
-
-  <p>Shaders can take time to load. Calling <code>loadShader()</code> in
-
-  <a href="/reference/p5/preload/">preload()</a> ensures shaders load before
-  they're
-
-  used in <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-
-  <p>Note: Shaders can only be used in WebGL mode.</p>
-line: 12
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Compile and apply the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      // Set the shader uniform r to the value 1.5.
-      mandelbrot.setUniform('r', 1.5);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-
-      describe('A black fractal image on a magenta background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates between 0 and 2.
-      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: vertFilename
-    description: |
-      <p>path of the vertex shader to be loaded.</p>
-    type: String
-  - name: fragFilename
-    description: |
-      <p>path of the fragment shader to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function to call once the shader is loaded. Can be passed the
-                                          <a href="#/p5.Shader">p5.Shader</a> object.</p>
-    type: Function
-    optional: true
-  - name: failureCallback
-    description: |
-      <p>function to call if the shader fails to load. Can be passed an
-                                          <code>Error</code> event object.</p>
-    type: Function
-    optional: true
-return:
-  description: new shader created from the vertex and fragment shader files.
-  type: p5.Shader
-chainable: false
----
-
-
-# loadShader
diff --git a/src/content/reference/en/p5 copy/loadSound.mdx b/src/content/reference/en/p5 copy/loadSound.mdx
deleted file mode 100644
index be9dd1ac29..0000000000
--- a/src/content/reference/en/p5 copy/loadSound.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L2946
-title: loadSound
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>loadSound() returns a new p5.SoundFile from a specified
-  path. If called during preload(), the p5.SoundFile will be ready
-  to play in time for setup() and draw(). If called outside of
-  preload, the p5.SoundFile will not be ready immediately, so
-  loadSound accepts a callback as the second parameter. Using a
-  <a href="https://github.com/processing/p5.js/wiki/Local-server/">
-  local server</a> is recommended when loading external files.</p>
-line: 2946
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    let mySound;
-    function preload() {
-      soundFormats('mp3', 'ogg');
-      mySound = loadSound('/assets/doorbell');
-    }
-
-    function setup() {
-      let cnv = createCanvas(100, 100);
-      cnv.mousePressed(canvasPressed);
-      background(220);
-      text('tap here to play', 10, 20);
-    }
-
-    function canvasPressed() {
-      // playing a sound file on a user gesture
-      // is equivalent to `userStartAudio()`
-      mySound.play();
-    }
-    </code></div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>Path to the sound file, or an array with
-                                        paths to soundfiles in multiple formats
-                                        i.e. ['sound.ogg', 'sound.mp3'].
-                                        Alternately, accepts an object: either
-                                        from the HTML5 File API, or a p5.File.</p>
-    type: String|Array
-  - name: successCallback
-    description: |
-      <p>Name of a function to call once file loads</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>Name of a function to call if there is
-                                          an error loading the file.</p>
-    type: Function
-    optional: true
-  - name: whileLoading
-    description: |
-      <p>Name of a function to call while file is loading.
-                                     This function will receive the percentage loaded
-                                     so far, from 0.0 to 1.0.</p>
-    type: Function
-    optional: true
-return:
-  description: Returns a p5.SoundFile
-  type: SoundFile
-chainable: false
----
-
-
-# loadSound
diff --git a/src/content/reference/en/p5 copy/loadStrings.mdx b/src/content/reference/en/p5 copy/loadStrings.mdx
deleted file mode 100644
index ce011835bc..0000000000
--- a/src/content/reference/en/p5 copy/loadStrings.mdx	
+++ /dev/null
@@ -1,188 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L309
-title: loadStrings
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Loads a text file to create an <code>Array</code>.</p>
-
-  <p>The first parameter, <code>path</code>, is always a string with the path to
-  the file.
-
-  Paths to local files should be relative, as in
-
-  <code>loadStrings('/assets/data.txt')</code>. URLs such as
-
-  <code>'https://example.com/data.txt'</code> may be blocked due to browser
-  security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, as in <code>loadStrings('/assets/data.txt', handleData)</code>, then
-  the
-
-  <code>handleData()</code> function will be called once the data loads. The
-  array
-
-  created from the text data will be passed to <code>handleData()</code> as its
-  only
-
-  argument.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, as in <code>loadStrings('/assets/data.txt', handleData,
-  handleFailure)</code>,
-
-  then the <code>handleFailure()</code> function will be called if an error
-  occurs while
-
-  loading. The <code>Error</code> object will be passed to
-  <code>handleFailure()</code> as its only
-
-  argument.</p>
-
-  <p>Note: Data can take time to load. Calling <code>loadStrings()</code> within
-
-  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
-  used in
-
-  <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 309
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    let myData;
-
-    // Load the text and create an array.
-    function preload() {
-      myData = loadStrings('/assets/test.txt');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Select a random line from the text.
-      let phrase = random(myData);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display the text.
-      text(phrase, 10, 50, 90);
-
-      describe(`The text "${phrase}" written in black on a gray background.`);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastLine;
-
-    // Load the text and preprocess it.
-    function preload() {
-      loadStrings('/assets/test.txt', handleData);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display the text.
-      text(lastLine, 10, 50, 90);
-
-      describe('The text "I talk like an orange" written in black on a gray background.');
-    }
-
-    // Select the last line from the text.
-    function handleData(data) {
-      lastLine = data[data.length - 1];
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastLine;
-
-    // Load the text and preprocess it.
-    function preload() {
-      loadStrings('/assets/test.txt', handleData, handleError);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display the text.
-      text(lastLine, 10, 50, 90);
-
-      describe('The text "I talk like an orange" written in black on a gray background.');
-    }
-
-    // Select the last line from the text.
-    function handleData(data) {
-      lastLine = data[data.length - 1];
-    }
-
-    // Log any errors to the console.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the text file to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function to call once the data is
-                                           loaded. Will be passed the array.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to call if the data fails to
-                                         load. Will be passed an <code>Error</code> event
-                                         object.</p>
-    type: Function
-    optional: true
-return:
-  description: new array containing the loaded text.
-  type: 'String[]'
-chainable: false
----
-
-
-# loadStrings
diff --git a/src/content/reference/en/p5 copy/loadTable.mdx b/src/content/reference/en/p5 copy/loadTable.mdx
deleted file mode 100644
index d93e40a3da..0000000000
--- a/src/content/reference/en/p5 copy/loadTable.mdx	
+++ /dev/null
@@ -1,124 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L505
-title: loadTable
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Reads the contents of a file or URL and creates a <a
-  href="/reference/p5/p5.Table">p5.Table</a> object with
-
-  its values. If a file is specified, it must be located in the sketch's
-
-  "data" folder. The filename parameter can also be a URL to a file found
-
-  online. By default, the file is assumed to be comma-separated (in CSV
-
-  format). Table only looks for a header row if the 'header' option is
-
-  included.</p>
-
-  <p>This method is asynchronous, meaning it may not finish before the next
-
-  line in your sketch is executed. Calling <a
-  href="/reference/p5/loadTable/">loadTable()</a> inside <a
-  href="/reference/p5/preload/">preload()</a>
-
-  guarantees to complete the operation before <a
-  href="/reference/p5/setup/">setup()</a> and <a
-  href="/reference/p5/draw/">draw()</a> are called.
-
-  Outside of <a href="/reference/p5/preload/">preload()</a>, you may supply a
-  callback function to handle the
-
-  object:</p>
-
-  <p>All files loaded and saved use UTF-8 encoding. This method is suitable for
-  fetching files up to size of 64MB.</p>
-line: 505
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // Given the following CSV file called "mammals.csv"
-    // located in the project's "assets" folder:
-    //
-    // id,species,name
-    // 0,Capra hircus,Goat
-    // 1,Panthera pardus,Leopard
-    // 2,Equus zebra,Zebra
-
-    let table;
-
-    function preload() {
-      //my table is comma separated value "csv"
-      //and has a header specifying the columns labels
-      table = loadTable('/assets/mammals.csv', 'csv', 'header');
-      //the file can be remote
-      //table = loadTable("https://p5js.org/reference//assets/mammals.csv",
-      //                  "csv", "header");
-    }
-
-    function setup() {
-      //count the columns
-      print(table.getRowCount() + ' total rows in table');
-      print(table.getColumnCount() + ' total columns in table');
-
-      print(table.getColumn('name'));
-      //["Goat", "Leopard", "Zebra"]
-
-      //cycle through the table
-      for (let r = 0; r < table.getRowCount(); r++)
-        for (let c = 0; c < table.getColumnCount(); c++) {
-          print(table.getString(r, c));
-        }
-      describe(`randomly generated text from a file,
-        for example "i smell like butter"`);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: filename
-    description: |
-      <p>name of the file or URL to load</p>
-    type: String
-  - name: extension
-    description: |
-      <p>parse the table by comma-separated values "csv", semicolon-separated
-                                           values "ssv", or tab-separated values "tsv"</p>
-    type: String
-    optional: true
-  - name: header
-    description: |
-      <p>"header" to indicate table has header row</p>
-    type: String
-    optional: true
-  - name: callback
-    description: |
-      <p>function to be executed after
-                                           <a href="#/p5/loadTable">loadTable()</a> completes. On success, the
-                                           <a href="#/p5.Table">Table</a> object is passed in as the
-                                           first argument.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to be executed if
-                                           there is an error, response is passed
-                                           in as first argument</p>
-    type: Function
-    optional: true
-return:
-  description: <a href="#/p5.Table">Table</a> object containing data
-  type: Object
-chainable: false
----
-
-
-# loadTable
diff --git a/src/content/reference/en/p5 copy/loadXML.mdx b/src/content/reference/en/p5 copy/loadXML.mdx
deleted file mode 100644
index 859a3c895d..0000000000
--- a/src/content/reference/en/p5 copy/loadXML.mdx	
+++ /dev/null
@@ -1,220 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L780
-title: loadXML
-module: IO
-submodule: Input
-file: src/io/files.js
-description: >
-  <p>Loads an XML file to create a <a href="/reference/p5/p5.XML">p5.XML</a>
-  object.</p>
-
-  <p>Extensible Markup Language
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
-  target="_blank">XML</a>)
-
-  is a standard format for sending data between applications. Like HTML, the
-
-  XML format is based on tags and attributes, as in
-
-  <code><time units="s">1234</time></code>.</p>
-
-  <p>The first parameter, <code>path</code>, is always a string with the path to
-  the file.
-
-  Paths to local files should be relative, as in
-
-  <code>loadXML('/assets/data.xml')</code>. URLs such as
-  <code>'https://example.com/data.xml'</code>
-
-  may be blocked due to browser security.</p>
-
-  <p>The second parameter, <code>successCallback</code>, is optional. If a
-  function is
-
-  passed, as in <code>loadXML('/assets/data.xml', handleData)</code>, then the
-
-  <code>handleData()</code> function will be called once the data loads. The
-
-  <a href="/reference/p5/p5.XML">p5.XML</a> object created from the data will be
-  passed
-
-  to <code>handleData()</code> as its only argument.</p>
-
-  <p>The third parameter, <code>failureCallback</code>, is also optional. If a
-  function is
-
-  passed, as in <code>loadXML('/assets/data.xml', handleData,
-  handleFailure)</code>, then
-
-  the <code>handleFailure()</code> function will be called if an error occurs
-  while
-
-  loading. The <code>Error</code> object will be passed to
-  <code>handleFailure()</code> as its only
-
-  argument.</p>
-
-  <p>Note: Data can take time to load. Calling <code>loadXML()</code> within
-
-  <a href="/reference/p5/preload/">preload()</a> ensures data loads before it's
-  used in
-
-  <a href="/reference/p5/setup/">setup()</a> or <a
-  href="/reference/p5/draw/">draw()</a>.</p>
-line: 780
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let myXML;
-
-    // Load the XML and create a p5.XML object.
-    function preload() {
-      myXML = loadXML('/assets/animals.xml');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get an array with all mammal tags.
-      let mammals = myXML.getChildren('mammal');
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(14);
-
-      // Iterate over the mammals array.
-      for (let i = 0; i < mammals.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Get the mammal's common name.
-        let name = mammals[i].getContent();
-
-        // Display the mammal's name.
-        text(name, 20, y);
-      }
-
-      describe(
-        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastMammal;
-
-    // Load the XML and create a p5.XML object.
-    function preload() {
-      loadXML('/assets/animals.xml', handleData);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display the content of the last mammal element.
-      text(lastMammal, 50, 50);
-
-      describe('The word "Zebra" written in black on a gray background.');
-    }
-
-    // Get the content of the last mammal element.
-    function handleData(data) {
-      // Get an array with all mammal elements.
-      let mammals = data.getChildren('mammal');
-
-      // Get the content of the last mammal.
-      lastMammal = mammals[mammals.length - 1].getContent();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let lastMammal;
-
-    // Load the XML and preprocess it.
-    function preload() {
-      loadXML('/assets/animals.xml', handleData, handleError);
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display the content of the last mammal element.
-      text(lastMammal, 50, 50);
-
-      describe('The word "Zebra" written in black on a gray background.');
-    }
-
-    // Get the content of the last mammal element.
-    function handleData(data) {
-      // Get an array with all mammal elements.
-      let mammals = data.getChildren('mammal');
-
-      // Get the content of the last mammal.
-      lastMammal = mammals[mammals.length - 1].getContent();
-    }
-
-    // Log any errors to the console.
-    function handleError(error) {
-      console.error('Oops!', error);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: path
-    description: |
-      <p>path of the XML file to be loaded.</p>
-    type: String
-  - name: successCallback
-    description: |
-      <p>function to call once the data is
-                                           loaded. Will be passed the
-                                           <a href="#/p5.XML">p5.XML</a> object.</p>
-    type: Function
-    optional: true
-  - name: errorCallback
-    description: |
-      <p>function to call if the data fails to
-                                         load. Will be passed an <code>Error</code> event
-                                         object.</p>
-    type: Function
-    optional: true
-return:
-  description: |-
-    XML data loaded into a <a href="#/p5.XML">p5.XML</a>
-                     object.
-  type: p5.XML
-chainable: false
----
-
-
-# loadXML
diff --git a/src/content/reference/en/p5 copy/log.mdx b/src/content/reference/en/p5 copy/log.mdx
deleted file mode 100644
index c84c6d5a4b..0000000000
--- a/src/content/reference/en/p5 copy/log.mdx	
+++ /dev/null
@@ -1,79 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L423
-title: log
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the natural logarithm (the base-e logarithm) of a number.</p>
-
-  <p><code>log()</code> expects the <code>n</code> parameter to be a value
-  greater than 0 because
-
-  the natural logarithm is defined that way.</p>
-line: 423
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = log(50);
-      circle(33, 33, d);
-
-      // Bottom-right.
-      d = log(500000000);
-      circle(67, 67, d);
-
-      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that get higher slowly from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate coordinates.
-      let x = frameCount;
-      let y = 15 * log(x);
-
-      // Draw a point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number greater than 0.</p>
-    type: Number
-return:
-  description: natural logarithm of n.
-  type: Number
-chainable: false
----
-
-
-# log
diff --git a/src/content/reference/en/p5 copy/loop.mdx b/src/content/reference/en/p5 copy/loop.mdx
deleted file mode 100644
index a73432d2c1..0000000000
--- a/src/content/reference/en/p5 copy/loop.mdx	
+++ /dev/null
@@ -1,111 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L127
-title: loop
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Resumes the draw loop after <a href="/reference/p5/noLoop/">noLoop()</a>
-  has been
-
-  called.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
-
-  <a href="/reference/p5/draw/">draw()</a> from repeating. The draw loop can be
-
-  restarted by calling <code>loop()</code>.</p>
-
-  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
-  to check
-
-  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
-line: 127
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe(
-        'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's x-coordinate.
-      let x = frameCount;
-
-      // Draw the circle.
-      circle(x, 50, 20);
-    }
-
-    // Resume the draw loop when the user double-clicks.
-    function doubleClicked() {
-      loop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let startButton;
-    let stopButton;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the button elements and place them
-      // beneath the canvas.
-      startButton = createButton('▶');
-      startButton.position(0, 100);
-      startButton.size(50, 20);
-      stopButton = createButton('◾');
-      stopButton.position(50, 100);
-      stopButton.size(50, 20);
-
-      // Set functions to call when the buttons are pressed.
-      startButton.mousePressed(loop);
-      stopButton.mousePressed(noLoop);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe(
-        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# loop
diff --git a/src/content/reference/en/p5 copy/mag.mdx b/src/content/reference/en/p5 copy/mag.mdx
deleted file mode 100644
index 4d46565b07..0000000000
--- a/src/content/reference/en/p5 copy/mag.mdx	
+++ /dev/null
@@ -1,84 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L481
-title: mag
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the magnitude, or length, of a vector.</p>
-
-  <p>A vector can be thought of in different ways. In one view, a vector is a
-
-  point in space. The vector's components, <code>x</code> and <code>y</code>,
-  are the point's
-
-  coordinates <code>(x, y)</code>. A vector's magnitude is the distance from the
-  origin
-
-  <code>(0, 0)</code> to <code>(x, y)</code>. <code>mag(x, y)</code> is a
-  shortcut for calling
-
-  <code>dist(0, 0, x, y)</code>.</p>
-
-  <p>A vector can also be thought of as an arrow pointing in space. This view is
-
-  helpful for programming motion. See <a
-  href="/reference/p5/p5.Vector">p5.Vector</a> for
-
-  more details.</p>
-
-  <p>Use <a href="/reference/p5.Vector/mag/">p5.Vector.mag()</a> to calculate
-  the
-
-  magnitude of a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-line: 481
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the vector's components.
-      let x = 30;
-      let y = 40;
-
-      // Calculate the magnitude.
-      let m = mag(x, y);
-
-      // Style the text.
-      textSize(16);
-
-      // Display the vector and its magnitude.
-      line(0, 0, x, y);
-      text(m, x, y);
-
-      describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>first component.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>second component.</p>
-    type: Number
-return:
-  description: magnitude of vector.
-  type: Number
-chainable: false
----
-
-
-# mag
diff --git a/src/content/reference/en/p5 copy/map.mdx b/src/content/reference/en/p5 copy/map.mdx
deleted file mode 100644
index a94e6e4dd7..0000000000
--- a/src/content/reference/en/p5 copy/map.mdx	
+++ /dev/null
@@ -1,119 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L534
-title: map
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Re-maps a number from one range to another.</p>
-
-  <p>For example, calling <code>map(2, 0, 10, 0, 100)</code> returns 20. The
-  first three
-
-  arguments set the original value to 2 and the original range from 0 to 10.
-
-  The last two arguments set the target range from 0 to 100. 20's position
-
-  in the target range [0, 100] is proportional to 2's position in the
-
-  original range [0, 10].</p>
-
-  <p>The sixth parameter, <code>withinBounds</code>, is optional. By default,
-  <code>map()</code> can
-
-  return values outside of the target range. For example,
-
-  <code>map(11, 0, 10, 0, 100)</code> returns 110. Passing <code>true</code> as
-  the sixth parameter
-
-  constrains the remapped value to the target range. For example,
-
-  <code>map(11, 0, 10, 0, 100, true)</code> returns 100.</p>
-line: 534
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the top line.
-      line(0, 25, mouseX, 25);
-
-      // Remap mouseX from [0, 100] to [0, 50].
-      let x = map(mouseX, 0, 100, 0, 50);
-
-      // Draw the bottom line.
-      line(0, 75, x, 75);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A circle changes color from black to white as the mouse moves from left to right.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Remap mouseX from [0, 100] to [0, 255]
-      let c = map(mouseX, 0, 100, 0, 255);
-
-      // Style the circle.
-      fill(c);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>the value to be remapped.</p>
-    type: Number
-  - name: start1
-    description: |
-      <p>lower bound of the value's current range.</p>
-    type: Number
-  - name: stop1
-    description: |
-      <p>upper bound of the value's current range.</p>
-    type: Number
-  - name: start2
-    description: |
-      <p>lower bound of the value's target range.</p>
-    type: Number
-  - name: stop2
-    description: |
-      <p>upper bound of the value's target range.</p>
-    type: Number
-  - name: withinBounds
-    description: |
-      <p>constrain the value to the newly mapped range.</p>
-    type: Boolean
-    optional: true
-return:
-  description: remapped number.
-  type: Number
-chainable: false
----
-
-
-# map
diff --git a/src/content/reference/en/p5 copy/match.mdx b/src/content/reference/en/p5 copy/match.mdx
deleted file mode 100644
index c93425e96d..0000000000
--- a/src/content/reference/en/p5 copy/match.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L60
-title: match
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Applies a regular expression to a string and returns an array with the
-
-  first match.</p>
-
-  <p><code>match()</code> uses regular expressions (regex) to match patterns in
-  text. For
-
-  example, the regex <code>abc</code> can be used to search a string for the
-  exact
-
-  sequence of characters <code>abc</code>. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
-  target="_blank">MDN</a>.
-
-  for more information about regexes.</p>
-
-  <p>The first parameter, <code>str</code>, is the string to search.</p>
-
-  <p>The second parameter, <code>regex</code>, is a string with the regular
-  expression to
-
-  apply. For example, calling <code>match('Hello, p5*js!', '[a-z][0-9]')</code>
-  would
-
-  return the array <code>['p5']</code>.</p>
-
-  <p>Note: If no matches are found, <code>null</code> is returned.</p>
-line: 60
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'Hello, p5*js!';
-
-      // Match the characters that are lowercase
-      // letters followed by digits.
-      let matches = match(string, '[a-z][0-9]');
-
-      // Print the matches array to the console:
-      // ['p5']
-      print(matches);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the matches.
-      text(matches, 50, 50);
-
-      describe('The text "p5" written in black on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: str
-    description: |
-      <p>string to search.</p>
-    type: String
-  - name: regexp
-    description: |
-      <p>regular expression to match.</p>
-    type: String
-return:
-  description: match if found.
-  type: 'String[]'
-chainable: false
----
-
-
-# match
diff --git a/src/content/reference/en/p5 copy/matchAll.mdx b/src/content/reference/en/p5 copy/matchAll.mdx
deleted file mode 100644
index 371d596b61..0000000000
--- a/src/content/reference/en/p5 copy/matchAll.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L119
-title: matchAll
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Applies a regular expression to a string and returns an array of
-  matches.</p>
-
-  <p><code>match()</code> uses regular expressions (regex) to match patterns in
-  text. For
-
-  example, the regex <code>abc</code> can be used to search a string for the
-  exact
-
-  sequence of characters <code>abc</code>. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#tools"
-  target="_blank">MDN</a>.
-
-  for more information about regexes. <code>matchAll()</code> is different from
-
-  <a href="/reference/p5/match/">match()</a> because it returns every match, not
-  just
-
-  the first.</p>
-
-  <p>The first parameter, <code>str</code>, is the string to search.</p>
-
-  <p>The second parameter, <code>regex</code>, is a string with the regular
-  expression to
-
-  apply. For example, calling
-
-  <code>matchAll('p5*js is easier than abc123', '[a-z][0-9]')</code> would
-  return the
-
-  2D array <code>[['p5'], ['c1']]</code>.</p>
-
-  <p>Note: If no matches are found, an empty array <code>[]</code> is
-  returned.</p>
-line: 119
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'p5*js is easier than abc123';
-
-      // Match the character sequences that are
-      // lowercase letters followed by digits.
-      let matches = matchAll(string, '[a-z][0-9]');
-
-      // Print the matches array to the console:
-      // [['p5'], ['c1']]
-      print(matches);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Iterate over the matches array.
-      for (let i = 0; i < matches.length; i += 1) {
-
-        // Calculate the y-coordainate.
-        let y = (i + 1) * 33;
-
-        // Display the match.
-        text(matches[i], 50, y);
-      }
-
-      describe(
-        'The text "p5" and "c1" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: str
-    description: |
-      <p>string to search.</p>
-    type: String
-  - name: regexp
-    description: |
-      <p>regular expression to match.</p>
-    type: String
-return:
-  description: matches found.
-  type: 'String[]'
-chainable: false
----
-
-
-# matchAll
diff --git a/src/content/reference/en/p5 copy/max.mdx b/src/content/reference/en/p5 copy/max.mdx
deleted file mode 100644
index 0dd0ee142c..0000000000
--- a/src/content/reference/en/p5 copy/max.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L618
-title: max
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Returns the largest value in a sequence of numbers.</p>
-
-  <p>The version of <code>max()</code> with one parameter interprets it as an
-  array of
-
-  numbers and returns the largest number.</p>
-
-  <p>The version of <code>max()</code> with two or more parameters interprets
-  them as
-
-  individual numbers and returns the largest number.</p>
-line: 618
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the maximum of 10, 5, and 20.
-      let m = max(10, 5, 20);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the max.
-      text(m, 50, 50);
-
-      describe('The number 20 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let numbers = [10, 5, 20];
-
-      // Calculate the maximum of the array.
-      let m = max(numbers);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the max.
-      text(m, 50, 50);
-
-      describe('The number 20 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: maximum number.
-  type: Number
-overloads:
-  - line: 618
-    params:
-      - name: n0
-        description: |
-          <p>first number to compare.</p>
-        type: Number
-      - name: n1
-        description: |
-          <p>second number to compare.</p>
-        type: Number
-    return:
-      description: maximum number.
-      type: Number
-  - line: 680
-    params:
-      - name: nums
-        description: |
-          <p>numbers to compare.</p>
-        type: 'Number[]'
-    return:
-      description: ''
-      type: Number
-chainable: false
----
-
-
-# max
diff --git a/src/content/reference/en/p5 copy/metalness.mdx b/src/content/reference/en/p5 copy/metalness.mdx
deleted file mode 100644
index ef378bc2a9..0000000000
--- a/src/content/reference/en/p5 copy/metalness.mdx	
+++ /dev/null
@@ -1,142 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L3069
-title: metalness
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the amount of "metalness" of a
-
-  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
-
-  <p><code>metalness()</code> can make materials appear more metallic. It
-  affects the way
-
-  materials reflect light sources including
-
-  affects the way materials reflect light sources including
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>,
-
-  <a href="/reference/p5/spotLight/">spotLight()</a>, and
-
-  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
-
-  <p>The parameter, <code>metallic</code>, is a number that sets the amount of
-  metalness.
-
-  <code>metallic</code> must be greater than 1, which is its default value.
-  Higher
-
-  values, such as <code>metalness(100)</code>, make specular materials appear
-  more
-
-  metallic.</p>
-line: 3069
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn on an ambient light.
-      ambientLight(200);
-
-      // Get the mouse's coordinates.
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Turn on a white point light that follows the mouse.
-      pointLight(255, 255, 255, mx, my, 50);
-
-      // Style the spheres.
-      noStroke();
-      fill(30, 30, 255);
-      specularMaterial(255);
-      shininess(20);
-
-      // Draw the left sphere with low metalness.
-      translate(-25, 0, 0);
-      metalness(1);
-      sphere(20);
-
-      // Draw the right sphere with high metalness.
-      translate(50, 0, 0);
-      metalness(50);
-      sphere(20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(100 ,100 ,WEBGL);
-
-      describe(
-        'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'
-      );
-    }
-
-    function draw() {
-      // Add the panorama.
-      panorama(img);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Use the image as a light source.
-      imageLight(img);
-
-      // Style the spheres.
-      noStroke();
-      specularMaterial(50);
-      shininess(200);
-
-      // Draw the left sphere with low metalness.
-      translate(-25, 0, 0);
-      metalness(1);
-      sphere(20);
-
-      // Draw the right sphere with high metalness.
-      translate(50, 0, 0);
-      metalness(50);
-      sphere(20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: metallic
-    description: |
-      <p>amount of metalness.</p>
-    type: Number
-chainable: false
----
-
-
-# metalness
diff --git a/src/content/reference/en/p5 copy/midiToFreq.mdx b/src/content/reference/en/p5 copy/midiToFreq.mdx
deleted file mode 100644
index ada29d80ea..0000000000
--- a/src/content/reference/en/p5 copy/midiToFreq.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L841
-title: midiToFreq
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns the frequency value of a MIDI note value.
-  General MIDI treats notes as integers where middle C
-  is 60, C# is 61, D is 62 etc. Useful for generating
-  musical frequencies with oscillators.</p>
-line: 841
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    let midiNotes = [60, 64, 67, 72];
-    let noteIndex = 0;
-    let midiVal, freq;
-
-    function setup() {
-      let cnv = createCanvas(100, 100);
-      cnv.mousePressed(startSound);
-      osc = new p5.TriOsc();
-      env = new p5.Envelope();
-    }
-
-    function draw() {
-      background(220);
-      text('tap to play', 10, 20);
-      if (midiVal) {
-        text('MIDI: ' + midiVal, 10, 40);
-        text('Freq: ' + freq, 10, 60);
-      }
-    }
-
-    function startSound() {
-      // see also: userStartAudio();
-      osc.start();
-
-      midiVal = midiNotes[noteIndex % midiNotes.length];
-      freq = midiToFreq(midiVal);
-      osc.freq(freq);
-      env.ramp(osc, 0, 1.0, 0);
-
-      noteIndex++;
-    }
-    </code></div>
-class: p5
-params:
-  - name: midiNote
-    description: |
-      <p>The number of a MIDI note</p>
-    type: Number
-return:
-  description: Frequency value of the given MIDI note
-  type: Number
-chainable: false
----
-
-
-# midiToFreq
diff --git a/src/content/reference/en/p5 copy/millis.mdx b/src/content/reference/en/p5 copy/millis.mdx
deleted file mode 100644
index 18f1ac06d0..0000000000
--- a/src/content/reference/en/p5 copy/millis.mdx	
+++ /dev/null
@@ -1,147 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L112
-title: millis
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: >
-  <p>Returns the number of milliseconds since a sketch started running.</p>
-
-  <p><code>millis()</code> keeps track of how long a sketch has been running in
-
-  milliseconds (thousandths of a second). This information is often
-
-  helpful for timing events and animations.</p>
-
-  <p>If a sketch has a
-
-  <a href="/reference/p5/setup/">setup()</a> function, then
-  <code>millis()</code> begins tracking
-
-  time before the code in <a href="/reference/p5/setup/">setup()</a> runs. If a
-
-  sketch includes a <a href="/reference/p5/preload/">preload()</a> function,
-  then
-
-  <code>millis()</code> begins tracking time as soon as the code in
-
-  <a href="/reference/p5/preload/">preload()</a> starts running.</p>
-line: 112
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the number of milliseconds the sketch has run.
-      let ms = millis();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(10);
-      textFont('Courier New');
-
-      // Display how long it took setup() to be called.
-      text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
-
-      describe(
-        `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Get the number of seconds the sketch has run.
-      let s = millis() / 1000;
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(10);
-      textFont('Courier New');
-
-      // Display how long the sketch has run.
-      text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle oscillates left and right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Get the number of seconds the sketch has run.
-      let s = millis() / 1000;
-
-      // Calculate an x-coordinate.
-      let x = 30 * sin(s) + 50;
-
-      // Draw the circle.
-      circle(x, 50, 30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Load the GeoJSON.
-    function preload() {
-      loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the number of milliseconds the sketch has run.
-      let ms = millis();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(11);
-
-      // Display how long it took to load the data.
-      text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
-
-      describe(
-        `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: number of milliseconds since starting the sketch.
-  type: Number
-chainable: false
----
-
-
-# millis
diff --git a/src/content/reference/en/p5 copy/min.mdx b/src/content/reference/en/p5 copy/min.mdx
deleted file mode 100644
index 67af3b37f1..0000000000
--- a/src/content/reference/en/p5 copy/min.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L695
-title: min
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Returns the smallest value in a sequence of numbers.</p>
-
-  <p>The version of <code>min()</code> with one parameter interprets it as an
-  array of
-
-  numbers and returns the smallest number.</p>
-
-  <p>The version of <code>min()</code> with two or more parameters interprets
-  them as
-
-  individual numbers and returns the smallest number.</p>
-line: 695
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the minimum of 10, 5, and 20.
-      let m = min(10, 5, 20);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the min.
-      text(m, 50, 50);
-
-      describe('The number 5 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let numbers = [10, 5, 20];
-
-      // Calculate the minimum of the array.
-      let m = min(numbers);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the min.
-      text(m, 50, 50);
-
-      describe('The number 5 written in the middle of a gray square.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: minimum number.
-  type: Number
-overloads:
-  - line: 695
-    params:
-      - name: n0
-        description: |
-          <p>first number to compare.</p>
-        type: Number
-      - name: n1
-        description: |
-          <p>second number to compare.</p>
-        type: Number
-    return:
-      description: minimum number.
-      type: Number
-  - line: 757
-    params:
-      - name: nums
-        description: |
-          <p>numbers to compare.</p>
-        type: 'Number[]'
-    return:
-      description: ''
-      type: Number
-chainable: false
----
-
-
-# min
diff --git a/src/content/reference/en/p5 copy/minute.mdx b/src/content/reference/en/p5 copy/minute.mdx
deleted file mode 100644
index 3ac966c800..0000000000
--- a/src/content/reference/en/p5 copy/minute.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L78
-title: minute
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current minute as a number from 0–59.</p>
-line: 78
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current minute.
-      let m = minute();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the minute.
-      text(`Current minute: ${m}`, 10, 50, 80);
-
-      describe(`The text 'Current minute: ${m}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current minute between 0 and 59.
-  type: Integer
-chainable: false
----
-
-
-# minute
diff --git a/src/content/reference/en/p5 copy/model.mdx b/src/content/reference/en/p5 copy/model.mdx
deleted file mode 100644
index e925350407..0000000000
--- a/src/content/reference/en/p5 copy/model.mdx	
+++ /dev/null
@@ -1,155 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/loading.js#L991
-title: model
-module: Shape
-submodule: 3D Models
-file: src/webgl/loading.js
-description: >
-  <p>Draws a <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to the
-  canvas.</p>
-
-  <p>The parameter, <code>model</code>, is the
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> object to draw.
-
-  <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects can be built with
-
-  <a href="/reference/p5/buildGeometry/">buildGeometry()</a>, or
-
-  <a href="/reference/p5/beginGeometry/">beginGeometry()</a> and
-
-  <a href="/reference/p5/endGeometry/">endGeometry()</a>. They can also be
-  loaded from
-
-  a file with <a href="/reference/p5/loadGeometry/">loadGeometry()</a>.</p>
-
-  <p>Note: <code>model()</code> can only be used in WebGL mode.</p>
-line: 991
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createShape);
-
-      describe('A white cone drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-    }
-
-    // Create p5.Geometry object from a single cone.
-    function createShape() {
-      cone();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      shape = buildGeometry(createArrow);
-
-      describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the arrows.
-      noStroke();
-
-      // Draw the p5.Geometry object.
-      model(shape);
-
-      // Translate and rotate the coordinate system.
-      translate(30, 0, 0);
-      rotateZ(frameCount * 0.01);
-
-      // Draw the p5.Geometry object again.
-      model(shape);
-    }
-
-    function createArrow() {
-      // Add shapes to the p5.Geometry object.
-      push();
-      rotateX(PI);
-      cone(10);
-      translate(0, -10, 0);
-      cylinder(3, 20);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let shape;
-
-    // Load the file and create a p5.Geometry object.
-    function preload() {
-      shape = loadModel('/assets/octahedron.obj');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white octahedron drawn against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the shape.
-      model(shape);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: model
-    description: |
-      <p>3D shape to be drawn.</p>
-    type: p5.Geometry
-chainable: false
----
-
-
-# model
diff --git a/src/content/reference/en/p5 copy/month.mdx b/src/content/reference/en/p5 copy/month.mdx
deleted file mode 100644
index d2e248235c..0000000000
--- a/src/content/reference/en/p5 copy/month.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L242
-title: month
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current month as a number from 1–12.</p>
-line: 242
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current month.
-      let m = month();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the month.
-      text(`Current month: ${m}`, 10, 50, 80);
-
-      describe(`The text 'Current month: ${m}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current month between 1 and 12.
-  type: Integer
-chainable: false
----
-
-
-# month
diff --git a/src/content/reference/en/p5 copy/mouseButton.mdx b/src/content/reference/en/p5 copy/mouseButton.mdx
deleted file mode 100644
index 82128f97a3..0000000000
--- a/src/content/reference/en/p5 copy/mouseButton.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L687
-title: mouseButton
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A String system variable that contains the value of the last mouse button
-
-  pressed.</p>
-
-  <p>The <code>mouseButton</code> variable is either <code>LEFT</code>,
-  <code>RIGHT</code>, or <code>CENTER</code>,
-
-  depending on which button was pressed last.</p>
-
-  <p>Note: Different browsers may track <code>mouseButton</code> differently.
-  See
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons/"
-  target="_blank">MDN</a>
-
-  for more information.</p>
-line: 687
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with black text at its center. The text changes from 0 to either "left" or "right" when the user clicks a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse button.
-      text(mouseButton, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        "A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      if (mouseIsPressed === true) {
-        if (mouseButton === LEFT) {
-          circle(50, 50, 50);
-        }
-        if (mouseButton === RIGHT) {
-          square(25, 25, 50);
-        }
-        if (mouseButton === CENTER) {
-          triangle(23, 75, 50, 20, 78, 75);
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Constant
----
-
-
-# mouseButton
diff --git a/src/content/reference/en/p5 copy/mouseClicked.mdx b/src/content/reference/en/p5 copy/mouseClicked.mdx
deleted file mode 100644
index 80bd80b0a2..0000000000
--- a/src/content/reference/en/p5 copy/mouseClicked.mdx	
+++ /dev/null
@@ -1,196 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1443
-title: mouseClicked
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once after a mouse button is pressed and
-  released.</p>
-
-  <p>Declaring the function <code>mouseClicked()</code> sets a code block to run
-
-  automatically when the user releases a mouse button after having pressed
-
-  it:</p>
-
-  <pre><code class="language-js">function mouseClicked() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseClicked()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseClicked() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseClicked()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse click event:</p>
-
-  <pre><code class="language-js">function mouseClicked(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mouseClicked()</code> will run when a user’s
-  touch
-
-  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
-  If
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
-  touch
-
-  ends and <code>mouseClicked()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
-
-  <a href="/reference/p5/mouseReleased/">mouseReleased()</a>,
-
-  and <code>mouseClicked()</code> are all related.
-
-  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
-  user
-
-  clicks the mouse. <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
-  runs as
-
-  soon as the user releases the mouse click. <code>mouseClicked()</code> runs
-
-  immediately after <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
-line: 1443
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square changes color when the user presses and releases a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle the square's color when the user clicks.
-    function mouseClicked() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the circle.
-      fill('orange');
-      stroke('royalblue');
-      strokeWeight(10);
-
-      describe(
-        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
-      );
-    }
-
-    function draw() {
-      background(220);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-
-    // Set the stroke color and weight as soon as the user clicks.
-    function mousePressed() {
-      stroke('deeppink');
-      strokeWeight(3);
-    }
-
-    // Set the stroke and fill colors as soon as the user releases
-    // the mouse.
-    function mouseReleased() {
-      stroke('royalblue');
-
-      // This is never visible because fill() is called
-      // in mouseClicked() which runs immediately after
-      // mouseReleased();
-      fill('limegreen');
-    }
-
-    // Set the fill color and stroke weight after
-    // mousePressed() and mouseReleased() are called.
-    function mouseClicked() {
-      fill('orange');
-      strokeWeight(10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseClicked
diff --git a/src/content/reference/en/p5 copy/mouseDragged.mdx b/src/content/reference/en/p5 copy/mouseDragged.mdx
deleted file mode 100644
index 26fea21fe9..0000000000
--- a/src/content/reference/en/p5 copy/mouseDragged.mdx	
+++ /dev/null
@@ -1,130 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L982
-title: mouseDragged
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called when the mouse moves while a button is
-  pressed.</p>
-
-  <p>Declaring the function <code>mouseDragged()</code> sets a code block to run
-
-  automatically when the user clicks and drags the mouse:</p>
-
-  <pre><code class="language-js">function mouseDragged() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseDragged()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseDragged() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseDragged()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse drag event:</p>
-
-  <pre><code class="language-js">function mouseDragged(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mouseDragged()</code> will run when a user
-  moves a touch
-
-  point if <a href="/reference/p5/touchMoved/">touchMoved()</a> isn’t declared.
-  If
-
-  <a href="/reference/p5/touchMoved/">touchMoved()</a> is declared, then
-
-  <a href="/reference/p5/touchMoved/">touchMoved()</a> will run when a user
-  moves a
-
-  touch point and <code>mouseDragged()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-line: 982
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter as the user drags the mouse.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mouseDragged() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseDragged
diff --git a/src/content/reference/en/p5 copy/mouseIsPressed.mdx b/src/content/reference/en/p5 copy/mouseIsPressed.mdx
deleted file mode 100644
index 37109eb364..0000000000
--- a/src/content/reference/en/p5 copy/mouseIsPressed.mdx	
+++ /dev/null
@@ -1,73 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L755
-title: mouseIsPressed
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Boolean</code> system variable that's <code>true</code> if the
-  mouse is pressed and
-
-  <code>false</code> if not.</p>
-line: 755
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the word "false" at its center. The word changes to "true" when the user presses a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouseIsPressed variable.
-      text(mouseIsPressed, 25, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a white square at its center. The inner square turns black when the user presses the mouse.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      if (mouseIsPressed === true) {
-        fill(0);
-      } else {
-        fill(255);
-      }
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Boolean
----
-
-
-# mouseIsPressed
diff --git a/src/content/reference/en/p5 copy/mouseMoved.mdx b/src/content/reference/en/p5 copy/mouseMoved.mdx
deleted file mode 100644
index 14928fdc5e..0000000000
--- a/src/content/reference/en/p5 copy/mouseMoved.mdx	
+++ /dev/null
@@ -1,118 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L896
-title: mouseMoved
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called when the mouse moves.</p>
-
-  <p>Declaring the function <code>mouseMoved()</code> sets a code block to run
-
-  automatically when the user moves the mouse without clicking any mouse
-
-  buttons:</p>
-
-  <pre><code class="language-js">function mouseMoved() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseMoved()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseMoved() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseMoved()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse move event:</p>
-
-  <pre><code class="language-js">function mouseMoved(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-line: 896
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter as the mouse moves.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mouseMoved() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseMoved
diff --git a/src/content/reference/en/p5 copy/mousePressed.mdx b/src/content/reference/en/p5 copy/mousePressed.mdx
deleted file mode 100644
index 81181859c1..0000000000
--- a/src/content/reference/en/p5 copy/mousePressed.mdx	
+++ /dev/null
@@ -1,193 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1098
-title: mousePressed
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when a mouse button is pressed.</p>
-
-  <p>Declaring the function <code>mousePressed()</code> sets a code block to run
-
-  automatically when the user presses a mouse button:</p>
-
-  <pre><code class="language-js">function mousePressed() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mousePressed()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mousePressed() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mousePressed()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse press event:</p>
-
-  <pre><code class="language-js">function mousePressed(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mousePressed()</code> will run when a user’s
-  touch
-
-  begins if <a href="/reference/p5/touchStarted/">touchStarted()</a> isn’t
-  declared. If
-
-  <a href="/reference/p5/touchStarted/">touchStarted()</a> is declared, then
-
-  <a href="/reference/p5/touchStarted/">touchStarted()</a> will run when a
-  user’s touch
-
-  begins and <code>mousePressed()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: <code>mousePressed()</code>, <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a>,
-
-  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
-
-  <code>mousePressed()</code> runs as soon as the user clicks the mouse.
-
-  <a href="/reference/p5/mouseReleased/">mouseReleased()</a> runs as soon as the
-  user
-
-  releases the mouse click. <a
-  href="/reference/p5/mouseClicked/">mouseClicked()</a>
-
-  runs immediately after <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a>.</p>
-line: 1098
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter when the user presses a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mousePressed() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the circle.
-      fill('orange');
-      stroke('royalblue');
-      strokeWeight(10);
-
-      describe(
-        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
-      );
-    }
-
-    function draw() {
-      background(220);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-
-    // Set the stroke color and weight as soon as the user clicks.
-    function mousePressed() {
-      stroke('deeppink');
-      strokeWeight(3);
-    }
-
-    // Set the stroke and fill colors as soon as the user releases
-    // the mouse.
-    function mouseReleased() {
-      stroke('royalblue');
-
-      // This is never visible because fill() is called
-      // in mouseClicked() which runs immediately after
-      // mouseReleased();
-      fill('limegreen');
-    }
-
-    // Set the fill color and stroke weight after
-    // mousePressed() and mouseReleased() are called.
-    function mouseClicked() {
-      fill('orange');
-      strokeWeight(10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mousePressed
diff --git a/src/content/reference/en/p5 copy/mouseReleased.mdx b/src/content/reference/en/p5 copy/mouseReleased.mdx
deleted file mode 100644
index 6f52911162..0000000000
--- a/src/content/reference/en/p5 copy/mouseReleased.mdx	
+++ /dev/null
@@ -1,195 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1270
-title: mouseReleased
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when a mouse button is released.</p>
-
-  <p>Declaring the function <code>mouseReleased()</code> sets a code block to
-  run
-
-  automatically when the user releases a mouse button after having pressed
-
-  it:</p>
-
-  <pre><code class="language-js">function mouseReleased() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseReleased()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseReleased() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional.
-  <code>mouseReleased()</code> is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse release event:</p>
-
-  <pre><code class="language-js">function mouseReleased(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <code>mouseReleased()</code> will run when a user’s
-  touch
-
-  ends if <a href="/reference/p5/touchEnded/">touchEnded()</a> isn’t declared.
-  If
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> is declared, then
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> will run when a user’s
-  touch
-
-  ends and <code>mouseReleased()</code> won’t.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: <a href="/reference/p5/mousePressed/">mousePressed()</a>,
-  <code>mouseReleased()</code>,
-
-  and <a href="/reference/p5/mouseClicked/">mouseClicked()</a> are all related.
-
-  <a href="/reference/p5/mousePressed/">mousePressed()</a> runs as soon as the
-  user
-
-  clicks the mouse. <code>mouseReleased()</code> runs as soon as the user
-  releases the
-
-  mouse click. <a href="/reference/p5/mouseClicked/">mouseClicked()</a> runs
-
-  immediately after <code>mouseReleased()</code>.</p>
-line: 1270
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter when the user presses and releases a mouse button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function mouseReleased() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the circle.
-      fill('orange');
-      stroke('royalblue');
-      strokeWeight(10);
-
-      describe(
-        'An orange circle with a thick, blue border drawn on a gray background. When the user presses and holds the mouse, the border becomes thin and pink. When the user releases the mouse, the border becomes thicker and changes color to blue.'
-      );
-    }
-
-    function draw() {
-      background(220);
-
-      // Draw the circle.
-      circle(50, 50, 20);
-    }
-
-    // Set the stroke color and weight as soon as the user clicks.
-    function mousePressed() {
-      stroke('deeppink');
-      strokeWeight(3);
-    }
-
-    // Set the stroke and fill colors as soon as the user releases
-    // the mouse.
-    function mouseReleased() {
-      stroke('royalblue');
-
-      // This is never visible because fill() is called
-      // in mouseClicked() which runs immediately after
-      // mouseReleased();
-      fill('limegreen');
-    }
-
-    // Set the fill color and stroke weight after
-    // mousePressed() and mouseReleased() are called.
-    function mouseClicked() {
-      fill('orange');
-      strokeWeight(10);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>MouseEvent</code> argument.</p>
-    type: MouseEvent
-    optional: true
-chainable: false
----
-
-
-# mouseReleased
diff --git a/src/content/reference/en/p5 copy/mouseWheel.mdx b/src/content/reference/en/p5 copy/mouseWheel.mdx
deleted file mode 100644
index a659ea3cec..0000000000
--- a/src/content/reference/en/p5 copy/mouseWheel.mdx	
+++ /dev/null
@@ -1,162 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1746
-title: mouseWheel
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A function that's called once when the mouse wheel moves.</p>
-
-  <p>Declaring the function <code>mouseWheel()</code> sets a code block to run
-
-  automatically when the user scrolls with the mouse wheel:</p>
-
-  <pre><code class="language-js">function mouseWheel() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The mouse system variables, such as <a
-  href="/reference/p5/mouseX/">mouseX</a> and
-
-  <a href="/reference/p5/mouseY/">mouseY</a>, will be updated with their most
-  recent
-
-  value when <code>mouseWheel()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function mouseWheel() {
-    if (mouseX < 50) {
-      // Code to run if the mouse is on the left.
-    }
-
-    if (mouseY > 50) {
-      // Code to run if the mouse is near the bottom.
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, <code>event</code>, is optional. <code>mouseWheel()</code>
-  is always passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/"
-  target="_blank">MouseEvent</a>
-
-  object with properties that describe the mouse scroll event:</p>
-
-  <pre><code class="language-js">function mouseWheel(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>The <code>event</code> object has many properties including
-  <code>delta</code>, a <code>Number</code>
-
-  containing the distance that the user scrolled. For example,
-  <code>event.delta</code>
-
-  might have the value 5 when the user scrolls up. <code>event.delta</code> is
-  positive
-
-  if the user scrolls up and negative if they scroll down. The signs are
-
-  opposite on macOS with "natural" scrolling enabled.</p>
-
-  <p>Browsers may have default behaviors attached to various mouse events. For
-
-  example, some browsers highlight text when the user moves the mouse while
-
-  pressing a mouse button. To prevent any default behavior for this event,
-
-  add <code>return false;</code> to the end of the function.</p>
-
-  <p>Note: On Safari, <code>mouseWheel()</code> may only work as expected if
-
-  <code>return false;</code> is added at the end of the function.</p>
-line: 1746
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let circleSize = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. A white circle at its center grows up when the user scrolls the mouse wheel.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle
-      circle(50, 50, circleSize);
-    }
-
-    // Increment circleSize when the user scrolls the mouse wheel.
-    function mouseWheel() {
-      circleSize += 1;
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let direction = '';
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. An arrow at its center points up when the user scrolls up. The arrow points down when the user scrolls down.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Draw an arrow that points where
-      // the mouse last scrolled.
-      text(direction, 50, 50);
-    }
-
-    // Change direction when the user scrolls the mouse wheel.
-    function mouseWheel(event) {
-      if (event.delta > 0) {
-        direction = '▲';
-      } else {
-        direction = '▼';
-      }
-      // Uncomment to prevent any default behavior.
-      // return false;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>WheelEvent</code> argument.</p>
-    type: WheelEvent
-    optional: true
-chainable: false
----
-
-
-# mouseWheel
diff --git a/src/content/reference/en/p5 copy/mouseX.mdx b/src/content/reference/en/p5 copy/mouseX.mdx
deleted file mode 100644
index 7c0ba7f4a3..0000000000
--- a/src/content/reference/en/p5 copy/mouseX.mdx	
+++ /dev/null
@@ -1,124 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L119
-title: mouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
-  position.</p>
-
-  <p><code>mouseX</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. For example, if the mouse is 50 pixels from
-
-  the left edge of the canvas, then <code>mouseX</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>mouseX</code> will hold
-  the
-
-  x-coordinate of the most recent touch point.</p>
-line: 119
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A vertical black line moves left and right following the mouse's x-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a vertical line that follows the mouse's x-coordinate.
-      line(mouseX, 0, mouseX, 100);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A vertical black line moves left and right following the mouse's x-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let mx = mouseX - 50;
-
-      // Draw the line.
-      line(mx, -50, mx, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    // Load a font for WebGL mode.
-    function preload() {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      textFont(font);
-      fill(0);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# mouseX
diff --git a/src/content/reference/en/p5 copy/mouseY.mdx b/src/content/reference/en/p5 copy/mouseY.mdx
deleted file mode 100644
index dc268025a4..0000000000
--- a/src/content/reference/en/p5 copy/mouseY.mdx	
+++ /dev/null
@@ -1,124 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L226
-title: mouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's vertical
-  position.</p>
-
-  <p><code>mouseY</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. For example, if the mouse is 50 pixels from
-
-  the top edge of the canvas, then <code>mouseY</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>mouseY</code> will hold
-  the
-
-  y-coordinate of the most recent touch point.</p>
-line: 226
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A horizontal black line moves up and down following the mouse's y-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a horizontal line that follows the mouse's y-coordinate.
-      line(0, mouseY, 100, mouseY);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A horizontal black line moves up and down following the mouse's y-position.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let my = mouseY - 50;
-
-      // Draw the line.
-      line(-50, my, 50, my);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    // Load a font for WebGL mode.
-    function preload() {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        "A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      textFont(font);
-      fill(0);
-
-      // Display the mouse's coordinates.
-      text(`x: ${mouseX} y: ${mouseY}`, 0, 0);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# mouseY
diff --git a/src/content/reference/en/p5 copy/movedX.mdx b/src/content/reference/en/p5 copy/movedX.mdx
deleted file mode 100644
index 454b577166..0000000000
--- a/src/content/reference/en/p5 copy/movedX.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L12
-title: movedX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's horizontal
-  movement.</p>
-
-  <p><code>movedX</code> tracks how many pixels the mouse moves left or right
-  between
-
-  frames. <code>movedX</code> will have a negative value if the mouse moves left
-  between
-
-  frames and a positive value if it moves right. <code>movedX</code> can be
-  calculated
-
-  as <code>mouseX - pmouseX</code>.</p>
-
-  <p>Note: <code>movedX</code> continues updating even when
-
-  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
-  active.
-
-  But keep in mind that during an active pointer lock, mouseX and pmouseX
-
-  are locked, so <code>movedX</code> is based on
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
-  MouseEvent's movementX value</a>
-
-  (which may behave differently in different browsers when the user
-
-  is zoomed in or out).</p>
-line: 12
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The text ">>" appears when the user moves the mouse to the right. The text "<<" appears when the user moves the mouse to the left.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display >> when movedX is positive and
-      // << when it's negative.
-      if (movedX > 0) {
-        text('>>', 50, 50);
-      } else if (movedX < 0) {
-        text('<<', 50, 50);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# movedX
diff --git a/src/content/reference/en/p5 copy/movedY.mdx b/src/content/reference/en/p5 copy/movedY.mdx
deleted file mode 100644
index 00f4a28d5b..0000000000
--- a/src/content/reference/en/p5 copy/movedY.mdx	
+++ /dev/null
@@ -1,78 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L62
-title: movedY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's vertical
-  movement.</p>
-
-  <p><code>movedY</code> tracks how many pixels the mouse moves up or down
-  between
-
-  frames. <code>movedY</code> will have a negative value if the mouse moves up
-  between
-
-  frames and a positive value if it moves down. <code>movedY</code> can be
-  calculated
-
-  as <code>mouseY - pmouseY</code>.</p>
-
-  <p>Note: <code>movedY</code> continues updating even when
-
-  <a href="/reference/p5/requestPointerLock/">requestPointerLock()</a> is
-  active.
-
-  But keep in mind that during an active pointer lock, mouseX and pmouseX
-
-  are locked, so <code>movedX</code> is based on
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX/">the
-  MouseEvent's movementX value</a>
-
-  (which may behave differently in different browsers when the user
-
-  is zoomed in or out).</p>
-line: 62
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. The text "▲" appears when the user moves the mouse upward. The text "▼" appears when the user moves the mouse downward.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display ▼ when movedY is positive and
-      // ▲ when it's negative.
-      if (movedY > 0) {
-        text('▼', 50, 50);
-      } else if (movedY < 0) {
-        text('▲', 50, 50);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# movedY
diff --git a/src/content/reference/en/p5 copy/nf.mdx b/src/content/reference/en/p5 copy/nf.mdx
deleted file mode 100644
index ab64244d9f..0000000000
--- a/src/content/reference/en/p5 copy/nf.mdx	
+++ /dev/null
@@ -1,159 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L199
-title: nf
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a <code>Number</code> into a <code>String</code> with a given
-  number of digits.</p>
-
-  <p><code>nf()</code> converts numbers such as <code>123.45</code> into strings
-  formatted with a set
-
-  number of digits, as in <code>'123.4500'</code>.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nf(123.45)</code> returns the string
-  <code>'123.45'</code>. If an array of
-
-  numbers is passed, as in <code>nf([123.45, 67.89])</code>, an array of
-  formatted
-
-  strings will be returned.</p>
-
-  <p>The second parameter, <code>left</code>, is optional. If a number is
-  passed, as in
-
-  <code>nf(123.45, 4)</code>, it sets the minimum number of digits to include to
-  the
-
-  left of the decimal place. If <code>left</code> is larger than the number of
-  digits in
-
-  <code>num</code>, then unused digits will be set to 0. For example, calling
-
-  <code>nf(123.45, 4)</code> returns the string <code>'0123.45'</code>.</p>
-
-  <p>The third parameter, <code>right</code>, is also optional. If a number is
-  passed, as
-
-  in <code>nf(123.45, 4, 1)</code>, it sets the minimum number of digits to
-  include to
-
-  the right of the decimal place. If <code>right</code> is smaller than the
-  number of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places. For example, calling <code>nf(123.45, 4, 1)</code> returns the
-  string
-
-  <code>'0123.5'</code>. If right is larger than the number of decimal places in
-  <code>num</code>,
-
-  then unused decimal places will be set to 0. For example, calling
-
-  <code>nf(123.45, 4, 3)</code> returns the string <code>'0123.450'</code>.</p>
-
-  <p>When the number is negative, for example, calling <code>nf(-123.45, 5,
-  2)</code>
-
-  returns the string <code>'-00123.45'</code>.</p>
-line: 199
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(16);
-
-      // Create a number variable.
-      let number = 123.45;
-
-      // Display the number as a string.
-      let formatted = nf(number);
-      text(formatted, 20, 20);
-
-      let negative = nf(-number, 4, 2);
-      text(negative, 20, 40);
-
-      // Display the number with four digits
-      // to the left of the decimal.
-      let left = nf(number, 4);
-      text(left, 20, 60);
-
-      // Display the number with four digits
-      // to the left of the decimal and one
-      // to the right.
-      let right = nf(number, 4, 1);
-      text(right, 20, 80);
-
-      describe(
-        'The numbers "123.45", "-0123.45", "0123.45", and "0123.5" written on four separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 199
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number|String
-      - name: left
-        description: |
-          <p>number of digits to include to the left of
-                                         the decimal point.</p>
-        type: Integer|String
-        optional: true
-      - name: right
-        description: |
-          <p>number of digits to include to the right
-                                          of the decimal point.</p>
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 276
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: 'Number[]'
-      - name: left
-        description: ''
-        type: Integer|String
-        optional: true
-      - name: right
-        description: ''
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nf
diff --git a/src/content/reference/en/p5 copy/nfc.mdx b/src/content/reference/en/p5 copy/nfc.mdx
deleted file mode 100644
index ba49f689fa..0000000000
--- a/src/content/reference/en/p5 copy/nfc.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L322
-title: nfc
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a <code>Number</code> into a <code>String</code> with commas to
-  mark units of 1,000.</p>
-
-  <p><code>nfc()</code> converts numbers such as 12345 into strings formatted
-  with commas
-
-  to mark the thousands place, as in <code>'12,345'</code>.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nfc(12345)</code> returns the string
-  <code>'12,345'</code>.</p>
-
-  <p>The second parameter, <code>right</code>, is optional. If a number is
-  passed, as in
-
-  <code>nfc(12345, 1)</code>, it sets the minimum number of digits to include to
-  the
-
-  right of the decimal place. If <code>right</code> is smaller than the number
-  of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places. For example, calling <code>nfc(12345.67, 1)</code> returns the
-  string
-
-  <code>'12,345.7'</code>. If <code>right</code> is larger than the number of
-  decimal places in
-
-  <code>num</code>, then unused decimal places will be set to 0. For example,
-  calling
-
-  <code>nfc(12345.67, 3)</code> returns the string
-  <code>'12,345.670'</code>.</p>
-line: 322
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(16);
-
-      // Create a number variable.
-      let number = 12345;
-
-      // Display the number as a string.
-      let commas = nfc(number);
-      text(commas, 15, 33);
-
-      // Display the number with four digits
-      // to the left of the decimal.
-      let decimals = nfc(number, 2);
-      text(decimals, 15, 67);
-
-      describe(
-        'The numbers "12,345" and "12,345.00" written on separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let numbers = [12345, 6789];
-
-      // Convert the numbers to formatted strings.
-      let formatted = nfc(numbers);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Iterate over the array.
-      for (let i = 0; i < formatted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 33;
-
-        // Display the original and formatted numbers.
-        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "12345 : 12,345" and "6789 : 6,789" written on two separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 322
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number|String
-      - name: right
-        description: |
-          <p>number of digits to include to the right
-                                           of the decimal point.</p>
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 411
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: 'Number[]'
-      - name: right
-        description: ''
-        type: Integer|String
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nfc
diff --git a/src/content/reference/en/p5 copy/nfp.mdx b/src/content/reference/en/p5 copy/nfp.mdx
deleted file mode 100644
index dbd80ca5d7..0000000000
--- a/src/content/reference/en/p5 copy/nfp.mdx	
+++ /dev/null
@@ -1,188 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L447
-title: nfp
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a <code>Number</code> into a <code>String</code> with a plus or
-  minus sign.</p>
-
-  <p><code>nfp()</code> converts numbers such as 123 into strings formatted with
-  a <code>+</code> or
-
-  <code>-</code> symbol to mark whether they're positive or negative, as in
-  <code>'+123'</code>.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nfp(123.45)</code> returns the string
-  <code>'+123.45'</code>. If an array
-
-  of numbers is passed, as in <code>nfp([123.45, -6.78])</code>, an array of
-  formatted
-
-  strings will be returned.</p>
-
-  <p>The second parameter, <code>left</code>, is optional. If a number is
-  passed, as in
-
-  <code>nfp(123.45, 4)</code>, it sets the minimum number of digits to include
-  to the
-
-  left of the decimal place. If <code>left</code> is larger than the number of
-  digits in
-
-  <code>num</code>, then unused digits will be set to 0. For example, calling
-
-  <code>nfp(123.45, 4)</code> returns the string <code>'+0123.45'</code>.</p>
-
-  <p>The third parameter, <code>right</code>, is also optional. If a number is
-  passed, as
-
-  in <code>nfp(123.45, 4, 1)</code>, it sets the minimum number of digits to
-  include to
-
-  the right of the decimal place. If <code>right</code> is smaller than the
-  number of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places.  For example, calling <code>nfp(123.45, 4, 1)</code> returns
-  the
-
-  string <code>'+0123.5'</code>. If <code>right</code> is larger than the number
-  of decimal places
-
-  in <code>num</code>, then unused decimal places will be set to 0.  For
-  example,
-
-  calling <code>nfp(123.45, 4, 3)</code> returns the string
-  <code>'+0123.450'</code>.</p>
-line: 447
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create number variables.
-      let positive = 123;
-      let negative = -123;
-
-      // Convert the positive number to a formatted string.
-      let p = nfp(positive);
-
-      // Convert the negative number to a formatted string
-      // with four digits to the left of the decimal
-      // and two digits to the right of the decimal.
-      let n = nfp(negative, 4, 2);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Display the original and formatted numbers.
-      text(`${positive} : ${p}`, 50, 33);
-      text(`${negative} : ${n}`, 50, 67);
-
-      describe(
-        'The text "123 : +123" and "-123 : -123.00" written on separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create number variables.
-      let numbers = [123, -4.56];
-
-      // Convert the numbers to formatted strings
-      // with four digits to the left of the decimal
-      // and one digit to the right of the decimal.
-      let formatted = nfp(numbers, 4, 1);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Iterate over the array.
-      for (let i = 0; i < formatted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 33;
-
-        // Display the original and formatted numbers.
-        text(`${numbers[i]} : ${formatted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "123 : +0123.0" and "-4.56 : 00-4.6" written on separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 447
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number
-      - name: left
-        description: |
-          <p>number of digits to include to the left of the
-                                  decimal point.</p>
-        type: Integer
-        optional: true
-      - name: right
-        description: |
-          <p>number of digits to include to the right of the
-                                   decimal point.</p>
-        type: Integer
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 552
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: 'Number[]'
-      - name: left
-        description: ''
-        type: Integer
-        optional: true
-      - name: right
-        description: ''
-        type: Integer
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nfp
diff --git a/src/content/reference/en/p5 copy/nfs.mdx b/src/content/reference/en/p5 copy/nfs.mdx
deleted file mode 100644
index 80c144e391..0000000000
--- a/src/content/reference/en/p5 copy/nfs.mdx	
+++ /dev/null
@@ -1,176 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L573
-title: nfs
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Converts a positive <code>Number</code> into a <code>String</code> with an
-  extra space in front.</p>
-
-  <p><code>nfs()</code> converts positive numbers such as 123.45 into strings
-  formatted
-
-  with an extra space in front, as in ' 123.45'. Doing so can be helpful for
-
-  aligning positive and negative numbers.</p>
-
-  <p>The first parameter, <code>num</code>, is the number to convert to a
-  string. For
-
-  example, calling <code>nfs(123.45)</code> returns the string <code>'
-  123.45'</code>.</p>
-
-  <p>The second parameter, <code>left</code>, is optional. If a number is
-  passed, as in
-
-  <code>nfs(123.45, 4)</code>, it sets the minimum number of digits to include
-  to the
-
-  left of the decimal place. If <code>left</code> is larger than the number of
-  digits in
-
-  <code>num</code>, then unused digits will be set to 0. For example, calling
-
-  <code>nfs(123.45, 4)</code> returns the string <code>' 0123.45'</code>.</p>
-
-  <p>The third parameter, <code>right</code>, is also optional. If a number is
-  passed, as
-
-  in <code>nfs(123.45, 4, 1)</code>, it sets the minimum number of digits to
-  include to
-
-  the right of the decimal place. If <code>right</code> is smaller than the
-  number of
-
-  decimal places in <code>num</code>, then <code>num</code> will be rounded to
-  the given number of
-
-  decimal places.  For example, calling <code>nfs(123.45, 4, 1)</code> returns
-  the
-
-  string <code>' 0123.5'</code>. If <code>right</code> is larger than the number
-  of decimal places
-
-  in <code>num</code>, then unused decimal places will be set to 0.  For
-  example,
-
-  calling <code>nfs(123.45, 4, 3)</code> returns the string <code>'
-  0123.450'</code>.</p>
-line: 573
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create number variables.
-      let positive = 123;
-      let negative = -123;
-
-      // Convert the positive number to a formatted string.
-      let formatted = nfs(positive);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display the negative number and the formatted positive number.
-      text(negative, 50, 33);
-      text(formatted, 50, 67);
-
-      describe(
-        'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let number = 123.45;
-
-      // Convert the positive number to a formatted string.
-      // Use four digits to the left of the decimal and
-      // one digit to the right.
-      let formatted = nfs(number, 4, 1);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Display a negative version of the number and
-      // the formatted positive version.
-      text('-0123.5', 50, 33);
-      text(formatted, 50, 67);
-
-      describe(
-        'The numbers "-0123.5" and "0123.5" written on separate lines. The numbers align vertically. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: formatted string.
-  type: String
-overloads:
-  - line: 573
-    params:
-      - name: num
-        description: |
-          <p>number to format.</p>
-        type: Number
-      - name: left
-        description: |
-          <p>number of digits to include to the left of the
-                                  decimal point.</p>
-        type: Integer
-        optional: true
-      - name: right
-        description: |
-          <p>number of digits to include to the right of the
-                                   decimal point.</p>
-        type: Integer
-        optional: true
-    return:
-      description: formatted string.
-      type: String
-  - line: 669
-    params:
-      - name: nums
-        description: |
-          <p>numbers to format.</p>
-        type: Array
-      - name: left
-        description: ''
-        type: Integer
-        optional: true
-      - name: right
-        description: ''
-        type: Integer
-        optional: true
-    return:
-      description: formatted strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# nfs
diff --git a/src/content/reference/en/p5 copy/noCanvas.mdx b/src/content/reference/en/p5 copy/noCanvas.mdx
deleted file mode 100644
index 08fcdda5e5..0000000000
--- a/src/content/reference/en/p5 copy/noCanvas.mdx	
+++ /dev/null
@@ -1,36 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L346
-title: noCanvas
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Removes the default canvas.</p>
-
-  <p>By default, a 100×100 pixels canvas is created without needing to call
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.
-  <code>noCanvas()</code> removes the
-
-  default canvas for sketches that don't need it.</p>
-line: 346
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      noCanvas();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noCanvas
diff --git a/src/content/reference/en/p5 copy/noCursor.mdx b/src/content/reference/en/p5 copy/noCursor.mdx
deleted file mode 100644
index 37ac72c0cf..0000000000
--- a/src/content/reference/en/p5 copy/noCursor.mdx	
+++ /dev/null
@@ -1,38 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L482
-title: noCursor
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: |
-  <p>Hides the cursor from view.</p>
-line: 482
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Hide the cursor.
-      noCursor();
-    }
-
-    function draw() {
-      background(200);
-
-      circle(mouseX, mouseY, 10);
-
-      describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noCursor
diff --git a/src/content/reference/en/p5 copy/noDebugMode.mdx b/src/content/reference/en/p5 copy/noDebugMode.mdx
deleted file mode 100644
index 19d36eba2b..0000000000
--- a/src/content/reference/en/p5 copy/noDebugMode.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L725
-title: noDebugMode
-module: 3D
-submodule: Interaction
-file: src/webgl/interaction.js
-description: >
-  <p>Turns off <a href="/reference/p5/debugMode/">debugMode()</a> in a 3D
-  sketch.</p>
-line: 725
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Enable debug mode.
-      debugMode();
-
-      describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.  box(20, 40);
-    }
-
-    // Disable debug mode when the user double-clicks.
-    function doubleClicked() {
-      noDebugMode();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noDebugMode
diff --git a/src/content/reference/en/p5 copy/noErase.mdx b/src/content/reference/en/p5 copy/noErase.mdx
deleted file mode 100644
index e959433b77..0000000000
--- a/src/content/reference/en/p5 copy/noErase.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1716
-title: noErase
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Ends erasing that was started with <a
-  href="/reference/p5/erase/">erase()</a>.</p>
-
-  <p>The <a href="/reference/p5/fill/">fill()</a>, <a
-  href="/reference/p5/stroke/">stroke()</a>, and
-
-  <a href="/reference/p5/blendMode/">blendMode()</a> settings will return to
-  what they
-
-  were prior to calling <a href="/reference/p5/erase/">erase()</a>.</p>
-line: 1716
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(235, 145, 15);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(30, 45, 220);
-      rect(30, 10, 10, 80);
-
-      // Erase a circle.
-      erase();
-      circle(50, 50, 60);
-      noErase();
-
-      // Draw the right rectangle.
-      rect(70, 10, 10, 80);
-
-      describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noErase
diff --git a/src/content/reference/en/p5 copy/noFill.mdx b/src/content/reference/en/p5 copy/noFill.mdx
deleted file mode 100644
index 67a3979778..0000000000
--- a/src/content/reference/en/p5 copy/noFill.mdx	
+++ /dev/null
@@ -1,73 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1257
-title: noFill
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Disables setting the fill color for shapes.</p>
-
-  <p>Calling <code>noFill()</code> is the same as making the fill completely
-  transparent,
-
-  as in <code>fill(0, 0)</code>. If both <a
-  href="/reference/p5/noStroke/">noStroke()</a> and
-
-  <code>noFill()</code> are called, nothing will be drawn to the screen.</p>
-line: 1257
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the top square.
-      square(32, 10, 35);
-
-      // Draw the bottom square.
-      noFill();
-      square(32, 55, 35);
-
-      describe('A white square on above an empty square. Both squares have black outlines.');
-    }
-    </code>
-    </div>
-
-    <div modernizr='webgl'>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A purple cube wireframe spinning on a black canvas.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the box.
-      noFill();
-      stroke(100, 100, 240);
-
-      // Rotate the coordinates.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Draw the box.
-      box(45);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noFill
diff --git a/src/content/reference/en/p5 copy/noLights.mdx b/src/content/reference/en/p5 copy/noLights.mdx
deleted file mode 100644
index 1f85888bf6..0000000000
--- a/src/content/reference/en/p5 copy/noLights.mdx	
+++ /dev/null
@@ -1,79 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1687
-title: noLights
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Removes all lights from the sketch.</p>
-
-  <p>Calling <code>noLights()</code> removes any lights created with
-
-  <a href="/reference/p5/lights/">lights()</a>,
-
-  <a href="/reference/p5/ambientLight/">ambientLight()</a>,
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>, or
-
-  <a href="/reference/p5/spotLight/">spotLight()</a>. These functions may be
-  called
-
-  after <code>noLights()</code> to create a new lighting scheme.</p>
-line: 1687
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw the top sphere.
-      push();
-      translate(0, -25, 0);
-      sphere(20);
-      pop();
-
-      // Turn off the lights.
-      noLights();
-
-      // Add a red directional light that points into the screen.
-      directionalLight(255, 0, 0, 0, 0, -1);
-
-      // Draw the bottom sphere.
-      push();
-      translate(0, 25, 0);
-      sphere(20);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noLights
diff --git a/src/content/reference/en/p5 copy/noLoop.mdx b/src/content/reference/en/p5 copy/noLoop.mdx
deleted file mode 100644
index fe1897a8cb..0000000000
--- a/src/content/reference/en/p5 copy/noLoop.mdx	
+++ /dev/null
@@ -1,139 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L9
-title: noLoop
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Stops the code in <a href="/reference/p5/draw/">draw()</a> from running
-  repeatedly.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <code>noLoop()</code> stops <a
-  href="/reference/p5/draw/">draw()</a> from
-
-  repeating. The draw loop can be restarted by calling
-
-  <a href="/reference/p5/loop/">loop()</a>. <a
-  href="/reference/p5/draw/">draw()</a> can be run
-
-  once by calling <a href="/reference/p5/redraw/">redraw()</a>.</p>
-
-  <p>The <a href="/reference/p5/isLooping/">isLooping()</a> function can be used
-  to check
-
-  whether a sketch is looping, as in <code>isLooping() === true</code>.</p>
-line: 9
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe('A white half-circle on the left edge of a gray square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's x-coordinate.
-      let x = frameCount;
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, 50, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click to stop the draw loop.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, y, 20);
-    }
-
-    // Stop the draw loop when the user double-clicks.
-    function doubleClicked() {
-      noLoop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let startButton;
-    let stopButton;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create the button elements and place them
-      // beneath the canvas.
-      startButton = createButton('▶');
-      startButton.position(0, 100);
-      startButton.size(50, 20);
-      stopButton = createButton('◾');
-      stopButton.position(50, 100);
-      stopButton.size(50, 20);
-
-      // Set functions to call when the buttons are pressed.
-      startButton.mousePressed(loop);
-      stopButton.mousePressed(noLoop);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe(
-        'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the circle.
-      // Normally, the circle would move from left to right.
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noLoop
diff --git a/src/content/reference/en/p5 copy/noSmooth.mdx b/src/content/reference/en/p5 copy/noSmooth.mdx
deleted file mode 100644
index a1af76d10d..0000000000
--- a/src/content/reference/en/p5 copy/noSmooth.mdx	
+++ /dev/null
@@ -1,92 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L100
-title: noSmooth
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Draws certain features with jagged (aliased) edges.</p>
-
-  <p><a href="/reference/p5/smooth/">smooth()</a> is active by default. In 2D
-  mode,
-
-  <code>noSmooth()</code> is helpful for scaling up images without blurring. The
-
-  functions don't affect shapes or fonts.</p>
-
-  <p>In WebGL mode, <code>noSmooth()</code> causes all shapes to be drawn with
-  jagged
-
-  (aliased) edges. The functions don't affect images or fonts.</p>
-line: 100
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let heart;
-
-    // Load a pixelated heart image from an image data string.
-    function preload() {
-      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Antialiased hearts.
-      image(heart, 10, 10);
-      image(heart, 20, 10, 16, 16);
-      image(heart, 40, 10, 32, 32);
-
-      // Aliased hearts.
-      noSmooth();
-      image(heart, 10, 60);
-      image(heart, 20, 60, 16, 16);
-      image(heart, 40, 60, 32, 32);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A white circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Disable smoothing.
-      noSmooth();
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A pixelated white circle on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noSmooth
diff --git a/src/content/reference/en/p5 copy/noStroke.mdx b/src/content/reference/en/p5 copy/noStroke.mdx
deleted file mode 100644
index 7c4fe80960..0000000000
--- a/src/content/reference/en/p5 copy/noStroke.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1317
-title: noStroke
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Disables drawing points, lines, and the outlines of shapes.</p>
-
-  <p>Calling <code>noStroke()</code> is the same as making the stroke completely
-  transparent,
-
-  as in <code>stroke(0, 0)</code>. If both <code>noStroke()</code> and
-
-  <a href="/reference/p5/noFill/">noFill()</a> are called, nothing will be drawn
-  to the
-
-  screen.</p>
-line: 1317
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      noStroke();
-      square(20, 20, 60);
-
-      describe('A white square with no outline.');
-    }
-    </code>
-    </div>
-
-    <div modernizr='webgl'>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A pink cube with no edge outlines spinning on a black canvas.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the box.
-      noStroke();
-      fill(240, 150, 150);
-
-      // Rotate the coordinates.
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Draw the box.
-      box(45);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# noStroke
diff --git a/src/content/reference/en/p5 copy/noTint.mdx b/src/content/reference/en/p5 copy/noTint.mdx
deleted file mode 100644
index e3b0aeea19..0000000000
--- a/src/content/reference/en/p5 copy/noTint.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1345
-title: noTint
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Removes the current tint set by <a
-  href="/reference/p5/tint/">tint()</a>.</p>
-
-  <p><code>noTint()</code> restores images to their original colors.</p>
-line: 1345
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left.
-      // Tint with a CSS color string.
-      tint('red');
-      image(img, 0, 0);
-
-      // Right.
-      // Remove the tint.
-      noTint();
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# noTint
diff --git a/src/content/reference/en/p5 copy/noise.mdx b/src/content/reference/en/p5 copy/noise.mdx
deleted file mode 100644
index 1b67f49cb9..0000000000
--- a/src/content/reference/en/p5 copy/noise.mdx	
+++ /dev/null
@@ -1,282 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L36
-title: noise
-module: Math
-submodule: Noise
-file: src/math/noise.js
-description: >
-  <p>Returns random numbers that can be tuned to feel organic.</p>
-
-  <p>Values returned by <a href="/reference/p5/random/">random()</a> and
-
-  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> can change by
-  large
-
-  amounts between function calls. By contrast, values returned by
-  <code>noise()</code>
-
-  can be made "smooth". Calls to <code>noise()</code> with similar inputs will
-  produce
-
-  similar outputs. <code>noise()</code> is used to create textures, motion,
-  shapes,
-
-  terrains, and so on. Ken Perlin invented <code>noise()</code> while animating
-  the
-
-  original <em>Tron</em> film in the 1980s.</p>
-
-  <p><code>noise()</code> always returns values between 0 and 1. It returns the
-  same value
-
-  for a given input while a sketch is running. <code>noise()</code> produces
-  different
-
-  results each time a sketch runs. The
-
-  <a href="/reference/p5/noiseSeed/">noiseSeed()</a> function can be used to
-  generate
-
-  the same sequence of Perlin noise values each time a sketch runs.</p>
-
-  <p>The character of the noise can be adjusted in two ways. The first way is to
-
-  scale the inputs. <code>noise()</code> interprets inputs as coordinates. The
-  sequence
-
-  of noise values will be smoother when the input coordinates are closer. The
-
-  second way is to use the <a
-  href="/reference/p5/noiseDetail/">noiseDetail()</a>
-
-  function.</p>
-
-  <p>The version of <code>noise()</code> with one parameter computes noise
-  values in one
-
-  dimension. This dimension can be thought of as space, as in
-  <code>noise(x)</code>, or
-
-  time, as in <code>noise(t)</code>.</p>
-
-  <p>The version of <code>noise()</code> with two parameters computes noise
-  values in two
-
-  dimensions. These dimensions can be thought of as space, as in
-
-  <code>noise(x, y)</code>, or space and time, as in <code>noise(x,
-  t)</code>.</p>
-
-  <p>The version of <code>noise()</code> with three parameters computes noise
-  values in
-
-  three dimensions. These dimensions can be thought of as space, as in
-
-  <code>noise(x, y, z)</code>, or space and time, as in <code>noise(x, y,
-  t)</code>.</p>
-line: 36
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black dot moves randomly on a gray square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 100 * noise(0.005 * frameCount);
-      let y = 100 * noise(0.005 * frameCount + 10000);
-
-      // Draw the point.
-      strokeWeight(5);
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black dot moves randomly on a gray square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.005;
-
-      // Scale the input coordinate.
-      let nt = noiseScale * frameCount;
-
-      // Compute the noise values.
-      let x = noiseLevel * noise(nt);
-      let y = noiseLevel * noise(nt + 10000);
-
-      // Draw the point.
-      strokeWeight(5);
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A hilly terrain drawn in gray against a black sky.');
-    }
-
-    function draw() {
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.02;
-
-      // Scale the input coordinate.
-      let x = frameCount;
-      let nx = noiseScale * x;
-
-      // Compute the noise value.
-      let y = noiseLevel * noise(nx);
-
-      // Draw the line.
-      line(x, 0, x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A calm sea drawn in gray against a black sky.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.002;
-
-      // Iterate from left to right.
-      for (let x = 0; x < width; x += 1) {
-        // Scale the input coordinates.
-        let nx = noiseScale * x;
-        let nt = noiseScale * frameCount;
-
-        // Compute the noise value.
-        let y = noiseLevel * noise(nx, nt);
-
-        // Draw the line.
-        line(x, 0, x, y);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the noise level and scale.
-      let noiseLevel = 255;
-      let noiseScale = 0.01;
-
-      // Iterate from top to bottom.
-      for (let y = 0; y < height; y += 1) {
-        // Iterate from left to right.
-        for (let x = 0; x < width; x += 1) {
-          // Scale the input coordinates.
-          let nx = noiseScale * x;
-          let ny = noiseScale * y;
-
-          // Compute the noise value.
-          let c = noiseLevel * noise(nx, ny);
-
-          // Draw the point.
-          stroke(c);
-          point(x, y);
-        }
-      }
-
-      describe('A gray cloudy pattern.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray cloudy pattern that changes.');
-    }
-
-    function draw() {
-      // Set the noise level and scale.
-      let noiseLevel = 255;
-      let noiseScale = 0.009;
-
-      // Iterate from top to bottom.
-      for (let y = 0; y < height; y += 1) {
-        // Iterate from left to right.
-        for (let x = 0; x < width; x += 1) {
-          // Scale the input coordinates.
-          let nx = noiseScale * x;
-          let ny = noiseScale * y;
-          let nt = noiseScale * frameCount;
-
-          // Compute the noise value.
-          let c = noiseLevel * noise(nx, ny, nt);
-
-          // Draw the point.
-          stroke(c);
-          point(x, y);
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate in noise space.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate in noise space.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z-coordinate in noise space.</p>
-    type: Number
-    optional: true
-return:
-  description: Perlin noise value at specified coordinates.
-  type: Number
-chainable: false
----
-
-
-# noise
diff --git a/src/content/reference/en/p5 copy/noiseDetail.mdx b/src/content/reference/en/p5 copy/noiseDetail.mdx
deleted file mode 100644
index 973ac515ab..0000000000
--- a/src/content/reference/en/p5 copy/noiseDetail.mdx	
+++ /dev/null
@@ -1,100 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L331
-title: noiseDetail
-module: Math
-submodule: Noise
-file: src/math/noise.js
-description: >
-  <p>Adjusts the character of the noise produced by the
-
-  <a href="/reference/p5/noise/">noise()</a> function.</p>
-
-  <p>Perlin noise values are created by adding layers of noise together. The
-
-  noise layers, called octaves, are similar to harmonics in music. Lower
-
-  octaves contribute more to the output signal. They define the overall
-
-  intensity of the noise. Higher octaves create finer-grained details.</p>
-
-  <p>By default, noise values are created by combining four octaves. Each higher
-
-  octave contributes half as much (50% less) compared to its predecessor.
-
-  <code>noiseDetail()</code> changes the number of octaves and the falloff
-  amount. For
-
-  example, calling <code>noiseDetail(6, 0.25)</code> ensures that
-
-  <a href="/reference/p5/noise/">noise()</a> will use six octaves. Each higher
-  octave
-
-  will contribute 25% as much (75% less) compared to its predecessor. Falloff
-
-  values between 0 and 1 are valid. However, falloff values greater than 0.5
-
-  might result in noise values greater than 1.</p>
-line: 331
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Set the noise level and scale.
-      let noiseLevel = 255;
-      let noiseScale = 0.02;
-
-      // Iterate from top to bottom.
-      for (let y = 0; y < height; y += 1) {
-        // Iterate from left to right.
-        for (let x = 0; x < width / 2; x += 1) {
-          // Scale the input coordinates.
-          let nx = noiseScale * x;
-          let ny = noiseScale * y;
-
-          // Compute the noise value with six octaves
-          // and a low falloff factor.
-          noiseDetail(6, 0.25);
-          let c = noiseLevel * noise(nx, ny);
-
-          // Draw the left side.
-          stroke(c);
-          point(x, y);
-
-          // Compute the noise value with four octaves
-          // and a high falloff factor.
-          noiseDetail(4, 0.5);
-          c = noiseLevel * noise(nx, ny);
-
-          // Draw the right side.
-          stroke(c);
-          point(x + 50, y);
-        }
-      }
-
-      describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: lod
-    description: |
-      <p>number of octaves to be used by the noise.</p>
-    type: Number
-  - name: falloff
-    description: |
-      <p>falloff factor for each octave.</p>
-    type: Number
-chainable: false
----
-
-
-# noiseDetail
diff --git a/src/content/reference/en/p5 copy/noiseSeed.mdx b/src/content/reference/en/p5 copy/noiseSeed.mdx
deleted file mode 100644
index a1f2ce6fbd..0000000000
--- a/src/content/reference/en/p5 copy/noiseSeed.mdx	
+++ /dev/null
@@ -1,68 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/noise.js#L405
-title: noiseSeed
-module: Math
-submodule: Noise
-file: src/math/noise.js
-description: >
-  <p>Sets the seed value for the <a href="/reference/p5/noise/">noise()</a>
-  function.</p>
-
-  <p>By default, <a href="/reference/p5/noise/">noise()</a> produces different
-  results
-
-  each time a sketch is run. Calling <code>noiseSeed()</code> with a constant
-  argument,
-
-  such as <code>noiseSeed(99)</code>, makes <a
-  href="/reference/p5/noise/">noise()</a> produce the
-
-  same results each time a sketch is run.</p>
-line: 405
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the noise seed for consistent results.
-      noiseSeed(99);
-
-      describe('A black rectangle that grows randomly, first to the right and then to the left.');
-    }
-
-    function draw() {
-      // Set the noise level and scale.
-      let noiseLevel = 100;
-      let noiseScale = 0.005;
-
-      // Scale the input coordinate.
-      let nt = noiseScale * frameCount;
-
-      // Compute the noise value.
-      let x = noiseLevel * noise(nt);
-
-      // Draw the line.
-      line(x, 0, x, height);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: seed
-    description: |
-      <p>seed value.</p>
-    type: Number
-chainable: false
----
-
-
-# noiseSeed
diff --git a/src/content/reference/en/p5 copy/norm.mdx b/src/content/reference/en/p5 copy/norm.mdx
deleted file mode 100644
index d52a73e4c5..0000000000
--- a/src/content/reference/en/p5 copy/norm.mdx	
+++ /dev/null
@@ -1,69 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L772
-title: norm
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Maps a number from one range to a value between 0 and 1.</p>
-
-  <p>For example, <code>norm(2, 0, 10)</code> returns 0.2. 2's position in the
-  original
-
-  range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
-
-  is the same as calling <code>map(2, 0, 10, 0, 1)</code>.</p>
-
-  <p>Numbers outside of the original range are not constrained between 0 and 1.
-
-  Out-of-range values are often intentional and useful.</p>
-line: 772
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use RGB color with values from 0 to 1.
-      colorMode(RGB, 1);
-
-      describe('A square changes color from black to red as the mouse moves from left to right.');
-    }
-
-    function draw() {
-      // Calculate the redValue.
-      let redValue = norm(mouseX, 0, 100);
-
-      // Paint the background.
-      background(redValue, 0, 0);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>incoming value to be normalized.</p>
-    type: Number
-  - name: start
-    description: |
-      <p>lower bound of the value's current range.</p>
-    type: Number
-  - name: stop
-    description: |
-      <p>upper bound of the value's current range.</p>
-    type: Number
-return:
-  description: normalized number.
-  type: Number
-chainable: false
----
-
-
-# norm
diff --git a/src/content/reference/en/p5 copy/normal.mdx b/src/content/reference/en/p5 copy/normal.mdx
deleted file mode 100644
index a109745b80..0000000000
--- a/src/content/reference/en/p5 copy/normal.mdx	
+++ /dev/null
@@ -1,250 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L2097
-title: normal
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Sets the normal vector for vertices in a custom 3D shape.</p>
-
-  <p>3D shapes created with <a href="/reference/p5/beginShape/">beginShape()</a>
-  and
-
-  <a href="/reference/p5/endShape/">endShape()</a> are made by connecting sets
-  of
-
-  points called vertices. Each vertex added with
-
-  <a href="/reference/p5/vertex/">vertex()</a> has a normal vector that points
-  away
-
-  from it. The normal vector controls how light reflects off the shape.</p>
-
-  <p><code>normal()</code> can be called two ways with different parameters to
-  define the
-
-  normal vector's components.</p>
-
-  <p>The first way to call <code>normal()</code> has three parameters,
-  <code>x</code>, <code>y</code>, and <code>z</code>.
-
-  If <code>Number</code>s are passed, as in <code>normal(1, 2, 3)</code>, they
-  set the x-, y-, and
-
-  z-components of the normal vector.</p>
-
-  <p>The second way to call <code>normal()</code> has one parameter,
-  <code>vector</code>. If a
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object is passed, as in
-
-  <code>normal(myVector)</code>, its components will be used to set the normal
-  vector.</p>
-
-  <p><code>normal()</code> changes the normal vector of vertices added to a
-  custom shape
-
-  with <a href="/reference/p5/vertex/">vertex()</a>. <code>normal()</code> must
-  be called between
-
-  the <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions, just like
-
-  <a href="/reference/p5/vertex/">vertex()</a>. The normal vector set by calling
-
-  <code>normal()</code> will affect all following vertices until
-  <code>normal()</code> is called
-
-  again:</p>
-
-  <pre><code class="language-js">beginShape();
-
-
-  // Set the vertex normal.
-
-  normal(-0.4, -0.4, 0.8);
-
-
-  // Add a vertex.
-
-  vertex(-30, -30, 0);
-
-
-  // Set the vertex normal.
-
-  normal(0, 0, 1);
-
-
-  // Add vertices.
-
-  vertex(30, -30, 0);
-
-  vertex(30, 30, 0);
-
-
-  // Set the vertex normal.
-
-  normal(0.4, -0.4, 0.8);
-
-
-  // Add a vertex.
-
-  vertex(-30, 30, 0);
-
-
-  endShape();
-
-  </code></pre>
-line: 2097
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the shape.
-      normalMaterial();
-      noStroke();
-
-      // Draw the shape.
-      beginShape();
-      vertex(-30, -30, 0);
-      vertex(30, -30, 0);
-      vertex(30, 30, 0);
-      vertex(-30, 30, 0);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the shape.
-      normalMaterial();
-      noStroke();
-
-      // Draw the shape.
-      // Use normal() to set vertex normals.
-      beginShape();
-      normal(-0.4, -0.4, 0.8);
-      vertex(-30, -30, 0);
-
-      normal(0, 0, 1);
-      vertex(30, -30, 0);
-      vertex(30, 30, 0);
-
-      normal(0.4, -0.4, 0.8);
-      vertex(-30, 30, 0);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A colorful square on a black background. The square changes color and rotates when the user drags the mouse. Parts of its surface reflect light in different directions.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the shape.
-      normalMaterial();
-      noStroke();
-
-      // Create p5.Vector objects.
-      let n1 = createVector(-0.4, -0.4, 0.8);
-      let n2 = createVector(0, 0, 1);
-      let n3 = createVector(0.4, -0.4, 0.8);
-
-      // Draw the shape.
-      // Use normal() to set vertex normals.
-      beginShape();
-      normal(n1);
-      vertex(-30, -30, 0);
-
-      normal(n2);
-      vertex(30, -30, 0);
-      vertex(30, 30, 0);
-
-      normal(n3);
-      vertex(-30, 30, 0);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2097
-    params:
-      - name: vector
-        description: |
-          <p>vertex normal as a <a href="#/p5.Vector">p5.Vector</a> object.</p>
-        type: p5.Vector
-    chainable: 1
-  - line: 2272
-    params:
-      - name: x
-        description: |
-          <p>x-component of the vertex normal.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-component of the vertex normal.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-component of the vertex normal.</p>
-        type: Number
-    chainable: 1
-chainable: true
----
-
-
-# normal
diff --git a/src/content/reference/en/p5 copy/normalMaterial.mdx b/src/content/reference/en/p5 copy/normalMaterial.mdx
deleted file mode 100644
index 0652b349d4..0000000000
--- a/src/content/reference/en/p5 copy/normalMaterial.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2365
-title: normalMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the current material as a normal material.</p>
-
-  <p>A normal material sets surfaces facing the x-axis to red, those facing the
-
-  y-axis to green, and those facing the z-axis to blue. Normal material isn't
-
-  affected by light. It’s often used as a placeholder material when
-  debugging.</p>
-
-  <p>Note: <code>normalMaterial()</code> can only be used in WebGL mode.</p>
-line: 2365
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor torus drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the torus.
-      normalMaterial();
-
-      // Draw the torus.
-      torus(30);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# normalMaterial
diff --git a/src/content/reference/en/p5 copy/orbitControl.mdx b/src/content/reference/en/p5 copy/orbitControl.mdx
deleted file mode 100644
index be2fd25452..0000000000
--- a/src/content/reference/en/p5 copy/orbitControl.mdx	
+++ /dev/null
@@ -1,203 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/interaction.js#L11
-title: orbitControl
-module: 3D
-submodule: Interaction
-file: src/webgl/interaction.js
-description: >
-  <p>Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
-
-  touchscreen.</p>
-
-  <p>3D sketches are viewed through an imaginary camera. Calling
-
-  <code>orbitControl()</code> within the <a
-  href="/reference/p5/draw/">draw()</a> function allows
-
-  the user to change the camera’s position:</p>
-
-  <pre><code class="language-js">function draw() {
-    background(200);
-
-    // Enable orbiting with the mouse.
-    orbitControl();
-
-    // Rest of sketch.
-  }
-
-  </code></pre>
-
-  <p>Left-clicking and dragging or swipe motion will rotate the camera position
-
-  about the center of the sketch. Right-clicking and dragging or multi-swipe
-
-  will pan the camera position without rotation. Using the mouse wheel
-
-  (scrolling) or pinch in/out will move the camera further or closer from the
-
-  center of the sketch.</p>
-
-  <p>The first three parameters, <code>sensitivityX</code>,
-  <code>sensitivityY</code>, and
-
-  <code>sensitivityZ</code>, are optional. They’re numbers that set the sketch’s
-
-  sensitivity to movement along each axis. For example, calling
-
-  <code>orbitControl(1, 2, -1)</code> keeps movement along the x-axis at its
-  default
-
-  value, makes the sketch twice as sensitive to movement along the y-axis,
-
-  and reverses motion along the z-axis. By default, all sensitivity values
-
-  are 1.</p>
-
-  <p>The fourth parameter, <code>options</code>, is also optional. It’s an
-  object that
-
-  changes the behavior of orbiting. For example, calling
-
-  <code>orbitControl(1, 1, 1, options)</code> keeps the default sensitivity
-  values while
-
-  changing the behaviors set with <code>options</code>. The object can have the
-
-  following properties:</p>
-
-  <pre><code class="language-js">let options = {
-    // Setting this to false makes mobile interactions smoother by
-    // preventing accidental interactions with the page while orbiting.
-    // By default, it's true.
-    disableTouchActions: true,
-
-    // Setting this to true makes the camera always rotate in the
-    // direction the mouse/touch is moving.
-    // By default, it's false.
-    freeRotation: false
-  };
-
-
-  orbitControl(1, 1, 1, options);
-
-  </code></pre>
-line: 11
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      // Make the interactions 3X sensitive.
-      orbitControl(3, 3, 3);
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(30, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create an options object.
-      let options = {
-        disableTouchActions: false,
-        freeRotation: true
-      };
-
-      // Enable orbiting with the mouse.
-      // Prevent accidental touch actions on touchscreen devices
-      // and enable free rotation.
-      orbitControl(1, 1, 1, options);
-
-      // Style the box.
-      normalMaterial();
-
-      // Draw the box.
-      box(30, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: sensitivityX
-    description: |
-      <p>sensitivity to movement along the x-axis. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: sensitivityY
-    description: |
-      <p>sensitivity to movement along the y-axis. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: sensitivityZ
-    description: |
-      <p>sensitivity to movement along the z-axis. Defaults to 1.</p>
-    type: Number
-    optional: true
-  - name: options
-    description: |
-      <p>object with two optional properties, <code>disableTouchActions</code>
-                                 and <code>freeRotation</code>. Both are <code>Boolean</code>s. <code>disableTouchActions</code>
-                                 defaults to <code>true</code> and <code>freeRotation</code> defaults to <code>false</code>.</p>
-    type: Object
-    optional: true
-chainable: true
----
-
-
-# orbitControl
diff --git a/src/content/reference/en/p5 copy/ortho.mdx b/src/content/reference/en/p5 copy/ortho.mdx
deleted file mode 100644
index 5fb384ba48..0000000000
--- a/src/content/reference/en/p5 copy/ortho.mdx	
+++ /dev/null
@@ -1,168 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L412
-title: ortho
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets an orthographic projection for the current camera in a 3D sketch.</p>
-
-  <p>In an orthographic projection, shapes with the same size always appear the
-
-  same size, regardless of whether they are near or far from the camera.</p>
-
-  <p><code>ortho()</code> changes the camera’s perspective by changing its
-  viewing frustum
-
-  from a truncated pyramid to a rectangular prism. The camera is placed in
-
-  front of the frustum and views everything between the frustum’s near plane
-
-  and its far plane. <code>ortho()</code> has six optional parameters to define
-  the
-
-  frustum.</p>
-
-  <p>The first four parameters, <code>left</code>, <code>right</code>,
-  <code>bottom</code>, and <code>top</code>, set the
-
-  coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-  <code>ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
-  wide and
-
-  400 pixels tall. By default, these coordinates are set based on the
-
-  sketch’s width and height, as in
-
-  <code>ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>
-
-  <p>The last two parameters, <code>near</code> and <code>far</code>, set the
-  distance of the
-
-  frustum’s near and far plane from the camera. For example, calling
-
-  <code>ortho(-100, 100, 200, 200, 50, 1000)</code> creates a frustum that’s 200
-  pixels
-
-  wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
-
-  pixels from the camera. By default, <code>near</code> and <code>far</code> are
-  set to 0 and
-
-  <code>max(width, height) + 800</code>, respectively.</p>
-
-  <p>Note: <code>ortho()</code> can only be used in WebGL mode.</p>
-line: 412
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Apply an orthographic projection.
-      ortho();
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Apply an orthographic projection.
-      // Center the frustum.
-      // Set its width and height to 20.
-      // Place its near plane 300 pixels from the camera.
-      // Place its far plane 350 pixels from the camera.
-      ortho(-10, 10, -10, 10, 300, 350);
-
-      // Translate the origin toward the camera.
-      translate(-10, 10, 600);
-
-      // Rotate the coordinate system.
-      rotateY(-0.1);
-      rotateX(-0.1);
-
-      // Draw the row of boxes.
-      for (let i = 0; i < 6; i += 1) {
-        translate(0, 0, -40);
-        box(10);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: left
-    description: >
-      <p>x-coordinate of the frustum’s left plane. Defaults to <code>-width /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: right
-    description: >
-      <p>x-coordinate of the frustum’s right plane. Defaults to <code>width /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: bottom
-    description: >
-      <p>y-coordinate of the frustum’s bottom plane. Defaults to <code>height /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: top
-    description: >
-      <p>y-coordinate of the frustum’s top plane. Defaults to <code>-height /
-      2</code>.</p>
-    type: Number
-    optional: true
-  - name: near
-    description: |
-      <p>z-coordinate of the frustum’s near plane. Defaults to 0.</p>
-    type: Number
-    optional: true
-  - name: far
-    description: >
-      <p>z-coordinate of the frustum’s far plane. Defaults to <code>max(width,
-      height) + 800</code>.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# ortho
diff --git a/src/content/reference/en/p5 copy/outputVolume.mdx b/src/content/reference/en/p5 copy/outputVolume.mdx
deleted file mode 100644
index fe618922fb..0000000000
--- a/src/content/reference/en/p5 copy/outputVolume.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L738
-title: outputVolume
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |-
-  <p>Scale the output of all sound in this sketch</p>
-  Scaled between 0.0 (silence) and 1.0 (full volume).
-  1.0 is the maximum amplitude of a digital sound, so multiplying
-  by greater than 1.0 may cause digital distortion. To
-  fade, provide a <code>rampTime</code> parameter. For more
-  complex fades, see the Envelope class.
-
-  <p>Alternately, you can pass in a signal source such as an
-  oscillator to modulate the amplitude with an audio signal.</p>
-  <p><b>How This Works</b>: When you load the p5.sound module, it
-  creates a single instance of p5sound. All sound objects in this
-  module output to p5sound before reaching your computer's output.
-  So if you change the amplitude of p5sound, it impacts all of the
-  sound in this module.</p>
-
-  <p>If no value is provided, returns a Web Audio API Gain Node</p>
-line: 738
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: volume
-    description: |
-      <p>Volume (amplitude) between 0.0
-                                         and 1.0 or modulating signal/oscillator</p>
-    type: Number|Object
-  - name: rampTime
-    description: |
-      <p>Fade for t seconds</p>
-    type: Number
-    optional: true
-  - name: timeFromNow
-    description: |
-      <p>Schedule this event to happen at
-                                     t seconds in the future</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# outputVolume
diff --git a/src/content/reference/en/p5 copy/p5.Camera.mdx b/src/content/reference/en/p5 copy/p5.Camera.mdx
deleted file mode 100644
index cc2090e329..0000000000
--- a/src/content/reference/en/p5 copy/p5.Camera.mdx	
+++ /dev/null
@@ -1,659 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L723
-title: p5.Camera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>A class to describe a camera for viewing a 3D sketch.</p>
-
-  <p>Each <code>p5.Camera</code> object represents a camera that views a section
-  of 3D
-
-  space. It stores information about the camera’s position, orientation, and
-
-  projection.</p>
-
-  <p>In WebGL mode, the default camera is a <code>p5.Camera</code> object that
-  can be
-
-  controlled with the <a href="/reference/p5/camera/">camera()</a>,
-
-  <a href="/reference/p5/perspective/">perspective()</a>,
-
-  <a href="/reference/p5/ortho/">ortho()</a>, and
-
-  <a href="/reference/p5/frustum/">frustum()</a> functions. Additional cameras
-  can be
-
-  created with <a href="/reference/p5/createCamera/">createCamera()</a> and
-  activated
-
-  with <a href="/reference/p5/setCamera/">setCamera()</a>.</p>
-
-  <p>Note: <code>p5.Camera</code>’s methods operate in two coordinate
-  systems:</p>
-
-  <ul>
-
-  <li>The “world” coordinate system describes positions in terms of their
-
-  relationship to the origin along the x-, y-, and z-axes. For example,
-
-  calling <code>myCamera.setPosition()</code> places the camera in 3D space
-  using
-
-  "world" coordinates.</li>
-
-  <li>The "local" coordinate system describes positions from the camera's point
-
-  of view: left-right, up-down, and forward-backward. For example, calling
-
-  <code>myCamera.move()</code> moves the camera along its own axes.</li>
-
-  </ul>
-line: 723
-isConstructor: true
-params:
-  - name: rendererGL
-    description: |
-      <p>instance of WebGL renderer</p>
-    type: RendererGL
-example:
-  - |-
-
-    <div>
-    <code>
-    let cam;
-    let delta = 0.001;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Camera object.
-      cam = createCamera();
-
-      // Place the camera at the top-center.
-      cam.setPosition(0, -400, 800);
-
-      // Point the camera at the origin.
-      cam.lookAt(0, 0, 0);
-
-      describe(
-        'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn the camera left and right, called "panning".
-      cam.pan(delta);
-
-      // Switch directions every 120 frames.
-      if (frameCount % 120 === 0) {
-        delta *= -1;
-      }
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click to toggle between cameras.
-
-    let cam1;
-    let cam2;
-    let isDefaultCamera = true;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the first camera.
-      // Keep its default settings.
-      cam1 = createCamera();
-
-      // Create the second camera.
-      // Place it at the top-left.
-      // Point it at the origin.
-      cam2 = createCamera();
-      cam2.setPosition(400, -400, 800);
-      cam2.lookAt(0, 0, 0);
-
-      // Set the current camera to cam1.
-      setCamera(cam1);
-
-      describe(
-        'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the box.
-      box();
-    }
-
-    // Toggle the current camera when the user double-clicks.
-    function doubleClicked() {
-      if (isDefaultCamera === true) {
-        setCamera(cam2);
-        isDefaultCamera = false;
-      } else {
-        setCamera(cam1);
-        isDefaultCamera = true;
-      }
-    }
-    </code>
-    </div>
-methods:
-  perspective:
-    description: >
-      <p>Sets a perspective projection for the camera.</p>
-
-      <p>In a perspective projection, shapes that are further from the camera
-      appear
-
-      smaller than shapes that are near the camera. This technique, called
-
-      foreshortening, creates realistic 3D scenes. It’s applied by default in
-      new
-
-      <code>p5.Camera</code> objects.</p>
-
-      <p><code>myCamera.perspective()</code> changes the camera’s perspective by
-      changing its
-
-      viewing frustum. The frustum is the volume of space that’s visible to the
-
-      camera. The frustum’s shape is a pyramid with its top cut off. The camera
-
-      is placed where the top of the pyramid should be and points towards the
-
-      base of the pyramid. It views everything within the frustum.</p>
-
-      <p>The first parameter, <code>fovy</code>, is the camera’s vertical field
-      of view. It’s
-
-      an angle that describes how tall or narrow a view the camera has. For
-
-      example, calling <code>myCamera.perspective(0.5)</code> sets the camera’s
-      vertical
-
-      field of view to 0.5 radians. By default, <code>fovy</code> is calculated
-      based on the
-
-      sketch’s height and the camera’s default z-coordinate, which is 800. The
-
-      formula for the default <code>fovy</code> is <code>2 * atan(height / 2 /
-      800)</code>.</p>
-
-      <p>The second parameter, <code>aspect</code>, is the camera’s aspect
-      ratio. It’s a number
-
-      that describes the ratio of the top plane’s width to its height. For
-
-      example, calling <code>myCamera.perspective(0.5, 1.5)</code> sets the
-      camera’s field
-
-      of view to 0.5 radians and aspect ratio to 1.5, which would make shapes
-
-      appear thinner on a square canvas. By default, <code>aspect</code> is set
-      to
-
-      <code>width / height</code>.</p>
-
-      <p>The third parameter, <code>near</code>, is the distance from the camera
-      to the near
-
-      plane. For example, calling <code>myCamera.perspective(0.5, 1.5,
-      100)</code> sets the
-
-      camera’s field of view to 0.5 radians, its aspect ratio to 1.5, and places
-
-      the near plane 100 pixels from the camera. Any shapes drawn less than 100
-
-      pixels from the camera won’t be visible. By default, <code>near</code> is
-      set to
-
-      <code>0.1 * 800</code>, which is 1/10th the default distance between the
-      camera and
-
-      the origin.</p>
-
-      <p>The fourth parameter, <code>far</code>, is the distance from the camera
-      to the far
-
-      plane. For example, calling <code>myCamera.perspective(0.5, 1.5, 100,
-      10000)</code>
-
-      sets the camera’s field of view to 0.5 radians, its aspect ratio to 1.5,
-
-      places the near plane 100 pixels from the camera, and places the far plane
-
-      10,000 pixels from the camera. Any shapes drawn more than 10,000 pixels
-
-      from the camera won’t be visible. By default, <code>far</code> is set to
-      <code>10 * 800</code>,
-
-      which is 10 times the default distance between the camera and the
-      origin.</p>
-    path: p5.Camera/perspective
-  ortho:
-    description: >
-      <p>Sets an orthographic projection for the camera.</p>
-
-      <p>In an orthographic projection, shapes with the same size always appear
-      the
-
-      same size, regardless of whether they are near or far from the camera.</p>
-
-      <p><code>myCamera.ortho()</code> changes the camera’s perspective by
-      changing its viewing
-
-      frustum from a truncated pyramid to a rectangular prism. The frustum is
-      the
-
-      volume of space that’s visible to the camera. The camera is placed in
-      front
-
-      of the frustum and views everything within the frustum.
-      <code>myCamera.ortho()</code>
-
-      has six optional parameters to define the viewing frustum.</p>
-
-      <p>The first four parameters, <code>left</code>, <code>right</code>,
-      <code>bottom</code>, and <code>top</code>, set the
-
-      coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-      <code>myCamera.ortho(-100, 100, 200, -200)</code> creates a frustum that’s
-      200 pixels
-
-      wide and 400 pixels tall. By default, these dimensions are set based on
-
-      the sketch’s width and height, as in
-
-      <code>myCamera.ortho(-width / 2, width / 2, -height / 2, height /
-      2)</code>.</p>
-
-      <p>The last two parameters, <code>near</code> and <code>far</code>, set
-      the distance of the
-
-      frustum’s near and far plane from the camera. For example, calling
-
-      <code>myCamera.ortho(-100, 100, 200, -200, 50, 1000)</code> creates a
-      frustum that’s
-
-      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
-
-      ends 1,000 pixels from the camera. By default, <code>near</code> and
-      <code>far</code> are set to
-
-      0 and <code>max(width, height) + 800</code>, respectively.</p>
-    path: p5.Camera/ortho
-  frustum:
-    description: >
-      <p>Sets the camera's frustum.</p>
-
-      <p>In a frustum projection, shapes that are further from the camera appear
-
-      smaller than shapes that are near the camera. This technique, called
-
-      foreshortening, creates realistic 3D scenes.</p>
-
-      <p><code>myCamera.frustum()</code> changes the camera’s perspective by
-      changing its
-
-      viewing frustum. The frustum is the volume of space that’s visible to the
-
-      camera. The frustum’s shape is a pyramid with its top cut off. The camera
-
-      is placed where the top of the pyramid should be and points towards the
-
-      base of the pyramid. It views everything within the frustum.</p>
-
-      <p>The first four parameters, <code>left</code>, <code>right</code>,
-      <code>bottom</code>, and <code>top</code>, set the
-
-      coordinates of the frustum’s sides, bottom, and top. For example, calling
-
-      <code>myCamera.frustum(-100, 100, 200, -200)</code> creates a frustum
-      that’s 200
-
-      pixels wide and 400 pixels tall. By default, these coordinates are set
-
-      based on the sketch’s width and height, as in
-
-      <code>myCamera.frustum(-width / 20, width / 20, height / 20, -height /
-      20)</code>.</p>
-
-      <p>The last two parameters, <code>near</code> and <code>far</code>, set
-      the distance of the
-
-      frustum’s near and far plane from the camera. For example, calling
-
-      <code>myCamera.frustum(-100, 100, 200, -200, 50, 1000)</code> creates a
-      frustum that’s
-
-      200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
-      ends
-
-      1,000 pixels from the camera. By default, near is set to <code>0.1 *
-      800</code>, which
-
-      is 1/10th the default distance between the camera and the origin.
-      <code>far</code> is
-
-      set to <code>10 * 800</code>, which is 10 times the default distance
-      between the
-
-      camera and the origin.</p>
-    path: p5.Camera/frustum
-  roll:
-    description: >
-      <p>Rotates the camera in a clockwise/counter-clockwise direction.</p>
-
-      <p>Rolling rotates the camera without changing its orientation. The
-      rotation
-
-      happens in the camera’s "local" space.</p>
-
-      <p>The parameter, <code>angle</code>, is the angle the camera should
-      rotate. Passing a
-
-      positive angle, as in <code>myCamera.roll(0.001)</code>, rotates the
-      camera in counter-clockwise direction.
-
-      Passing a negative angle, as in <code>myCamera.roll(-0.001)</code>,
-      rotates the
-
-      camera in clockwise direction.</p>
-
-      <p>Note: Angles are interpreted based on the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Camera/roll
-  pan:
-    description: >
-      <p>Rotates the camera left and right.</p>
-
-      <p>Panning rotates the camera without changing its position. The rotation
-
-      happens in the camera’s "local" space.</p>
-
-      <p>The parameter, <code>angle</code>, is the angle the camera should
-      rotate. Passing a
-
-      positive angle, as in <code>myCamera.pan(0.001)</code>, rotates the camera
-      to the
-
-      right. Passing a negative angle, as in <code>myCamera.pan(-0.001)</code>,
-      rotates the
-
-      camera to the left.</p>
-
-      <p>Note: Angles are interpreted based on the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Camera/pan
-  tilt:
-    description: >
-      <p>Rotates the camera up and down.</p>
-
-      <p>Tilting rotates the camera without changing its position. The rotation
-
-      happens in the camera’s "local" space.</p>
-
-      <p>The parameter, <code>angle</code>, is the angle the camera should
-      rotate. Passing a
-
-      positive angle, as in <code>myCamera.tilt(0.001)</code>, rotates the
-      camera down.
-
-      Passing a negative angle, as in <code>myCamera.tilt(-0.001)</code>,
-      rotates the camera
-
-      up.</p>
-
-      <p>Note: Angles are interpreted based on the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Camera/tilt
-  lookAt:
-    description: >
-      <p>Points the camera at a location.</p>
-
-      <p><code>myCamera.lookAt()</code> changes the camera’s orientation without
-      changing its
-
-      position.</p>
-
-      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
-      the coordinates in "world" space
-
-      where the camera should point. For example, calling
-
-      <code>myCamera.lookAt(10, 20, 30)</code> points the camera at the
-      coordinates
-
-      <code>(10, 20, 30)</code>.</p>
-    path: p5.Camera/lookAt
-  camera:
-    description: >
-      <p>Sets the position and orientation of the camera.</p>
-
-      <p><code>myCamera.camera()</code> allows objects to be viewed from
-      different angles. It
-
-      has nine parameters that are all optional.</p>
-
-      <p>The first three parameters, <code>x</code>, <code>y</code>, and
-      <code>z</code>, are the coordinates of the
-
-      camera’s position in "world" space. For example, calling
-
-      <code>myCamera.camera(0, 0, 0)</code> places the camera at the origin
-      <code>(0, 0, 0)</code>. By
-
-      default, the camera is placed at <code>(0, 0, 800)</code>.</p>
-
-      <p>The next three parameters, <code>centerX</code>, <code>centerY</code>,
-      and <code>centerZ</code> are the
-
-      coordinates of the point where the camera faces in "world" space. For
-
-      example, calling <code>myCamera.camera(0, 0, 0, 10, 20, 30)</code> places
-      the camera
-
-      at the origin <code>(0, 0, 0)</code> and points it at <code>(10, 20,
-      30)</code>. By default, the
-
-      camera points at the origin <code>(0, 0, 0)</code>.</p>
-
-      <p>The last three parameters, <code>upX</code>, <code>upY</code>, and
-      <code>upZ</code> are the components of
-
-      the "up" vector in "local" space. The "up" vector orients the camera’s
-
-      y-axis. For example, calling
-
-      <code>myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)</code> places the
-      camera at the
-
-      origin <code>(0, 0, 0)</code>, points it at <code>(10, 20, 30)</code>, and
-      sets the "up" vector
-
-      to <code>(0, -1, 0)</code> which is like holding it upside-down. By
-      default, the "up"
-
-      vector is <code>(0, 1, 0)</code>.</p>
-    path: p5.Camera/camera
-  move:
-    description: >
-      <p>Moves the camera along its "local" axes without changing its
-      orientation.</p>
-
-      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
-      the distances the camera should
-
-      move. For example, calling <code>myCamera.move(10, 20, 30)</code> moves
-      the camera 10
-
-      pixels to the right, 20 pixels down, and 30 pixels backward in its "local"
-
-      space.</p>
-    path: p5.Camera/move
-  setPosition:
-    description: >
-      <p>Sets the camera’s position in "world" space without changing its
-
-      orientation.</p>
-
-      <p>The parameters, <code>x</code>, <code>y</code>, and <code>z</code>, are
-      the coordinates where the camera
-
-      should be placed. For example, calling <code>myCamera.setPosition(10, 20,
-      30)</code>
-
-      places the camera at coordinates <code>(10, 20, 30)</code> in "world"
-      space.</p>
-    path: p5.Camera/setPosition
-  set:
-    description: >
-      <p>Sets the camera’s position, orientation, and projection by copying
-      another
-
-      camera.</p>
-
-      <p>The parameter, <code>cam</code>, is the <code>p5.Camera</code> object
-      to copy. For example, calling
-
-      <code>cam2.set(cam1)</code> will set <code>cam2</code> using
-      <code>cam1</code>’s configuration.</p>
-    path: p5.Camera/set
-  slerp:
-    description: >
-      <p>Sets the camera’s position and orientation to values that are
-      in-between
-
-      those of two other cameras.</p>
-
-      <p><code>myCamera.slerp()</code> uses spherical linear interpolation to
-      calculate a
-
-      position and orientation that’s in-between two other cameras. Doing so is
-
-      helpful for transitioning smoothly between two perspectives.</p>
-
-      <p>The first two parameters, <code>cam0</code> and <code>cam1</code>, are
-      the <code>p5.Camera</code> objects
-
-      that should be used to set the current camera.</p>
-
-      <p>The third parameter, <code>amt</code>, is the amount to interpolate
-      between <code>cam0</code> and
-
-      <code>cam1</code>. 0.0 keeps the camera’s position and orientation equal
-      to <code>cam0</code>’s,
-
-      0.5 sets them halfway between <code>cam0</code>’s and <code>cam1</code>’s
-      , and 1.0 sets the
-
-      position and orientation equal to <code>cam1</code>’s.</p>
-
-      <p>For example, calling <code>myCamera.slerp(cam0, cam1, 0.1)</code> sets
-      cam’s position
-
-      and orientation very close to <code>cam0</code>’s. Calling
-
-      <code>myCamera.slerp(cam0, cam1, 0.9)</code> sets cam’s position and
-      orientation very
-
-      close to <code>cam1</code>’s.</p>
-
-      <p>Note: All of the cameras must use the same projection.</p>
-    path: p5.Camera/slerp
-properties:
-  eyeX:
-    description: |
-      <p>The camera’s x-coordinate.</p>
-      <p>By default, the camera’s x-coordinate is set to 0 in "world" space.</p>
-    path: p5.Camera/eyeX
-  eyeY:
-    description: |
-      <p>The camera’s y-coordinate.</p>
-      <p>By default, the camera’s y-coordinate is set to 0 in "world" space.</p>
-    path: p5.Camera/eyeY
-  eyeZ:
-    description: >
-      <p>The camera’s z-coordinate.</p>
-
-      <p>By default, the camera’s z-coordinate is set to 800 in "world"
-      space.</p>
-    path: p5.Camera/eyeZ
-  centerX:
-    description: >
-      <p>The x-coordinate of the place where the camera looks.</p>
-
-      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
-      "world" space, so
-
-      <code>myCamera.centerX</code> is 0.</p>
-    path: p5.Camera/centerX
-  centerY:
-    description: >
-      <p>The y-coordinate of the place where the camera looks.</p>
-
-      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
-      "world" space, so
-
-      <code>myCamera.centerY</code> is 0.</p>
-    path: p5.Camera/centerY
-  centerZ:
-    description: >
-      <p>The y-coordinate of the place where the camera looks.</p>
-
-      <p>By default, the camera looks at the origin <code>(0, 0, 0)</code> in
-      "world" space, so
-
-      <code>myCamera.centerZ</code> is 0.</p>
-    path: p5.Camera/centerZ
-  upX:
-    description: >
-      <p>The x-component of the camera's "up" vector.</p>
-
-      <p>The camera's "up" vector orients its y-axis. By default, the "up"
-      vector is
-
-      <code>(0, 1, 0)</code>, so its x-component is 0 in "local" space.</p>
-    path: p5.Camera/upX
-  upY:
-    description: >
-      <p>The y-component of the camera's "up" vector.</p>
-
-      <p>The camera's "up" vector orients its y-axis. By default, the "up"
-      vector is
-
-      <code>(0, 1, 0)</code>, so its y-component is 1 in "local" space.</p>
-    path: p5.Camera/upY
-  upZ:
-    description: >
-      <p>The z-component of the camera's "up" vector.</p>
-
-      <p>The camera's "up" vector orients its y-axis. By default, the "up"
-      vector is
-
-      <code>(0, 1, 0)</code>, so its z-component is 0 in "local" space.</p>
-    path: p5.Camera/upZ
-chainable: false
----
-
-
-# p5.Camera
diff --git a/src/content/reference/en/p5 copy/p5.Color.mdx b/src/content/reference/en/p5 copy/p5.Color.mdx
deleted file mode 100644
index b804e5ee95..0000000000
--- a/src/content/reference/en/p5 copy/p5.Color.mdx	
+++ /dev/null
@@ -1,116 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/p5.Color.js#L318
-title: p5.Color
-module: Color
-submodule: Creating & Reading
-file: src/color/p5.Color.js
-description: >
-  <p>A class to describe a color.</p>
-
-  <p>Each <code>p5.Color</code> object stores the color mode
-
-  and level maxes that were active during its construction. These values are
-
-  used to interpret the arguments passed to the object's constructor. They
-
-  also determine output formatting such as when
-
-  <a href="/reference/p5/saturation/">saturation()</a> is called.</p>
-
-  <p>Color is stored internally as an array of ideal RGBA values in floating
-
-  point form, normalized from 0 to 1. These values are used to calculate the
-
-  closest screen colors, which are RGBA levels from 0 to 255. Screen colors
-
-  are sent to the renderer.</p>
-
-  <p>When different color representations are calculated, the results are cached
-
-  for performance. These values are normalized, floating-point numbers.</p>
-
-  <p>Note: <a href="/reference/p5/color/">color()</a> is the recommended way to
-  create an
-
-  instance of this class.</p>
-line: 318
-isConstructor: true
-params:
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance.</p>
-    type: P5
-    optional: true
-  - name: vals
-    description: |
-      <p>an array containing the color values
-                                               for red, green, blue and alpha channel
-                                               or CSS color.</p>
-    type: 'Number[]|String'
-methods:
-  toString:
-    description: >
-      <p>Returns the color formatted as a <code>String</code>.</p>
-
-      <p>Calling <code>myColor.toString()</code> can be useful for debugging, as
-      in
-
-      <code>print(myColor.toString())</code>. It's also helpful for using p5.js
-      with other
-
-      libraries.</p>
-
-      <p>The parameter, <code>format</code>, is optional. If a format string is
-      passed, as in
-
-      <code>myColor.toString('#rrggbb')</code>, it will determine how the color
-      string is
-
-      formatted. By default, color strings are formatted as <code>'rgba(r, g, b,
-      a)'</code>.</p>
-    path: p5.Color/toString
-  setRed:
-    description: >
-      <p>Sets the red component of a color.</p>
-
-      <p>The range depends on the <a
-      href="/reference/p5/colorMode/">colorMode()</a>. In the
-
-      default RGB mode it's between 0 and 255.</p>
-    path: p5.Color/setRed
-  setGreen:
-    description: >
-      <p>Sets the green component of a color.</p>
-
-      <p>The range depends on the <a
-      href="/reference/p5/colorMode/">colorMode()</a>. In the
-
-      default RGB mode it's between 0 and 255.</p>
-    path: p5.Color/setGreen
-  setBlue:
-    description: >
-      <p>Sets the blue component of a color.</p>
-
-      <p>The range depends on the <a
-      href="/reference/p5/colorMode/">colorMode()</a>. In the
-
-      default RGB mode it's between 0 and 255.</p>
-    path: p5.Color/setBlue
-  setAlpha:
-    description: >
-      <p>Sets the alpha (transparency) value of a color.</p>
-
-      <p>The range depends on the
-
-      <a href="/reference/p5/colorMode/">colorMode()</a>. In the default RGB
-      mode it's
-
-      between 0 and 255.</p>
-    path: p5.Color/setAlpha
-chainable: false
----
-
-
-# p5.Color
diff --git a/src/content/reference/en/p5 copy/p5.Element.mdx b/src/content/reference/en/p5 copy/p5.Element.mdx
deleted file mode 100644
index c07b10ae79..0000000000
--- a/src/content/reference/en/p5 copy/p5.Element.mdx	
+++ /dev/null
@@ -1,545 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Element.js#L9
-title: p5.Element
-module: DOM
-submodule: DOM
-file: src/core/p5.Element.js
-description: >
-  <p>A class to describe an
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/"
-  target="_blank">HTML element</a>.</p>
-
-  <p>Sketches can use many elements. Common elements include the drawing canvas,
-
-  buttons, sliders, webcam feeds, and so on.</p>
-
-  <p>All elements share the methods of the <code>p5.Element</code> class.
-  They're created
-
-  with functions such as <a
-  href="/reference/p5/createCanvas/">createCanvas()</a> and
-
-  <a href="/reference/p5/createButton/">createButton()</a>.</p>
-line: 9
-isConstructor: true
-params:
-  - name: elt
-    description: |
-      <p>wrapped DOM element.</p>
-    type: HTMLElement
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance.</p>
-    type: P5
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a button element and
-      // place it beneath the canvas.
-      let btn = createButton('change');
-      btn.position(0, 100);
-
-      // Call randomColor() when
-      // the button is pressed.
-      btn.mousePressed(randomColor);
-
-      describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
-    }
-
-    // Paint the background either
-    // red, yellow, blue, or green.
-    function randomColor() {
-      let c = random(['red', 'yellow', 'blue', 'green']);
-      background(c);
-    }
-    </code>
-    </div>
-methods:
-  parent:
-    description: >
-      <p>Attaches the element to a parent element.</p>
-
-      <p>For example, a <code><div></div></code> element may be used as a box to
-
-      hold two pieces of text, a header and a paragraph. The
-
-      <code><div></div></code> is the parent element of both the header and
-
-      paragraph.</p>
-
-      <p>The parameter <code>parent</code> can have one of three types.
-      <code>parent</code> can be a
-
-      string with the parent element's ID, as in
-
-      <code>myElement.parent('container')</code>. It can also be another
-
-      <a href="/reference/p5/p5.Element">p5.Element</a> object, as in
-
-      <code>myElement.parent(myDiv)</code>. Finally, <code>parent</code> can be
-      an <code>HTMLElement</code>
-
-      object, as in <code>myElement.parent(anotherElement)</code>.</p>
-
-      <p>Calling <code>myElement.parent()</code> without an argument returns the
-      element's
-
-      parent.</p>
-    path: p5.Element/parent
-  id:
-    description: >
-      <p>Sets the element's ID using a given string.</p>
-
-      <p>Calling <code>myElement.id()</code> without an argument returns its ID
-      as a string.</p>
-    path: p5.Element/id
-  class:
-    description: >
-      <p>Adds a
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class/"
-      target="_blank">class attribute</a>
-
-      to the element using a given string.</p>
-
-      <p>Calling <code>myElement.class()</code> without an argument returns a
-      string with its current classes.</p>
-    path: p5.Element/class
-  mousePressed:
-    description: >
-      <p>Calls a function when the mouse is pressed over the element.</p>
-
-      <p>Calling <code>myElement.mousePressed(false)</code> disables the
-      function.</p>
-
-      <p>Note: Some mobile browsers may also trigger this event when the element
-
-      receives a quick tap.</p>
-    path: p5.Element/mousePressed
-  doubleClicked:
-    description: >
-      <p>Calls a function when the mouse is pressed twice over the element.</p>
-
-      <p>Calling <code>myElement.doubleClicked(false)</code> disables the
-      function.</p>
-    path: p5.Element/doubleClicked
-  mouseWheel:
-    description: >
-      <p>Calls a function when the mouse wheel scrolls over the element.</p>
-
-      <p>The callback function, <code>fxn</code>, is passed an
-      <code>event</code> object. <code>event</code> has
-
-      two numeric properties, <code>deltaY</code> and <code>deltaX</code>.
-      <code>event.deltaY</code> is
-
-      negative if the mouse wheel rotates away from the user. It's positive if
-
-      the mouse wheel rotates toward the user. <code>event.deltaX</code> is
-      positive if
-
-      the mouse wheel moves to the right. It's negative if the mouse wheel moves
-
-      to the left.</p>
-
-      <p>Calling <code>myElement.mouseWheel(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseWheel
-  mouseReleased:
-    description: >
-      <p>Calls a function when the mouse is released over the element.</p>
-
-      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
-      function.</p>
-
-      <p>Note: Some mobile browsers may also trigger this event when the element
-
-      receives a quick tap.</p>
-    path: p5.Element/mouseReleased
-  mouseClicked:
-    description: >
-      <p>Calls a function when the mouse is pressed and released over the
-      element.</p>
-
-      <p>Calling <code>myElement.mouseReleased(false)</code> disables the
-      function.</p>
-
-      <p>Note: Some mobile browsers may also trigger this event when the element
-
-      receives a quick tap.</p>
-    path: p5.Element/mouseClicked
-  mouseMoved:
-    description: >
-      <p>Calls a function when the mouse moves over the element.</p>
-
-      <p>Calling <code>myElement.mouseMoved(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseMoved
-  mouseOver:
-    description: >
-      <p>Calls a function when the mouse moves onto the element.</p>
-
-      <p>Calling <code>myElement.mouseOver(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseOver
-  mouseOut:
-    description: >
-      <p>Calls a function when the mouse moves off the element.</p>
-
-      <p>Calling <code>myElement.mouseOut(false)</code> disables the
-      function.</p>
-    path: p5.Element/mouseOut
-  touchStarted:
-    description: >
-      <p>Calls a function when the element is touched.</p>
-
-      <p>Calling <code>myElement.touchStarted(false)</code> disables the
-      function.</p>
-
-      <p>Note: Touch functions only work on mobile devices.</p>
-    path: p5.Element/touchStarted
-  touchMoved:
-    description: >
-      <p>Calls a function when the user touches the element and moves.</p>
-
-      <p>Calling <code>myElement.touchMoved(false)</code> disables the
-      function.</p>
-
-      <p>Note: Touch functions only work on mobile devices.</p>
-    path: p5.Element/touchMoved
-  touchEnded:
-    description: >
-      <p>Calls a function when the user stops touching the element.</p>
-
-      <p>Calling <code>myElement.touchMoved(false)</code> disables the
-      function.</p>
-
-      <p>Note: Touch functions only work on mobile devices.</p>
-    path: p5.Element/touchEnded
-  dragOver:
-    description: >
-      <p>Calls a function when a file is dragged over the element.</p>
-
-      <p>Calling <code>myElement.dragOver(false)</code> disables the
-      function.</p>
-    path: p5.Element/dragOver
-  dragLeave:
-    description: >
-      <p>Calls a function when a file is dragged off the element.</p>
-
-      <p>Calling <code>myElement.dragLeave(false)</code> disables the
-      function.</p>
-    path: p5.Element/dragLeave
-  addClass:
-    description: |
-      <p>Adds a class to the element.</p>
-    path: p5.Element/addClass
-  removeClass:
-    description: |
-      <p>Removes a class from the element.</p>
-    path: p5.Element/removeClass
-  hasClass:
-    description: |
-      <p>Checks if a class is already applied to element.</p>
-    path: p5.Element/hasClass
-  toggleClass:
-    description: |
-      <p>Toggles whether a class is applied to the element.</p>
-    path: p5.Element/toggleClass
-  child:
-    description: >
-      <p>Attaches the element as a child of another element.</p>
-
-      <p><code>myElement.child()</code> accepts either a string ID, DOM node, or
-
-      <a href="/reference/p5/p5.Element">p5.Element</a>. For example,
-
-      <code>myElement.child(otherElement)</code>. If no argument is provided, an
-      array of
-
-      children DOM nodes is returned.</p>
-    path: p5.Element/child
-  center:
-    description: >
-      <p>Centers the element either vertically, horizontally, or both.</p>
-
-      <p><code>center()</code> will center the element relative to its parent or
-      according to
-
-      the page's body if the element has no parent.</p>
-
-      <p>If no argument is passed, as in <code>myElement.center()</code> the
-      element is aligned
-
-      both vertically and horizontally.</p>
-    path: p5.Element/center
-  html:
-    description: >
-      <p>Sets the inner HTML of the element, replacing any existing HTML.</p>
-
-      <p>The second parameter, <code>append</code>, is optional. If
-      <code>true</code> is passed, as in
-
-      <code>myElement.html('hi', true)</code>, the HTML is appended instead of
-      replacing
-
-      existing HTML.</p>
-
-      <p>If no arguments are passed, as in <code>myElement.html()</code>, the
-      element's inner
-
-      HTML is returned.</p>
-    path: p5.Element/html
-  position:
-    description: >
-      <p>Sets the element's position.</p>
-
-      <p>The first two parameters, <code>x</code> and <code>y</code>, set the
-      element's position relative
-
-      to the top-left corner of the web page.</p>
-
-      <p>The third parameter, <code>positionType</code>, is optional. It sets
-      the element's
-
-      <a target="_blank"
-      href="https://developer.mozilla.org/en-US/docs/Web/CSS/position/">positioning
-      scheme</a>.
-
-      <code>positionType</code> is a string that can be either
-      <code>'static'</code>, <code>'fixed'</code>,
-
-      <code>'relative'</code>, <code>'sticky'</code>, <code>'initial'</code>, or
-      <code>'inherit'</code>.</p>
-
-      <p>If no arguments passed, as in <code>myElement.position()</code>, the
-      method returns
-
-      the element's position in an object, as in <code>{ x: 0, y: 0
-      }</code>.</p>
-    path: p5.Element/position
-  style:
-    description: >
-      <p>Applies a style to the element by adding a
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax/"
-      target="_blank">CSS declaration</a>.</p>
-
-      <p>The first parameter, <code>property</code>, is a string. If the name of
-      a style
-
-      property is passed, as in <code>myElement.style('color')</code>, the
-      method returns
-
-      the current value as a string or <code>null</code> if it hasn't been set.
-      If a
-
-      <code>property:style</code> string is passed, as in
-
-      <code>myElement.style('color:deeppink')</code>, the method sets the style
-      <code>property</code>
-
-      to <code>value</code>.</p>
-
-      <p>The second parameter, <code>value</code>, is optional. It sets the
-      property's value.
-
-      <code>value</code> can be a string, as in
-
-      <code>myElement.style('color', 'deeppink')</code>, or a
-
-      <a href="/reference/p5/p5.Color">p5.Color</a> object, as in
-
-      <code>myElement.style('color', myColor)</code>.</p>
-    path: p5.Element/style
-  attribute:
-    description: >
-      <p>Adds an
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes"
-      target="_blank">attribute</a>
-
-      to the element.</p>
-
-      <p>This method is useful for advanced tasks. Most commonly-used
-      attributes,
-
-      such as <code>id</code>, can be set with their dedicated methods. For
-      example,
-
-      <code>nextButton.id('next')</code> sets an element's <code>id</code>
-      attribute. Calling
-
-      <code>nextButton.attribute('id', 'next')</code> has the same effect.</p>
-
-      <p>The first parameter, <code>attr</code>, is the attribute's name as a
-      string. Calling
-
-      <code>myElement.attribute('align')</code> returns the attribute's current
-      value as a
-
-      string or <code>null</code> if it hasn't been set.</p>
-
-      <p>The second parameter, <code>value</code>, is optional. It's a string
-      used to set the
-
-      attribute's value. For example, calling
-
-      <code>myElement.attribute('align', 'center')</code> sets the element's
-      horizontal
-
-      alignment to <code>center</code>.</p>
-    path: p5.Element/attribute
-  removeAttribute:
-    description: >
-      <p>Removes an attribute from the element.</p>
-
-      <p>The parameter <code>attr</code> is the attribute's name as a string.
-      For example,
-
-      calling <code>myElement.removeAttribute('align')</code> removes its
-      <code>align</code>
-
-      attribute if it's been set.</p>
-    path: p5.Element/removeAttribute
-  value:
-    description: >
-      <p>Returns or sets the element's value.</p>
-
-      <p>Calling <code>myElement.value()</code> returns the element's current
-      value.</p>
-
-      <p>The parameter, <code>value</code>, is an optional number or string. If
-      provided,
-
-      as in <code>myElement.value(123)</code>, it's used to set the element's
-      value.</p>
-    path: p5.Element/value
-  show:
-    description: |
-      <p>Shows the current element.</p>
-    path: p5.Element/show
-  hide:
-    description: |
-      <p>Hides the current element.</p>
-    path: p5.Element/hide
-  size:
-    description: >
-      <p>Sets the element's width and height.</p>
-
-      <p>Calling <code>myElement.size()</code> without an argument returns the
-      element's size
-
-      as an object with the properties <code>width</code> and
-      <code>height</code>. For example,
-       <code>{ width: 20, height: 10 }</code>.</p>
-      <p>The first parameter, <code>width</code>, is optional. It's a number
-      used to set the
-
-      element's width. Calling <code>myElement.size(10)</code></p>
-
-      <p>The second parameter, 'height<code>, is also optional. It's a number
-      used to set the element's height. For example, calling
-      </code>myElement.size(20, 10)` sets the element's width to 20 pixels and
-      height
-
-      to 10 pixels.</p>
-
-      <p>The constant <code>AUTO</code> can be used to adjust one dimension at a
-      time while
-
-      maintaining the aspect ratio, which is <code>width / height</code>. For
-      example,
-
-      consider an element that's 200 pixels wide and 100 pixels tall. Calling
-
-      <code>myElement.size(20, AUTO)</code> sets the width to 20 pixels and
-      height to 10
-
-      pixels.</p>
-
-      <p>Note: In the case of elements that need to load data, such as images,
-      wait
-
-      to call <code>myElement.size()</code> until after the data loads.</p>
-    path: p5.Element/size
-  remove:
-    description: |
-      <p>Removes the element, stops all audio/video streams, and removes all
-      callback functions.</p>
-    path: p5.Element/remove
-  drop:
-    description: >
-      <p>Calls a function when the user drops a file on the element.</p>
-
-      <p>The first parameter, <code>callback</code>, is a function to call once
-      the file loads.
-
-      The callback function should have one parameter, <code>file</code>, that's
-      a
-
-      <a href="/reference/p5/p5.File">p5.File</a> object. If the user drops
-      multiple files on
-
-      the element, <code>callback</code>, is called once for each file.</p>
-
-      <p>The second parameter, <code>fxn</code>, is a function to call when the
-      browser detects
-
-      one or more dropped files. The callback function should have one
-
-      parameter, <code>event</code>, that's a
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/">DragEvent</a>.</p>
-    path: p5.Element/drop
-  draggable:
-    description: >
-      <p>Makes the element draggable.</p>
-
-      <p>The parameter, <code>elmnt</code>, is optional. If another
-
-      <a href="/reference/p5/p5.Element">p5.Element</a> object is passed, as in
-
-      <code>myElement.draggable(otherElement)</code>, the other element will
-      become draggable.</p>
-    path: p5.Element/draggable
-properties:
-  elt:
-    description: >
-      <p>The element's underlying <code>HTMLElement</code> object.</p>
-
-      <p>The
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
-      target="_blank">HTMLElement</a>
-
-      object's properties and methods can be used directly.</p>
-    path: p5.Element/elt
-  width:
-    description: |
-      <p>A <code>Number</code> property that stores the element's width.</p>
-    path: p5.Element/width
-  height:
-    description: |
-      <p>A <code>Number</code> property that stores the element's height.</p>
-    path: p5.Element/height
-chainable: false
----
-
-
-# p5.Element
diff --git a/src/content/reference/en/p5 copy/p5.File.mdx b/src/content/reference/en/p5 copy/p5.File.mdx
deleted file mode 100644
index 78675c7a98..0000000000
--- a/src/content/reference/en/p5 copy/p5.File.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L5482
-title: p5.File
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: |
-  <p>A class to describe a file.</p>
-  <p><code>p5.File</code> objects are used by
-  <a href="/reference/p5.Element/drop/">myElement.drop()</a> and
-  created by
-  <a href="/reference/p5/createFileInput/">createFileInput</a>.</p>
-line: 5482
-isConstructor: true
-params:
-  - name: file
-    description: |
-      <p>wrapped file.</p>
-    type: File
-example:
-  - |-
-
-    <div>
-    <code>
-    // Use the file input to load a
-    // file and display its info.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a file input and place it beneath the canvas.
-      // Call displayInfo() when the file loads.
-      let input = createFileInput(displayInfo);
-      input.position(0, 100);
-
-      describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
-    }
-
-    // Display the p5.File's info once it loads.
-    function displayInfo(file) {
-      background(200);
-
-      // Display the p5.File's name.
-      text(file.name, 10, 10, 80, 40);
-
-      // Display the p5.File's type and subtype.
-      text(`${file.type}/${file.subtype}`, 10, 70);
-
-      // Display the p5.File's size in bytes.
-      text(file.size, 10, 90);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Use the file input to select an image to
-    // load and display.
-    let img;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a file input and place it beneath the canvas.
-      // Call handleImage() when the file image loads.
-      let input = createFileInput(handleImage);
-      input.position(0, 100);
-
-      describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the image if it's ready.
-      if (img) {
-        image(img, 0, 0, width, height);
-      }
-    }
-
-    // Use the p5.File's data once it loads.
-    function handleImage(file) {
-      // Check the p5.File's type.
-      if (file.type === 'image') {
-        // Create an image using using the p5.File's data.
-        img = createImg(file.data, '');
-
-        // Hide the image element so it doesn't appear twice.
-        img.hide();
-      } else {
-        img = null;
-      }
-    }
-    </code>
-    </div>
-properties:
-  file:
-    description: >
-      <p>Underlying
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/File/"
-      target="_blank">File</a>
-
-      object. All <code>File</code> properties and methods are accessible.</p>
-    path: p5.File/file
-  type:
-    description: >
-      <p>The file
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
-      target="_blank">MIME type</a>
-
-      as a string.</p>
-
-      <p>For example, <code>'image'</code> and <code>'text'</code> are both MIME
-      types.</p>
-    path: p5.File/type
-  subtype:
-    description: >
-      <p>The file subtype as a string.</p>
-
-      <p>For example, a file with an <code>'image'</code>
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/"
-      target="_blank">MIME type</a>
-
-      may have a subtype such as <code>png</code> or <code>jpeg</code>.</p>
-    path: p5.File/subtype
-  name:
-    description: |
-      <p>The file name as a string.</p>
-    path: p5.File/name
-  size:
-    description: |
-      <p>The number of bytes in the file.</p>
-    path: p5.File/size
-  data:
-    description: |
-      <p>A string containing the file's data.</p>
-      <p>Data can be either image data, text contents, or a parsed object in the
-      case of JSON and <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
-    path: p5.File/data
-chainable: false
----
-
-
-# p5.File
diff --git a/src/content/reference/en/p5 copy/p5.Font.mdx b/src/content/reference/en/p5 copy/p5.Font.mdx
deleted file mode 100644
index 615d0406ee..0000000000
--- a/src/content/reference/en/p5 copy/p5.Font.mdx	
+++ /dev/null
@@ -1,146 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/p5.Font.js#L13
-title: p5.Font
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/p5.Font.js
-description: |
-  <p>A class to describe fonts.</p>
-line: 13
-isConstructor: true
-params:
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance.</p>
-    type: P5
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      // Creates a p5.Font object.
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Style the text.
-      fill('deeppink');
-      textFont(font);
-      textSize(36);
-
-      // Display the text.
-      text('p5*js', 10, 50);
-
-      describe('The text "p5*js" written in pink on a gray background.');
-    }
-    </code>
-    </div>
-methods:
-  textBounds:
-    description: >
-      <p>Returns the bounding box for a string of text written using the
-      font.</p>
-
-      <p>The bounding box is the smallest rectangle that can contain a string of
-
-      text. <code>font.textBounds()</code> returns an object with the bounding
-      box's
-
-      location and size. For example, calling <code>font.textBounds('p5*js', 5,
-      20)</code>
-
-      returns an object in the format
-
-      <code>{ x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }</code>. The <code>x</code> and
-      <code>y</code> properties are
-
-      always the coordinates of the bounding box's top-left corner.</p>
-
-      <p>The first parameter, <code>str</code>, is a string of text. The second
-      and third
-
-      parameters, <code>x</code> and <code>y</code>, are the text's position. By
-      default, they set the
-
-      coordinates of the bounding box's bottom-left corner. See
-
-      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
-      text.</p>
-
-      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
-      font size used to
-
-      determine the bounding box. By default, <code>font.textBounds()</code>
-      will use the
-
-      current <a href="/reference/p5/textSize/">textSize()</a>.</p>
-    path: p5.Font/textBounds
-  textToPoints:
-    description: >
-      <p>Returns an array of points outlining a string of text written using the
-
-      font.</p>
-
-      <p>Each point object in the array has three properties that describe the
-
-      point's location and orientation, called its path angle. For example,
-
-      <code>{ x: 10, y: 20, alpha: 450 }</code>.</p>
-
-      <p>The first parameter, <code>str</code>, is a string of text. The second
-      and third
-
-      parameters, <code>x</code> and <code>y</code>, are the text's position. By
-      default, they set the
-
-      coordinates of the bounding box's bottom-left corner. See
-
-      <a href="/reference/p5/textAlign/">textAlign()</a> for more ways to align
-      text.</p>
-
-      <p>The fourth parameter, <code>fontSize</code>, is optional. It sets the
-      text's font
-
-      size. By default, <code>font.textToPoints()</code> will use the current
-
-      <a href="/reference/p5/textSize/">textSize()</a>.</p>
-
-      <p>The fifth parameter, <code>options</code>, is also optional.
-      <code>font.textToPoints()</code>
-
-      expects an object with the following properties:</p>
-
-      <p><code>sampleFactor</code> is the ratio of the text's path length to the
-      number of
-
-      samples. It defaults to 0.1. Higher values produce more points along the
-
-      path and are more precise.</p>
-
-      <p><code>simplifyThreshold</code> removes collinear points if it's set to
-      a number other
-
-      than 0. The value represents the threshold angle to use when determining
-
-      whether two edges are collinear.</p>
-    path: p5.Font/textToPoints
-properties:
-  font:
-    description: |
-      <p>The font's underlying
-      <a href="https://opentype.js.org/" target="_blank">opentype.js</a>
-      font object.</p>
-    path: p5.Font/font
-chainable: false
----
-
-
-# p5.Font
diff --git a/src/content/reference/en/p5 copy/p5.Framebuffer.mdx b/src/content/reference/en/p5 copy/p5.Framebuffer.mdx
deleted file mode 100644
index 8100f48199..0000000000
--- a/src/content/reference/en/p5 copy/p5.Framebuffer.mdx	
+++ /dev/null
@@ -1,443 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Framebuffer.js#L76
-title: p5.Framebuffer
-module: Rendering
-file: src/webgl/p5.Framebuffer.js
-description: >
-  <p>A class to describe a high-performance drawing surface for textures.</p>
-
-  <p>Each <code>p5.Framebuffer</code> object provides a dedicated drawing
-  surface called
-
-  a <em>framebuffer</em>. They're similar to
-
-  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects but can run much
-  faster.
-
-  Performance is improved because the framebuffer shares the same WebGL
-
-  context as the canvas used to create it.</p>
-
-  <p><code>p5.Framebuffer</code> objects have all the drawing features of the
-  main
-
-  canvas. Drawing instructions meant for the framebuffer must be placed
-
-  between calls to
-
-  <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
-
-  <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>. The resulting
-  image
-
-  can be applied as a texture by passing the <code>p5.Framebuffer</code> object
-  to the
-
-  <a href="/reference/p5/texture/">texture()</a> function, as in
-  <code>texture(myBuffer)</code>.
-
-  It can also be displayed on the main canvas by passing it to the
-
-  <a href="/reference/p5/image/">image()</a> function, as in
-  <code>image(myBuffer, 0, 0)</code>.</p>
-
-  <p>Note: <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a> is
-  the
-
-  recommended way to create an instance of this class.</p>
-line: 76
-isConstructor: true
-params:
-  - name: target
-    description: |
-      <p>sketch instance or
-                                     <a href="#/p5.Graphics">p5.Graphics</a>
-                                     object.</p>
-    type: p5.Graphics|p5
-  - name: settings
-    description: |
-      <p>configuration options.</p>
-    type: Object
-    optional: true
-methods:
-  resize:
-    description: >
-      <p>Resizes the framebuffer to a given width and height.</p>
-
-      <p>The parameters, <code>width</code> and <code>height</code>, set the
-      dimensions of the
-
-      framebuffer. For example, calling <code>myBuffer.resize(300, 500)</code>
-      resizes
-
-      the framebuffer to 300×500 pixels, then sets <code>myBuffer.width</code>
-      to 300
-
-      and <code>myBuffer.height</code> 500.</p>
-    path: p5.Framebuffer/resize
-  pixelDensity:
-    description: >
-      <p>Sets the framebuffer's pixel density or returns its current
-      density.</p>
-
-      <p>Computer displays are grids of little lights called pixels. A display's
-
-      pixel density describes how many pixels it packs into an area. Displays
-
-      with smaller pixels have a higher pixel density and create sharper
-
-      images.</p>
-
-      <p>The parameter, <code>density</code>, is optional. If a number is
-      passed, as in
-
-      <code>myBuffer.pixelDensity(1)</code>, it sets the framebuffer's pixel
-      density. By
-
-      default, the framebuffer's pixel density will match that of the canvas
-
-      where it was created. All canvases default to match the display's pixel
-
-      density.</p>
-
-      <p>Calling <code>myBuffer.pixelDensity()</code> without an argument
-      returns its current
-
-      pixel density.</p>
-    path: p5.Framebuffer/pixelDensity
-  autoSized:
-    description: >
-      <p>Toggles the framebuffer's autosizing mode or returns the current
-      mode.</p>
-
-      <p>By default, the framebuffer automatically resizes to match the canvas
-
-      that created it. Calling <code>myBuffer.autoSized(false)</code> disables
-      this
-
-      behavior and calling <code>myBuffer.autoSized(true)</code> re-enables
-      it.</p>
-
-      <p>Calling <code>myBuffer.autoSized()</code> without an argument returns
-      <code>true</code> if
-
-      the framebuffer automatically resizes and <code>false</code> if not.</p>
-    path: p5.Framebuffer/autoSized
-  createCamera:
-    description: >
-      <p>Creates a new
-
-      <a href="/reference/p5/p5.Camera">p5.Camera</a> object to use with the
-      framebuffer.</p>
-
-      <p>The new camera is initialized with a default position <code>(0, 0,
-      800)</code> and a
-
-      default perspective projection. Its properties can be controlled with
-
-      <a href="/reference/p5/p5.Camera">p5.Camera</a> methods such as
-      <code>myCamera.lookAt(0, 0, 0)</code>.</p>
-
-      <p>Framebuffer cameras should be created between calls to
-
-      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
-
-      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> like so:</p>
-
-      <pre><code class="language-js">let myCamera;
-
-
-      myBuffer.begin();
-
-
-      // Create the camera for the framebuffer.
-
-      myCamera = myBuffer.createCamera();
-
-
-      myBuffer.end();
-
-      </code></pre>
-
-      <p>Calling <a href="/reference/p5/setCamera/">setCamera()</a> updates the
-
-      framebuffer's projection using the camera.
-
-      <a href="/reference/p5/resetMatrix/">resetMatrix()</a> must also be called
-      for the
-
-      view to change properly:</p>
-
-      <pre><code class="language-js">myBuffer.begin();
-
-
-      // Set the camera for the framebuffer.
-
-      setCamera(myCamera);
-
-
-      // Reset all transformations.
-
-      resetMatrix();
-
-
-      // Draw stuff...
-
-
-      myBuffer.end();
-
-      </code></pre>
-    path: p5.Framebuffer/createCamera
-  remove:
-    description: >
-      <p>Deletes the framebuffer from GPU memory.</p>
-
-      <p>Calling <code>myBuffer.remove()</code> frees the GPU memory used by the
-      framebuffer.
-
-      The framebuffer also uses a bit of memory on the CPU which can be freed
-
-      like so:</p>
-
-      <pre><code class="language-js">// Delete the framebuffer from GPU memory.
-
-      myBuffer.remove();
-
-
-      // Delete the framebuffer from CPU memory.
-
-      myBuffer = undefined;
-
-      </code></pre>
-
-      <p>Note: All variables that reference the framebuffer must be assigned
-
-      the value <code>undefined</code> to delete the framebuffer from CPU
-      memory. If any
-
-      variable still refers to the framebuffer, then it won't be garbage
-
-      collected.</p>
-    path: p5.Framebuffer/remove
-  begin:
-    description: >
-      <p>Begins drawing shapes to the framebuffer.</p>
-
-      <p><code>myBuffer.begin()</code> and <a
-      href="/reference/p5.Framebuffer/end/">myBuffer.end()</a>
-
-      allow shapes to be drawn to the framebuffer. <code>myBuffer.begin()</code>
-      begins
-
-      drawing to the framebuffer and
-
-      <a href="/reference/p5.Framebuffer/end/">myBuffer.end()</a> stops drawing
-      to the
-
-      framebuffer. Changes won't be visible until the framebuffer is displayed
-
-      as an image or texture.</p>
-    path: p5.Framebuffer/begin
-  end:
-    description: >
-      <p>Stops drawing shapes to the framebuffer.</p>
-
-      <p><a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> and
-      <code>myBuffer.end()</code>
-
-      allow shapes to be drawn to the framebuffer.
-
-      <a href="/reference/p5.Framebuffer/begin/">myBuffer.begin()</a> begins
-      drawing to
-
-      the framebuffer and <code>myBuffer.end()</code> stops drawing to the
-      framebuffer.
-
-      Changes won't be visible until the framebuffer is displayed as an image
-
-      or texture.</p>
-    path: p5.Framebuffer/end
-  draw:
-    description: >
-      <p>Draws to the framebuffer by calling a function that contains drawing
-
-      instructions.</p>
-
-      <p>The parameter, <code>callback</code>, is a function with the drawing
-      instructions
-
-      for the framebuffer. For example, calling
-      <code>myBuffer.draw(myFunction)</code>
-
-      will call a function named <code>myFunction()</code> to draw to the
-      framebuffer.
-
-      Doing so has the same effect as the following:</p>
-
-      <pre><code class="language-js">myBuffer.begin();
-
-      myFunction();
-
-      myBuffer.end();
-
-      </code></pre>
-    path: p5.Framebuffer/draw
-  loadPixels:
-    description: >
-      <p>Loads the current value of each pixel in the framebuffer into its
-
-      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
-
-      <p><code>myBuffer.loadPixels()</code> must be called before reading from
-      or writing to
-
-      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>.</p>
-    path: p5.Framebuffer/loadPixels
-  get:
-    description: >
-      <p>Gets a pixel or a region of pixels from the framebuffer.</p>
-
-      <p><code>myBuffer.get()</code> is easy to use but it's not as fast as
-
-      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>. Use
-
-      <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a> to read
-      many pixel
-
-      values.</p>
-
-      <p>The version of <code>myBuffer.get()</code> with no parameters returns
-      the entire
-
-      framebuffer as a a <a href="/reference/p5/p5.Image">p5.Image</a>
-      object.</p>
-
-      <p>The version of <code>myBuffer.get()</code> with two parameters
-      interprets them as
-
-      coordinates. It returns an array with the <code>[R, G, B, A]</code> values
-      of the
-
-      pixel at the given point.</p>
-
-      <p>The version of <code>myBuffer.get()</code> with four parameters
-      interprets them as
-
-      coordinates and dimensions. It returns a subsection of the framebuffer as
-
-      a <a href="/reference/p5/p5.Image">p5.Image</a> object. The first two
-      parameters are
-
-      the coordinates for the upper-left corner of the subsection. The last two
-
-      parameters are the width and height of the subsection.</p>
-    path: p5.Framebuffer/get
-  updatePixels:
-    description: >
-      <p>Updates the framebuffer with the RGBA values in the
-
-      <a href="/reference/p5.Framebuffer/pixels/">pixels</a> array.</p>
-
-      <p><code>myBuffer.updatePixels()</code> only needs to be called after
-      changing values
-
-      in the <a href="/reference/p5.Framebuffer/pixels/">myBuffer.pixels</a>
-      array. Such
-
-      changes can be made directly after calling
-
-      <a
-      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>.</p>
-    path: p5.Framebuffer/updatePixels
-properties:
-  pixels:
-    description: >
-      <p>An array containing the color of each pixel in the framebuffer.</p>
-
-      <p><a
-      href="/reference/p5.Framebuffer/loadPixels/">myBuffer.loadPixels()</a>
-      must be
-
-      called before accessing the <code>myBuffer.pixels</code> array.
-
-      <a
-      href="/reference/p5.Framebuffer/updatePixels/">myBuffer.updatePixels()</a>
-
-      must be called after any changes are made.</p>
-
-      <p>Note: Updating pixels via this property is slower than drawing to the
-
-      framebuffer directly. Consider using a
-
-      <a href="/reference/p5/p5.Shader">p5.Shader</a> object instead of looping
-      over
-
-      <code>myBuffer.pixels</code>.</p>
-    path: p5.Framebuffer/pixels
-  color:
-    description: >
-      <p>An object that stores the framebuffer's color data.</p>
-
-      <p>Each framebuffer uses a
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
-      target="_blank">WebGLTexture</a>
-
-      object internally to store its color data. The <code>myBuffer.color</code>
-      property
-
-      makes it possible to pass this data directly to other functions. For
-
-      example, calling <code>texture(myBuffer.color)</code> or
-
-      <code>myShader.setUniform('colorTexture', myBuffer.color)</code>  may be
-      helpful for
-
-      advanced use cases.</p>
-
-      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
-
-      images and videos. It's easy to flip a framebuffer's y-coordinates as
-
-      needed when applying it as a texture. For example, calling
-
-      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
-      framebuffer.</p>
-    path: p5.Framebuffer/color
-  depth:
-    description: >
-      <p>An object that stores the framebuffer's depth data.</p>
-
-      <p>Each framebuffer uses a
-
-      <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture/"
-      target="_blank">WebGLTexture</a>
-
-      object internally to store its depth data. The <code>myBuffer.depth</code>
-      property
-
-      makes it possible to pass this data directly to other functions. For
-
-      example, calling <code>texture(myBuffer.depth)</code> or
-
-      <code>myShader.setUniform('depthTexture', myBuffer.depth)</code>  may be
-      helpful for
-
-      advanced use cases.</p>
-
-      <p>Note: By default, a framebuffer's y-coordinates are flipped compared to
-
-      images and videos. It's easy to flip a framebuffer's y-coordinates as
-
-      needed when applying it as a texture. For example, calling
-
-      <code>plane(myBuffer.width, -myBuffer.height)</code> will flip the
-      framebuffer.</p>
-    path: p5.Framebuffer/depth
-chainable: false
----
-
-
-# p5.Framebuffer
diff --git a/src/content/reference/en/p5 copy/p5.Geometry.mdx b/src/content/reference/en/p5 copy/p5.Geometry.mdx
deleted file mode 100644
index 0faa7daf7a..0000000000
--- a/src/content/reference/en/p5 copy/p5.Geometry.mdx	
+++ /dev/null
@@ -1,793 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Geometry.js#L13
-title: p5.Geometry
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/p5.Geometry.js
-description: >
-  <p>A class to describe a 3D shape.</p>
-
-  <p>Each <code>p5.Geometry</code> object represents a 3D shape as a set of
-  connected
-
-  points called <em>vertices</em>. All 3D shapes are made by connecting vertices
-  to
-
-  form triangles that are stitched together. Each triangular patch on the
-
-  geometry's surface is called a <em>face</em>. The geometry stores information
-
-  about its vertices and faces for use with effects such as lighting and
-
-  texture mapping.</p>
-
-  <p>The first parameter, <code>detailX</code>, is optional. If a number is
-  passed, as in
-
-  <code>new p5.Geometry(24)</code>, it sets the number of triangle subdivisions
-  to use
-
-  along the geometry's x-axis. By default, <code>detailX</code> is 1.</p>
-
-  <p>The second parameter, <code>detailY</code>, is also optional. If a number
-  is passed,
-
-  as in <code>new p5.Geometry(24, 16)</code>, it sets the number of triangle
-
-  subdivisions to use along the geometry's y-axis. By default,
-  <code>detailX</code> is
-
-  1.</p>
-
-  <p>The third parameter, <code>callback</code>, is also optional. If a function
-  is passed,
-
-  as in <code>new p5.Geometry(24, 16, createShape)</code>, it will be called
-  once to add
-
-  vertices to the new 3D shape.</p>
-line: 13
-isConstructor: true
-params:
-  - name: detailX
-    description: |
-      <p>number of vertices along the x-axis.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of vertices along the y-axis.</p>
-    type: Integer
-    optional: true
-  - name: callback
-    description: |
-      <p>function to call once the geometry is created.</p>
-    type: Function
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Geometry object.
-      myGeometry = new p5.Geometry();
-
-      // Create p5.Vector objects to position the vertices.
-      let v0 = createVector(-40, 0, 0);
-      let v1 = createVector(0, -40, 0);
-      let v2 = createVector(40, 0, 0);
-
-      // Add the vertices to the p5.Geometry object's vertices array.
-      myGeometry.vertices.push(v0, v1, v2);
-
-      describe('A white triangle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Geometry object using a callback function.
-      myGeometry = new p5.Geometry(1, 1, createShape);
-
-      describe('A white triangle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-
-    function createShape() {
-      // Create p5.Vector objects to position the vertices.
-      let v0 = createVector(-40, 0, 0);
-      let v1 = createVector(0, -40, 0);
-      let v2 = createVector(40, 0, 0);
-
-      // "this" refers to the p5.Geometry object being created.
-
-      // Add the vertices to the p5.Geometry object's vertices array.
-      this.vertices.push(v0, v1, v2);
-
-      // Add an array to list which vertices belong to the face.
-      // Vertices are listed in clockwise "winding" order from
-      // left to top to right.
-      this.faces.push([0, 1, 2]);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Geometry object using a callback function.
-      myGeometry = new p5.Geometry(1, 1, createShape);
-
-      describe('A white triangle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-
-    function createShape() {
-      // Create p5.Vector objects to position the vertices.
-      let v0 = createVector(-40, 0, 0);
-      let v1 = createVector(0, -40, 0);
-      let v2 = createVector(40, 0, 0);
-
-      // "this" refers to the p5.Geometry object being created.
-
-      // Add the vertices to the p5.Geometry object's vertices array.
-      this.vertices.push(v0, v1, v2);
-
-      // Add an array to list which vertices belong to the face.
-      // Vertices are listed in clockwise "winding" order from
-      // left to top to right.
-      this.faces.push([0, 1, 2]);
-
-      // Compute the surface normals to help with lighting.
-      this.computeNormals();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.
-    // https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/
-    // CC-BY-SA 4.0
-
-    let myGeometry;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the p5.Geometry object.
-      // Set detailX to 48 and detailY to 2.
-      // >>> try changing them.
-      myGeometry = new p5.Geometry(48, 2, createShape);
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the p5.Geometry object.
-      strokeWeight(0.2);
-
-      // Draw the p5.Geometry object.
-      model(myGeometry);
-    }
-
-    function createShape() {
-      // "this" refers to the p5.Geometry object being created.
-
-      // Define the Möbius strip with a few parameters.
-      let spread = 0.1;
-      let radius = 30;
-      let stripWidth = 15;
-      let xInterval = 4 * PI / this.detailX;
-      let yOffset = -stripWidth / 2;
-      let yInterval = stripWidth / this.detailY;
-
-      for (let j = 0; j <= this.detailY; j += 1) {
-        // Calculate the "vertical" point along the strip.
-        let v = yOffset + yInterval * j;
-
-        for (let i = 0; i <= this.detailX; i += 1) {
-          // Calculate the angle of rotation around the strip.
-          let u = i * xInterval;
-
-          // Calculate the coordinates of the vertex.
-          let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;
-          let y = (radius + v * cos(u / 2)) * sin(u);
-          if (u < TWO_PI) {
-            y += sin(u) * spread;
-          } else {
-            y -= sin(u) * spread;
-          }
-          let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;
-
-          // Create a p5.Vector object to position the vertex.
-          let vert = createVector(x, y, z);
-
-          // Add the vertex to the p5.Geometry object's vertices array.
-          this.vertices.push(vert);
-        }
-      }
-
-      // Compute the faces array.
-      this.computeFaces();
-
-      // Compute the surface normals to help with lighting.
-      this.computeNormals();
-    }
-    </code>
-    </div>
-methods:
-  calculateBoundingBox:
-    description: >
-      <p>Calculates the position and size of the smallest box that contains the
-      geometry.</p>
-
-      <p>A bounding box is the smallest rectangular prism that contains the
-      entire
-
-      geometry. It's defined by the box's minimum and maximum coordinates along
-
-      each axis, as well as the size (length) and offset (center).</p>
-
-      <p>Calling <code>myGeometry.calculateBoundingBox()</code> returns an
-      object with four
-
-      properties that describe the bounding box:</p>
-
-      <pre><code class="language-js">// Get myGeometry's bounding box.
-
-      let bbox = myGeometry.calculateBoundingBox();
-
-
-      // Print the bounding box to the console.
-
-      console.log(bbox);
-
-
-      // {
-
-      //  // The minimum coordinate along each axis.
-
-      //  min: { x: -1, y: -2, z: -3 },
-
-      //
-
-      //  // The maximum coordinate along each axis.
-
-      //  max: { x: 1, y: 2, z: 3},
-
-      //
-
-      //  // The size (length) along each axis.
-
-      //  size: { x: 2, y: 4, z: 6},
-
-      //
-
-      //  // The offset (center) along each axis.
-
-      //  offset: { x: 0, y: 0, z: 0}
-
-      // }
-
-      </code></pre>
-    path: p5.Geometry/calculateBoundingBox
-  clearColors:
-    description: >
-      <p>Removes the geometry’s internal colors.</p>
-
-      <p><code>p5.Geometry</code> objects can be created with "internal colors"
-      assigned to
-
-      vertices or the entire shape. When a geometry has internal colors,
-
-      <a href="/reference/p5/fill/">fill()</a> has no effect. Calling
-
-      <code>myGeometry.clearColors()</code> allows the
-
-      <a href="/reference/p5/fill/">fill()</a> function to apply color to the
-      geometry.</p>
-    path: p5.Geometry/clearColors
-  saveObj:
-    description: >
-      <p>The <code>saveObj()</code> function exports <code>p5.Geometry</code>
-      objects as
-
-      3D models in the Wavefront .obj file format.
-
-      This way, you can use the 3D shapes you create in p5.js in other software
-
-      for rendering, animation, 3D printing, or more.</p>
-
-      <p>The exported .obj file will include the faces and vertices of the
-      <code>p5.Geometry</code>,
-
-      as well as its texture coordinates and normals, if it has them.</p>
-    path: p5.Geometry/saveObj
-  saveStl:
-    description: >
-      <p>The <code>saveStl()</code> function exports <code>p5.Geometry</code>
-      objects as
-
-      3D models in the STL stereolithography file format.
-
-      This way, you can use the 3D shapes you create in p5.js in other software
-
-      for rendering, animation, 3D printing, or more.</p>
-
-      <p>The exported .stl file will include the faces, vertices, and normals of
-      the <code>p5.Geometry</code>.</p>
-
-      <p>By default, this method saves a text-based .stl file. Alternatively,
-      you can save a more compact
-
-      but less human-readable binary .stl file by passing <code>{ binary: true
-      }</code> as a second parameter.</p>
-    path: p5.Geometry/saveStl
-  flipU:
-    description: >
-      <p>Flips the geometry’s texture u-coordinates.</p>
-
-      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
-      the geometry
-
-      needs a way to map the points on its surface to the pixels in a
-      rectangular
-
-      image that's used as a texture. The geometry's vertex at coordinates
-
-      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
-      <code>(u, v)</code>.</p>
-
-      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
-      stores the
-
-      <code>(u, v)</code> coordinates for each vertex in the order it was added
-      to the
-
-      geometry. Calling <code>myGeometry.flipU()</code> flips a geometry's
-      u-coordinates
-
-      so that the texture appears mirrored horizontally.</p>
-
-      <p>For example, a plane's four vertices are added clockwise starting from
-      the
-
-      top-left corner. Here's how calling <code>myGeometry.flipU()</code> would
-      change a
-
-      plane's texture coordinates:</p>
-
-      <pre><code class="language-js">// Print the original texture coordinates.
-
-      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
-
-      console.log(myGeometry.uvs);
-
-
-      // Flip the u-coordinates.
-
-      myGeometry.flipU();
-
-
-      // Print the flipped texture coordinates.
-
-      // Output: [1, 0, 0, 0, 1, 1, 0, 1]
-
-      console.log(myGeometry.uvs);
-
-
-      // Notice the swaps:
-
-      // Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]
-
-      // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
-
-      </code></pre>
-    path: p5.Geometry/flipU
-  flipV:
-    description: >
-      <p>Flips the geometry’s texture v-coordinates.</p>
-
-      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
-      the geometry
-
-      needs a way to map the points on its surface to the pixels in a
-      rectangular
-
-      image that's used as a texture. The geometry's vertex at coordinates
-
-      <code>(x, y, z)</code> maps to the texture image's pixel at coordinates
-      <code>(u, v)</code>.</p>
-
-      <p>The <a href="/reference/p5.Geometry/uvs/">myGeometry.uvs</a> array
-      stores the
-
-      <code>(u, v)</code> coordinates for each vertex in the order it was added
-      to the
-
-      geometry. Calling <code>myGeometry.flipV()</code> flips a geometry's
-      v-coordinates
-
-      so that the texture appears mirrored vertically.</p>
-
-      <p>For example, a plane's four vertices are added clockwise starting from
-      the
-
-      top-left corner. Here's how calling <code>myGeometry.flipV()</code> would
-      change a
-
-      plane's texture coordinates:</p>
-
-      <pre><code class="language-js">// Print the original texture coordinates.
-
-      // Output: [0, 0, 1, 0, 0, 1, 1, 1]
-
-      console.log(myGeometry.uvs);
-
-
-      // Flip the v-coordinates.
-
-      myGeometry.flipV();
-
-
-      // Print the flipped texture coordinates.
-
-      // Output: [0, 1, 1, 1, 0, 0, 1, 0]
-
-      console.log(myGeometry.uvs);
-
-
-      // Notice the swaps:
-
-      // Left vertices: [0, 0] <--> [1, 0]
-
-      // Right vertices: [1, 0] <--> [1, 1]
-
-      </code></pre>
-    path: p5.Geometry/flipV
-  computeFaces:
-    description: >
-      <p>Computes the geometry's faces using its vertices.</p>
-
-      <p>All 3D shapes are made by connecting sets of points called
-      <em>vertices</em>. A
-
-      geometry's surface is formed by connecting vertices to form triangles that
-
-      are stitched together. Each triangular patch on the geometry's surface is
-
-      called a <em>face</em>. <code>myGeometry.computeFaces()</code> performs
-      the math needed to
-
-      define each face based on the distances between vertices.</p>
-
-      <p>The geometry's vertices are stored as <a
-      href="/reference/p5/p5.Vector">p5.Vector</a>
-
-      objects in the <a
-      href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a>
-
-      array. The geometry's first vertex is the
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
-      <code>myGeometry.vertices[0]</code>,
-
-      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
-      is
-
-      <code>myGeometry.vertices[2]</code>, and so on.</p>
-
-      <p>Calling <code>myGeometry.computeFaces()</code> fills the
-
-      <a href="/reference/p5.Geometry/faces/">myGeometry.faces</a> array with
-      three-element
-
-      arrays that list the vertices that form each face. For example, a geometry
-
-      made from a rectangle has two faces because a rectangle is made by joining
-
-      two triangles. <a
-      href="/reference/p5.Geometry/faces/">myGeometry.faces</a> for a
-
-      rectangle would be the two-dimensional array
-
-      <code>[[0, 1, 2], [2, 1, 3]]</code>. The first face,
-      <code>myGeometry.faces[0]</code>, is the
-
-      array <code>[0, 1, 2]</code> because it's formed by connecting
-
-      <code>myGeometry.vertices[0]</code>,
-      <code>myGeometry.vertices[1]</code>,and
-
-      <code>myGeometry.vertices[2]</code>. The second face,
-      <code>myGeometry.faces[1]</code>, is the
-
-      array <code>[2, 1, 3]</code> because it's formed by connecting
-
-      <code>myGeometry.vertices[2]</code>, <code>myGeometry.vertices[1]</code>,
-      and
-
-      <code>myGeometry.vertices[3]</code>.</p>
-
-      <p>Note: <code>myGeometry.computeFaces()</code> only works when geometries
-      have four or more vertices.</p>
-    path: p5.Geometry/computeFaces
-  computeNormals:
-    description: >
-      <p>Calculates the normal vector for each vertex on the geometry.</p>
-
-      <p>All 3D shapes are made by connecting sets of points called
-      <em>vertices</em>. A
-
-      geometry's surface is formed by connecting vertices to create triangles
-
-      that are stitched together. Each triangular patch on the geometry's
-
-      surface is called a <em>face</em>.
-      <code>myGeometry.computeNormals()</code> performs the
-
-      math needed to orient each face. Orientation is important for lighting
-
-      and other effects.</p>
-
-      <p>A face's orientation is defined by its <em>normal vector</em> which
-      points out
-
-      of the face and is normal (perpendicular) to the surface. Calling
-
-      <code>myGeometry.computeNormals()</code> first calculates each face's
-      normal vector.
-
-      Then it calculates the normal vector for each vertex by averaging the
-
-      normal vectors of the faces surrounding the vertex. The vertex normals
-
-      are stored as <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in
-      the
-
-      <a
-      href="/reference/p5.Geometry/vertexNormals/">myGeometry.vertexNormals</a>
-      array.</p>
-
-      <p>The first parameter, <code>shadingType</code>, is optional. Passing the
-      constant
-
-      <code>FLAT</code>, as in <code>myGeometry.computeNormals(FLAT)</code>,
-      provides neighboring
-
-      faces with their own copies of the vertices they share. Surfaces appear
-
-      tiled with flat shading. Passing the constant <code>SMOOTH</code>, as in
-
-      <code>myGeometry.computeNormals(SMOOTH)</code>, makes neighboring faces
-      reuse their
-
-      shared vertices. Surfaces appear smoother with smooth shading. By
-
-      default, <code>shadingType</code> is <code>FLAT</code>.</p>
-
-      <p>The second parameter, <code>options</code>, is also optional. If an
-      object with a
-
-      <code>roundToPrecision</code> property is passed, as in
-
-      <code>myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })</code>,
-      it sets the
-
-      number of decimal places to use for calculations. By default,
-
-      <code>roundToPrecision</code> uses 3 decimal places.</p>
-    path: p5.Geometry/computeNormals
-  normalize:
-    description: >
-      <p>Transforms the geometry's vertices to fit snugly within a 100×100×100
-      box
-
-      centered at the origin.</p>
-
-      <p>Calling <code>myGeometry.normalize()</code> translates the geometry's
-      vertices so that
-
-      they're centered at the origin <code>(0, 0, 0)</code>. Then it scales the
-      vertices so
-
-      that they fill a 100×100×100 box. As a result, small geometries will grow
-
-      and large geometries will shrink.</p>
-
-      <p>Note: <code>myGeometry.normalize()</code> only works when called in the
-
-      <a href="/reference/p5/setup/">setup()</a> function.</p>
-    path: p5.Geometry/normalize
-properties:
-  vertices:
-    description: >
-      <p>An array with the geometry's vertices.</p>
-
-      <p>The geometry's vertices are stored as
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
-      <code>myGeometry.vertices</code>
-
-      array. The geometry's first vertex is the
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object at
-      <code>myGeometry.vertices[0]</code>,
-
-      its second vertex is <code>myGeometry.vertices[1]</code>, its third vertex
-      is
-
-      <code>myGeometry.vertices[2]</code>, and so on.</p>
-    path: p5.Geometry/vertices
-  vertexNormals:
-    description: >
-      <p>An array with the vectors that are normal to the geometry's
-      vertices.</p>
-
-      <p>A face's orientation is defined by its <em>normal vector</em> which
-      points out
-
-      of the face and is normal (perpendicular) to the surface. Calling
-
-      <code>myGeometry.computeNormals()</code> first calculates each face's
-      normal
-
-      vector. Then it calculates the normal vector for each vertex by
-
-      averaging the normal vectors of the faces surrounding the vertex. The
-
-      vertex normals are stored as <a
-      href="/reference/p5/p5.Vector">p5.Vector</a>
-
-      objects in the <code>myGeometry.vertexNormals</code> array.</p>
-    path: p5.Geometry/vertexNormals
-  faces:
-    description: >
-      <p>An array that lists which of the geometry's vertices form each of its
-
-      faces.</p>
-
-      <p>All 3D shapes are made by connecting sets of points called
-      <em>vertices</em>. A
-
-      geometry's surface is formed by connecting vertices to form triangles
-
-      that are stitched together. Each triangular patch on the geometry's
-
-      surface is called a <em>face</em>.</p>
-
-      <p>The geometry's vertices are stored as
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> objects in the
-
-      <a href="/reference/p5.Geometry/vertices/">myGeometry.vertices</a> array.
-      The
-
-      geometry's first vertex is the <a
-      href="/reference/p5/p5.Vector">p5.Vector</a>
-
-      object at <code>myGeometry.vertices[0]</code>, its second vertex is
-
-      <code>myGeometry.vertices[1]</code>, its third vertex is
-      <code>myGeometry.vertices[2]</code>,
-
-      and so on.</p>
-
-      <p>For example, a geometry made from a rectangle has two faces because a
-
-      rectangle is made by joining two triangles. <code>myGeometry.faces</code>
-      for a
-
-      rectangle would be the two-dimensional array <code>[[0, 1, 2], [2, 1,
-      3]]</code>.
-
-      The first face, <code>myGeometry.faces[0]</code>, is the array <code>[0,
-      1, 2]</code> because
-
-      it's formed by connecting <code>myGeometry.vertices[0]</code>,
-
-      <code>myGeometry.vertices[1]</code>,and
-      <code>myGeometry.vertices[2]</code>. The second face,
-
-      <code>myGeometry.faces[1]</code>, is the array <code>[2, 1, 3]</code>
-      because it's formed by
-
-      connecting <code>myGeometry.vertices[2]</code>,
-      <code>myGeometry.vertices[1]</code>,and
-
-      <code>myGeometry.vertices[3]</code>.</p>
-    path: p5.Geometry/faces
-  uvs:
-    description: >
-      <p>An array that lists the texture coordinates for each of the geometry's
-
-      vertices.</p>
-
-      <p>In order for <a href="/reference/p5/texture/">texture()</a> to work,
-      the geometry
-
-      needs a way to map the points on its surface to the pixels in a
-
-      rectangular image that's used as a texture. The geometry's vertex at
-
-      coordinates <code>(x, y, z)</code> maps to the texture image's pixel at
-      coordinates
-
-      <code>(u, v)</code>.</p>
-
-      <p>The <code>myGeometry.uvs</code> array stores the <code>(u, v)</code>
-      coordinates for each
-
-      vertex in the order it was added to the geometry. For example, the
-
-      first vertex, <code>myGeometry.vertices[0]</code>, has its <code>(u,
-      v)</code> coordinates
-
-      stored at <code>myGeometry.uvs[0]</code> and
-      <code>myGeometry.uvs[1]</code>.</p>
-    path: p5.Geometry/uvs
-chainable: false
----
-
-
-# p5.Geometry
diff --git a/src/content/reference/en/p5 copy/p5.Graphics.mdx b/src/content/reference/en/p5 copy/p5.Graphics.mdx
deleted file mode 100644
index d0b7c3aff8..0000000000
--- a/src/content/reference/en/p5 copy/p5.Graphics.mdx	
+++ /dev/null
@@ -1,261 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Graphics.js#L10
-title: p5.Graphics
-module: Rendering
-submodule: Rendering
-file: src/core/p5.Graphics.js
-description: >
-  <p>A class to describe a drawing surface that's separate from the main
-  canvas.</p>
-
-  <p>Each <code>p5.Graphics</code> object provides a dedicated drawing surface
-  called a
-
-  <em>graphics buffer</em>. Graphics buffers are helpful when drawing should
-  happen
-
-  offscreen. For example, separate scenes can be drawn offscreen and
-
-  displayed only when needed.</p>
-
-  <p><code>p5.Graphics</code> objects have nearly all the drawing features of
-  the main
-
-  canvas. For example, calling the method <code>myGraphics.circle(50, 50,
-  20)</code>
-
-  draws to the graphics buffer. The resulting image can be displayed on the
-
-  main canvas by passing the <code>p5.Graphics</code> object to the
-
-  <a href="/reference/p5/image/">image()</a> function, as in
-  <code>image(myGraphics, 0, 0)</code>.</p>
-
-  <p>Note: <a href="/reference/p5/createGraphics/">createGraphics()</a> is the
-  recommended
-
-  way to create an instance of this class.</p>
-line: 10
-isConstructor: true
-params:
-  - name: width
-    description: |
-      <p>width of the graphics buffer in pixels.</p>
-    type: Number
-  - name: height
-    description: |
-      <p>height of the graphics buffer in pixels.</p>
-    type: Number
-  - name: renderer
-    description: |
-      <p>renderer to use, either P2D or WEBGL.</p>
-    type: Constant
-  - name: pInst
-    description: |
-      <p>sketch instance.</p>
-    type: P5
-    optional: true
-  - name: canvas
-    description: |
-      <p>existing <code>&lt;canvas&gt;</code> element to use.</p>
-    type: HTMLCanvasElement
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Graphics object.
-      pg = createGraphics(50, 50);
-
-      // Draw to the p5.Graphics object.
-      pg.background(100);
-      pg.circle(25, 25, 20);
-
-      describe('A dark gray square with a white circle at its center drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Display the p5.Graphics object.
-      image(pg, 25, 25);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the canvas to display the graphics buffer.
-
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Graphics object.
-      pg = createGraphics(50, 50);
-
-      describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the background color.
-      let bg = frameCount % 255;
-
-      // Draw to the p5.Graphics object.
-      pg.background(bg);
-
-      // Display the p5.Graphics object while
-      // the user presses the mouse.
-      if (mouseIsPressed === true) {
-        image(pg, 25, 25);
-      }
-    }
-    </code>
-    </div>
-methods:
-  reset:
-    description: >
-      <p>Resets the graphics buffer's transformations and lighting.</p>
-
-      <p>By default, the main canvas resets certain transformation and lighting
-
-      values each time <a href="/reference/p5/draw/">draw()</a> executes.
-      <code>p5.Graphics</code>
-
-      objects must reset these values manually by calling
-      <code>myGraphics.reset()</code>.</p>
-    path: p5.Graphics/reset
-  remove:
-    description: >
-      <p>Removes the graphics buffer from the web page.</p>
-
-      <p>Calling <code>myGraphics.remove()</code> removes the graphics buffer's
-
-      <code><canvas></code> element from the web page. The graphics buffer also
-      uses
-
-      a bit of memory on the CPU that can be freed like so:</p>
-
-      <pre><code class="language-js">// Remove the graphics buffer from the web
-      page.
-
-      myGraphics.remove();
-
-
-      // Delete the graphics buffer from CPU memory.
-
-      myGraphics = undefined;
-
-      </code></pre>
-
-      <p>Note: All variables that reference the graphics buffer must be assigned
-
-      the value <code>undefined</code> to delete the graphics buffer from CPU
-      memory. If any
-
-      variable still refers to the graphics buffer, then it won't be garbage
-
-      collected.</p>
-    path: p5.Graphics/remove
-  createFramebuffer:
-    description: >
-      <p>Creates a new <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
-      object with
-
-      the same WebGL context as the graphics buffer.</p>
-
-      <p><a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects are
-      separate drawing
-
-      surfaces that can be used as textures in WebGL mode. They're similar to
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> objects and generally
-      run much
-
-      faster when used as textures. Creating a
-
-      <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object in the
-      same context
-
-      as the graphics buffer makes this speedup possible.</p>
-
-      <p>The parameter, <code>options</code>, is optional. An object can be
-      passed to configure
-
-      the <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. The
-      available
-
-      properties are:</p>
-
-      <ul>
-
-      <li><code>format</code>: data format of the texture, either
-      <code>UNSIGNED_BYTE</code>, <code>FLOAT</code>, or
-      <code>HALF_FLOAT</code>. Default is <code>UNSIGNED_BYTE</code>.</li>
-
-      <li><code>channels</code>: whether to store <code>RGB</code> or
-      <code>RGBA</code> color channels. Default is to match the graphics buffer
-      which is <code>RGBA</code>.</li>
-
-      <li><code>depth</code>: whether to include a depth buffer. Default is
-      <code>true</code>.</li>
-
-      <li><code>depthFormat</code>: data format of depth information, either
-      <code>UNSIGNED_INT</code> or <code>FLOAT</code>. Default is
-      <code>FLOAT</code>.</li>
-
-      <li><code>stencil</code>: whether to include a stencil buffer for masking.
-      <code>depth</code> must be <code>true</code> for this feature to work.
-      Defaults to the value of <code>depth</code> which is
-      <code>true</code>.</li>
-
-      <li><code>antialias</code>: whether to perform anti-aliasing. If set to
-      <code>true</code>, as in <code>{ antialias: true }</code>, 2 samples will
-      be used by default. The number of samples can also be set, as in <code>{
-      antialias: 4 }</code>. Default is to match <a
-      href="/reference/p5/setAttributes/">setAttributes()</a> which is
-      <code>false</code> (<code>true</code> in Safari).</li>
-
-      <li><code>width</code>: width of the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
-      to always match the graphics buffer width.</li>
-
-      <li><code>height</code>: height of the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
-      to always match the graphics buffer height.</li>
-
-      <li><code>density</code>: pixel density of the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Default is
-      to always match the graphics buffer pixel density.</li>
-
-      <li><code>textureFiltering</code>: how to read values from the <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> object. Either
-      <code>LINEAR</code> (nearby pixels will be interpolated) or
-      <code>NEAREST</code> (no interpolation). Generally, use
-      <code>LINEAR</code> when using the texture as an image and
-      <code>NEAREST</code> if reading the texture as data. Default is
-      <code>LINEAR</code>.</li>
-
-      </ul>
-
-      <p>If the <code>width</code>, <code>height</code>, or <code>density</code>
-      attributes are set, they won't
-
-      automatically match the graphics buffer and must be changed manually.</p>
-    path: p5.Graphics/createFramebuffer
-chainable: false
----
-
-
-# p5.Graphics
diff --git a/src/content/reference/en/p5 copy/p5.Image.mdx b/src/content/reference/en/p5 copy/p5.Image.mdx
deleted file mode 100644
index 63e2a668fe..0000000000
--- a/src/content/reference/en/p5 copy/p5.Image.mdx	
+++ /dev/null
@@ -1,519 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/p5.Image.js#L21
-title: p5.Image
-module: Image
-submodule: Image
-file: src/image/p5.Image.js
-description: >
-  <p>A class to describe an image.</p>
-
-  <p>Images are rectangular grids of pixels that can be displayed and
-  modified.</p>
-
-  <p>Existing images can be loaded by calling
-
-  <a href="/reference/p5/loadImage/">loadImage()</a>. Blank images can be
-  created by
-
-  calling <a href="/reference/p5/createImage/">createImage()</a>.
-  <code>p5.Image</code> objects
-
-  have methods for common tasks such as applying filters and modifying
-
-  pixel values.</p>
-line: 21
-isConstructor: true
-params:
-  - name: width
-    description: ''
-    type: Number
-  - name: height
-    description: ''
-    type: Number
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      describe('An image of a brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Apply the GRAY filter.
-      img.filter(GRAY);
-
-      // Display the image.
-      image(img, 0, 0);
-
-      describe('A grayscale image of a brick wall.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Image object.
-      let img = createImage(66, 66);
-
-      // Load the image's pixels.
-      img.loadPixels();
-
-      // Set the pixels to black.
-      for (let x = 0; x < img.width; x += 1) {
-        for (let y = 0; y < img.height; y += 1) {
-          img.set(x, y, 0);
-        }
-      }
-
-      // Update the image.
-      img.updatePixels();
-
-      // Display the image.
-      image(img, 17, 17);
-
-      describe('A black square drawn in the middle of a gray square.');
-    }
-    </code>
-    </div>
-methods:
-  pixelDensity:
-    description: |
-      <p>Gets or sets the pixel density for high pixel density displays.</p>
-      <p>By default, the density will be set to 1.</p>
-      <p>Call this method with no arguments to get the default density, or pass
-      in a number to set the density. If a non-positive number is provided,
-      it defaults to 1.</p>
-    path: p5.Image/pixelDensity
-  loadPixels:
-    description: >
-      <p>Loads the current value of each pixel in the image into the
-      <code>img.pixels</code>
-
-      array.</p>
-
-      <p><code>img.loadPixels()</code> must be called before reading or
-      modifying pixel
-
-      values.</p>
-    path: p5.Image/loadPixels
-  updatePixels:
-    description: >
-      <p>Updates the canvas with the RGBA values in the
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a> array.</p>
-
-      <p><code>img.updatePixels()</code> only needs to be called after changing
-      values in
-
-      the <a href="/reference/p5.Image/pixels/">img.pixels</a> array. Such
-      changes can be
-
-      made directly after calling
-
-      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a> or by
-      calling
-
-      <a href="/reference/p5.Image/set/">img.set()</a>.</p>
-
-      <p>The optional parameters <code>x</code>, <code>y</code>,
-      <code>width</code>, and <code>height</code> define a
-
-      subsection of the image to update. Doing so can improve performance in
-
-      some cases.</p>
-
-      <p>If the image was loaded from a GIF, then calling
-      <code>img.updatePixels()</code>
-
-      will update the pixels in current frame.</p>
-    path: p5.Image/updatePixels
-  get:
-    description: >
-      <p>Gets a pixel or a region of pixels from the image.</p>
-
-      <p><code>img.get()</code> is easy to use but it's not as fast as
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a> to read many pixel
-      values.</p>
-
-      <p>The version of <code>img.get()</code> with no parameters returns the
-      entire image.</p>
-
-      <p>The version of <code>img.get()</code> with two parameters, as in
-      <code>img.get(10, 20)</code>,
-
-      interprets them as coordinates. It returns an array with the
-
-      <code>[R, G, B, A]</code> values of the pixel at the given point.</p>
-
-      <p>The version of <code>img.get()</code> with four parameters, as in
-
-      <code>img,get(10, 20, 50, 90)</code>, interprets them as
-
-      coordinates and dimensions. The first two parameters are the coordinates
-
-      of the upper-left corner of the subsection. The last two parameters are
-
-      the width and height of the subsection. It returns a subsection of the
-
-      canvas in a new <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-      <p>Use <code>img.get()</code> instead of <a
-      href="/reference/p5/get/">get()</a> to work directly
-
-      with images.</p>
-    path: p5.Image/get
-  set:
-    description: >
-      <p>Sets the color of one or more pixels within an image.</p>
-
-      <p><code>img.set()</code> is easy to use but it's not as fast as
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a>. Use
-
-      <a href="/reference/p5.Image/pixels/">img.pixels</a> to set many pixel
-      values.</p>
-
-      <p><code>img.set()</code> interprets the first two parameters as x- and
-      y-coordinates. It
-
-      interprets the last parameter as a grayscale value, a <code>[R, G, B,
-      A]</code> pixel
-
-      array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or another
-
-      <a href="/reference/p5/p5.Image">p5.Image</a> object.</p>
-
-      <p><a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> must
-      be called
-
-      after using <code>img.set()</code> for changes to appear.</p>
-    path: p5.Image/set
-  resize:
-    description: >
-      <p>Resizes the image to a given width and height.</p>
-
-      <p>The image's original aspect ratio can be kept by passing 0 for either
-
-      <code>width</code> or <code>height</code>. For example, calling
-      <code>img.resize(50, 0)</code> on an image
-
-      that was 500 × 300 pixels will resize it to 50 × 30 pixels.</p>
-    path: p5.Image/resize
-  copy:
-    description: >
-      <p>Copies pixels from a source image to this image.</p>
-
-      <p>The first parameter, <code>srcImage</code>, is an optional
-
-      <a href="/reference/p5/p5.Image">p5.Image</a> object to copy. If a source
-      image isn't
-
-      passed, then <code>img.copy()</code> can copy a region of this image to
-      another
-
-      region.</p>
-
-      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-      <code>sw</code>, and <code>sh</code> determine the region
-
-      to copy from the source image. <code>(sx, sy)</code> is the top-left
-      corner of the
-
-      region. <code>sw</code> and <code>sh</code> are the region's width and
-      height.</p>
-
-      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-      <code>dw</code>, and <code>dh</code> determine the region
-
-      of this image to copy into. <code>(dx, dy)</code> is the top-left corner
-      of the
-
-      region. <code>dw</code> and <code>dh</code> are the region's width and
-      height.</p>
-
-      <p>Calling <code>img.copy()</code> will scale pixels from the source
-      region if it isn't
-
-      the same size as the destination region.</p>
-    path: p5.Image/copy
-  mask:
-    description: >
-      <p>Masks part of the image with another.</p>
-
-      <p><code>img.mask()</code> uses another <a
-      href="/reference/p5/p5.Image">p5.Image</a> object's
-
-      alpha channel as the alpha channel for this image. Masks are cumulative
-
-      and can't be removed once applied. If the mask has a different
-
-      pixel density from this image, the mask will be scaled.</p>
-    path: p5.Image/mask
-  filter:
-    description: >
-      <p>Applies an image filter to the image.</p>
-
-      <p>The preset options are:</p>
-
-      <p><code>INVERT</code>
-
-      Inverts the colors in the image. No parameter is used.</p>
-
-      <p><code>GRAY</code>
-
-      Converts the image to grayscale. No parameter is used.</p>
-
-      <p><code>THRESHOLD</code>
-
-      Converts the image to black and white. Pixels with a grayscale value
-
-      above a given threshold are converted to white. The rest are converted to
-
-      black. The threshold must be between 0.0 (black) and 1.0 (white). If no
-
-      value is specified, 0.5 is used.</p>
-
-      <p><code>OPAQUE</code>
-
-      Sets the alpha channel to be entirely opaque. No parameter is used.</p>
-
-      <p><code>POSTERIZE</code>
-
-      Limits the number of colors in the image. Each color channel is limited to
-
-      the number of colors specified. Values between 2 and 255 are valid, but
-
-      results are most noticeable with lower values. The default value is 4.</p>
-
-      <p><code>BLUR</code>
-
-      Blurs the image. The level of blurring is specified by a blur radius.
-      Larger
-
-      values increase the blur. The default value is 4. A gaussian blur is used
-
-      in <code>P2D</code> mode. A box blur is used in <code>WEBGL</code>
-      mode.</p>
-
-      <p><code>ERODE</code>
-
-      Reduces the light areas. No parameter is used.</p>
-
-      <p><code>DILATE</code>
-
-      Increases the light areas. No parameter is used.</p>
-    path: p5.Image/filter
-  blend:
-    description: >
-      <p>Copies a region of pixels from another image into this one.</p>
-
-      <p>The first parameter, <code>srcImage</code>, is the
-
-      <a href="/reference/p5/p5.Image">p5.Image</a> object to blend.</p>
-
-      <p>The next four parameters, <code>sx</code>, <code>sy</code>,
-      <code>sw</code>, and <code>sh</code> determine the region
-
-      to blend from the source image. <code>(sx, sy)</code> is the top-left
-      corner of the
-
-      region. <code>sw</code> and <code>sh</code> are the regions width and
-      height.</p>
-
-      <p>The next four parameters, <code>dx</code>, <code>dy</code>,
-      <code>dw</code>, and <code>dh</code> determine the region
-
-      of the canvas to blend into. <code>(dx, dy)</code> is the top-left corner
-      of the
-
-      region. <code>dw</code> and <code>dh</code> are the regions width and
-      height.</p>
-
-      <p>The tenth parameter, <code>blendMode</code>, sets the effect used to
-      blend the images'
-
-      colors. The options are <code>BLEND</code>, <code>DARKEST</code>,
-      <code>LIGHTEST</code>, <code>DIFFERENCE</code>,
-
-      <code>MULTIPLY</code>, <code>EXCLUSION</code>, <code>SCREEN</code>,
-      <code>REPLACE</code>, <code>OVERLAY</code>, <code>HARD_LIGHT</code>,
-
-      <code>SOFT_LIGHT</code>, <code>DODGE</code>, <code>BURN</code>,
-      <code>ADD</code>, or <code>NORMAL</code>.</p>
-    path: p5.Image/blend
-  save:
-    description: >
-      <p>Saves the image to a file.</p>
-
-      <p>By default, <code>img.save()</code> saves the image as a PNG image
-      called
-
-      <code>untitled.png</code>.</p>
-
-      <p>The first parameter, <code>filename</code>, is optional. It's a string
-      that sets the
-
-      file's name. If a file extension is included, as in
-
-      <code>img.save('drawing.png')</code>, then the image will be saved using
-      that
-
-      format.</p>
-
-      <p>The second parameter, <code>extension</code>, is also optional. It sets
-      the files format.
-
-      Either <code>'png'</code> or <code>'jpg'</code> can be used. For example,
-      <code>img.save('drawing', 'jpg')</code>
-
-      saves the canvas to a file called <code>drawing.jpg</code>.</p>
-
-      <p>Note: The browser will either save the file immediately or prompt the
-      user
-
-      with a dialogue window.</p>
-
-      <p>The image will only be downloaded as an animated GIF if it was loaded
-
-      from a GIF file. See <a href="/reference/p5/saveGif/">saveGif()</a> to
-      create new
-
-      GIFs.</p>
-    path: p5.Image/save
-  reset:
-    description: |
-      <p>Restarts an animated GIF at its first frame.</p>
-    path: p5.Image/reset
-  getCurrentFrame:
-    description: |
-      <p>Gets the index of the current frame in an animated GIF.</p>
-    path: p5.Image/getCurrentFrame
-  setFrame:
-    description: |
-      <p>Sets the current frame in an animated GIF.</p>
-    path: p5.Image/setFrame
-  numFrames:
-    description: |
-      <p>Returns the number of frames in an animated GIF.</p>
-    path: p5.Image/numFrames
-  play:
-    description: |
-      <p>Plays an animated GIF that was paused with
-      <a href="/reference/p5.Image/pause/">img.pause()</a>.</p>
-    path: p5.Image/play
-  pause:
-    description: |
-      <p>Pauses an animated GIF.</p>
-      <p>The GIF can be resumed by calling
-      <a href="/reference/p5.Image/play/">img.play()</a>.</p>
-    path: p5.Image/pause
-  delay:
-    description: >
-      <p>Changes the delay between frames in an animated GIF.</p>
-
-      <p>The first parameter, <code>delay</code>, is the length of the delay in
-      milliseconds.</p>
-
-      <p>The second parameter, <code>index</code>, is optional. If provided,
-      only the frame
-
-      at <code>index</code> will have its delay modified. All other frames will
-      keep
-
-      their default delay.</p>
-    path: p5.Image/delay
-properties:
-  width:
-    description: |
-      <p>The image's width in pixels.</p>
-    path: p5.Image/width
-  height:
-    description: |
-      <p>The image's height in pixels.</p>
-    path: p5.Image/height
-  pixels:
-    description: >
-      <p>An array containing the color of each pixel in the image.</p>
-
-      <p>Colors are stored as numbers representing red, green, blue, and alpha
-
-      (RGBA) values. <code>img.pixels</code> is a one-dimensional array for
-      performance
-
-      reasons.</p>
-
-      <p>Each pixel occupies four elements in the pixels array, one for each
-
-      RGBA value. For example, the pixel at coordinates (0, 0) stores its
-
-      RGBA values at <code>img.pixels[0]</code>, <code>img.pixels[1]</code>,
-      <code>img.pixels[2]</code>,
-
-      and <code>img.pixels[3]</code>, respectively. The next pixel at
-      coordinates (1, 0)
-
-      stores its RGBA values at <code>img.pixels[4]</code>,
-      <code>img.pixels[5]</code>,
-
-      <code>img.pixels[6]</code>, and <code>img.pixels[7]</code>. And so on. The
-      <code>img.pixels</code> array
-
-      for a 100×100 <a href="/reference/p5/p5.Image">p5.Image</a> object has
-
-      100 × 100 × 4 = 40,000 elements.</p>
-
-      <p>Accessing the RGBA values for a pixel in the image requires a little
-
-      math as shown in the examples below. The
-
-      <a href="/reference/p5.Image/loadPixels/">img.loadPixels()</a>
-
-      method must be called before accessing the <code>img.pixels</code> array.
-      The
-
-      <a href="/reference/p5.Image/updatePixels/">img.updatePixels()</a> method
-      must be
-
-      called after any changes are made.</p>
-    path: p5.Image/pixels
-chainable: false
----
-
-
-# p5.Image
diff --git a/src/content/reference/en/p5 copy/p5.MediaElement.mdx b/src/content/reference/en/p5 copy/p5.MediaElement.mdx
deleted file mode 100644
index ee05412502..0000000000
--- a/src/content/reference/en/p5 copy/p5.MediaElement.mdx	
+++ /dev/null
@@ -1,258 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L4099
-title: p5.MediaElement
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>A class to handle audio and video.</p>
-
-  <p><code>p5.MediaElement</code> extends <a
-  href="/reference/p5/p5.Element">p5.Element</a> with
-
-  methods to handle audio and video. <code>p5.MediaElement</code> objects are
-  created by
-
-  calling <a href="/reference/p5/createVideo/">createVideo</a>,
-
-  <a href="/reference/p5/createAudio/">createAudio</a>, and
-
-  <a href="/reference/p5/createCapture/">createCapture</a>.</p>
-line: 4099
-isConstructor: true
-params:
-  - name: elt
-    description: |
-      <p>DOM node that is wrapped</p>
-    type: String
-example:
-  - |-
-
-    <div class='notest'>
-    <code>
-    let capture;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.MediaElement using createCapture().
-      capture = createCapture(VIDEO);
-      capture.hide();
-
-      describe('A webcam feed with inverted colors.');
-    }
-
-    function draw() {
-      // Display the video stream and invert the colors.
-      image(capture, 0, 0, width, width * capture.height / capture.width);
-      filter(INVERT);
-    }
-    </code>
-    </div>
-methods:
-  play:
-    description: |
-      <p>Plays audio or video from a media element.</p>
-    path: p5.MediaElement/play
-  stop:
-    description: >
-      <p>Stops a media element and sets its current time to 0.</p>
-
-      <p>Calling <code>media.play()</code> will restart playing audio/video from
-      the beginning.</p>
-    path: p5.MediaElement/stop
-  pause:
-    description: >
-      <p>Pauses a media element.</p>
-
-      <p>Calling <code>media.play()</code> will resume playing audio/video from
-      the moment it paused.</p>
-    path: p5.MediaElement/pause
-  loop:
-    description: |
-      <p>Plays the audio/video repeatedly in a loop.</p>
-    path: p5.MediaElement/loop
-  noLoop:
-    description: |
-      <p>Stops the audio/video from playing in a loop.</p>
-      <p>The media will stop when it finishes playing.</p>
-    path: p5.MediaElement/noLoop
-  autoplay:
-    description: >
-      <p>Sets the audio/video to play once it's loaded.</p>
-
-      <p>The parameter, <code>shouldAutoplay</code>, is optional. Calling
-
-      <code>media.autoplay()</code> without an argument causes the media to play
-
-      automatically. If <code>true</code> is passed, as in
-      <code>media.autoplay(true)</code>, the
-
-      media will automatically play. If <code>false</code> is passed, as in
-
-      <code>media.autoPlay(false)</code>, it won't play automatically.</p>
-    path: p5.MediaElement/autoplay
-  volume:
-    description: >
-      <p>Sets the audio/video volume.</p>
-
-      <p>Calling <code>media.volume()</code> without an argument returns the
-      current volume
-
-      as a number in the range 0 (off) to 1 (maximum).</p>
-
-      <p>The parameter, <code>val</code>, is optional. It's a number that sets
-      the volume
-
-      from 0 (off) to 1 (maximum). For example, calling
-      <code>media.volume(0.5)</code>
-
-      sets the volume to half of its maximum.</p>
-    path: p5.MediaElement/volume
-  speed:
-    description: >
-      <p>Sets the audio/video playback speed.</p>
-
-      <p>The parameter, <code>val</code>, is optional. It's a number that sets
-      the playback
-
-      speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
-
-      plays it at double speed, and so on. -1 plays the media at normal speed
-
-      in reverse.</p>
-
-      <p>Calling <code>media.speed()</code> returns the current speed as a
-      number.</p>
-
-      <p>Note: Not all browsers support backward playback. Even if they do,
-
-      playback might not be smooth.</p>
-    path: p5.MediaElement/speed
-  time:
-    description: >
-      <p>Sets the media element's playback time.</p>
-
-      <p>The parameter, <code>time</code>, is optional. It's a number that
-      specifies the
-
-      time, in seconds, to jump to when playback begins.</p>
-
-      <p>Calling <code>media.time()</code> without an argument returns the
-      number of seconds
-
-      the audio/video has played.</p>
-
-      <p>Note: Time resets to 0 when looping media restarts.</p>
-    path: p5.MediaElement/time
-  duration:
-    description: |
-      <p>Returns the audio/video's duration in seconds.</p>
-    path: p5.MediaElement/duration
-  onended:
-    description: >
-      <p>Calls a function when the audio/video reaches the end of its
-      playback.</p>
-
-      <p>The element is passed as an argument to the callback function.</p>
-
-      <p>Note: The function won't be called if the media is looping.</p>
-    path: p5.MediaElement/onended
-  connect:
-    description: >
-      <p>Sends the element's audio to an output.</p>
-
-      <p>The parameter, <code>audioNode</code>, can be an <code>AudioNode</code>
-      or an object from the
-
-      <code>p5.sound</code> library.</p>
-
-      <p>If no element is provided, as in <code>myElement.connect()</code>, the
-      element
-
-      connects to the main output. All connections are removed by the
-
-      <code>.disconnect()</code> method.</p>
-
-      <p>Note: This method is meant to be used with the p5.sound.js addon
-      library.</p>
-    path: p5.MediaElement/connect
-  disconnect:
-    description: >
-      <p>Disconnect all Web Audio routing, including to the main output.</p>
-
-      <p>This is useful if you want to re-route the output through audio
-      effects,
-
-      for example.</p>
-    path: p5.MediaElement/disconnect
-  showControls:
-    description: >
-      <p>Show the default
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
-      target="_blank">HTMLMediaElement</a>
-
-      controls.</p>
-
-      <p>Note: The controls vary between web browsers.</p>
-    path: p5.MediaElement/showControls
-  hideControls:
-    description: >
-      <p>Hide the default
-
-      <a
-      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/"
-      target="_blank">HTMLMediaElement</a>
-
-      controls.</p>
-    path: p5.MediaElement/hideControls
-  addCue:
-    description: >
-      <p>Schedules a function to call when the audio/video reaches a specific
-      time
-
-      during its playback.</p>
-
-      <p>The first parameter, <code>time</code>, is the time, in seconds, when
-      the function
-
-      should run. This value is passed to <code>callback</code> as its first
-      argument.</p>
-
-      <p>The second parameter, <code>callback</code>, is the function to call at
-      the specified
-
-      cue time.</p>
-
-      <p>The third parameter, <code>value</code>, is optional and can be any
-      type of value.
-
-      <code>value</code> is passed to <code>callback</code>.</p>
-
-      <p>Calling <code>media.addCue()</code> returns an ID as a string. This is
-      useful for
-
-      removing the cue later.</p>
-    path: p5.MediaElement/addCue
-  removeCue:
-    description: |
-      <p>Removes a callback based on its ID.</p>
-    path: p5.MediaElement/removeCue
-  clearCues:
-    description: |
-      <p>Removes all functions scheduled with <code>media.addCue()</code>.</p>
-    path: p5.MediaElement/clearCues
-properties:
-  src:
-    description: |
-      <p>Path to the media element's source as a string.</p>
-    path: p5.MediaElement/src
-chainable: false
----
-
-
-# p5.MediaElement
diff --git a/src/content/reference/en/p5 copy/p5.NumberDict.mdx b/src/content/reference/en/p5 copy/p5.NumberDict.mdx
deleted file mode 100644
index d385eb1468..0000000000
--- a/src/content/reference/en/p5 copy/p5.NumberDict.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L415
-title: p5.NumberDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>A simple Dictionary class for Numbers.</p>
-line: 415
-isConstructor: true
-methods:
-  add:
-    description: |
-      <p>Add the given number to the value currently stored at the given key.
-      The sum then replaces the value previously stored in the Dictionary.</p>
-    path: p5.NumberDict/add
-  sub:
-    description: >
-      <p>Subtract the given number from the value currently stored at the given
-      key.
-
-      The difference then replaces the value previously stored in the
-      Dictionary.</p>
-    path: p5.NumberDict/sub
-  mult:
-    description: >
-      <p>Multiply the given number with the value currently stored at the given
-      key.
-
-      The product then replaces the value previously stored in the
-      Dictionary.</p>
-    path: p5.NumberDict/mult
-  div:
-    description: >
-      <p>Divide the given number with the value currently stored at the given
-      key.
-
-      The quotient then replaces the value previously stored in the
-      Dictionary.</p>
-    path: p5.NumberDict/div
-  minValue:
-    description: |
-      <p>Return the lowest number currently stored in the Dictionary.</p>
-    path: p5.NumberDict/minValue
-  maxValue:
-    description: |
-      <p>Return the highest number currently stored in the Dictionary.</p>
-    path: p5.NumberDict/maxValue
-  minKey:
-    description: |
-      <p>Return the lowest key currently used in the Dictionary.</p>
-    path: p5.NumberDict/minKey
-  maxKey:
-    description: |
-      <p>Return the highest key currently used in the Dictionary.</p>
-    path: p5.NumberDict/maxKey
-chainable: false
----
-
-
-# p5.NumberDict
diff --git a/src/content/reference/en/p5 copy/p5.PrintWriter.mdx b/src/content/reference/en/p5 copy/p5.PrintWriter.mdx
deleted file mode 100644
index 7662b4f910..0000000000
--- a/src/content/reference/en/p5 copy/p5.PrintWriter.mdx	
+++ /dev/null
@@ -1,35 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1565
-title: p5.PrintWriter
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>A class to describe a print stream.</p>
-
-  <p>Each <code>p5.PrintWriter</code> object provides a way to save a sequence
-  of text
-
-  data, called the <em>print stream</em>, to the user's computer. It's a
-  low-level
-
-  object that enables precise control of text output. Functions such as
-
-  <a href="/reference/p5/saveStrings/">saveStrings()</a> and
-
-  <a href="/reference/p5/saveJSON/">saveJSON()</a> are easier to use for simple
-  file
-
-  saving.</p>
-
-  <p>Note: <a href="/reference/p5/createWriter/">createWriter()</a> is the
-  recommended way
-
-  to make an instance of this class.</p>
-line: 1565
----
-
-
-# p5.PrintWriter
diff --git a/src/content/reference/en/p5 copy/p5.Renderer.mdx b/src/content/reference/en/p5 copy/p5.Renderer.mdx
deleted file mode 100644
index 5fa9dd1cd1..0000000000
--- a/src/content/reference/en/p5 copy/p5.Renderer.mdx	
+++ /dev/null
@@ -1,34 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/p5.Renderer.js#L10
-title: p5.Renderer
-module: Rendering
-submodule: Rendering
-file: src/core/p5.Renderer.js
-description: |
-  <p>Main graphics and rendering context, as well as the base API
-  implementation for p5.js "core". To be used as the superclass for
-  Renderer2D and Renderer3D classes, respectively.</p>
-line: 10
-isConstructor: true
-params:
-  - name: elt
-    description: |
-      <p>DOM node that is wrapped</p>
-    type: HTMLElement
-  - name: pInst
-    description: |
-      <p>pointer to p5 instance</p>
-    type: P5
-    optional: true
-  - name: isMainCanvas
-    description: |
-      <p>whether we're using it as main canvas</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# p5.Renderer
diff --git a/src/content/reference/en/p5 copy/p5.Shader.mdx b/src/content/reference/en/p5 copy/p5.Shader.mdx
deleted file mode 100644
index 1730091ac1..0000000000
--- a/src/content/reference/en/p5 copy/p5.Shader.mdx	
+++ /dev/null
@@ -1,433 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Shader.js#L11
-title: p5.Shader
-module: 3D
-submodule: Material
-file: src/webgl/p5.Shader.js
-description: >
-  <p>A class to describe a shader program.</p>
-
-  <p>Each <code>p5.Shader</code> object contains a shader program that runs on
-  the graphics
-
-  processing unit (GPU). Shaders can process many pixels or vertices at the
-
-  same time, making them fast for many graphics tasks. They’re written in a
-
-  language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.</p>
-
-  <p>A shader program consists of two files, a vertex shader and a fragment
-
-  shader. The vertex shader affects where 3D geometry is drawn on the screen
-
-  and the fragment shader affects color. Once the <code>p5.Shader</code> object
-  is
-
-  created, it can be used with the <a href="/reference/p5/shader/">shader()</a>
-
-  function, as in <code>shader(myShader)</code>.</p>
-
-  <p>A shader can optionally describe <em>hooks,</em> which are functions in
-  GLSL that
-
-  users may choose to provide to customize the behavior of the shader. For the
-
-  vertex or the fragment shader, users can pass in an object where each key is
-
-  the type and name of a hook function, and each value is a string with the
-
-  parameter list and default implementation of the hook. For example, to let
-  users
-
-  optionally run code at the start of the vertex shader, the options object
-  could
-
-  include:</p>
-
-  <pre><code class="language-js">{
-    vertex: {
-      'void beforeVertex': '() {}'
-    }
-  }
-
-  </code></pre>
-
-  <p>Then, in your vertex shader source, you can run a hook by calling a
-  function
-
-  with the same name prefixed by <code>HOOK_</code>:</p>
-
-  <pre><code class="language-glsl">void main() {
-    HOOK_beforeVertex();
-    // Add the rest of your shader code here!
-  }
-
-  </code></pre>
-
-  <p>Note: <a href="/reference/p5/createShader/">createShader()</a>,
-
-  <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, and
-
-  <a href="/reference/p5/loadShader/">loadShader()</a> are the recommended ways
-  to
-
-  create an instance of this class.</p>
-line: 11
-isConstructor: true
-params:
-  - name: renderer
-    description: |
-      <p>WebGL context for this shader.</p>
-    type: p5.RendererGL
-  - name: vertSrc
-    description: |
-      <p>source code for the vertex shader program.</p>
-    type: String
-  - name: fragSrc
-    description: |
-      <p>source code for the fragment shader program.</p>
-    type: String
-  - name: options
-    description: >
-      <p>An optional object describing how this shader can
-
-      be augmented with hooks. It can include:</p>
-
-      <ul>
-
-      <li><code>vertex</code>: An object describing the available vertex shader
-      hooks.</li>
-
-      <li><code>fragment</code>: An object describing the available frament
-      shader hooks.</li>
-
-      </ul>
-    type: Object
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-
-    void main() {
-      // Set each pixel's RGBA value to yellow.
-      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let myShader = createShader(vertSrc, fragSrc);
-
-      // Apply the p5.Shader object.
-      shader(myShader);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A yellow square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates between 0 and 2.
-      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-    </code>
-    </div>
-methods:
-  inspectHooks:
-    description: >
-      <p>Logs the hooks available in this shader, and their current
-      implementation.</p>
-
-      <p>Each shader may let you override bits of its behavior. Each bit is
-      called
-
-      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
-      affects the
-
-      position of vertices, or in the <em>fragment</em> shader, if it affects
-      the pixel
-
-      color. This method logs those values to the console, letting you know what
-
-      you are able to use in a call to
-
-      <a href="/reference/p5.Shader/modify/"><code>modify()</code></a>.</p>
-
-      <p>For example, this shader will produce the following output:</p>
-
-      <pre><code class="language-js">myShader = baseMaterialShader().modify({
-        declarations: 'uniform float time;',
-        'vec3 getWorldPosition': `(vec3 pos) {
-          pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-          return pos;
-        }`
-      });
-
-      myShader.inspectHooks();
-
-      </code></pre>
-
-      <pre><code>==== Vertex shader hooks: ====
-
-      void beforeVertex() {}
-
-      vec3 getLocalPosition(vec3 position) { return position; }
-
-      [MODIFIED] vec3 getWorldPosition(vec3 pos) {
-            pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
-            return pos;
-          }
-      vec3 getLocalNormal(vec3 normal) { return normal; }
-
-      vec3 getWorldNormal(vec3 normal) { return normal; }
-
-      vec2 getUV(vec2 uv) { return uv; }
-
-      vec4 getVertexColor(vec4 color) { return color; }
-
-      void afterVertex() {}
-
-
-      ==== Fragment shader hooks: ====
-
-      void beforeFragment() {}
-
-      Inputs getPixelInputs(Inputs inputs) { return inputs; }
-
-      vec4 combineColors(ColorComponents components) {
-                      vec4 color = vec4(0.);
-                      color.rgb += components.diffuse * components.baseColor;
-                      color.rgb += components.ambient * components.ambientColor;
-                      color.rgb += components.specular * components.specularColor;
-                      color.rgb += components.emissive;
-                      color.a = components.opacity;
-                      return color;
-                    }
-      vec4 getFinalColor(vec4 color) { return color; }
-
-      void afterFragment() {}
-
-      </code></pre>
-    path: p5.Shader/inspectHooks
-  modify:
-    description: >
-      <p>Returns a new shader, based on the original, but with custom snippets
-
-      of shader code replacing default behaviour.</p>
-
-      <p>Each shader may let you override bits of its behavior. Each bit is
-      called
-
-      a <em>hook.</em> A hook is either for the <em>vertex</em> shader, if it
-      affects the
-
-      position of vertices, or in the <em>fragment</em> shader, if it affects
-      the pixel
-
-      color. You can inspect the different hooks available by calling
-
-      <a
-      href="/reference/p5.Shader/inspectHooks/"><code>yourShader.inspectHooks()</code></a>.
-      You can
-
-      also read the reference for the default material, normal material, color,
-      line, and point shaders to
-
-      see what hooks they have available.</p>
-
-      <p><code>modify()</code> takes one parameter, <code>hooks</code>, an
-      object with the hooks you want
-
-      to override. Each key of the <code>hooks</code> object is the name
-
-      of a hook, and the value is a string with the GLSL code for your hook.</p>
-
-      <p>If you supply functions that aren't existing hooks, they will get added
-      at the start of
-
-      the shader as helper functions so that you can use them in your hooks.</p>
-
-      <p>To add new <a href="/reference/p5.Shader/setUniform/">uniforms</a> to
-      your shader, you can pass in a <code>uniforms</code> object containing
-
-      the type and name of the uniform as the key, and a default value or
-      function returning
-
-      a default value as its value. These will be automatically set when the
-      shader is set
-
-      with <code>shader(yourShader)</code>.</p>
-
-      <p>You can also add a <code>declarations</code> key, where the value is a
-      GLSL string declaring
-
-      custom uniform variables, globals, and functions shared
-
-      between hooks. To add declarations just in a vertex or fragment shader,
-      add
-
-      <code>vertexDeclarations</code> and <code>fragmentDeclarations</code>
-      keys.</p>
-    path: p5.Shader/modify
-  copyToContext:
-    description: >
-      <p>Copies the shader from one drawing context to another.</p>
-
-      <p>Each <code>p5.Shader</code> object must be compiled by calling
-
-      <a href="/reference/p5/shader/">shader()</a> before it can run.
-      Compilation happens
-
-      in a drawing context which is usually the main canvas or an instance of
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>. A shader can only be
-      used in the
-
-      context where it was compiled. The <code>copyToContext()</code> method
-      compiles the
-
-      shader again and copies it to another drawing context where it can be
-
-      reused.</p>
-
-      <p>The parameter, <code>context</code>, is the drawing context where the
-      shader will be
-
-      used. The shader can be copied to an instance of
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a>, as in
-
-      <code>myShader.copyToContext(pg)</code>. The shader can also be copied
-      from a
-
-      <a href="/reference/p5/p5.Graphics">p5.Graphics</a> object to the main
-      canvas using
-
-      the <code>window</code> variable, as in
-      <code>myShader.copyToContext(window)</code>.</p>
-
-      <p>Note: A <a href="/reference/p5/p5.Shader">p5.Shader</a> object created
-      with
-
-      <a href="/reference/p5/createShader/">createShader()</a>,
-
-      <a href="/reference/p5/createFilterShader/">createFilterShader()</a>, or
-
-      <a href="/reference/p5/loadShader/">loadShader()</a>
-
-      can be used directly with a <a
-      href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a>
-
-      object created with
-
-      <a href="/reference/p5/createFramebuffer/">createFramebuffer()</a>. Both
-      objects
-
-      have the same context as the main canvas.</p>
-    path: p5.Shader/copyToContext
-  setUniform:
-    description: >
-      <p>Sets the shader’s uniform (global) variables.</p>
-
-      <p>Shader programs run on the computer’s graphics processing unit (GPU).
-
-      They live in part of the computer’s memory that’s completely separate
-
-      from the sketch that runs them. Uniforms are global variables within a
-
-      shader program. They provide a way to pass values from a sketch running
-
-      on the CPU to a shader program running on the GPU.</p>
-
-      <p>The first parameter, <code>uniformName</code>, is a string with the
-      uniform’s name.
-
-      For the shader above, <code>uniformName</code> would be
-      <code>'r'</code>.</p>
-
-      <p>The second parameter, <code>data</code>, is the value that should be
-      used to set the
-
-      uniform. For example, calling <code>myShader.setUniform('r', 0.5)</code>
-      would set
-
-      the <code>r</code> uniform in the shader above to <code>0.5</code>. data
-      should match the
-
-      uniform’s type. Numbers, strings, booleans, arrays, and many types of
-
-      images can all be passed to a shader with <code>setUniform()</code>.</p>
-    path: p5.Shader/setUniform
-chainable: false
----
-
-
-# p5.Shader
diff --git a/src/content/reference/en/p5 copy/p5.StringDict.mdx b/src/content/reference/en/p5 copy/p5.StringDict.mdx
deleted file mode 100644
index 5ca466e5d1..0000000000
--- a/src/content/reference/en/p5 copy/p5.StringDict.mdx	
+++ /dev/null
@@ -1,15 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L397
-title: p5.StringDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>A simple Dictionary class for Strings.</p>
-line: 397
----
-
-
-# p5.StringDict
diff --git a/src/content/reference/en/p5 copy/p5.Table.mdx b/src/content/reference/en/p5 copy/p5.Table.mdx
deleted file mode 100644
index 41ad72b0d1..0000000000
--- a/src/content/reference/en/p5 copy/p5.Table.mdx	
+++ /dev/null
@@ -1,213 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.Table.js#L33
-title: p5.Table
-module: IO
-submodule: Table
-file: src/io/p5.Table.js
-description: >
-  <p><a href="/reference/p5/p5.Table">Table</a> objects store data with multiple
-  rows and columns, much
-
-  like in a traditional spreadsheet. Tables can be generated from
-
-  scratch, dynamically, or using data from an existing file.</p>
-line: 33
-isConstructor: true
-params:
-  - name: rows
-    description: |
-      <p>An array of p5.TableRow objects</p>
-    type: 'p5.TableRow[]'
-    optional: true
-methods:
-  addRow:
-    description: >
-      <p>Use <a href="/reference/p5/addRow/">addRow()</a> to add a new row of
-      data to a <a href="/reference/p5/p5.Table">p5.Table</a> object. By
-      default,
-
-      an empty row is created. Typically, you would store a reference to
-
-      the new row in a TableRow object (see newRow in the example above),
-
-      and then set individual values using <a
-      href="/reference/p5/set/">set()</a>.</p>
-
-      <p>If a <a href="/reference/p5/p5.TableRow">p5.TableRow</a> object is
-      included as a parameter, then that row is
-
-      duplicated and added to the table.</p>
-    path: p5.Table/addRow
-  removeRow:
-    description: |
-      <p>Removes a row from the table object.</p>
-    path: p5.Table/removeRow
-  getRow:
-    description: >
-      <p>Returns a reference to the specified <a
-      href="/reference/p5/p5.TableRow">p5.TableRow</a>. The reference
-
-      can then be used to get and set values of the selected row.</p>
-    path: p5.Table/getRow
-  getRows:
-    description: >
-      <p>Gets all rows from the table. Returns an array of <a
-      href="/reference/p5/p5.TableRow">p5.TableRow</a>s.</p>
-    path: p5.Table/getRows
-  findRow:
-    description: |
-      <p>Finds the first row in the Table that contains the value
-      provided, and returns a reference to that row. Even if
-      multiple rows are possible matches, only the first matching
-      row is returned. The column to search may be specified by
-      either its ID or title.</p>
-    path: p5.Table/findRow
-  findRows:
-    description: |
-      <p>Finds the rows in the Table that contain the value
-      provided, and returns references to those rows. Returns an
-      Array, so for must be used to iterate through all the rows,
-      as shown in the example above. The column to search may be
-      specified by either its ID or title.</p>
-    path: p5.Table/findRows
-  matchRow:
-    description: |
-      <p>Finds the first row in the Table that matches the regular
-      expression provided, and returns a reference to that row.
-      Even if multiple rows are possible matches, only the first
-      matching row is returned. The column to search may be
-      specified by either its ID or title.</p>
-    path: p5.Table/matchRow
-  matchRows:
-    description: |
-      <p>Finds the rows in the Table that match the regular expression provided,
-      and returns references to those rows. Returns an array, so for must be
-      used to iterate through all the rows, as shown in the example. The
-      column to search may be specified by either its ID or title.</p>
-    path: p5.Table/matchRows
-  getColumn:
-    description: |
-      <p>Retrieves all values in the specified column, and returns them
-      as an array. The column may be specified by either its ID or title.</p>
-    path: p5.Table/getColumn
-  clearRows:
-    description: |
-      <p>Removes all rows from a Table. While all rows are removed,
-      columns and column titles are maintained.</p>
-    path: p5.Table/clearRows
-  addColumn:
-    description: >
-      <p>Use <a href="/reference/p5/addColumn/">addColumn()</a> to add a new
-      column to a <a href="/reference/p5/p5.Table">Table</a> object.
-
-      Typically, you will want to specify a title, so the column
-
-      may be easily referenced later by name. (If no title is
-
-      specified, the new column's title will be null.)</p>
-    path: p5.Table/addColumn
-  getColumnCount:
-    description: |
-      <p>Returns the total number of columns in a Table.</p>
-    path: p5.Table/getColumnCount
-  getRowCount:
-    description: |
-      <p>Returns the total number of rows in a Table.</p>
-    path: p5.Table/getRowCount
-  removeTokens:
-    description: |
-      <p>Removes any of the specified characters (or "tokens").</p>
-      <p>If no column is specified, then the values in all columns and
-      rows are processed. A specific column may be referenced by
-      either its ID or title.</p>
-    path: p5.Table/removeTokens
-  trim:
-    description: |
-      <p>Trims leading and trailing whitespace, such as spaces and tabs,
-      from String table values. If no column is specified, then the
-      values in all columns and rows are trimmed. A specific column
-      may be referenced by either its ID or title.</p>
-    path: p5.Table/trim
-  removeColumn:
-    description: >
-      <p>Use <a href="/reference/p5/removeColumn/">removeColumn()</a> to remove
-      an existing column from a Table
-
-      object. The column to be removed may be identified by either
-
-      its title (a String) or its index value (an int).
-
-      removeColumn(0) would remove the first column, removeColumn(1)
-
-      would remove the second column, and so on.</p>
-    path: p5.Table/removeColumn
-  set:
-    description: |
-      <p>Stores a value in the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified
-      by either its ID or title.</p>
-    path: p5.Table/set
-  setNum:
-    description: |
-      <p>Stores a Float value in the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified
-      by either its ID or title.</p>
-    path: p5.Table/setNum
-  setString:
-    description: |
-      <p>Stores a String value in the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified
-      by either its ID or title.</p>
-    path: p5.Table/setString
-  get:
-    description: |
-      <p>Retrieves a value from the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified by
-      either its ID or title.</p>
-    path: p5.Table/get
-  getNum:
-    description: |
-      <p>Retrieves a Float value from the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified by
-      either its ID or title.</p>
-    path: p5.Table/getNum
-  getString:
-    description: |
-      <p>Retrieves a String value from the Table's specified row and column.
-      The row is specified by its ID, while the column may be specified by
-      either its ID or title.</p>
-    path: p5.Table/getString
-  getObject:
-    description: |
-      <p>Retrieves all table data and returns as an object. If a column name is
-      passed in, each row object will be stored with that attribute as its
-      title.</p>
-    path: p5.Table/getObject
-  getArray:
-    description: >
-      <p>Retrieves all table data and returns it as a multidimensional
-      array.</p>
-    path: p5.Table/getArray
-properties:
-  columns:
-    description: >
-      <p>An array containing the names of the columns in the table, if the
-      "header" the table is
-
-      loaded with the "header" parameter.</p>
-    path: p5.Table/columns
-  rows:
-    description: >
-      <p>An array containing the <a
-      href="/reference/p5/p5.Table">p5.TableRow</a> objects that make up the
-
-      rows of the table. The same result as calling <a
-      href="/reference/p5/getRows/">getRows()</a></p>
-    path: p5.Table/rows
-chainable: false
----
-
-
-# p5.Table
diff --git a/src/content/reference/en/p5 copy/p5.TableRow.mdx b/src/content/reference/en/p5 copy/p5.TableRow.mdx
deleted file mode 100644
index 00081f9654..0000000000
--- a/src/content/reference/en/p5 copy/p5.TableRow.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.TableRow.js#L9
-title: p5.TableRow
-module: IO
-submodule: Table
-file: src/io/p5.TableRow.js
-description: |
-  <p>A TableRow object represents a single row of data values,
-  stored in columns, from a table.</p>
-  <p>A Table Row contains both an ordered array, and an unordered
-  JSON object.</p>
-line: 9
-isConstructor: true
-params:
-  - name: str
-    description: |
-      <p>optional: populate the row with a
-                                  string of values, separated by the
-                                  separator</p>
-    type: String
-    optional: true
-  - name: separator
-    description: |
-      <p>comma separated values (csv) by default</p>
-    type: String
-    optional: true
-methods:
-  set:
-    description: |
-      <p>Stores a value in the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/set
-  setNum:
-    description: |
-      <p>Stores a Float value in the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/setNum
-  setString:
-    description: |
-      <p>Stores a String value in the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/setString
-  get:
-    description: |
-      <p>Retrieves a value from the TableRow's specified column.
-      The column may be specified by either its ID or title.</p>
-    path: p5.TableRow/get
-  getNum:
-    description: |
-      <p>Retrieves a Float value from the TableRow's specified
-      column. The column may be specified by either its ID or
-      title.</p>
-    path: p5.TableRow/getNum
-  getString:
-    description: |
-      <p>Retrieves an String value from the TableRow's specified
-      column. The column may be specified by either its ID or
-      title.</p>
-    path: p5.TableRow/getString
-chainable: false
----
-
-
-# p5.TableRow
diff --git a/src/content/reference/en/p5 copy/p5.TypedDict.mdx b/src/content/reference/en/p5 copy/p5.TypedDict.mdx
deleted file mode 100644
index 2bcb7b5752..0000000000
--- a/src/content/reference/en/p5 copy/p5.TypedDict.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/p5.TypedDict.js#L82
-title: p5.TypedDict
-module: Data
-submodule: Dictionary
-file: src/data/p5.TypedDict.js
-description: |
-  <p>Base class for all p5.Dictionary types. Specifically
-   typed Dictionary classes inherit from this class.</p>
-line: 82
-isConstructor: true
-methods:
-  size:
-    description: >
-      <p>Returns the number of key-value pairs currently stored in the
-      Dictionary.</p>
-    path: p5.TypedDict/size
-  hasKey:
-    description: |
-      <p>Returns true if the given key exists in the Dictionary,
-      otherwise returns false.</p>
-    path: p5.TypedDict/hasKey
-  get:
-    description: |
-      <p>Returns the value stored at the given key.</p>
-    path: p5.TypedDict/get
-  set:
-    description: >
-      <p>Updates the value associated with the given key in case it already
-      exists
-
-      in the Dictionary. Otherwise a new key-value pair is added.</p>
-    path: p5.TypedDict/set
-  create:
-    description: |
-      <p>Creates a new key-value pair in the Dictionary.</p>
-    path: p5.TypedDict/create
-  clear:
-    description: |
-      <p>Removes all previously stored key-value pairs from the Dictionary.</p>
-    path: p5.TypedDict/clear
-  remove:
-    description: >
-      <p>Removes the key-value pair stored at the given key from the
-      Dictionary.</p>
-    path: p5.TypedDict/remove
-  print:
-    description: >
-      <p>Logs the set of items currently stored in the Dictionary to the
-      console.</p>
-    path: p5.TypedDict/print
-  saveTable:
-    description: |
-      <p>Converts the Dictionary into a CSV file for local download.</p>
-    path: p5.TypedDict/saveTable
-  saveJSON:
-    description: |
-      <p>Converts the Dictionary into a JSON file for local download.</p>
-    path: p5.TypedDict/saveJSON
-chainable: false
----
-
-
-# p5.TypedDict
diff --git a/src/content/reference/en/p5 copy/p5.Vector.mdx b/src/content/reference/en/p5 copy/p5.Vector.mdx
deleted file mode 100644
index ff67d7562c..0000000000
--- a/src/content/reference/en/p5 copy/p5.Vector.mdx	
+++ /dev/null
@@ -1,673 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/p5.Vector.js#L11
-title: p5.Vector
-module: Math
-submodule: Vector
-file: src/math/p5.Vector.js
-description: >
-  <p>A class to describe a two or three-dimensional vector.</p>
-
-  <p>A vector can be thought of in different ways. In one view, a vector is like
-
-  an arrow pointing in space. Vectors have both magnitude (length) and
-
-  direction.</p>
-
-  <p><code>p5.Vector</code> objects are often used to program motion because
-  they simplify
-
-  the math. For example, a moving ball has a position and a velocity.
-
-  Position describes where the ball is in space. The ball's position vector
-
-  extends from the origin to the ball's center. Velocity describes the ball's
-
-  speed and the direction it's moving. If the ball is moving straight up, its
-
-  velocity vector points straight up. Adding the ball's velocity vector to
-
-  its position vector moves it, as in <code>pos.add(vel)</code>. Vector math
-  relies on
-
-  methods inside the <code>p5.Vector</code> class.</p>
-
-  <p>Note: <a href="/reference/p5/createVector/">createVector()</a> is the
-  recommended way
-
-  to make an instance of this class.</p>
-line: 11
-isConstructor: true
-params:
-  - name: x
-    description: |
-      <p>x component of the vector.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y component of the vector.</p>
-    type: Number
-    optional: true
-  - name: z
-    description: |
-      <p>z component of the vector.</p>
-    type: Number
-    optional: true
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create p5.Vector objects.
-      let p1 = createVector(25, 25);
-      let p2 = createVector(75, 75);
-
-      // Style the points.
-      strokeWeight(5);
-
-      // Draw the first point using a p5.Vector.
-      point(p1);
-
-      // Draw the second point using a p5.Vector's components.
-      point(p2.x, p2.y);
-
-      describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pos;
-    let vel;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create p5.Vector objects.
-      pos = createVector(50, 100);
-      vel = createVector(0, -1);
-
-      describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Add velocity to position.
-      pos.add(vel);
-
-      // If the dot reaches the top of the canvas,
-      // restart from the bottom.
-      if (pos.y < 0) {
-        pos.y = 100;
-      }
-
-      // Draw the dot.
-      strokeWeight(5);
-      point(pos);
-    }
-    </code>
-    </div>
-methods:
-  toString:
-    description: >
-      <p>Returns a string representation of a vector.</p>
-
-      <p>Calling <code>toString()</code> is useful for printing vectors to the
-      console while
-
-      debugging.</p>
-    path: p5.Vector/toString
-  set:
-    description: >
-      <p>Sets the vector's <code>x</code>, <code>y</code>, and <code>z</code>
-      components.</p>
-
-      <p><code>set()</code> can use separate numbers, as in <code>v.set(1, 2,
-      3)</code>, a
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.set(v2)</code>, or an
-
-      array of numbers, as in <code>v.set([1, 2, 3])</code>.</p>
-
-      <p>If a value isn't provided for a component, it will be set to 0. For
-
-      example, <code>v.set(4, 5)</code> sets <code>v.x</code> to 4,
-      <code>v.y</code> to 5, and <code>v.z</code> to 0.
-
-      Calling <code>set()</code> with no arguments, as in <code>v.set()</code>,
-      sets all the vector's
-
-      components to 0.</p>
-    path: p5.Vector/set
-  copy:
-    description: >
-      <p>Returns a copy of the <a href="/reference/p5/p5.Vector">p5.Vector</a>
-      object.</p>
-    path: p5.Vector/copy
-  add:
-    description: >
-      <p>Adds to a vector's <code>x</code>, <code>y</code>, and <code>z</code>
-      components.</p>
-
-      <p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2,
-      3)</code>,
-
-      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.add(v2)</code>, or
-
-      an array of numbers, as in <code>v.add([1, 2, 3])</code>.</p>
-
-      <p>If a value isn't provided for a component, it won't change. For
-
-      example, <code>v.add(4, 5)</code> adds 4 to <code>v.x</code>, 5 to
-      <code>v.y</code>, and 0 to <code>v.z</code>.
-
-      Calling <code>add()</code> with no arguments, as in <code>v.add()</code>,
-      has no effect.</p>
-
-      <p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
-      v1)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/add
-  rem:
-    description: >
-      <p>Performs modulo (remainder) division with a vector's <code>x</code>,
-      <code>y</code>, and <code>z</code>
-
-      components.</p>
-
-      <p><code>rem()</code> can use separate numbers, as in <code>v.rem(1, 2,
-      3)</code>,
-
-      another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.rem(v2)</code>, or
-
-      an array of numbers, as in <code>v.rem([1, 2, 3])</code>.</p>
-
-      <p>If only one value is provided, as in <code>v.rem(2)</code>, then all
-      the components
-
-      will be set to their values modulo 2. If two values are provided, as in
-
-      <code>v.rem(2, 3)</code>, then <code>v.z</code> won't change. Calling
-      <code>rem()</code> with no
-
-      arguments, as in <code>v.rem()</code>, has no effect.</p>
-
-      <p>The static version of <code>rem()</code>, as in <code>p5.Vector.rem(v2,
-      v1)</code>, returns a
-
-      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
-      change the
-
-      originals.</p>
-    path: p5.Vector/rem
-  sub:
-    description: >
-      <p>Subtracts from a vector's <code>x</code>, <code>y</code>, and
-      <code>z</code> components.</p>
-
-      <p><code>sub()</code> can use separate numbers, as in <code>v.sub(1, 2,
-      3)</code>, another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.sub(v2)</code>, or an array
-
-      of numbers, as in <code>v.sub([1, 2, 3])</code>.</p>
-
-      <p>If a value isn't provided for a component, it won't change. For
-
-      example, <code>v.sub(4, 5)</code> subtracts 4 from <code>v.x</code>, 5
-      from <code>v.y</code>, and 0 from <code>v.z</code>.
-
-      Calling <code>sub()</code> with no arguments, as in <code>v.sub()</code>,
-      has no effect.</p>
-
-      <p>The static version of <code>sub()</code>, as in <code>p5.Vector.sub(v2,
-      v1)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/sub
-  mult:
-    description: >
-      <p>Multiplies a vector's <code>x</code>, <code>y</code>, and
-      <code>z</code> components.</p>
-
-      <p><code>mult()</code> can use separate numbers, as in <code>v.mult(1, 2,
-      3)</code>, another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.mult(v2)</code>, or an array
-
-      of numbers, as in <code>v.mult([1, 2, 3])</code>.</p>
-
-      <p>If only one value is provided, as in <code>v.mult(2)</code>, then all
-      the components
-
-      will be multiplied by 2. If a value isn't provided for a component, it
-
-      won't change. For example, <code>v.mult(4, 5)</code> multiplies
-      <code>v.x</code> by 4, <code>v.y</code> by 5,
-
-      and <code>v.z</code> by 1. Calling <code>mult()</code> with no arguments,
-      as in <code>v.mult()</code>, has
-
-      no effect.</p>
-
-      <p>The static version of <code>mult()</code>, as in
-      <code>p5.Vector.mult(v, 2)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/mult
-  div:
-    description: >
-      <p>Divides a vector's <code>x</code>, <code>y</code>, and <code>z</code>
-      components.</p>
-
-      <p><code>div()</code> can use separate numbers, as in <code>v.div(1, 2,
-      3)</code>, another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
-      <code>v.div(v2)</code>, or an array
-
-      of numbers, as in <code>v.div([1, 2, 3])</code>.</p>
-
-      <p>If only one value is provided, as in <code>v.div(2)</code>, then all
-      the components
-
-      will be divided by 2. If a value isn't provided for a component, it
-
-      won't change. For example, <code>v.div(4, 5)</code> divides
-      <code>v.x</code> by, <code>v.y</code> by 5,
-
-      and <code>v.z</code> by 1. Calling <code>div()</code> with no arguments,
-      as in <code>v.div()</code>, has
-
-      no effect.</p>
-
-      <p>The static version of <code>div()</code>, as in <code>p5.Vector.div(v,
-      2)</code>, returns a new
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change
-      the
-
-      originals.</p>
-    path: p5.Vector/div
-  mag:
-    description: >
-      <p>Calculates the magnitude (length) of the vector.</p>
-
-      <p>Use <a href="/reference/p5/mag/">mag()</a> to calculate the magnitude
-      of a 2D vector
-
-      using components as in <code>mag(x, y)</code>.</p>
-    path: p5.Vector/mag
-  magSq:
-    description: |
-      <p>Calculates the magnitude (length) of the vector squared.</p>
-    path: p5.Vector/magSq
-  dot:
-    description: >
-      <p>Calculates the dot product of two vectors.</p>
-
-      <p>The dot product is a number that describes the overlap between two
-      vectors.
-
-      Visually, the dot product can be thought of as the "shadow" one vector
-
-      casts on another. The dot product's magnitude is largest when two vectors
-
-      point in the same or opposite directions. Its magnitude is 0 when two
-
-      vectors form a right angle.</p>
-
-      <p>The version of <code>dot()</code> with one parameter interprets it as
-      another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-
-      <p>The version of <code>dot()</code> with multiple parameters interprets
-      them as the
-
-      <code>x</code>, <code>y</code>, and <code>z</code> components of another
-      vector.</p>
-
-      <p>The static version of <code>dot()</code>, as in <code>p5.Vector.dot(v1,
-      v2)</code>, is the same
-
-      as calling <code>v1.dot(v2)</code>.</p>
-    path: p5.Vector/dot
-  cross:
-    description: >
-      <p>Calculates the cross product of two vectors.</p>
-
-      <p>The cross product is a vector that points straight out of the plane
-      created
-
-      by two vectors. The cross product's magnitude is the area of the
-      parallelogram
-
-      formed by the original two vectors.</p>
-
-      <p>The static version of <code>cross()</code>, as in
-      <code>p5.Vector.cross(v1, v2)</code>, is the same
-
-      as calling <code>v1.cross(v2)</code>.</p>
-    path: p5.Vector/cross
-  dist:
-    description: >
-      <p>Calculates the distance between two points represented by vectors.</p>
-
-      <p>A point's coordinates can be represented by the components of a vector
-
-      that extends from the origin to the point.</p>
-
-      <p>The static version of <code>dist()</code>, as in
-      <code>p5.Vector.dist(v1, v2)</code>, is the same
-
-      as calling <code>v1.dist(v2)</code>.</p>
-
-      <p>Use <a href="/reference/p5/dist/">dist()</a> to calculate the distance
-      between points
-
-      using coordinates as in <code>dist(x1, y1, x2, y2)</code>.</p>
-    path: p5.Vector/dist
-  normalize:
-    description: >
-      <p>Scales the components of a <a
-      href="/reference/p5/p5.Vector">p5.Vector</a> object so
-
-      that its magnitude is 1.</p>
-
-      <p>The static version of <code>normalize()</code>,  as in
-      <code>p5.Vector.normalize(v)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/normalize
-  limit:
-    description: >
-      <p>Limits a vector's magnitude to a maximum value.</p>
-
-      <p>The static version of <code>limit()</code>, as in
-      <code>p5.Vector.limit(v, 5)</code>, returns a
-
-      new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
-      change the
-
-      original.</p>
-    path: p5.Vector/limit
-  setMag:
-    description: >
-      <p>Sets a vector's magnitude to a given value.</p>
-
-      <p>The static version of <code>setMag()</code>, as in
-      <code>p5.Vector.setMag(v, 10)</code>, returns
-
-      a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't
-      change the
-
-      original.</p>
-    path: p5.Vector/setMag
-  heading:
-    description: >
-      <p>Calculates the angle a 2D vector makes with the positive x-axis.</p>
-
-      <p>By convention, the positive x-axis has an angle of 0. Angles increase
-      in
-
-      the clockwise direction.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>heading()</code> returns angles
-
-      in the units of the current <a
-      href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-      <p>The static version of <code>heading()</code>, as in
-      <code>p5.Vector.heading(v)</code>, works the
-
-      same way.</p>
-    path: p5.Vector/heading
-  setHeading:
-    description: >
-      <p>Rotates a 2D vector to a specific angle without changing its
-      magnitude.</p>
-
-      <p>By convention, the positive x-axis has an angle of 0. Angles increase
-      in
-
-      the clockwise direction.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>setHeading()</code> uses
-
-      the units of the current <a
-      href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Vector/setHeading
-  rotate:
-    description: >
-      <p>Rotates a 2D vector by an angle without changing its magnitude.</p>
-
-      <p>By convention, the positive x-axis has an angle of 0. Angles increase
-      in
-
-      the clockwise direction.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>rotate()</code> uses
-
-      the units of the current <a
-      href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-      <p>The static version of <code>rotate()</code>, as in
-      <code>p5.Vector.rotate(v, PI)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/rotate
-  angleBetween:
-    description: >
-      <p>Calculates the angle between two vectors.</p>
-
-      <p>The angles returned are signed, which means that
-
-      <code>v1.angleBetween(v2) === -v2.angleBetween(v1)</code>.</p>
-
-      <p>If the vector was created with
-
-      <a href="/reference/p5/createVector/">createVector()</a>,
-      <code>angleBetween()</code> returns
-
-      angles in the units of the current
-
-      <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-    path: p5.Vector/angleBetween
-  lerp:
-    description: >
-      <p>Calculates new <code>x</code>, <code>y</code>, and <code>z</code>
-      components that are proportionally the
-
-      same distance between two vectors.</p>
-
-      <p>The <code>amt</code> parameter is the amount to interpolate between the
-      old vector and
-
-      the new vector. 0.0 keeps all components equal to the old vector's, 0.5 is
-
-      halfway between, and 1.0 sets all components equal to the new
-      vector's.</p>
-
-      <p>The static version of <code>lerp()</code>, as in
-      <code>p5.Vector.lerp(v0, v1, 0.5)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/lerp
-  slerp:
-    description: >
-      <p>Calculates a new heading and magnitude that are between two
-      vectors.</p>
-
-      <p>The <code>amt</code> parameter is the amount to interpolate between the
-      old vector and
-
-      the new vector. 0.0 keeps the heading and magnitude equal to the old
-
-      vector's, 0.5 sets them halfway between, and 1.0 sets the heading and
-
-      magnitude equal to the new vector's.</p>
-
-      <p><code>slerp()</code> differs from <a
-      href="/reference/p5.Vector/lerp/">lerp()</a> because
-
-      it interpolates magnitude. Calling <code>v0.slerp(v1, 0.5)</code> sets
-      <code>v0</code>'s
-
-      magnitude to a value halfway between its original magnitude and
-      <code>v1</code>'s.
-
-      Calling <code>v0.lerp(v1, 0.5)</code> makes no such guarantee.</p>
-
-      <p>The static version of <code>slerp()</code>, as in
-      <code>p5.Vector.slerp(v0, v1, 0.5)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/slerp
-  reflect:
-    description: >
-      <p>Reflects a vector about a line in 2D or a plane in 3D.</p>
-
-      <p>The orientation of the line or plane is described by a normal vector
-      that
-
-      points away from the shape.</p>
-
-      <p>The static version of <code>reflect()</code>, as in
-      <code>p5.Vector.reflect(v, n)</code>,
-
-      returns a new <a href="/reference/p5/p5.Vector">p5.Vector</a> object and
-      doesn't change
-
-      the original.</p>
-    path: p5.Vector/reflect
-  array:
-    description: |
-      <p>Returns the vector's components as an array of numbers.</p>
-    path: p5.Vector/array
-  equals:
-    description: >
-      <p>Checks whether all the vector's components are equal to another
-      vector's.</p>
-
-      <p><code>equals()</code> returns <code>true</code> if the vector's
-      components are all the same as another
-
-      vector's and <code>false</code> if not.</p>
-
-      <p>The version of <code>equals()</code> with one parameter interprets it
-      as another
-
-      <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-
-      <p>The version of <code>equals()</code> with multiple parameters
-      interprets them as the
-
-      components of another vector. Any missing parameters are assigned the
-      value
-
-      0.</p>
-
-      <p>The static version of <code>equals()</code>, as in
-      <code>p5.Vector.equals(v0, v1)</code>,
-
-      interprets both parameters as <a
-      href="/reference/p5/p5.Vector">p5.Vector</a> objects.</p>
-    path: p5.Vector/equals
-  fromAngle:
-    description: |
-      <p>Creates a new 2D vector from an angle.</p>
-    path: p5.Vector/fromAngle
-  fromAngles:
-    description: |
-      <p>Creates a new 3D vector from a pair of ISO spherical angles.</p>
-    path: p5.Vector/fromAngles
-  random2D:
-    description: |
-      <p>Creates a new 2D unit vector with a random heading.</p>
-    path: p5.Vector/random2D
-  random3D:
-    description: |
-      <p>Creates a new 3D unit vector with a random heading.</p>
-    path: p5.Vector/random3D
-  clampToZero:
-    description: >
-      <p>Replaces the components of a <a
-      href="/reference/p5/p5.Vector">p5.Vector</a> that are very close to zero
-      with zero.</p>
-
-      <p>In computers, handling numbers with decimals can give slightly
-      imprecise answers due to the way those numbers are represented.
-
-      This can make it hard to check if a number is zero, as it may be close but
-      not exactly zero.
-
-      This method rounds very close numbers to zero to make those checks
-      easier</p>
-
-      <p><a
-      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON/">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON</a></p>
-    path: p5.Vector/clampToZero
-properties:
-  x:
-    description: |
-      <p>The x component of the vector</p>
-    path: p5.Vector/x
-  'y':
-    description: |
-      <p>The y component of the vector</p>
-    path: p5.Vector/y
-  z:
-    description: |
-      <p>The z component of the vector</p>
-    path: p5.Vector/z
-chainable: false
----
-
-
-# p5.Vector
diff --git a/src/content/reference/en/p5 copy/p5.XML.mdx b/src/content/reference/en/p5 copy/p5.XML.mdx
deleted file mode 100644
index 71904fded2..0000000000
--- a/src/content/reference/en/p5 copy/p5.XML.mdx	
+++ /dev/null
@@ -1,321 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/p5.XML.js#L9
-title: p5.XML
-module: IO
-submodule: Input
-file: src/io/p5.XML.js
-description: >
-  <p>A class to describe an XML object.</p>
-
-  <p>Each <code>p5.XML</code> object provides an easy way to interact with XML
-  data.
-
-  Extensible Markup Language
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction/"
-  target="_blank">XML</a>)
-
-  is a standard format for sending data between applications. Like HTML, the
-
-  XML format is based on tags and attributes, as in
-
-  <code><time units="s">1234</time></code>.</p>
-
-  <p>Note: Use <a href="/reference/p5/loadXML/">loadXML()</a> to load external
-  XML files.</p>
-line: 9
-isConstructor: true
-example:
-  - |-
-
-    <div>
-    <code>
-    let myXML;
-
-    // Load the XML and create a p5.XML object.
-    function preload() {
-      myXML = loadXML('/assets/animals.xml');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get an array with all mammal tags.
-      let mammals = myXML.getChildren('mammal');
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(14);
-
-      // Iterate over the mammals array.
-      for (let i = 0; i < mammals.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Get the mammal's common name.
-        let name = mammals[i].getContent();
-
-        // Display the mammal's name.
-        text(name, 20, y);
-      }
-
-      describe(
-        'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-methods:
-  getParent:
-    description: >
-      <p>Returns the element's parent element as a new <a
-      href="/reference/p5/p5.XML">p5.XML</a>
-
-      object.</p>
-    path: p5.XML/getParent
-  getName:
-    description: >
-      <p>Returns the element's name as a <code>String</code>.</p>
-
-      <p>An XML element's name is given by its tag. For example, the element
-
-      <code><language>JavaScript</language></code> has the name
-      <code>language</code>.</p>
-    path: p5.XML/getName
-  setName:
-    description: >
-      <p>Sets the element's tag name.</p>
-
-      <p>An XML element's name is given by its tag. For example, the element
-
-      <code><language>JavaScript</language></code> has the name
-      <code>language</code>.</p>
-
-      <p>The parameter, <code>name</code>, is the element's new name as a
-      string. For example,
-
-      calling <code>myXML.setName('planet')</code> will make the element's new
-      tag name
-
-      <code><planet></planet></code>.</p>
-    path: p5.XML/setName
-  hasChildren:
-    description: >
-      <p>Returns <code>true</code> if the element has child elements and
-      <code>false</code> if not.</p>
-    path: p5.XML/hasChildren
-  listChildren:
-    description: |
-      <p>Returns an array with the names of the element's child elements as
-      <code>String</code>s.</p>
-    path: p5.XML/listChildren
-  getChildren:
-    description: >
-      <p>Returns an array with the element's child elements as new
-
-      <a href="/reference/p5/p5.XML">p5.XML</a> objects.</p>
-
-      <p>The parameter, <code>name</code>, is optional. If a string is passed,
-      as in
-
-      <code>myXML.getChildren('cat')</code>, then the method will only return
-      child elements
-
-      with the tag <code><cat></code>.</p>
-    path: p5.XML/getChildren
-  getChild:
-    description: >
-      <p>Returns the first matching child element as a new
-
-      <a href="/reference/p5/p5.XML">p5.XML</a> object.</p>
-
-      <p>The parameter, <code>name</code>, is optional. If a string is passed,
-      as in
-
-      <code>myXML.getChild('cat')</code>, then the first child element with the
-      tag
-
-      <code><cat></code> will be returned. If a number is passed, as in
-
-      <code>myXML.getChild(1)</code>, then the child element at that index will
-      be returned.</p>
-    path: p5.XML/getChild
-  addChild:
-    description: >
-      <p>Adds a new child element and returns a reference to it.</p>
-
-      <p>The parameter, <code>child</code>, is the <a
-      href="/reference/p5/p5.XML">p5.XML</a> object to add
-
-      as a child element. For example, calling
-      <code>myXML.addChild(otherXML)</code> inserts
-
-      <code>otherXML</code> as a child element of <code>myXML</code>.</p>
-    path: p5.XML/addChild
-  removeChild:
-    description: >
-      <p>Removes the first matching child element.</p>
-
-      <p>The parameter, <code>name</code>, is the child element to remove. If a
-      string is
-
-      passed, as in <code>myXML.removeChild('cat')</code>, then the first child
-      element
-
-      with the tag <code><cat></code> will be removed. If a number is passed, as
-      in
-
-      <code>myXML.removeChild(1)</code>, then the child element at that index
-      will be
-
-      removed.</p>
-    path: p5.XML/removeChild
-  getAttributeCount:
-    description: |
-      <p>Returns the number of attributes the element has.</p>
-    path: p5.XML/getAttributeCount
-  listAttributes:
-    description: >
-      <p>Returns an <code>Array</code> with the names of the element's
-      attributes.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/listAttributes
-  hasAttribute:
-    description: >
-      <p>Returns <code>true</code> if the element has a given attribute and
-      <code>false</code> if not.</p>
-
-      <p>The parameter, <code>name</code>, is a string with the name of the
-      attribute being
-
-      checked.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/hasAttribute
-  getNum:
-    description: >
-      <p>Return an attribute's value as a <code>Number</code>.</p>
-
-      <p>The first parameter, <code>name</code>, is a string with the name of
-      the attribute
-
-      being checked. For example, calling <code>myXML.getNum('id')</code>
-      returns the
-
-      element's <code>id</code> attribute as a number.</p>
-
-      <p>The second parameter, <code>defaultValue</code>, is optional. If a
-      number is passed,
-
-      as in <code>myXML.getNum('id', -1)</code>, it will be returned if the
-      attribute
-
-      doesn't exist or can't be converted to a number.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/getNum
-  getString:
-    description: >
-      <p>Return an attribute's value as a string.</p>
-
-      <p>The first parameter, <code>name</code>, is a string with the name of
-      the attribute
-
-      being checked. For example, calling <code>myXML.getString('color')</code>
-      returns the
-
-      element's <code>id</code> attribute as a string.</p>
-
-      <p>The second parameter, <code>defaultValue</code>, is optional. If a
-      string is passed,
-
-      as in <code>myXML.getString('color', 'deeppink')</code>, it will be
-      returned if the
-
-      attribute doesn't exist.</p>
-
-      <p>Note: Use
-
-      <a href="/reference/p5.XML/getString/">myXML.getString()</a> or
-
-      <a href="/reference/p5.XML/getNum/">myXML.getNum()</a> to return an
-      attribute's value.</p>
-    path: p5.XML/getString
-  setAttribute:
-    description: >
-      <p>Sets an attribute to a given value.</p>
-
-      <p>The first parameter, <code>name</code>, is a string with the name of
-      the attribute
-
-      being set.</p>
-
-      <p>The second parameter, <code>value</code>, is the attribute's new value.
-      For example,
-
-      calling <code>myXML.setAttribute('id', 123)</code> sets the
-      <code>id</code> attribute to the
-
-      value 123.</p>
-    path: p5.XML/setAttribute
-  getContent:
-    description: >
-      <p>Returns the element's content as a <code>String</code>.</p>
-
-      <p>The parameter, <code>defaultValue</code>, is optional. If a string is
-      passed, as in
-
-      <code>myXML.getContent('???')</code>, it will be returned if the element
-      has no
-
-      content.</p>
-    path: p5.XML/getContent
-  setContent:
-    description: >
-      <p>Sets the element's content.</p>
-
-      <p>An element's content is the text between its tags. For example, the
-      element
-
-      <code><language>JavaScript</language></code> has the content
-      <code>JavaScript</code>.</p>
-
-      <p>The parameter, <code>content</code>, is a string with the element's new
-      content.</p>
-    path: p5.XML/setContent
-  serialize:
-    description: >
-      <p>Returns the element as a <code>String</code>.</p>
-
-      <p><code>myXML.serialize()</code> is useful for sending the element over
-      the network or
-
-      saving it to a file.</p>
-    path: p5.XML/serialize
-chainable: false
----
-
-
-# p5.XML
diff --git a/src/content/reference/en/p5 copy/p5.mdx b/src/content/reference/en/p5 copy/p5.mdx
deleted file mode 100644
index c51b8f8bff..0000000000
--- a/src/content/reference/en/p5 copy/p5.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L12
-title: p5
-module: IO
-submodule: Output
-file: src/core/main.js
-description: >
-  <p>This is the p5 instance constructor.</p>
-
-  <p>A p5 instance holds all the properties and methods related to
-
-  a p5 sketch.  It expects an incoming sketch closure and it can also
-
-  take an optional node parameter for attaching the generated p5 canvas
-
-  to a node.  The sketch closure takes the newly created p5 instance as
-
-  its sole argument and may optionally set <a
-  href="/reference/p5/preload/">preload()</a>,
-
-  <a href="/reference/p5/setup/">setup()</a>, and/or
-
-  <a href="/reference/p5/draw/">draw()</a> properties on it for running a
-  sketch.</p>
-
-  <p>A p5 sketch can run in "global" or "instance" mode:
-
-  "global"   - all properties and methods are attached to the window
-
-  "instance" - all properties and methods are bound to this p5 object</p>
-line: 12
-isConstructor: true
-params:
-  - name: sketch
-    description: |
-      <p>a closure that can set optional <a href="#/p5/preload">preload()</a>,
-                                   <a href="#/p5/setup">setup()</a>, and/or <a href="#/p5/draw">draw()</a> properties on the
-                                   given p5 instance</p>
-    type: Function(p5)
-  - name: node
-    description: |
-      <p>element to attach canvas to</p>
-    type: HTMLElement
-    optional: true
-chainable: false
----
-
-
-# p5
diff --git a/src/content/reference/en/p5 copy/pAccelerationX.mdx b/src/content/reference/en/p5 copy/pAccelerationX.mdx
deleted file mode 100644
index ab1f3e49d1..0000000000
--- a/src/content/reference/en/p5 copy/pAccelerationX.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L90
-title: pAccelerationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable pAccelerationX always contains the acceleration of the
-  device along the x axis in the frame previous to the current frame. Value
-  is represented as meters per second squared.</p>
-line: 90
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# pAccelerationX
diff --git a/src/content/reference/en/p5 copy/pAccelerationY.mdx b/src/content/reference/en/p5 copy/pAccelerationY.mdx
deleted file mode 100644
index 188ae8f77c..0000000000
--- a/src/content/reference/en/p5 copy/pAccelerationY.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L100
-title: pAccelerationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable pAccelerationY always contains the acceleration of the
-  device along the y axis in the frame previous to the current frame. Value
-  is represented as meters per second squared.</p>
-line: 100
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# pAccelerationY
diff --git a/src/content/reference/en/p5 copy/pAccelerationZ.mdx b/src/content/reference/en/p5 copy/pAccelerationZ.mdx
deleted file mode 100644
index f291e6b707..0000000000
--- a/src/content/reference/en/p5 copy/pAccelerationZ.mdx	
+++ /dev/null
@@ -1,21 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L110
-title: pAccelerationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable pAccelerationZ always contains the acceleration of the
-  device along the z axis in the frame previous to the current frame. Value
-  is represented as meters per second squared.</p>
-line: 110
-isConstructor: false
-itemtype: property
-class: p5
-type: Number
----
-
-
-# pAccelerationZ
diff --git a/src/content/reference/en/p5 copy/pRotationX.mdx b/src/content/reference/en/p5 copy/pRotationX.mdx
deleted file mode 100644
index 03d80f8ae5..0000000000
--- a/src/content/reference/en/p5 copy/pRotationX.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L234
-title: pRotationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable pRotationX always contains the rotation of the
-
-  device along the x axis in the frame previous to the current frame.
-
-  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
-  DEGREES,
-
-  the value will be -180 to 180. If it is set to RADIANS, the value will
-
-  be -PI to PI.</p>
-
-  <p>pRotationX can also be used with rotationX to determine the rotate
-
-  direction of the device along the X-axis.</p>
-line: 234
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // A simple if statement looking at whether
-    // rotationX - pRotationX < 0 is true or not will be
-    // sufficient for determining the rotate direction
-    // in most cases.
-
-    // Some extra logic is needed to account for cases where
-    // the angles wrap around.
-    let rotateDirection = 'clockwise';
-
-    // Simple range conversion to make things simpler.
-    // This is not absolutely necessary but the logic
-    // will be different in that case.
-
-    let rX = rotationX + 180;
-    let pRX = pRotationX + 180;
-
-    if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
-      rotateDirection = 'clockwise';
-    } else if (rX - pRX < 0 || rX - pRX > 270) {
-      rotateDirection = 'counter-clockwise';
-    }
-
-    print(rotateDirection);
-    describe('no image to display.');
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pRotationX
diff --git a/src/content/reference/en/p5 copy/pRotationY.mdx b/src/content/reference/en/p5 copy/pRotationY.mdx
deleted file mode 100644
index 3a15f47f43..0000000000
--- a/src/content/reference/en/p5 copy/pRotationY.mdx	
+++ /dev/null
@@ -1,62 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L278
-title: pRotationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable pRotationY always contains the rotation of the
-
-  device along the y axis in the frame previous to the current frame.
-
-  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
-  DEGREES,
-
-  the value will be -90 to 90. If it is set to RADIANS, the value will
-
-  be -PI/2 to PI/2.</p>
-
-  <p>pRotationY can also be used with rotationY to determine the rotate
-
-  direction of the device along the Y-axis.</p>
-line: 278
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // A simple if statement looking at whether
-    // rotationY - pRotationY < 0 is true or not will be
-    // sufficient for determining the rotate direction
-    // in most cases.
-
-    // Some extra logic is needed to account for cases where
-    // the angles wrap around.
-    let rotateDirection = 'clockwise';
-
-    // Simple range conversion to make things simpler.
-    // This is not absolutely necessary but the logic
-    // will be different in that case.
-
-    let rY = rotationY + 180;
-    let pRY = pRotationY + 180;
-
-    if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
-      rotateDirection = 'clockwise';
-    } else if (rY - pRY < 0 || rY - pRY > 270) {
-      rotateDirection = 'counter-clockwise';
-    }
-    print(rotateDirection);
-    describe('no image to display.');
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pRotationY
diff --git a/src/content/reference/en/p5 copy/pRotationZ.mdx b/src/content/reference/en/p5 copy/pRotationZ.mdx
deleted file mode 100644
index 4ae6d5e63f..0000000000
--- a/src/content/reference/en/p5 copy/pRotationZ.mdx	
+++ /dev/null
@@ -1,58 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L321
-title: pRotationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The system variable pRotationZ always contains the rotation of the
-
-  device along the z axis in the frame previous to the current frame.
-
-  If the sketch <a href="/reference/p5/angleMode/"> angleMode()</a> is set to
-  DEGREES,
-
-  the value will be 0 to 360. If it is set to RADIANS, the value will
-
-  be 0 to 2*PI.</p>
-
-  <p>pRotationZ can also be used with rotationZ to determine the rotate
-
-  direction of the device along the Z-axis.</p>
-line: 321
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    // A simple if statement looking at whether
-    // rotationZ - pRotationZ < 0 is true or not will be
-    // sufficient for determining the rotate direction
-    // in most cases.
-
-    // Some extra logic is needed to account for cases where
-    // the angles wrap around.
-    let rotateDirection = 'clockwise';
-
-    if (
-      (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
-      rotationZ - pRotationZ < -270
-    ) {
-      rotateDirection = 'clockwise';
-    } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
-      rotateDirection = 'counter-clockwise';
-    }
-    print(rotateDirection);
-    describe('no image to display.');
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pRotationZ
diff --git a/src/content/reference/en/p5 copy/paletteLerp.mdx b/src/content/reference/en/p5 copy/paletteLerp.mdx
deleted file mode 100644
index 54e8c9f885..0000000000
--- a/src/content/reference/en/p5 copy/paletteLerp.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1079
-title: paletteLerp
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Blends multiple colors to find a color between them.</p>
-
-  <p>The <code>amt</code> parameter specifies the amount to interpolate between
-  the color
-
-  stops which are colors at each <code>amt</code> value "location" with
-  <code>amt</code> values
-
-  that are between 2 color stops interpolating between them based on its
-  relative
-
-  distance to both.</p>
-
-  <p>The way that colors are interpolated depends on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 1079
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(400, 400);
-    }
-
-    function draw() {
-      // The background goes from white to red to green to blue fill
-      background(paletteLerp([
-        ['white', 0],
-        ['red', 0.05],
-        ['green', 0.25],
-        ['blue', 1]
-      ], millis() / 10000 % 1));
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: colors_stops
-    description: |
-      <p>color stops to interpolate from</p>
-    type: '[p5.Color, Number][]'
-  - name: amt
-    description: |
-      <p>number to use to interpolate relative to color stops</p>
-    type: Number
-return:
-  description: interpolated color.
-  type: p5.Color
-chainable: false
----
-
-
-# paletteLerp
diff --git a/src/content/reference/en/p5 copy/panorama.mdx b/src/content/reference/en/p5 copy/panorama.mdx
deleted file mode 100644
index 97ee1fd9ca..0000000000
--- a/src/content/reference/en/p5 copy/panorama.mdx	
+++ /dev/null
@@ -1,76 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1021
-title: panorama
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates an immersive 3D background.</p>
-
-  <p><code>panorama()</code> transforms images containing 360˚ content, such as
-  maps or
-
-  HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
-
-  space requires changing the camera's perspective with functions such as
-
-  <a href="/reference/p5/orbitControl/">orbitControl()</a> or
-
-  <a href="/reference/p5/camera/">camera()</a>.</p>
-line: 1021
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="notest">
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/outdoor_spheremap.jpg');
-    }
-
-    function setup() {
-      createCanvas(100 ,100 ,WEBGL);
-
-      describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
-    }
-
-    function draw() {
-      // Add the panorama.
-      panorama(img);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Use the image as a light source.
-      imageLight(img);
-
-      // Style the sphere.
-      noStroke();
-      specularMaterial(50);
-      shininess(200);
-      metalness(100);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: img
-    description: |
-      <p>360˚ image to use as the background.</p>
-    type: p5.Image
-chainable: false
----
-
-
-# panorama
diff --git a/src/content/reference/en/p5 copy/perspective.mdx b/src/content/reference/en/p5 copy/perspective.mdx
deleted file mode 100644
index 21cca35746..0000000000
--- a/src/content/reference/en/p5 copy/perspective.mdx	
+++ /dev/null
@@ -1,194 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L148
-title: perspective
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets a perspective projection for the current camera in a 3D sketch.</p>
-
-  <p>In a perspective projection, shapes that are further from the camera appear
-
-  smaller than shapes that are near the camera. This technique, called
-
-  foreshortening, creates realistic 3D scenes. It’s applied by default in
-
-  WebGL mode.</p>
-
-  <p><code>perspective()</code> changes the camera’s perspective by changing its
-  viewing
-
-  frustum. The frustum is the volume of space that’s visible to the camera.
-
-  Its shape is a pyramid with its top cut off. The camera is placed where
-
-  the top of the pyramid should be and views everything between the frustum’s
-
-  top (near) plane and its bottom (far) plane.</p>
-
-  <p>The first parameter, <code>fovy</code>, is the camera’s vertical field of
-  view. It’s
-
-  an angle that describes how tall or narrow a view the camera has. For
-
-  example, calling <code>perspective(0.5)</code> sets the camera’s vertical
-  field of
-
-  view to 0.5 radians. By default, <code>fovy</code> is calculated based on the
-  sketch’s
-
-  height and the camera’s default z-coordinate, which is 800. The formula for
-
-  the default <code>fovy</code> is <code>2 * atan(height / 2 / 800)</code>.</p>
-
-  <p>The second parameter, <code>aspect</code>, is the camera’s aspect ratio.
-  It’s a number
-
-  that describes the ratio of the top plane’s width to its height. For
-
-  example, calling <code>perspective(0.5, 1.5)</code> sets the camera’s field of
-  view to
-
-  0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner
-
-  on a square canvas. By default, aspect is set to <code>width /
-  height</code>.</p>
-
-  <p>The third parameter, <code>near</code>, is the distance from the camera to
-  the near
-
-  plane. For example, calling <code>perspective(0.5, 1.5, 100)</code> sets the
-  camera’s
-
-  field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
-
-  plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
-
-  from the camera won’t be visible. By default, near is set to <code>0.1 *
-  800</code>,
-
-  which is 1/10th the default distance between the camera and the origin.</p>
-
-  <p>The fourth parameter, <code>far</code>, is the distance from the camera to
-  the far
-
-  plane. For example, calling <code>perspective(0.5, 1.5, 100, 10000)</code>
-  sets the
-
-  camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
-
-  near plane 100 pixels from the camera, and places the far plane 10,000
-
-  pixels from the camera. Any shapes drawn more than 10,000 pixels from the
-
-  camera won’t be visible. By default, far is set to <code>10 * 800</code>,
-  which is 10
-
-  times the default distance between the camera and the origin.</p>
-
-  <p>Note: <code>perspective()</code> can only be used in WebGL mode.</p>
-line: 148
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to squeeze the box.
-
-    let isSqueezed = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Place the camera at the top-right.
-      camera(400, -400, 800);
-
-      if (isSqueezed === true) {
-        // Set fovy to 0.2.
-        // Set aspect to 1.5.
-        perspective(0.2, 1.5);
-      }
-
-      // Draw the box.
-      box();
-    }
-
-    // Change the camera's perspective when the user double-clicks.
-    function doubleClicked() {
-      isSqueezed = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Place the camera at the top-right.
-      camera(400, -400, 800);
-
-      // Set fovy to 0.2.
-      // Set aspect to 1.5.
-      // Set near to 600.
-      // Set far to 1200.
-      perspective(0.2, 1.5, 600, 1200);
-
-      // Move the origin away from the camera.
-      let x = -frameCount;
-      let y = frameCount;
-      let z = -2 * frameCount;
-      translate(x, y, z);
-
-      // Draw the box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: fovy
-    description: |
-      <p>camera frustum vertical field of view. Defaults to
-                                <code>2 * atan(height / 2 / 800)</code>.</p>
-    type: Number
-    optional: true
-  - name: aspect
-    description: |
-      <p>camera frustum aspect ratio. Defaults to
-                                <code>width / height</code>.</p>
-    type: Number
-    optional: true
-  - name: near
-    description: |
-      <p>distance from the camera to the near clipping plane.
-                                Defaults to <code>0.1 * 800</code>.</p>
-    type: Number
-    optional: true
-  - name: far
-    description: |
-      <p>distance from the camera to the far clipping plane.
-                                Defaults to <code>10 * 800</code>.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# perspective
diff --git a/src/content/reference/en/p5 copy/pixelDensity.mdx b/src/content/reference/en/p5 copy/pixelDensity.mdx
deleted file mode 100644
index 808ebab227..0000000000
--- a/src/content/reference/en/p5 copy/pixelDensity.mdx	
+++ /dev/null
@@ -1,90 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L1005
-title: pixelDensity
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Sets the pixel density or returns the current density.</p>
-
-  <p>Computer displays are grids of little lights called <em>pixels</em>. A
-
-  display's <em>pixel density</em> describes how many pixels it packs into an
-
-  area. Displays with smaller pixels have a higher pixel density and create
-
-  sharper images.</p>
-
-  <p><code>pixelDensity()</code> sets the pixel scaling for high pixel density
-  displays.
-
-  By default, the pixel density is set to match the display's density.
-
-  Calling <code>pixelDensity(1)</code> turn this off.</p>
-
-  <p>Calling <code>pixelDensity()</code> without an argument returns the current
-  pixel
-
-  density.</p>
-line: 1005
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Set the pixel density to 1.
-      pixelDensity(1);
-
-      // Create a canvas and draw
-      // a circle.
-      createCanvas(100, 100);
-      background(200);
-      circle(50, 50, 70);
-
-      describe('A fuzzy white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Set the pixel density to 3.
-      pixelDensity(3);
-
-      // Create a canvas, paint the
-      // background, and draw a
-      // circle.
-      createCanvas(100, 100);
-      background(200);
-      circle(50, 50, 70);
-
-      describe('A sharp white circle on a gray canvas.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1005
-    params:
-      - name: val
-        description: |
-          <p>desired pixel density.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1059
-    params: []
-    return:
-      description: current pixel density of the sketch.
-      type: Number
-chainable: true
----
-
-
-# pixelDensity
diff --git a/src/content/reference/en/p5 copy/pixels.mdx b/src/content/reference/en/p5 copy/pixels.mdx
deleted file mode 100644
index 7185d708bf..0000000000
--- a/src/content/reference/en/p5 copy/pixels.mdx	
+++ /dev/null
@@ -1,173 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L12
-title: pixels
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>An array containing the color of each pixel on the canvas.</p>
-
-  <p>Colors are stored as numbers representing red, green, blue, and alpha
-
-  (RGBA) values. <code>pixels</code> is a one-dimensional array for performance
-  reasons.</p>
-
-  <p>Each pixel occupies four elements in the <code>pixels</code> array, one for
-  each RGBA
-
-  value. For example, the pixel at coordinates (0, 0) stores its RGBA values
-
-  at <code>pixels[0]</code>, <code>pixels[1]</code>, <code>pixels[2]</code>, and
-  <code>pixels[3]</code>, respectively.
-
-  The next pixel at coordinates (1, 0) stores its RGBA values at
-  <code>pixels[4]</code>,
-
-  <code>pixels[5]</code>, <code>pixels[6]</code>, and <code>pixels[7]</code>.
-  And so on. The <code>pixels</code> array
-
-  for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.</p>
-
-  <p>Some displays use several smaller pixels to set the color at a single
-
-  point. The <a href="/reference/p5/pixelDensity/">pixelDensity()</a> function
-  returns
-
-  the pixel density of the canvas. High density displays often have a
-
-  <a href="/reference/p5/pixelDensity/">pixelDensity()</a> of 2. On such a
-  display, the
-
-  <code>pixels</code> array for a 100×100 canvas has 200 × 200 × 4 =
-
-  160,000 elements.</p>
-
-  <p>Accessing the RGBA values for a point on the canvas requires a little math
-
-  as shown below. The <a href="/reference/p5/loadPixels/">loadPixels()</a>
-  function
-
-  must be called before accessing the <code>pixels</code> array. The
-
-  <a href="/reference/p5/updatePixels/">updatePixels()</a> function must be
-  called
-
-  after any changes are made.</p>
-line: 12
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Set the dot's coordinates.
-      let x = 50;
-      let y = 50;
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Set the pixel(s) at the center of the canvas black.
-      for (let i = 0; i < d; i += 1) {
-        for (let j = 0; j < d; j += 1) {
-          let index = 4 * ((y * d + j) * width * d + (x * d + i));
-          // Red.
-          pixels[index] = 0;
-          // Green.
-          pixels[index + 1] = 0;
-          // Blue.
-          pixels[index + 2] = 0;
-          // Alpha.
-          pixels[index + 3] = 255;
-        }
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A black dot in the middle of a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Make the top half of the canvas red.
-      for (let i = 0; i < halfImage; i += 4) {
-        // Red.
-        pixels[i] = 255;
-        // Green.
-        pixels[i + 1] = 0;
-        // Blue.
-        pixels[i + 2] = 0;
-        // Alpha.
-        pixels[i + 3] = 255;
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A red rectangle drawn above a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let pink = color(255, 102, 204);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Make the top half of the canvas red.
-      for (let i = 0; i < halfImage; i += 4) {
-        pixels[i] = red(pink);
-        pixels[i + 1] = green(pink);
-        pixels[i + 2] = blue(pink);
-        pixels[i + 3] = alpha(pink);
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A pink rectangle drawn above a gray rectangle.');
-    }
-    </code>
-    </div>
-class: p5
-type: 'Number[]'
----
-
-
-# pixels
diff --git a/src/content/reference/en/p5 copy/plane.mdx b/src/content/reference/en/p5 copy/plane.mdx
deleted file mode 100644
index eefeb29b7a..0000000000
--- a/src/content/reference/en/p5 copy/plane.mdx	
+++ /dev/null
@@ -1,152 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L866
-title: plane
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a plane.</p>
-
-  <p>A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
-
-  similar to a rectangle and offers advanced drawing features in WebGL mode.</p>
-
-  <p>The first parameter, <code>width</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>plane(20)</code>, it sets the plane’s width and height. By default,
-  <code>width</code> is
-
-  50.</p>
-
-  <p>The second parameter, <code>height</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>plane(20, 30)</code>, it sets the plane’s height. By default,
-  <code>height</code> is
-
-  set to the plane’s <code>width</code>.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>plane(20, 30, 5)</code> it sets the number of triangle
-  subdivisions to use
-
-  along the x-axis. All 3D shapes are made by connecting triangles to form
-
-  their surfaces. By default, <code>detailX</code> is 1.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>plane(20, 30, 5, 7)</code> it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailY</code> is 1.</p>
-
-  <p>Note: <code>plane()</code> can only be used in WebGL mode.</p>
-line: 866
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white plane on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the plane.
-      plane();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white plane on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the plane.
-      // Set its width and height to 30.
-      plane(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white plane on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the plane.
-      // Set its width to 30 and height to 50.
-      plane(30, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width of the plane.</p>
-    type: Number
-    optional: true
-  - name: height
-    description: |
-      <p>height of the plane.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# plane
diff --git a/src/content/reference/en/p5 copy/pmouseX.mdx b/src/content/reference/en/p5 copy/pmouseX.mdx
deleted file mode 100644
index 5f5e8ff7f7..0000000000
--- a/src/content/reference/en/p5 copy/pmouseX.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L333
-title: pmouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's previous
-  horizontal
-
-  position.</p>
-
-  <p><code>pmouseX</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. Its value is
-
-  <a href="/reference/p5/mouseX/">mouseX</a> from the previous frame. For
-  example, if
-
-  the mouse was 50 pixels from the left edge of the canvas during the last
-
-  frame, then <code>pmouseX</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>pmouseX</code> will hold
-  the
-
-  x-coordinate of the last touch point.</p>
-
-  <p>Note: <code>pmouseX</code> is reset to the current <a
-  href="/reference/p5/mouseX/">mouseX</a>
-
-  value at the start of each touch event.</p>
-line: 333
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      line(pmouseX, pmouseY, mouseX, mouseY);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let pmx = pmouseX - 50;
-      let pmy = pmouseY - 50;
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Draw the line.
-      line(pmx, pmy, mx, my);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pmouseX
diff --git a/src/content/reference/en/p5 copy/pmouseY.mdx b/src/content/reference/en/p5 copy/pmouseY.mdx
deleted file mode 100644
index 558747e43f..0000000000
--- a/src/content/reference/en/p5 copy/pmouseY.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L398
-title: pmouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> system variable that tracks the mouse's previous
-  vertical
-
-  position.</p>
-
-  <p><code>pmouseY</code> keeps track of the mouse's position relative to the
-
-  top-left corner of the canvas. Its value is
-
-  <a href="/reference/p5/mouseY/">mouseY</a> from the previous frame. For
-  example, if
-
-  the mouse was 50 pixels from the top edge of the canvas during the last
-
-  frame, then <code>pmouseY</code> will be 50.</p>
-
-  <p>If touch is used instead of the mouse, then <code>pmouseY</code> will hold
-  the
-
-  y-coordinate of the last touch point.</p>
-
-  <p>Note: <code>pmouseY</code> is reset to the current <a
-  href="/reference/p5/mouseY/">mouseY</a>
-
-  value at the start of each touch event.</p>
-line: 398
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      line(pmouseX, pmouseY, mouseX, mouseY);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A line follows the mouse as it moves. The line grows longer with faster movements.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Adjust coordinates for WebGL mode.
-      // The origin (0, 0) is at the center of the canvas.
-      let pmx = pmouseX - 50;
-      let pmy = pmouseY - 50;
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Draw the line.
-      line(pmx, pmy, mx, my);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pmouseY
diff --git a/src/content/reference/en/p5 copy/point.mdx b/src/content/reference/en/p5 copy/point.mdx
deleted file mode 100644
index 7912c06cbb..0000000000
--- a/src/content/reference/en/p5 copy/point.mdx	
+++ /dev/null
@@ -1,229 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L721
-title: point
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a single point in space.</p>
-
-  <p>A point's default width is one pixel. To color a point, use the
-
-  <a href="/reference/p5/stroke/">stroke()</a> function. To change its width,
-  use the
-
-  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> function. A point
-
-  can't be filled, so the <a href="/reference/p5/fill/">fill()</a> function
-  won't
-
-  affect the point's color.</p>
-
-  <p>The version of <code>point()</code> with two parameters allows the point's
-  location to
-
-  be set with its x- and y-coordinates, as in <code>point(10, 20)</code>.</p>
-
-  <p>The version of <code>point()</code> with three parameters allows the point
-  to be drawn
-
-  in 3D space with x-, y-, and z-coordinates, as in <code>point(10, 20,
-  30)</code>.
-
-  Doing so requires adding the <code>WEBGL</code> argument to
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
-
-  <p>The version of <code>point()</code> with one parameter allows the point's
-  location to
-
-  be set with a <a href="/reference/p5/p5.Vector">p5.Vector</a> object.</p>
-line: 721
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-
-      // Making point to 5 pixels
-      strokeWeight(5);
-
-
-      // Top-left.
-      point(30, 20);
-
-      // Top-right.
-      point(85, 20);
-
-      // Bottom-right.
-      point(85, 75);
-
-      // Bottom-left.
-      point(30, 75);
-
-      describe(
-        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-
-      // Making point to 5 pixels.
-      strokeWeight(5);
-
-
-      // Top-left.
-      point(30, 20);
-
-      // Top-right.
-      point(70, 20);
-
-      // Style the next points.
-      stroke('purple');
-      strokeWeight(10);
-
-      // Bottom-right.
-      point(70, 80);
-
-      // Bottom-left.
-      point(30, 80);
-
-      describe(
-        'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-
-      // Making point to 5 pixels.
-      strokeWeight(5);
-
-
-      // Top-left.
-      let a = createVector(30, 20);
-      point(a);
-
-      // Top-right.
-      let b = createVector(70, 20);
-      point(b);
-
-      // Bottom-right.
-      let c = createVector(70, 80);
-      point(c);
-
-      // Bottom-left.
-      let d = createVector(30, 80);
-      point(d);
-
-      describe(
-        'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Two purple points drawn on a gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the points.
-      stroke('purple');
-      strokeWeight(10);
-
-      // Top-left.
-      point(-20, -30);
-
-      // Bottom-right.
-      point(20, 30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Two purple points drawn on a gray canvas. The scene spins slowly.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Style the points.
-      stroke('purple');
-      strokeWeight(10);
-
-      // Top-left.
-      point(-20, -30, 0);
-
-      // Bottom-right.
-      point(20, 30, -50);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 721
-    params:
-      - name: x
-        description: |
-          <p>the x-coordinate.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>the y-coordinate.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>the z-coordinate (for WebGL mode).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 900
-    params:
-      - name: coordinateVector
-        description: |
-          <p>the coordinate vector.</p>
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# point
diff --git a/src/content/reference/en/p5 copy/pointLight.mdx b/src/content/reference/en/p5 copy/pointLight.mdx
deleted file mode 100644
index c6f10715b9..0000000000
--- a/src/content/reference/en/p5 copy/pointLight.mdx	
+++ /dev/null
@@ -1,329 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L683
-title: pointLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines from a point in all directions.</p>
-
-  <p>Point lights are like light bulbs that shine in all directions. They can be
-
-  placed at different positions to achieve different lighting effects. A
-
-  maximum of 5 point lights can be active at once.</p>
-
-  <p>There are four ways to call <code>pointLight()</code> with parameters to
-  set the
-
-  light’s color and position.</p>
-
-  <p>The first way to call <code>pointLight()</code> has six parameters. The
-  first three
-
-  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
-  light’s color using the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The last three parameters,
-  <code>x</code>,
-
-  <code>y</code>, and <code>z</code>, set the light’s position. For example,
-
-  <code>pointLight(255, 0, 0, 50, 0, 0)</code> creates a red <code>(255, 0,
-  0)</code> light that
-
-  shines from the coordinates <code>(50, 0, 0)</code>.</p>
-
-  <p>The second way to call <code>pointLight()</code> has four parameters. The
-  first three
-
-  parameters, <code>v1</code>, <code>v2</code>, and <code>v3</code>, set the
-  light’s color using the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The last parameter,
-  position sets
-
-  the light’s position using a <a href="/reference/p5/p5.Vector">p5.Vector</a>
-  object.
-
-  For example, <code>pointLight(255, 0, 0, lightPos)</code> creates a red
-  <code>(255, 0, 0)</code>
-
-  light that shines from the position set by the <code>lightPos</code>
-  vector.</p>
-
-  <p>The third way to call <code>pointLight()</code> has four parameters. The
-  first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  last three parameters, <code>x</code>, <code>y</code>, and <code>z</code>, set
-  the light’s position. For
-
-  example, <code>directionalLight(myColor, 50, 0, 0)</code> creates a light that
-  shines
-
-  from the coordinates <code>(50, 0, 0)</code> with the color value of
-  <code>myColor</code>.</p>
-
-  <p>The fourth way to call <code>pointLight()</code> has two parameters. The
-  first
-
-  parameter, <code>color</code>, sets the light’s color using a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object or an array of color
-  values. The
-
-  second parameter, <code>position</code>, sets the light’s position using a
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object. For example,
-
-  <code>directionalLight(myColor, lightPos)</code> creates a light that shines
-  from the
-
-  position set by the <code>lightPos</code> vector with the color value of
-  <code>myColor</code>.</p>
-line: 683
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to turn on the point light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Control the light.
-      if (isLit === true) {
-        // Add a red point light from above.
-        // Use RGB values and XYZ coordinates.
-        pointLight(255, 0, 0, 0, -150, 0);
-      }
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the point light when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red point light from above.
-      // Use a p5.Color object and XYZ directions.
-      let c = color(255, 0, 0);
-      pointLight(c, 0, -150, 0);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red point light from above.
-      // Use a p5.Color object and a p5.Vector object.
-      let c = color(255, 0, 0);
-      let lightPos = createVector(0, -150, 0);
-      pointLight(c, lightPos);
-
-      // Style the sphere.
-      noStroke();
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a red point light that points to the center of the scene.
-      // Use a p5.Color object and a p5.Vector object.
-      let c = color(255, 0, 0);
-      let lightPos = createVector(0, 0, 65);
-      pointLight(c, lightPos);
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw a sphere up and to the left.
-      push();
-      translate(-25, -25, 25);
-      sphere(10);
-      pop();
-
-      // Draw a box up and to the right.
-      push();
-      translate(25, -25, 25);
-      sphere(10);
-      pop();
-
-      // Draw a sphere down and to the left.
-      push();
-      translate(-25, 25, 25);
-      sphere(10);
-      pop();
-
-      // Draw a box down and to the right.
-      push();
-      translate(25, 25, 25);
-      sphere(10);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 683
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                 <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: x
-        description: |
-          <p>x-coordinate of the light.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the light.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the light.</p>
-        type: Number
-    chainable: 1
-  - line: 890
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: position
-        description: |
-          <p>position of the light as a
-                                        <a href="#/p5.Vector">p5.Vector</a> object.</p>
-        type: p5.Vector
-    chainable: 1
-  - line: 900
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                                                   an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-    chainable: 1
-  - line: 910
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: position
-        description: ''
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# pointLight
diff --git a/src/content/reference/en/p5 copy/pop.mdx b/src/content/reference/en/p5 copy/pop.mdx
deleted file mode 100644
index 72b5c1db21..0000000000
--- a/src/content/reference/en/p5 copy/pop.mdx	
+++ /dev/null
@@ -1,20 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L553
-title: pop
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: "<p>Ends a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <a href=\"/reference/p5/push/\">push()</a> and <code>pop()</code> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
-line: 553
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
-class: p5
-chainable: false
----
-
-
-# pop
diff --git a/src/content/reference/en/p5 copy/pow.mdx b/src/content/reference/en/p5 copy/pow.mdx
deleted file mode 100644
index 18201ec3c2..0000000000
--- a/src/content/reference/en/p5 copy/pow.mdx	
+++ /dev/null
@@ -1,67 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L815
-title: pow
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: |
-  <p>Calculates exponential expressions such as <var>2<sup>3</sup></var>.</p>
-  <p>For example, <code>pow(2, 3)</code> evaluates the expression
-  2 × 2 × 2. <code>pow(2, -3)</code> evaluates 1 ÷
-  (2 × 2 × 2).</p>
-line: 815
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set the base of the exponent.
-      let base = 3;
-
-      // Top-left.
-      let d = pow(base, 1);
-      circle(10, 10, d);
-
-      // Left-center.
-      d = pow(base, 2);
-      circle(20, 20, d);
-
-      // Right-center.
-      d = pow(base, 3);
-      circle(40, 40, d);
-
-      // Bottom-right.
-      d = pow(base, 4);
-      circle(80, 80, d);
-
-      describe('A series of circles that grow exponentially from top left to bottom right.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>base of the exponential expression.</p>
-    type: Number
-  - name: e
-    description: |
-      <p>power by which to raise the base.</p>
-    type: Number
-return:
-  description: n^e.
-  type: Number
-chainable: false
----
-
-
-# pow
diff --git a/src/content/reference/en/p5 copy/preload.mdx b/src/content/reference/en/p5 copy/preload.mdx
deleted file mode 100644
index 66d5db4378..0000000000
--- a/src/content/reference/en/p5 copy/preload.mdx	
+++ /dev/null
@@ -1,70 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L41
-title: preload
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>A function that's called once to load assets before the sketch runs.</p>
-
-  <p>Declaring the function <code>preload()</code> sets a code block to run once
-
-  automatically before <a href="/reference/p5/setup/">setup()</a> or
-
-  <a href="/reference/p5/draw/">draw()</a>. It's used to load assets including
-
-  multimedia files, fonts, data, and 3D models:</p>
-
-  <pre><code class="language-js">function preload() {
-    // Code to run before the rest of the sketch.
-  }
-
-  </code></pre>
-
-  <p>Functions such as <a href="/reference/p5/loadImage/">loadImage()</a>,
-
-  <a href="/reference/p5/loadFont/">loadFont()</a>,
-
-  <a href="/reference/p5/loadJSON/">loadJSON()</a>, and
-
-  <a href="/reference/p5/loadModel/">loadModel()</a> are guaranteed to either
-
-  finish loading or raise an error if they're called within
-  <code>preload()</code>.
-
-  Doing so ensures that assets are available when the sketch begins
-
-  running.</p>
-line: 41
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe('A red brick wall.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# preload
diff --git a/src/content/reference/en/p5 copy/print.mdx b/src/content/reference/en/p5 copy/print.mdx
deleted file mode 100644
index 50137586ae..0000000000
--- a/src/content/reference/en/p5 copy/print.mdx	
+++ /dev/null
@@ -1,55 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L21
-title: print
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>Displays text in the web browser's console.</p>
-
-  <p><code>print()</code> is helpful for printing values while debugging. Each
-  call to
-
-  <code>print()</code> creates a new line of text.</p>
-
-  <p>Note: Call <code>print('\n')</code> to print a blank line. Calling
-  <code>print()</code> without
-
-  an argument opens the browser's dialog for printing documents.</p>
-line: 21
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Prints "hello, world" to the console.
-      print('hello, world');
-    }
-    </code>
-    </div>
-
-    <div class="norender">
-    <code>
-    function setup() {
-      let name = 'ada';
-      // Prints "hello, ada" to the console.
-      print(`hello, ${name}`);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: contents
-    description: |
-      <p>content to print to the console.</p>
-    type: Any
-chainable: false
----
-
-
-# print
diff --git a/src/content/reference/en/p5 copy/push.mdx b/src/content/reference/en/p5 copy/push.mdx
deleted file mode 100644
index ee1a386cee..0000000000
--- a/src/content/reference/en/p5 copy/push.mdx	
+++ /dev/null
@@ -1,20 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L269
-title: push
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: "<p>Begins a drawing group that contains its own styles and transformations.</p>\n<p>By default, styles such as <a href=\"/reference/p5/fill/\">fill()</a> and\ntransformations such as <a href=\"/reference/p5/rotate/\">rotate()</a> are applied to\nall drawing that follows. The <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In the code snippet above, the bug's position isn't affected by\n<code>translate(mouseX, mouseY)</code> because that transformation is contained\nbetween <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a>. The bug moves around\nthe entire canvas as expected.</p>\n<p>Note: <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> are always called as a\npair. Both functions are required to begin and end a drawing group.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:</p>\n<pre><code class=\"language-js\">// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('\U0001F99F', x, y);\n</code></pre>\n<p>In this version, the code to draw each eye is contained between its own\n<code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> functions. Doing so makes it\neasier to add details in the correct part of a drawing.</p>\n<p><code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the effects of the\nfollowing functions:</p>\n<ul>\n<li><a href=\"/reference/p5/fill/\">fill()</a></li>\n<li><a href=\"/reference/p5/noFill/\">noFill()</a></li>\n<li><a href=\"/reference/p5/noStroke/\">noStroke()</a></li>\n<li><a href=\"/reference/p5/stroke/\">stroke()</a></li>\n<li><a href=\"/reference/p5/tint/\">tint()</a></li>\n<li><a href=\"/reference/p5/noTint/\">noTint()</a></li>\n<li><a href=\"/reference/p5/strokeWeight/\">strokeWeight()</a></li>\n<li><a href=\"/reference/p5/strokeCap/\">strokeCap()</a></li>\n<li><a href=\"/reference/p5/strokeJoin/\">strokeJoin()</a></li>\n<li><a href=\"/reference/p5/imageMode/\">imageMode()</a></li>\n<li><a href=\"/reference/p5/rectMode/\">rectMode()</a></li>\n<li><a href=\"/reference/p5/ellipseMode/\">ellipseMode()</a></li>\n<li><a href=\"/reference/p5/colorMode/\">colorMode()</a></li>\n<li><a href=\"/reference/p5/textAlign/\">textAlign()</a></li>\n<li><a href=\"/reference/p5/textFont/\">textFont()</a></li>\n<li><a href=\"/reference/p5/textSize/\">textSize()</a></li>\n<li><a href=\"/reference/p5/textLeading/\">textLeading()</a></li>\n<li><a href=\"/reference/p5/applyMatrix/\">applyMatrix()</a></li>\n<li><a href=\"/reference/p5/resetMatrix/\">resetMatrix()</a></li>\n<li><a href=\"/reference/p5/rotate/\">rotate()</a></li>\n<li><a href=\"/reference/p5/scale/\">scale()</a></li>\n<li><a href=\"/reference/p5/shearX/\">shearX()</a></li>\n<li><a href=\"/reference/p5/shearY/\">shearY()</a></li>\n<li><a href=\"/reference/p5/translate/\">translate()</a></li>\n</ul>\n<p>In WebGL mode, <code>push()</code> and <a href=\"/reference/p5/pop/\">pop()</a> contain the\neffects of a few additional styles:</p>\n<ul>\n<li><a href=\"/reference/p5/setCamera/\">setCamera()</a></li>\n<li><a href=\"/reference/p5/ambientLight/\">ambientLight()</a></li>\n<li><a href=\"/reference/p5/directionalLight/\">directionalLight()</a></li>\n<li><a href=\"/reference/p5/pointLight/\">pointLight()</a> <a href=\"/reference/p5/texture/\">texture()</a></li>\n<li><a href=\"/reference/p5/specularMaterial/\">specularMaterial()</a></li>\n<li><a href=\"/reference/p5/shininess/\">shininess()</a></li>\n<li><a href=\"/reference/p5/normalMaterial/\">normalMaterial()</a></li>\n<li><a href=\"/reference/p5/shader/\">shader()</a></li>\n</ul>\n"
-line: 269
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Draw the left circle.\n  circle(25, 50, 20);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the center.\n  translate(50, 50);\n\n  // Style the circle.\n  strokeWeight(5);\n  stroke('royalblue');\n  fill('orange');\n\n  // Draw the circle.\n  circle(0, 0, 20);\n\n  // End the drawing group.\n  pop();\n\n  // Draw the right circle.\n  circle(75, 50, 20);\n\n  describe(\n    'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n  );\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(24);\n\n  describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Begin the drawing group.\n  push();\n\n  // Translate the origin to the mouse's position.\n  translate(mouseX, mouseY);\n\n  // Style the face.\n  noStroke();\n  fill('green');\n\n  // Draw a face.\n  circle(0, 0, 60);\n\n  // Style the eyes.\n  fill('white');\n\n  // Draw the left eye.\n  push();\n  translate(-20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // Draw the right eye.\n  push();\n  translate(20, -20);\n  ellipse(0, 0, 30, 20);\n  fill('black');\n  circle(0, 0, 8);\n  pop();\n\n  // End the drawing group.\n  pop();\n\n  // Draw a bug.\n  let x = random(0, 100);\n  let y = random(0, 100);\n  text('\U0001F99F', x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n\n  describe(\n    'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n  );\n}\n\nfunction draw() {\n  background(200);\n\n  // Enable orbiting with the mouse.\n  orbitControl();\n\n  // Draw the red sphere.\n  push();\n  translate(-25, 0, 0);\n  noStroke();\n  directionalLight(255, 0, 0, 0, 0, -1);\n  sphere(20);\n  pop();\n\n  // Draw the blue sphere.\n  push();\n  translate(25, 0, 0);\n  strokeWeight(0.3);\n  stroke(0, 0, 255);\n  noFill();\n  sphere(20);\n  pop();\n}\n</code>\n</div>"
-class: p5
-chainable: false
----
-
-
-# push
diff --git a/src/content/reference/en/p5 copy/pwinMouseX.mdx b/src/content/reference/en/p5 copy/pwinMouseX.mdx
deleted file mode 100644
index cb869aea71..0000000000
--- a/src/content/reference/en/p5 copy/pwinMouseX.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L545
-title: pwinMouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's previous horizontal
-  position
-
-  within the browser.</p>
-
-  <p><code>pwinMouseX</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. Its value is
-
-  <a href="/reference/p5/winMouseX/">winMouseX</a> from the previous frame. For
-
-  example, if the mouse was 50 pixels from
-
-  the left edge of the browser during the last frame, then
-  <code>pwinMouseX</code> will
-
-  be 50.</p>
-
-  <p>On a touchscreen device, <code>pwinMouseX</code> will hold the x-coordinate
-  of the most
-
-  recent touch point. <code>pwinMouseX</code> is reset to the current
-
-  <a href="/reference/p5/winMouseX/">winMouseX</a> value at the start of each
-  touch
-
-  event.</p>
-
-  <p>Note: Use <a href="/reference/p5/pmouseX/">pmouseX</a> to track the mouse’s
-  previous
-
-  x-coordinate within the canvas.</p>
-line: 545
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A gray square. A white circle at its center grows larger when the mouse moves horizontally.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's diameter.
-      let d = winMouseX - pwinMouseX;
-
-      // Draw the circle.
-      circle(50, 50, d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create the canvas and set its position.
-      let cnv = createCanvas(100, 100);
-      cnv.position(20, 20);
-
-      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display pwinMouseX.
-      text(pwinMouseX, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pwinMouseX
diff --git a/src/content/reference/en/p5 copy/pwinMouseY.mdx b/src/content/reference/en/p5 copy/pwinMouseY.mdx
deleted file mode 100644
index 2f36580a23..0000000000
--- a/src/content/reference/en/p5 copy/pwinMouseY.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L616
-title: pwinMouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's previous vertical
-  position
-
-  within the browser.</p>
-
-  <p><code>pwinMouseY</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. Its value is
-
-  <a href="/reference/p5/winMouseY/">winMouseY</a> from the previous frame. For
-
-  example, if the mouse was 50 pixels from
-
-  the top edge of the browser during the last frame, then
-  <code>pwinMouseY</code> will
-
-  be 50.</p>
-
-  <p>On a touchscreen device, <code>pwinMouseY</code> will hold the y-coordinate
-  of the most
-
-  recent touch point. <code>pwinMouseY</code> is reset to the current
-
-  <a href="/reference/p5/winMouseY/">winMouseY</a> value at the start of each
-  touch
-
-  event.</p>
-
-  <p>Note: Use <a href="/reference/p5/pmouseY/">pmouseY</a> to track the mouse’s
-  previous
-
-  y-coordinate within the canvas.</p>
-line: 616
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(10);
-
-      describe('A gray square. A white circle at its center grows larger when the mouse moves vertically.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the circle's diameter.
-      let d = winMouseY - pwinMouseY;
-
-      // Draw the circle.
-      circle(50, 50, d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create the canvas and set its position.
-      let cnv = createCanvas(100, 100);
-      cnv.position(20, 20);
-
-      describe('A gray square with a number at its center. The number changes as the user moves the mouse vertically.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display pwinMouseY.
-      text(pwinMouseY, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# pwinMouseY
diff --git a/src/content/reference/en/p5 copy/quad.mdx b/src/content/reference/en/p5 copy/quad.mdx
deleted file mode 100644
index fbc09fa0a3..0000000000
--- a/src/content/reference/en/p5 copy/quad.mdx	
+++ /dev/null
@@ -1,233 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L928
-title: quad
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a quadrilateral (four-sided shape).</p>
-
-  <p>Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
-
-  first pair of parameters <code>(x1, y1)</code> sets the quad's first point.
-  The next
-
-  three pairs of parameters set the coordinates for its next three points
-
-  <code>(x2, y2)</code>, <code>(x3, y3)</code>, and <code>(x4, y4)</code>.
-  Points should be added in either
-
-  clockwise or counter-clockwise order.</p>
-
-  <p>The version of <code>quad()</code> with twelve parameters allows the quad
-  to be drawn
-
-  in 3D space. Doing so requires adding the <code>WEBGL</code> argument to
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a>.</p>
-
-  <p>The thirteenth and fourteenth parameters are optional. In WebGL mode, they
-
-  set the number of segments used to draw the quadrilateral in the x- and
-
-  y-directions. They're both 2 by default.</p>
-line: 928
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(20, 20, 80, 20, 80, 80, 20, 80);
-
-      describe('A white square with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(20, 30, 80, 30, 80, 70, 20, 70);
-
-      describe('A white rectangle with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(50, 62, 86, 50, 50, 38, 14, 50);
-
-      describe('A white rhombus with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      quad(20, 50, 80, 30, 80, 70, 20, 70);
-
-      describe('A white trapezoid with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      quad(-30, -30, 30, -30, 30, 30, -30, 30);
-
-      describe('A white square with a black outline drawn on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A wavy white surface spins around on gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the quad.
-      quad(-30, -30, 0, 30, -30, 0, 30, 30, 20, -30, 30, -20);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 928
-    params:
-      - name: x1
-        description: |
-          <p>the x-coordinate of the first point.</p>
-        type: Number
-      - name: y1
-        description: |
-          <p>the y-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: |
-          <p>the x-coordinate of the second point.</p>
-        type: Number
-      - name: y2
-        description: |
-          <p>the y-coordinate of the second point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>the x-coordinate of the third point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>the y-coordinate of the third point.</p>
-        type: Number
-      - name: x4
-        description: |
-          <p>the x-coordinate of the fourth point.</p>
-        type: Number
-      - name: y4
-        description: |
-          <p>the y-coordinate of the fourth point.</p>
-        type: Number
-      - name: detailX
-        description: |
-          <p>number of segments in the x-direction.</p>
-        type: Integer
-        optional: true
-      - name: detailY
-        description: |
-          <p>number of segments in the y-direction.</p>
-        type: Integer
-        optional: true
-    chainable: 1
-  - line: 1048
-    params:
-      - name: x1
-        description: ''
-        type: Number
-      - name: y1
-        description: ''
-        type: Number
-      - name: z1
-        description: |
-          <p>the z-coordinate of the first point.</p>
-        type: Number
-      - name: x2
-        description: ''
-        type: Number
-      - name: y2
-        description: ''
-        type: Number
-      - name: z2
-        description: |
-          <p>the z-coordinate of the second point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>the z-coordinate of the third point.</p>
-        type: Number
-      - name: x4
-        description: ''
-        type: Number
-      - name: y4
-        description: ''
-        type: Number
-      - name: z4
-        description: |
-          <p>the z-coordinate of the fourth point.</p>
-        type: Number
-      - name: detailX
-        description: ''
-        type: Integer
-        optional: true
-      - name: detailY
-        description: ''
-        type: Integer
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# quad
diff --git a/src/content/reference/en/p5 copy/quadraticVertex.mdx b/src/content/reference/en/p5 copy/quadraticVertex.mdx
deleted file mode 100644
index e319e38769..0000000000
--- a/src/content/reference/en/p5 copy/quadraticVertex.mdx	
+++ /dev/null
@@ -1,303 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1600
-title: quadraticVertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a quadratic Bézier curve segment to a custom shape.</p>
-
-  <p><code>quadraticVertex()</code> adds a curved segment to custom shapes. The
-  Bézier
-
-  curve segments it creates are similar to those made by the
-
-  <a href="/reference/p5/bezierVertex/">bezierVertex()</a> function.
-
-  <code>quadraticVertex()</code> must be called between the
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions. The curved segment
-  uses
-
-  the previous vertex as the first anchor point, so there must be at least
-
-  one call to <a href="/reference/p5/vertex/">vertex()</a> before
-  <code>quadraticVertex()</code> can
-
-  be used.</p>
-
-  <p>The first two parameters, <code>cx</code> and <code>cy</code>, set the
-  curve’s control point.
-
-  The control point "pulls" the curve towards its.</p>
-
-  <p>The last two parameters, <code>x3</code>, and <code>y3</code>, set the last
-  anchor point. The
-
-  last anchor point is where the curve ends.</p>
-
-  <p>Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
-
-  <code>bezierVertex()</code> has eight arguments because each point has x-, y-,
-  and
-
-  z-coordinates.</p>
-
-  <p>Note: <code>quadraticVertex()</code> won’t work when an argument is passed
-  to
-
-  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
-line: 1600
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the curve.
-      noFill();
-
-      // Draw the curve.
-      beginShape();
-      vertex(20, 20);
-      quadraticVertex(80, 20, 50, 50);
-      endShape();
-
-      describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the curve.
-      noFill();
-      beginShape();
-      vertex(20, 20);
-      quadraticVertex(80, 20, 50, 50);
-      endShape();
-
-      // Draw red lines from the anchor points to the control point.
-      stroke(255, 0, 0);
-      line(20, 20, 80, 20);
-      line(50, 50, 80, 20);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(20, 20);
-      point(50, 50);
-
-      // Draw the control point in red.
-      stroke(255, 0, 0);
-      point(80, 20);
-
-      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the mouse near the red dot in the top-right corner
-    // and drag to change the curve's shape.
-
-    let x2 = 80;
-    let y2 = 20;
-    let isChanging = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the curve.
-      noFill();
-      strokeWeight(1);
-      stroke(0);
-
-      // Draw the curve.
-      beginShape();
-      vertex(20, 20);
-      quadraticVertex(x2, y2, 50, 50);
-      endShape();
-
-      // Draw red lines from the anchor points to the control point.
-      stroke(255, 0, 0);
-      line(20, 20, x2, y2);
-      line(50, 50, x2, y2);
-
-      // Draw the anchor points in black.
-      strokeWeight(5);
-      stroke(0);
-      point(20, 20);
-      point(50, 50);
-
-      // Draw the control point in red.
-      stroke(255, 0, 0);
-      point(x2, y2);
-    }
-
-    // Start changing the first control point if the user clicks near it.
-    function mousePressed() {
-      if (dist(mouseX, mouseY, x2, y2) < 20) {
-        isChanging = true;
-      }
-    }
-
-    // Stop changing the first control point when the user releases the mouse.
-    function mouseReleased() {
-      isChanging = false;
-    }
-
-    // Update the first control point while the user drags the mouse.
-    function mouseDragged() {
-      if (isChanging === true) {
-        x2 = mouseX;
-        y2 = mouseY;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add the curved segments.
-      vertex(20, 20);
-      quadraticVertex(80, 20, 50, 50);
-      quadraticVertex(20, 80, 80, 80);
-
-      // Add the straight segments.
-      vertex(80, 10);
-      vertex(20, 10);
-      vertex(20, 20);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('A white puzzle piece drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the and drag the mouse to view the scene from a different angle.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the first puzzle piece.
-      noStroke();
-      fill(255);
-
-      // Draw the first puzzle piece.
-      beginShape();
-      vertex(-30, -30, 0);
-      quadraticVertex(30, -30, 0, 0, 0, 0);
-      quadraticVertex(-30, 30, 0, 30, 30, 0);
-      vertex(30, -40, 0);
-      vertex(-30, -40, 0);
-      vertex(-30, -30, 0);
-      endShape();
-
-      // Style the second puzzle piece.
-      stroke(255);
-      noFill();
-
-      // Draw the second puzzle piece.
-      beginShape();
-      vertex(-30, -30, -20);
-      quadraticVertex(30, -30, -20, 0, 0, -20);
-      quadraticVertex(-30, 30, -20, 30, 30, -20);
-      vertex(30, -40, -20);
-      vertex(-30, -40, -20);
-      vertex(-30, -30, -20);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1600
-    params:
-      - name: cx
-        description: |
-          <p>x-coordinate of the control point.</p>
-        type: Number
-      - name: cy
-        description: |
-          <p>y-coordinate of the control point.</p>
-        type: Number
-      - name: x3
-        description: |
-          <p>x-coordinate of the anchor point.</p>
-        type: Number
-      - name: y3
-        description: |
-          <p>y-coordinate of the anchor point.</p>
-        type: Number
-    chainable: 1
-  - line: 1832
-    params:
-      - name: cx
-        description: ''
-        type: Number
-      - name: cy
-        description: ''
-        type: Number
-      - name: cz
-        description: |
-          <p>z-coordinate of the control point.</p>
-        type: Number
-      - name: x3
-        description: ''
-        type: Number
-      - name: y3
-        description: ''
-        type: Number
-      - name: z3
-        description: |
-          <p>z-coordinate of the anchor point.</p>
-        type: Number
-chainable: true
----
-
-
-# quadraticVertex
diff --git a/src/content/reference/en/p5 copy/radians.mdx b/src/content/reference/en/p5 copy/radians.mdx
deleted file mode 100644
index da0adc1ff7..0000000000
--- a/src/content/reference/en/p5 copy/radians.mdx	
+++ /dev/null
@@ -1,53 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L521
-title: radians
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: |
-  <p>Converts an angle measured in degrees to its value in radians.</p>
-  <p>Degrees and radians are both units for measuring angles. There are 360˚ in
-  one full rotation. A full rotation is 2 × π (about 6.28) radians.</p>
-  <p>The same angle can be expressed in with either unit. For example, 90° is a
-  quarter of a full rotation. The same angle is 2 × π ÷ 4
-  (about 1.57) radians.</p>
-line: 521
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Calculate the angle conversion.
-      let deg = 45;
-      let rad = radians(deg);
-
-      // Display the angle conversion.
-      text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
-
-      describe('The text "45˚ = 0.785 rad".');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: degrees
-    description: |
-      <p>degree value to convert to radians.</p>
-    type: Number
-return:
-  description: converted angle.
-  type: Number
-chainable: false
----
-
-
-# radians
diff --git a/src/content/reference/en/p5 copy/random.mdx b/src/content/reference/en/p5 copy/random.mdx
deleted file mode 100644
index aef8e546e8..0000000000
--- a/src/content/reference/en/p5 copy/random.mdx	
+++ /dev/null
@@ -1,48 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L86
-title: random
-module: Math
-submodule: Random
-file: src/math/random.js
-description: "<p>Returns a random number or a random element from an array.</p>\n<p><code>random()</code> follows uniform distribution, which means that all outcomes are\nequally likely. When <code>random()</code> is used to generate numbers, all\nnumbers in the output range are equally likely to be returned. When\n<code>random()</code> is used to select elements from an array, all elements are\nequally likely to be chosen.</p>\n<p>By default, <code>random()</code> produces different results each time a sketch runs.\nThe <a href=\"/reference/p5/randomSeed/\">randomSeed()</a> function can be used to\ngenerate the same sequence of numbers or choices each time a sketch runs.</p>\n<p>The version of <code>random()</code> with no parameters returns a random number from 0\nup to but not including 1.</p>\n<p>The version of <code>random()</code> with one parameter works one of two ways. If the\nargument passed is a number, <code>random()</code> returns a random number from 0 up\nto but not including the number. For example, calling <code>random(5)</code> returns\nvalues between 0 and 5. If the argument passed is an array, <code>random()</code>\nreturns a random element from that array. For example, calling\n<code>random(['\U0001F981', '\U0001F42F', '\U0001F43B'])</code> returns either a lion, tiger, or bear emoji.</p>\n<p>The version of <code>random()</code> with two parameters returns a random number from\na given range. The arguments passed set the range's lower and upper bounds.\nFor example, calling <code>random(-5, 10.2)</code> returns values from -5 up to but\nnot including 10.2.</p>\n"
-line: 86
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(0, 100);\n  let y = random(0, 100);\n\n  // Draw a point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n\n  describe('A black dot appears in a random position on a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Create an array of emoji strings.\n  let animals = ['\U0001F981', '\U0001F42F', '\U0001F43B'];\n\n  // Choose a random element from the array.\n  let choice = random(animals);\n\n  // Style the text.\n  textAlign(CENTER);\n  textSize(20);\n\n  // Display the emoji.\n  text(choice, 50, 50);\n\n  describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 0 and 100.\n  let x = random(100);\n  let y = random(100);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  // Slow the frame rate.\n  frameRate(5);\n\n  describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n  background(200);\n\n  // Get random coordinates between 45 and 55.\n  let x = random(45, 55);\n  let y = random(45, 55);\n\n  // Draw the point.\n  strokeWeight(5);\n  point(x, y);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n  // Update x and y randomly.\n  x += random(-1, 1);\n  y += random(-1, 1);\n\n  // Draw the point.\n  point(x, y);\n}\n</code>\n</div>"
-class: p5
-return:
-  description: random number.
-  type: Number
-overloads:
-  - line: 86
-    params:
-      - name: min
-        description: |
-          <p>lower bound (inclusive).</p>
-        type: Number
-        optional: true
-      - name: max
-        description: |
-          <p>upper bound (exclusive).</p>
-        type: Number
-        optional: true
-    return:
-      description: random number.
-      type: Number
-  - line: 259
-    params:
-      - name: choices
-        description: |
-          <p>array to choose from.</p>
-        type: Array
-    return:
-      description: random element from the array.
-      type: '*'
-chainable: false
----
-
-
-# random
diff --git a/src/content/reference/en/p5 copy/randomGaussian.mdx b/src/content/reference/en/p5 copy/randomGaussian.mdx
deleted file mode 100644
index 24893f378b..0000000000
--- a/src/content/reference/en/p5 copy/randomGaussian.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L292
-title: randomGaussian
-module: Math
-submodule: Random
-file: src/math/random.js
-description: >
-  <p>Returns a random number fitting a Gaussian, or normal, distribution.</p>
-
-  <p>Normal distributions look like bell curves when plotted. Values from a
-
-  normal distribution cluster around a central value called the mean. The
-
-  cluster's standard deviation describes its spread.</p>
-
-  <p>By default, <code>randomGaussian()</code> produces different results each
-  time a
-
-  sketch runs. The <a href="/reference/p5/randomSeed/">randomSeed()</a> function
-  can be
-
-  used to generate the same sequence of numbers each time a sketch runs.</p>
-
-  <p>There's no minimum or maximum value that <code>randomGaussian()</code>
-  might return.
-
-  Values far from the mean are very unlikely and values near the mean are
-
-  very likely.</p>
-
-  <p>The version of <code>randomGaussian()</code> with no parameters returns
-  values with a
-
-  mean of 0 and standard deviation of 1.</p>
-
-  <p>The version of <code>randomGaussian()</code> with one parameter interprets
-  the
-
-  argument passed as the mean. The standard deviation is 1.</p>
-
-  <p>The version of <code>randomGaussian()</code> with two parameters interprets
-  the first
-
-  argument passed as the mean and the second as the standard deviation.</p>
-line: 292
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
-    }
-
-    function draw() {
-      // Style the circles.
-      noStroke();
-      fill(0, 10);
-
-      // Uniform distribution between 0 and 100.
-      let x = random(100);
-      let y = 25;
-      circle(x, y, 5);
-
-      // Gaussian distribution with a mean of 50 and sd of 1.
-      x = randomGaussian(50);
-      y = 50;
-      circle(x, y, 5);
-
-      // Gaussian distribution with a mean of 50 and sd of 10.
-      x = randomGaussian(50, 10);
-      y = 75;
-      circle(x, y, 5);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mean
-    description: |
-      <p>mean.</p>
-    type: Number
-    optional: true
-  - name: sd
-    description: |
-      <p>standard deviation.</p>
-    type: Number
-    optional: true
-return:
-  description: random number.
-  type: Number
-chainable: false
----
-
-
-# randomGaussian
diff --git a/src/content/reference/en/p5 copy/randomSeed.mdx b/src/content/reference/en/p5 copy/randomSeed.mdx
deleted file mode 100644
index dbd1a6ae3d..0000000000
--- a/src/content/reference/en/p5 copy/randomSeed.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/random.js#L37
-title: randomSeed
-module: Math
-submodule: Random
-file: src/math/random.js
-description: >
-  <p>Sets the seed value for the <a href="/reference/p5/random/">random()</a>
-  and
-
-  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> functions.</p>
-
-  <p>By default, <a href="/reference/p5/random/">random()</a> and
-
-  <a href="/reference/p5/randomGaussian/">randomGaussian()</a> produce different
-
-  results each time a sketch is run. Calling <code>randomSeed()</code> with a
-  constant
-
-  argument, such as <code>randomSeed(99)</code>, makes these functions produce
-  the same
-
-  results each time a sketch is run.</p>
-line: 37
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get random coordinates.
-      let x = random(0, 100);
-      let y = random(0, 100);
-
-      // Draw the white circle.
-      circle(x, y, 10);
-
-      // Set a random seed for consistency.
-      randomSeed(99);
-
-      // Get random coordinates.
-      x = random(0, 100);
-      y = random(0, 100);
-
-      // Draw the black circle.
-      fill(0);
-      circle(x, y, 10);
-
-      describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: seed
-    description: |
-      <p>seed value.</p>
-    type: Number
-chainable: false
----
-
-
-# randomSeed
diff --git a/src/content/reference/en/p5 copy/rect.mdx b/src/content/reference/en/p5 copy/rect.mdx
deleted file mode 100644
index 6876ab536d..0000000000
--- a/src/content/reference/en/p5 copy/rect.mdx	
+++ /dev/null
@@ -1,209 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1091
-title: rect
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a rectangle.</p>
-
-  <p>A rectangle is a four-sided shape defined by the <code>x</code>,
-  <code>y</code>, <code>w</code>, and <code>h</code>
-
-  parameters. <code>x</code> and <code>y</code> set the location of its top-left
-  corner. <code>w</code> sets
-
-  its width and <code>h</code> sets its height. Every angle in the rectangle
-  measures
-
-  90˚. See <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to
-  define
-
-  rectangles.</p>
-
-  <p>The version of <code>rect()</code> with five parameters creates a rounded
-  rectangle. The
-
-  fifth parameter sets the radius for all four corners.</p>
-
-  <p>The version of <code>rect()</code> with eight parameters also creates a
-  rounded
-
-  rectangle. Each of the last four parameters set the radius of a corner. The
-
-  radii start with the top-left corner and move clockwise around the
-
-  rectangle. If any of these parameters are omitted, they are set to the
-
-  value of the last radius that was set.</p>
-line: 1091
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rect(30, 20, 55, 55);
-
-      describe('A white square with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rect(30, 20, 55, 40);
-
-      describe('A white rectangle with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give all corners a radius of 20.
-      rect(30, 20, 55, 50, 20);
-
-      describe('A white rectangle with a black outline and round edges on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give each corner a unique radius.
-      rect(30, 20, 55, 50, 20, 15, 10, 5);
-
-      describe('A white rectangle with a black outline and round edges of different radii.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      rect(-20, -30, 55, 55);
-
-      describe('A white square with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square spins around on gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the rectangle.
-      rect(-20, -30, 55, 55);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1091
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the rectangle.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the rectangle.</p>
-        type: Number
-      - name: w
-        description: |
-          <p>width of the rectangle.</p>
-        type: Number
-      - name: h
-        description: |
-          <p>height of the rectangle.</p>
-        type: Number
-        optional: true
-      - name: tl
-        description: |
-          <p>optional radius of top-left corner.</p>
-        type: Number
-        optional: true
-      - name: tr
-        description: |
-          <p>optional radius of top-right corner.</p>
-        type: Number
-        optional: true
-      - name: br
-        description: |
-          <p>optional radius of bottom-right corner.</p>
-        type: Number
-        optional: true
-      - name: bl
-        description: |
-          <p>optional radius of bottom-left corner.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1214
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: w
-        description: ''
-        type: Number
-      - name: h
-        description: ''
-        type: Number
-      - name: detailX
-        description: |
-          <p>number of segments in the x-direction (for WebGL mode).</p>
-        type: Integer
-        optional: true
-      - name: detailY
-        description: |
-          <p>number of segments in the y-direction (for WebGL mode).</p>
-        type: Integer
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# rect
diff --git a/src/content/reference/en/p5 copy/rectMode.mdx b/src/content/reference/en/p5 copy/rectMode.mdx
deleted file mode 100644
index 5d444cb16e..0000000000
--- a/src/content/reference/en/p5 copy/rectMode.mdx	
+++ /dev/null
@@ -1,142 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L184
-title: rectMode
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Changes where rectangles and squares are drawn.</p>
-
-  <p>By default, the first two parameters of
-
-  <a href="/reference/p5/rect/">rect()</a> and <a
-  href="/reference/p5/square/">square()</a>,
-
-  are the x- and y-coordinates of the shape's upper left corner. The next
-  parameters set
-
-  the shape's width and height. This is the same as calling
-
-  <code>rectMode(CORNER)</code>.</p>
-
-  <p><code>rectMode(CORNERS)</code> also uses the first two parameters as the
-  location of
-
-  one of the corners. The next parameters are the location of the opposite
-
-  corner. This mode only works for <a href="/reference/p5/rect/">rect()</a>.</p>
-
-  <p><code>rectMode(CENTER)</code> uses the first two parameters as the x- and
-
-  y-coordinates of the shape's center. The next parameters are its width and
-
-  height.</p>
-
-  <p><code>rectMode(RADIUS)</code> also uses the first two parameters as the x-
-  and
-
-  y-coordinates of the shape's center. The next parameters are
-
-  half of the shape's width and height.</p>
-
-  <p>The argument passed to <code>rectMode()</code> must be written in ALL CAPS
-  because the
-
-  constants <code>CENTER</code>, <code>RADIUS</code>, <code>CORNER</code>, and
-  <code>CORNERS</code> are defined this way.
-
-  JavaScript is a case-sensitive language.</p>
-line: 184
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(CORNER);
-      fill(255);
-      rect(25, 25, 50, 50);
-
-      rectMode(CORNERS);
-      fill(100);
-      rect(25, 25, 50, 50);
-
-      describe('A small gray square drawn at the top-left corner of a white square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(RADIUS);
-      fill(255);
-      rect(50, 50, 30, 30);
-
-      rectMode(CENTER);
-      fill(100);
-      rect(50, 50, 30, 30);
-
-      describe('A small gray square drawn at the center of a white square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(CORNER);
-      fill(255);
-      square(25, 25, 50);
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      rectMode(RADIUS);
-      fill(255);
-      square(50, 50, 30);
-
-      rectMode(CENTER);
-      fill(100);
-      square(50, 50, 30);
-
-      describe('A small gray square drawn at the center of a white square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either CORNER, CORNERS, CENTER, or RADIUS</p>
-    type: Constant
-chainable: true
----
-
-
-# rectMode
diff --git a/src/content/reference/en/p5 copy/red.mdx b/src/content/reference/en/p5 copy/red.mdx
deleted file mode 100644
index 819478b246..0000000000
--- a/src/content/reference/en/p5 copy/red.mdx	
+++ /dev/null
@@ -1,158 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1279
-title: red
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the red value of a color.</p>
-
-  <p><code>red()</code> extracts the red value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>By default, <code>red()</code> returns a color's red value in the range 0
-
-  to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to
-  RGB, it
-
-  returns the red value in the given range.</p>
-line: 1279
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let c = color(175, 100, 220);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 175.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a color array.
-      let c = [175, 100, 220];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 175.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a CSS color string.
-      let c = 'rgb(175, 100, 220)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 175.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use RGB color with values in the range 0-100.
-      colorMode(RGB, 100);
-
-      // Create a p5.Color object.
-      let c = color(69, 39, 86);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'redValue' to 69.
-      let redValue = red(c);
-
-      // Draw the right rectangle.
-      fill(redValue, 0, 0);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is light purple and the right one is red.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the red value.
-  type: Number
-chainable: false
----
-
-
-# red
diff --git a/src/content/reference/en/p5 copy/redraw.mdx b/src/content/reference/en/p5 copy/redraw.mdx
deleted file mode 100644
index 6519f322f0..0000000000
--- a/src/content/reference/en/p5 copy/redraw.mdx	
+++ /dev/null
@@ -1,117 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/structure.js#L838
-title: redraw
-module: Structure
-submodule: Structure
-file: src/core/structure.js
-description: >
-  <p>Runs the code in <a href="/reference/p5/draw/">draw()</a> once.</p>
-
-  <p>By default, <a href="/reference/p5/draw/">draw()</a> tries to run 60 times
-  per
-
-  second. Calling <a href="/reference/p5/noLoop/">noLoop()</a> stops
-
-  <a href="/reference/p5/draw/">draw()</a> from repeating. Calling
-  <code>redraw()</code> will
-
-  execute the code in the <a href="/reference/p5/draw/">draw()</a> function a
-  set
-
-  number of times.</p>
-
-  <p>The parameter, <code>n</code>, is optional. If a number is passed, as in
-  <code>redraw(5)</code>,
-
-  then the draw loop will run the given number of times. By default,
-  <code>n</code> is
-
-  1.</p>
-line: 838
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click the canvas to move the circle.
-
-    let x = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe(
-        'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle.
-      circle(x, 50, 20);
-
-      // Increment x.
-      x += 5;
-    }
-
-    // Run the draw loop when the user double-clicks.
-    function doubleClicked() {
-      redraw();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Double-click the canvas to move the circle.
-
-    let x = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Turn off the draw loop.
-      noLoop();
-
-      describe(
-        'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the circle.
-      circle(x, 50, 20);
-
-      // Increment x.
-      x += 5;
-    }
-
-    // Run the draw loop three times when the user double-clicks.
-    function doubleClicked() {
-      redraw(3);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: >
-      <p>number of times to run <a href="#/p5/draw">draw()</a>. Defaults to
-      1.</p>
-    type: Integer
-    optional: true
-chainable: false
----
-
-
-# redraw
diff --git a/src/content/reference/en/p5 copy/remove.mdx b/src/content/reference/en/p5 copy/remove.mdx
deleted file mode 100644
index 552822f5a3..0000000000
--- a/src/content/reference/en/p5 copy/remove.mdx	
+++ /dev/null
@@ -1,57 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L559
-title: remove
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>Removes the sketch from the web page.</p>
-
-  <p>Calling <code>remove()</code> stops the draw loop and removes any HTML
-  elements
-
-  created by the sketch, including the canvas. A new sketch can be
-
-  created by using the <a href="/reference/p5/p5/">p5()</a> constructor, as in
-
-  <code>new p5()</code>.</p>
-line: 559
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to remove the canvas.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      // Paint the background repeatedly.
-      background(200);
-
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-
-    // Remove the sketch when the user double-clicks.
-    function doubleClicked() {
-      remove();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# remove
diff --git a/src/content/reference/en/p5 copy/removeElements.mdx b/src/content/reference/en/p5 copy/removeElements.mdx
deleted file mode 100644
index 51e712026b..0000000000
--- a/src/content/reference/en/p5 copy/removeElements.mdx	
+++ /dev/null
@@ -1,85 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L256
-title: removeElements
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Removes all elements created by p5.js, including any event handlers.</p>
-
-  <p>There are two exceptions:
-
-  canvas elements created by <a
-  href="/reference/p5/createCanvas/">createCanvas()</a>
-
-  and <a href="/reference/p5/p5.Renderer">p5.Render</a> objects created by
-
-  <a href="/reference/p5/createGraphics/">createGraphics()</a>.</p>
-line: 256
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a paragraph element and place
-      // it in the middle of the canvas.
-      let p = createP('p5*js');
-      p.position(25, 25);
-
-      describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
-    }
-
-    // Remove all elements when the mouse is pressed.
-    function mousePressed() {
-      removeElements();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let slider;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a paragraph element and place
-      // it at the top of the canvas.
-      let p = createP('p5*js');
-      p.position(25, 25);
-
-      // Create a slider element and place it
-      // beneath the canvas.
-      slider = createSlider(0, 255, 200);
-      slider.position(0, 100);
-
-      describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
-    }
-
-    function draw() {
-      // Use the slider value to change the background color.
-      let g = slider.value();
-      background(g);
-    }
-
-    // Remove all elements when the mouse is double-clicked.
-    function doubleClicked() {
-      removeElements();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# removeElements
diff --git a/src/content/reference/en/p5 copy/removeItem.mdx b/src/content/reference/en/p5 copy/removeItem.mdx
deleted file mode 100644
index ba091b00b4..0000000000
--- a/src/content/reference/en/p5 copy/removeItem.mdx	
+++ /dev/null
@@ -1,97 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L380
-title: removeItem
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Removes an item from the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs.</p>
-
-  <p><a href="/reference/p5/storeItem/">storeItem()</a> makes it easy to store
-  values in
-
-  <code>localStorage</code> and <code>removeItem()</code> makes it easy to
-  delete them.</p>
-
-  <p>The parameter, <code>key</code>, is the name of the value to remove as a
-  string. For
-
-  example, calling <code>removeItem('size')</code> removes the item with the key
-  <code>size</code>.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 380
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to remove an item from localStorage.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe(
-        'The text "Feist: 1234" written in black on a gray background. The text "Feist: null" appears when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-
-    // Remove the word from localStorage when the user double-clicks.
-    function doubleClicked() {
-      removeItem('score');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: key
-    description: |
-      <p>name of the value to remove.</p>
-    type: String
-chainable: false
----
-
-
-# removeItem
diff --git a/src/content/reference/en/p5 copy/requestPointerLock.mdx b/src/content/reference/en/p5 copy/requestPointerLock.mdx
deleted file mode 100644
index 621ce063ce..0000000000
--- a/src/content/reference/en/p5 copy/requestPointerLock.mdx	
+++ /dev/null
@@ -1,85 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L1880
-title: requestPointerLock
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>Locks the mouse pointer to its current position and makes it invisible.</p>
-
-  <p><code>requestPointerLock()</code> allows the mouse to move forever without
-  leaving the
-
-  screen. Calling <code>requestPointerLock()</code> locks the values of
-
-  <a href="/reference/p5/mouseX/">mouseX</a>, <a
-  href="/reference/p5/mouseY/">mouseY</a>,
-
-  <a href="/reference/p5/pmouseX/">pmouseX</a>, and <a
-  href="/reference/p5/pmouseY/">pmouseY</a>.
-
-  <a href="/reference/p5/movedX/">movedX</a> and <a
-  href="/reference/p5/movedY/">movedY</a>
-
-  continue updating and can be used to get the distance the mouse moved since
-
-  the last frame was drawn. Calling
-
-  <a href="/reference/p5/exitPointerLock/">exitPointerLock()</a> resumes
-  updating the
-
-  mouse system variables.</p>
-
-  <p>Note: Most browsers require an input, such as a click, before calling
-
-  <code>requestPointerLock()</code>. It’s recommended to call
-  <code>requestPointerLock()</code> in
-
-  an event function such as <a
-  href="/reference/p5/doubleClicked/">doubleClicked()</a>.</p>
-line: 1880
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let score = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the text "Score: X" at its center. The score increases when the user moves the mouse upward. It decreases when the user moves the mouse downward.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Update the score.
-      score -= movedY;
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the score.
-      text(`Score: ${score}`, 50, 50);
-    }
-
-    // Lock the pointer when the user double-clicks.
-    function doubleClicked() {
-      requestPointerLock();
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# requestPointerLock
diff --git a/src/content/reference/en/p5 copy/resetMatrix.mdx b/src/content/reference/en/p5 copy/resetMatrix.mdx
deleted file mode 100644
index af797b49db..0000000000
--- a/src/content/reference/en/p5 copy/resetMatrix.mdx	
+++ /dev/null
@@ -1,52 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L246
-title: resetMatrix
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: |
-  <p>Clears all transformations applied to the coordinate system.</p>
-line: 246
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two circles drawn on a gray background. A blue circle is at the top-left and a red circle is at the bottom-right.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a blue circle at the coordinates (25, 25).
-      fill('blue');
-      circle(25, 25, 20);
-
-      // Clear all transformations.
-      // The origin is now at the top-left corner.
-      resetMatrix();
-
-      // Draw a red circle at the coordinates (25, 25).
-      fill('red');
-      circle(25, 25, 20);
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# resetMatrix
diff --git a/src/content/reference/en/p5 copy/resetShader.mdx b/src/content/reference/en/p5 copy/resetShader.mdx
deleted file mode 100644
index 850ca0773c..0000000000
--- a/src/content/reference/en/p5 copy/resetShader.mdx	
+++ /dev/null
@@ -1,95 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1628
-title: resetShader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: |
-  <p>Restores the default shaders.</p>
-  <p><code>resetShader()</code> deactivates any shaders previously applied by
-  <a href="/reference/p5/shader/">shader()</a>.</p>
-  <p>Note: Shaders can only be used in WebGL mode.</p>
-line: 1628
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    uniform mat4 uProjectionMatrix;
-    uniform mat4 uModelViewMatrix;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 position = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * position;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision mediump float;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vec2 uv = vTexCoord;
-      vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
-      gl_FragColor = vec4(color, 1.0);
-    }
-    `;
-
-    let myShader;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      myShader = createShader(vertSrc, fragSrc);
-
-      describe(
-        'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a box using the p5.Shader.
-      // shader() sets the active shader to myShader.
-      shader(myShader);
-      push();
-      translate(-25, 0, 0);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      box(width / 4);
-      pop();
-
-      // Draw a box using the default fill shader.
-      // resetShader() restores the default fill shader.
-      resetShader();
-      fill(255, 0, 0);
-      push();
-      translate(25, 0, 0);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-      box(width / 4);
-      pop();
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# resetShader
diff --git a/src/content/reference/en/p5 copy/resizeCanvas.mdx b/src/content/reference/en/p5 copy/resizeCanvas.mdx
deleted file mode 100644
index fde0561563..0000000000
--- a/src/content/reference/en/p5 copy/resizeCanvas.mdx	
+++ /dev/null
@@ -1,133 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/rendering.js#L221
-title: resizeCanvas
-module: Rendering
-submodule: Rendering
-file: src/core/rendering.js
-description: >
-  <p>Resizes the canvas to a given width and height.</p>
-
-  <p><code>resizeCanvas()</code> immediately clears the canvas and calls
-
-  <a href="/reference/p5/redraw/">redraw()</a>. It's common to call
-  <code>resizeCanvas()</code>
-
-  within the body of <a href="/reference/p5/windowResized/">windowResized()</a>
-  like
-
-  so:</p>
-
-  <pre><code class="language-js">function windowResized() {
-    resizeCanvas(windowWidth, windowHeight);
-  }
-
-  </code></pre>
-
-  <p>The first two parameters, <code>width</code> and <code>height</code>, set
-  the dimensions of the
-
-  canvas. They also the values of the <a href="/reference/p5/width/">width</a>
-  and
-
-  <a href="/reference/p5/height/">height</a> system variables. For example,
-  calling
-
-  <code>resizeCanvas(300, 500)</code> resizes the canvas to 300×500 pixels, then
-  sets
-
-  <a href="/reference/p5/width/">width</a> to 300 and
-
-  <a href="/reference/p5/height/">height</a> 500.</p>
-
-  <p>The third parameter, <code>noRedraw</code>, is optional. If
-  <code>true</code> is passed, as in
-
-  <code>resizeCanvas(300, 500, true)</code>, then the canvas will be canvas to
-  300×500
-
-  pixels but the <a href="/reference/p5/redraw/">redraw()</a> function won't be
-  called
-
-  immediately. By default, <a href="/reference/p5/redraw/">redraw()</a> is
-  called
-
-  immediately when <code>resizeCanvas()</code> finishes executing.</p>
-line: 221
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to resize the canvas.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(180);
-
-      // Draw a circle at the center of the canvas.
-      circle(width / 2, height / 2, 20);
-    }
-
-    // Resize the canvas when the user double-clicks.
-    function doubleClicked() {
-      resizeCanvas(50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Resize the web browser to change the canvas size.
-
-    function setup() {
-      createCanvas(windowWidth, windowHeight);
-
-      describe('A white circle drawn on a gray background.');
-    }
-
-    function draw() {
-      background(180);
-
-      // Draw a circle at the center of the canvas.
-      circle(width / 2, height / 2, 20);
-    }
-
-    // Always resize the canvas to fill the browser window.
-    function windowResized() {
-      resizeCanvas(windowWidth, windowHeight);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: width
-    description: |
-      <p>width of the canvas.</p>
-    type: Number
-  - name: height
-    description: |
-      <p>height of the canvas.</p>
-    type: Number
-  - name: noRedraw
-    description: |
-      <p>whether to delay calling
-                                   <a href="#/p5/redraw">redraw()</a>. Defaults
-                                   to <code>false</code>.</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# resizeCanvas
diff --git a/src/content/reference/en/p5 copy/reverse.mdx b/src/content/reference/en/p5 copy/reverse.mdx
deleted file mode 100644
index bf7a6571ac..0000000000
--- a/src/content/reference/en/p5 copy/reverse.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L141
-title: reverse
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Reverses the order of an array, maps to Array.reverse()</p>
-line: 141
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">array.reverse()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'><code>
-    function setup() {
-      let myArray = ['A', 'B', 'C'];
-      print(myArray); // ['A','B','C']
-
-      reverse(myArray);
-      print(myArray); // ['C','B','A']
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to reverse</p>
-    type: Array
-return:
-  description: the reversed list
-  type: Array
-chainable: false
----
-
-
-# reverse
diff --git a/src/content/reference/en/p5 copy/rotate.mdx b/src/content/reference/en/p5 copy/rotate.mdx
deleted file mode 100644
index bbb4f8e5f8..0000000000
--- a/src/content/reference/en/p5 copy/rotate.mdx	
+++ /dev/null
@@ -1,226 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L289
-title: rotate
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system.</p>
-
-  <p>By default, the positive x-axis points to the right and the positive y-axis
-
-  points downward. The <code>rotate()</code> function changes this orientation
-  by
-
-  rotating the coordinate system about the origin. Everything drawn after
-
-  <code>rotate()</code> is called will appear to be rotated.</p>
-
-  <p>The first parameter, <code>angle</code>, is the amount to rotate. For
-  example, calling
-
-  <code>rotate(1)</code> rotates the coordinate system clockwise 1 radian which
-  is
-
-  nearly 57˚. <code>rotate()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>The second parameter, <code>axis</code>, is optional. It's used to orient
-  3D rotations
-
-  in WebGL mode. If a <a href="/reference/p5/p5.Vector">p5.Vector</a> is passed,
-  as in
-
-  <code>rotate(QUARTER_PI, myVector)</code>, then the coordinate system will
-  rotate
-
-  <code>QUARTER_PI</code> radians about <code>myVector</code>. If an array of
-  vector components is
-
-  passed, as in <code>rotate(QUARTER_PI, [1, 0, 0])</code>, then the coordinate
-  system
-
-  will rotate <code>QUARTER_PI</code> radians about a vector with the components
-
-  <code>[1, 0, 0]</code>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotate(1)</code>
-
-  twice has the same effect as calling <code>rotate(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotate(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 289
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn.
-      rotate(QUARTER_PI);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotate(QUARTER_PI / 2);
-
-      // Rotate the coordinate system another 1/16 turn.
-      rotate(QUARTER_PI / 2);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe(
-        "A white rectangle on a gray background. The rectangle's long axis runs from top-left to bottom-right."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn.
-      rotate(45);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A white rectangle on a gray background. The rectangle rotates slowly about the top-left corner. It disappears and reappears periodically.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotate(angle);
-
-      // Draw a rectangle at coordinates (50, 0).
-      rect(50, 0, 40, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A cube on a gray background. The cube's front face points to the top-right.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn about
-      // the axis [1, 1, 0].
-      let axis = createVector(1, 1, 0);
-      rotate(QUARTER_PI, axis);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe("A cube on a gray background. The cube's front face points to the top-right.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate the coordinate system 1/8 turn about
-      // the axis [1, 1, 0].
-      let axis = [1, 1, 0];
-      rotate(QUARTER_PI, axis);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-  - name: axis
-    description: |
-      <p>axis to rotate about in 3D.</p>
-    type: 'p5.Vector|Number[]'
-    optional: true
-chainable: true
----
-
-
-# rotate
diff --git a/src/content/reference/en/p5 copy/rotateX.mdx b/src/content/reference/en/p5 copy/rotateX.mdx
deleted file mode 100644
index c519976bce..0000000000
--- a/src/content/reference/en/p5 copy/rotateX.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L470
-title: rotateX
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system about the x-axis in WebGL mode.</p>
-
-  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
-  calling
-
-  <code>rotateX(1)</code> rotates the coordinate system about the x-axis by 1
-  radian.
-
-  <code>rotateX()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotateX(1)</code>
-
-  twice has the same effect as calling <code>rotateX(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotateX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 470
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateX(QUARTER_PI);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateX(QUARTER_PI / 2);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateX(QUARTER_PI / 2);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateX(45);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotateX(angle);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# rotateX
diff --git a/src/content/reference/en/p5 copy/rotateY.mdx b/src/content/reference/en/p5 copy/rotateY.mdx
deleted file mode 100644
index c7976c5a44..0000000000
--- a/src/content/reference/en/p5 copy/rotateY.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L606
-title: rotateY
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system about the y-axis in WebGL mode.</p>
-
-  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
-  calling
-
-  <code>rotateY(1)</code> rotates the coordinate system about the y-axis by 1
-  radian.
-
-  <code>rotateY()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotateY(1)</code>
-
-  twice has the same effect as calling <code>rotateY(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotateY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 606
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateY(QUARTER_PI);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateY(QUARTER_PI / 2);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateY(QUARTER_PI / 2);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateY(45);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotateY(angle);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# rotateY
diff --git a/src/content/reference/en/p5 copy/rotateZ.mdx b/src/content/reference/en/p5 copy/rotateZ.mdx
deleted file mode 100644
index 317bd7fe88..0000000000
--- a/src/content/reference/en/p5 copy/rotateZ.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L742
-title: rotateZ
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Rotates the coordinate system about the z-axis in WebGL mode.</p>
-
-  <p>The parameter, <code>angle</code>, is the amount to rotate. For example,
-  calling
-
-  <code>rotateZ(1)</code> rotates the coordinate system about the z-axis by 1
-  radian.
-
-  <code>rotateZ()</code> interprets angle values using the current
-
-  <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>rotateZ(1)</code>
-
-  twice has the same effect as calling <code>rotateZ(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>rotateZ(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to spin.</p>
-line: 742
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateZ(QUARTER_PI);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateZ(QUARTER_PI / 2);
-
-      // Rotate the coordinate system 1/16 turn.
-      rotateZ(QUARTER_PI / 2);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white cube on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system 1/8 turn.
-      rotateZ(45);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white cube rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Rotate the coordinate system a little more each frame.
-      let angle = frameCount * 0.01;
-      rotateZ(angle);
-
-      // Draw a box.
-      box();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle of rotation in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# rotateZ
diff --git a/src/content/reference/en/p5 copy/rotationX.mdx b/src/content/reference/en/p5 copy/rotationX.mdx
deleted file mode 100644
index 98dfd287dc..0000000000
--- a/src/content/reference/en/p5 copy/rotationX.mdx	
+++ /dev/null
@@ -1,45 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L131
-title: rotationX
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable rotationX always contains the rotation of the
-  device along the x axis. If the sketch <a href="/reference/p5/angleMode/">
-  angleMode()</a> is set to DEGREES, the value will be -180 to 180. If
-  it is set to RADIANS, the value will be -PI to PI.</p>
-  <p>Note: The order the rotations are called is important, ie. if used
-  together, it must be called in the order Z-X-Y or there might be
-  unexpected behaviour.</p>
-line: 131
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(200);
-      //rotateZ(radians(rotationZ));
-      rotateX(radians(rotationX));
-      //rotateY(radians(rotationY));
-      box(200, 200, 200);
-      describe(`red horizontal line right, green vertical line bottom.
-        black background.`);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# rotationX
diff --git a/src/content/reference/en/p5 copy/rotationY.mdx b/src/content/reference/en/p5 copy/rotationY.mdx
deleted file mode 100644
index f06a033bb7..0000000000
--- a/src/content/reference/en/p5 copy/rotationY.mdx	
+++ /dev/null
@@ -1,45 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L164
-title: rotationY
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable rotationY always contains the rotation of the
-  device along the y axis. If the sketch <a href="/reference/p5/angleMode/">
-  angleMode()</a> is set to DEGREES, the value will be -90 to 90. If
-  it is set to RADIANS, the value will be -PI/2 to PI/2.</p>
-  <p>Note: The order the rotations are called is important, ie. if used
-  together, it must be called in the order Z-X-Y or there might be
-  unexpected behaviour.</p>
-line: 164
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(200);
-      //rotateZ(radians(rotationZ));
-      //rotateX(radians(rotationX));
-      rotateY(radians(rotationY));
-      box(200, 200, 200);
-      describe(`red horizontal line right, green vertical line bottom.
-        black background.`);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# rotationY
diff --git a/src/content/reference/en/p5 copy/rotationZ.mdx b/src/content/reference/en/p5 copy/rotationZ.mdx
deleted file mode 100644
index 47d6d965aa..0000000000
--- a/src/content/reference/en/p5 copy/rotationZ.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L197
-title: rotationZ
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: |
-  <p>The system variable rotationZ always contains the rotation of the
-  device along the z axis. If the sketch <a href="/reference/p5/angleMode/">
-  angleMode()</a> is set to DEGREES, the value will be 0 to 360. If
-  it is set to RADIANS, the value will be 0 to 2*PI.</p>
-  <p>Unlike rotationX and rotationY, this variable is available for devices
-  with a built-in compass only.</p>
-  <p>Note: The order the rotations are called is important, ie. if used
-  together, it must be called in the order Z-X-Y or there might be
-  unexpected behaviour.</p>
-line: 197
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(200);
-      rotateZ(radians(rotationZ));
-      //rotateX(radians(rotationX));
-      //rotateY(radians(rotationY));
-      box(200, 200, 200);
-      describe(`red horizontal line right, green vertical line bottom.
-        black background.`);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# rotationZ
diff --git a/src/content/reference/en/p5 copy/round.mdx b/src/content/reference/en/p5 copy/round.mdx
deleted file mode 100644
index 3f6efea6eb..0000000000
--- a/src/content/reference/en/p5 copy/round.mdx	
+++ /dev/null
@@ -1,88 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L861
-title: round
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the integer closest to a number.</p>
-
-  <p>For example, <code>round(133.8)</code> returns the value 134.</p>
-
-  <p>The second parameter, <code>decimals</code>, is optional. It sets the
-  number of
-
-  decimal places to use when rounding. For example, <code>round(12.34, 1)</code>
-  returns
-
-  12.3. <code>decimals</code> is 0 by default.</p>
-line: 861
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Round a number.
-      let x = round(4.2);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the rounded number.
-      text(x, 50, 50);
-
-      describe('The number 4 written in middle of the canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Round a number to 2 decimal places.
-      let x = round(12.782383, 2);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the rounded number.
-      text(x, 50, 50);
-
-      describe('The number 12.78 written in middle of canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to round.</p>
-    type: Number
-  - name: decimals
-    description: |
-      <p>number of decimal places to round to, default is 0.</p>
-    type: Number
-    optional: true
-return:
-  description: rounded number.
-  type: Integer
-chainable: false
----
-
-
-# round
diff --git a/src/content/reference/en/p5 copy/sampleRate.mdx b/src/content/reference/en/p5 copy/sampleRate.mdx
deleted file mode 100644
index 3608ee22be..0000000000
--- a/src/content/reference/en/p5 copy/sampleRate.mdx	
+++ /dev/null
@@ -1,26 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L811
-title: sampleRate
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns a number representing the sample rate, in samples per second,
-  of all sound objects in this audio context. It is determined by the
-  sampling rate of your operating system's sound card, and it is not
-  currently possile to change.
-  It is often 44100, or twice the range of human hearing.</p>
-line: 811
-isConstructor: false
-itemtype: method
-class: p5
-return:
-  description: samplerate samples per second
-  type: Number
-chainable: false
----
-
-
-# sampleRate
diff --git a/src/content/reference/en/p5 copy/saturation.mdx b/src/content/reference/en/p5 copy/saturation.mdx
deleted file mode 100644
index 7552fe927d..0000000000
--- a/src/content/reference/en/p5 copy/saturation.mdx	
+++ /dev/null
@@ -1,201 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/creating_reading.js#L1415
-title: saturation
-module: Color
-submodule: Creating & Reading
-file: src/color/creating_reading.js
-description: >
-  <p>Gets the saturation value of a color.</p>
-
-  <p><code>saturation()</code> extracts the saturation value from a
-
-  <a href="/reference/p5/p5.Color">p5.Color</a> object, an array of color
-  components, or
-
-  a CSS color string.</p>
-
-  <p>Saturation is scaled differently in HSB and HSL. By default,
-  <code>saturation()</code>
-
-  returns a color's HSL saturation in the range 0 to 100. If the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it
-  returns the
-
-  saturation value in the given mode.</p>
-line: 1415
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a p5.Color object.
-      let c = color(0, 50, 100);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 50.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a color array.
-      let c = [0, 50, 100];
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 100.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // Create a CSS color string.
-      let c = 'rgb(255, 128, 128)';
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 100.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is gray.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color.
-      colorMode(HSL);
-
-      // Create a p5.Color object.
-      let c = color(0, 100, 75);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 100.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Use HSL color with values in the range 0-255.
-      colorMode(HSL, 255);
-
-      // Create a p5.Color object.
-      let c = color(0, 255, 191.5);
-
-      // Draw the left rectangle.
-      noStroke();
-      fill(c);
-      rect(15, 15, 35, 70);
-
-      // Set 'satValue' to 255.
-      let satValue = saturation(c);
-
-      // Draw the right rectangle.
-      fill(satValue);
-      rect(50, 15, 35, 70);
-
-      describe('Two rectangles. The left one is salmon pink and the right one is white.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: color
-    description: |
-      <p><a href="#/p5.Color">p5.Color</a> object, array of
-                                              color components, or CSS color string.</p>
-    type: 'p5.Color|Number[]|String'
-return:
-  description: the saturation value
-  type: Number
-chainable: false
----
-
-
-# saturation
diff --git a/src/content/reference/en/p5 copy/save.mdx b/src/content/reference/en/p5 copy/save.mdx
deleted file mode 100644
index fb8b67cd74..0000000000
--- a/src/content/reference/en/p5 copy/save.mdx	
+++ /dev/null
@@ -1,140 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1835
-title: save
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Saves a given element(image, text, json, csv, wav, or html) to the client's
-
-  computer. The first parameter can be a pointer to element we want to save.
-
-  The element can be one of <a href="/reference/p5/p5.Element">p5.Element</a>,an
-  Array of
-
-  Strings, an Array of JSON, a JSON object, a <a
-  href="/reference/p5/p5.Table">p5.Table
-
-  </a>, a <a href="/reference/p5/p5.Image">p5.Image</a>, or a p5.SoundFile
-  (requires
-
-  p5.sound). The second parameter is a filename (including extension).The
-
-  third parameter is for options specific to this type of object. This method
-
-  will save a file that fits the given parameters.
-
-  If it is called without specifying an element, by default it will save the
-
-  whole canvas as an image file. You can optionally specify a filename as
-
-  the first parameter in such a case.
-
-  <strong>Note that it is not recommended to
-
-  call this method within draw, as it will open a new save dialog on every
-
-  render.</strong></p>
-line: 1835
-isConstructor: false
-itemtype: method
-example:
-  - |2-
-
-     <div class="norender"><code>
-     // Saves the canvas as an image
-     cnv = createCanvas(300, 300);
-     save(cnv, 'myCanvas.jpg');
-
-     // Saves the canvas as an image by default
-     save('myCanvas.jpg');
-     describe('An example for saving a canvas as an image.');
-     </code></div>
-
-     <div class="norender"><code>
-     // Saves p5.Image as an image
-     img = createImage(10, 10);
-     save(img, 'myImage.png');
-     describe('An example for saving a p5.Image element as an image.');
-     </code></div>
-
-     <div class="norender"><code>
-     // Saves p5.Renderer object as an image
-     obj = createGraphics(100, 100);
-     save(obj, 'myObject.png');
-     describe('An example for saving a p5.Renderer element.');
-     </code></div>
-
-     <div class="norender"><code>
-     let myTable = new p5.Table();
-     // Saves table as html file
-     save(myTable, 'myTable.html');
-
-     // Comma Separated Values
-     save(myTable, 'myTable.csv');
-
-     // Tab Separated Values
-     save(myTable, 'myTable.tsv');
-
-     describe(`An example showing how to save a table in formats of
-     HTML, CSV and TSV.`);
-     </code></div>
-
-     <div class="norender"><code>
-     let myJSON = { a: 1, b: true };
-
-     // Saves pretty JSON
-     save(myJSON, 'my.json');
-
-     // Optimizes JSON filesize
-     save(myJSON, 'my.json', true);
-
-     describe('An example for saving JSON to a txt file with some extra arguments.');
-     </code></div>
-
-     <div class="norender"><code>
-     // Saves array of strings to text file with line breaks after each item
-     let arrayOfStrings = ['a', 'b'];
-     save(arrayOfStrings, 'my.txt');
-     describe(`An example for saving an array of strings to text file
-     with line breaks.`);
-     </code></div>
-class: p5
-params:
-  - name: objectOrFilename
-    description: |
-      <p>If filename is provided, will
-                                                 save canvas as an image with
-                                                 either png or jpg extension
-                                                 depending on the filename.
-                                                 If object is provided, will
-                                                 save depending on the object
-                                                 and filename (see examples
-                                                 above).</p>
-    type: Object|String
-    optional: true
-  - name: filename
-    description: |
-      <p>If an object is provided as the first
-                                   parameter, then the second parameter
-                                   indicates the filename,
-                                   and should include an appropriate
-                                   file extension (see examples above).</p>
-    type: String
-    optional: true
-  - name: options
-    description: |
-      <p>Additional options depend on
-                                filetype. For example, when saving JSON,
-                                <code>true</code> indicates that the
-                                output will be optimized for filesize,
-                                rather than readability.</p>
-    type: Boolean|String
-    optional: true
-chainable: false
----
-
-
-# save
diff --git a/src/content/reference/en/p5 copy/saveCanvas.mdx b/src/content/reference/en/p5 copy/saveCanvas.mdx
deleted file mode 100644
index 159bf101ce..0000000000
--- a/src/content/reference/en/p5 copy/saveCanvas.mdx	
+++ /dev/null
@@ -1,166 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L153
-title: saveCanvas
-module: Image
-submodule: Image
-file: src/image/image.js
-description: >
-  <p>Saves the current canvas as an image.</p>
-
-  <p>By default, <code>saveCanvas()</code> saves the canvas as a PNG image
-  called
-
-  <code>untitled.png</code>.</p>
-
-  <p>The first parameter, <code>filename</code>, is optional. It's a string that
-  sets the
-
-  file's name. If a file extension is included, as in
-
-  <code>saveCanvas('drawing.png')</code>, then the image will be saved using
-  that
-
-  format.</p>
-
-  <p>The second parameter, <code>extension</code>, is also optional. It sets the
-  files format.
-
-  Either <code>'png'</code>, <code>'webp'</code>, or <code>'jpg'</code> can be
-  used. For example, <code>saveCanvas('drawing', 'jpg')</code>
-
-  saves the canvas to a file called <code>drawing.jpg</code>.</p>
-
-  <p>Note: The browser will either save the file immediately or prompt the user
-
-  with a dialogue window.</p>
-line: 153
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-      background(255);
-
-      // Save the canvas to 'untitled.png'.
-      saveCanvas();
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas('myCanvas.jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas('myCanvas', 'jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'untitled.png'.
-      saveCanvas(cnv);
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas(cnv, 'myCanvas.jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-
-    <div class='norender'>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      background(255);
-
-      // Save the canvas to 'myCanvas.jpg'.
-      saveCanvas(cnv, 'myCanvas', 'jpg');
-
-      describe('A white square.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 153
-    params:
-      - name: selectedCanvas
-        description: |
-          <p>reference to a
-                                                                   specific HTML5 canvas element.</p>
-        type: p5.Framebuffer|p5.Element|HTMLCanvasElement
-      - name: filename
-        description: |
-          <p>file name. Defaults to 'untitled'.</p>
-        type: String
-        optional: true
-      - name: extension
-        description: >
-          <p>file extension, either 'png', 'webp', or 'jpg'. Defaults to
-          'png'.</p>
-        type: String
-        optional: true
-  - line: 267
-    params:
-      - name: filename
-        description: ''
-        type: String
-        optional: true
-      - name: extension
-        description: ''
-        type: String
-        optional: true
-chainable: false
----
-
-
-# saveCanvas
diff --git a/src/content/reference/en/p5 copy/saveFrames.mdx b/src/content/reference/en/p5 copy/saveFrames.mdx
deleted file mode 100644
index 72b8d7d987..0000000000
--- a/src/content/reference/en/p5 copy/saveFrames.mdx	
+++ /dev/null
@@ -1,175 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/image.js#L561
-title: saveFrames
-module: Image
-submodule: Image
-file: src/image/image.js
-description: >
-  <p>Captures a sequence of frames from the canvas that can be saved as
-  images.</p>
-
-  <p><code>saveFrames()</code> creates an array of frame objects. Each frame is
-  stored as
-
-  an object with its file type, file name, and image data as a string. For
-
-  example, the first saved frame might have the following properties:</p>
-
-  <p><code>{ ext: 'png', filename: 'frame0', imageData:
-  'data:image/octet-stream;base64, abc123' }</code>.</p>
-
-  <p>The first parameter, <code>filename</code>, sets the prefix for the file
-  names. For
-
-  example, setting the prefix to <code>'frame'</code> would generate the image
-  files
-
-  <code>frame0.png</code>, <code>frame1.png</code>, and so on.</p>
-
-  <p>The second parameter, <code>extension</code>, sets the file type to either
-  <code>'png'</code> or
-
-  <code>'jpg'</code>.</p>
-
-  <p>The third parameter, <code>duration</code>, sets the duration to record in
-  seconds.
-
-  The maximum duration is 15 seconds.</p>
-
-  <p>The fourth parameter, <code>framerate</code>, sets the number of frames to
-  record per
-
-  second. The maximum frame rate value is 22. Limits are placed on
-  <code>duration</code>
-
-  and <code>framerate</code> to avoid using too much memory. Recording large
-  canvases
-
-  can easily crash sketches or even web browsers.</p>
-
-  <p>The fifth parameter, <code>callback</code>, is optional. If a function is
-  passed,
-
-  image files won't be saved by default. The callback function can be used
-
-  to process an array containing the data for each captured frame. The array
-
-  of image data contains a sequence of objects with three properties for each
-
-  frame: <code>imageData</code>, <code>filename</code>, and
-  <code>extension</code>.</p>
-
-  <p>Note: Frames are downloaded as individual image files by default.</p>
-line: 561
-isConstructor: false
-itemtype: method
-example:
-  - >-
-
-    <div>
-
-    <code>
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A square repeatedly changes color from blue to pink.');
-    }
-
-
-    function draw() {
-      let r = frameCount % 255;
-      let g = 50;
-      let b = 100;
-      background(r, g, b);
-    }
-
-
-    // Save the frames when the user presses the 's' key.
-
-    function keyPressed() {
-      if (key === 's') {
-        saveFrames('frame', 'png', 1, 5);
-      }
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A square repeatedly changes color from blue to pink.');
-    }
-
-
-    function draw() {
-      let r = frameCount % 255;
-      let g = 50;
-      let b = 100;
-      background(r, g, b);
-    }
-
-
-    // Print 5 frames when the user presses the mouse.
-
-    function mousePressed() {
-      saveFrames('frame', 'png', 1, 5, printFrames);
-    }
-
-
-    // Prints an array of objects containing raw image data, filenames, and
-    extensions.
-
-    function printFrames(frames) {
-      for (let frame of frames) {
-        print(frame);
-      }
-    }
-
-    </code>
-
-    </div>
-class: p5
-params:
-  - name: filename
-    description: |
-      <p>prefix of file name.</p>
-    type: String
-  - name: extension
-    description: |
-      <p>file extension, either 'jpg' or 'png'.</p>
-    type: String
-  - name: duration
-    description: >
-      <p>duration in seconds to record. This parameter will be constrained to be
-      less or equal to 15.</p>
-    type: Number
-  - name: framerate
-    description: >
-      <p>number of frames to save per second. This parameter will be constrained
-      to be less or equal to 22.</p>
-    type: Number
-  - name: callback
-    description: |
-      <p>callback function that will be executed
-                                       to handle the image data. This function
-                                       should accept an array as argument. The
-                                       array will contain the specified number of
-                                       frames of objects. Each object has three
-                                       properties: <code>imageData</code>, <code>filename</code>, and <code>extension</code>.</p>
-    type: Function(Array)
-    optional: true
-chainable: false
----
-
-
-# saveFrames
diff --git a/src/content/reference/en/p5 copy/saveGif.mdx b/src/content/reference/en/p5 copy/saveGif.mdx
deleted file mode 100644
index 9b520993ac..0000000000
--- a/src/content/reference/en/p5 copy/saveGif.mdx	
+++ /dev/null
@@ -1,119 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L204
-title: saveGif
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Generates a gif from a sketch and saves it to a file.</p>
-
-  <p><code>saveGif()</code> may be called in <a
-  href="/reference/p5/setup/">setup()</a> or at any
-
-  point while a sketch is running.</p>
-
-  <p>The first parameter, <code>fileName</code>, sets the gif's file name.</p>
-
-  <p>The second parameter, <code>duration</code>, sets the gif's duration in
-  seconds.</p>
-
-  <p>The third parameter, <code>options</code>, is optional. If an object is
-  passed,
-
-  <code>saveGif()</code> will use its properties to customize the gif.
-  <code>saveGif()</code>
-
-  recognizes the properties <code>delay</code>, <code>units</code>,
-  <code>silent</code>,
-
-  <code>notificationDuration</code>, and <code>notificationID</code>.</p>
-line: 204
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the circle.
-      let c = frameCount % 255;
-      fill(c);
-
-      // Display the circle.
-      circle(50, 50, 25);
-    }
-
-    // Save a 5-second gif when the user presses the 's' key.
-    function keyPressed() {
-      if (key === 's') {
-        saveGif('mySketch', 5);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the circle.
-      let c = frameCount % 255;
-      fill(c);
-
-      // Display the circle.
-      circle(50, 50, 25);
-    }
-
-    // Save a 5-second gif when the user presses the 's' key.
-    // Wait 1 second after the key press before recording.
-    function keyPressed() {
-      if (key === 's') {
-        saveGif('mySketch', 5, { delay: 1 });
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: filename
-    description: |
-      <p>file name of gif.</p>
-    type: String
-  - name: duration
-    description: |
-      <p>duration in seconds to capture from the sketch.</p>
-    type: Number
-  - name: options
-    description: |
-      <p>an object that can contain five more properties:
-                       <code>delay</code>, a Number specifying how much time to wait before recording;
-                       <code>units</code>, a String that can be either 'seconds' or 'frames'. By default it's 'seconds’;
-                       <code>silent</code>, a Boolean that defines presence of progress notifications. By default it’s <code>false</code>;
-                       <code>notificationDuration</code>, a Number that defines how long in seconds the final notification
-                       will live. By default it's <code>0</code>, meaning the notification will never be removed;
-                       <code>notificationID</code>, a String that specifies the id of the notification's DOM element. By default it’s <code>'progressBar’</code>.</p>
-    type: Object
-    optional: true
-chainable: false
----
-
-
-# saveGif
diff --git a/src/content/reference/en/p5 copy/saveJSON.mdx b/src/content/reference/en/p5 copy/saveJSON.mdx
deleted file mode 100644
index d5e664d0b2..0000000000
--- a/src/content/reference/en/p5 copy/saveJSON.mdx	
+++ /dev/null
@@ -1,170 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L1979
-title: saveJSON
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Saves an <code>Object</code> or <code>Array</code> to a JSON file.</p>
-
-  <p>JavaScript Object Notation
-
-  (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON/"
-  target="_blank">JSON</a>)
-
-  is a standard format for sending data between applications. The format is
-
-  based on JavaScript objects which have keys and values. JSON files store
-
-  data in an object with strings as keys. Values can be strings, numbers,
-
-  Booleans, arrays, <code>null</code>, or other objects.</p>
-
-  <p>The first parameter, <code>json</code>, is the data to save. The data can
-  be an array,
-
-  as in <code>[1, 2, 3]</code>, or an object, as in
-
-  <code>{ x: 50, y: 50, color: 'deeppink' }</code>.</p>
-
-  <p>The second parameter, <code>filename</code>, is a string that sets the
-  file's name.
-
-  For example, calling <code>saveJSON([1, 2, 3], 'data.json')</code> saves the
-  array
-
-  <code>[1, 2, 3]</code> to a file called <code>data.json</code> on the user's
-  computer.</p>
-
-  <p>The third parameter, <code>optimize</code>, is optional. If
-  <code>true</code> is passed, as in
-
-  <code>saveJSON([1, 2, 3], 'data.json', true)</code>, then all unneeded
-  whitespace will
-
-  be removed to reduce the file size.</p>
-
-  <p>Note: The browser will either save the file immediately or prompt the user
-
-  with a dialogue window.</p>
-line: 1979
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        let data = [1, 2, 3];
-
-        // Save the JSON file.
-        saveJSON(data, 'numbers.json');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an object.
-        let data = { x: mouseX, y: mouseY };
-
-        // Save the JSON file.
-        saveJSON(data, 'state.json');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an object.
-        let data = { x: mouseX, y: mouseY };
-
-        // Save the JSON file and reduce its size.
-        saveJSON(data, 'state.json', true);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: json
-    description: |
-      <p>data to save.</p>
-    type: Array|Object
-  - name: filename
-    description: |
-      <p>name of the file to be saved.</p>
-    type: String
-  - name: optimize
-    description: |
-      <p>whether to trim unneeded whitespace. Defaults
-                                   to <code>true</code>.</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# saveJSON
diff --git a/src/content/reference/en/p5 copy/saveSound.mdx b/src/content/reference/en/p5 copy/saveSound.mdx
deleted file mode 100644
index 3e8e7d0667..0000000000
--- a/src/content/reference/en/p5 copy/saveSound.mdx	
+++ /dev/null
@@ -1,35 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L1145
-title: saveSound
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >
-  <p>Save a p5.SoundFile as a .wav file. The browser will prompt the user
-
-  to download the file to their device.
-
-  For uploading audio to a server, use
-
-  <a
-  href="/docs/reference/#/p5.SoundFile/saveBlob/"><code>p5.SoundFile.saveBlob</code></a>.</p>
-line: 1145
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: soundFile
-    description: |
-      <p>p5.SoundFile that you wish to save</p>
-    type: p5.SoundFile
-  - name: fileName
-    description: |
-      <p>name of the resulting .wav file.</p>
-    type: String
-chainable: false
----
-
-
-# saveSound
diff --git a/src/content/reference/en/p5 copy/saveStrings.mdx b/src/content/reference/en/p5 copy/saveStrings.mdx
deleted file mode 100644
index 36c6c448a2..0000000000
--- a/src/content/reference/en/p5 copy/saveStrings.mdx	
+++ /dev/null
@@ -1,185 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2118
-title: saveStrings
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Saves an <code>Array</code> of <code>String</code>s to a file, one per
-  line.</p>
-
-  <p>The first parameter, <code>list</code>, is an array with the strings to
-  save.</p>
-
-  <p>The second parameter, <code>filename</code>, is a string that sets the
-  file's name.
-
-  For example, calling <code>saveStrings(['0', '01', '011'], 'data.txt')</code>
-  saves
-
-  the array <code>['0', '01', '011']</code> to a file called
-  <code>data.txt</code> on the user's
-
-  computer.</p>
-
-  <p>The third parameter, <code>extension</code>, is optional. If a string is
-  passed, as in
-
-  <code>saveStrings(['0', '01', '0</code>1'], 'data', 'txt')`, the second
-  parameter will
-
-  be interpreted as the file name and the third parameter as the extension.</p>
-
-  <p>The fourth parameter, <code>isCRLF</code>, is also optional, If
-  <code>true</code> is passed, as
-
-  in <code>saveStrings(['0', '01', '011'], 'data', 'txt', true)</code>, then two
-
-  characters, <code>\r\n</code> , will be added to the end of each string to
-  create new
-
-  lines in the saved file. <code>\r</code> is a carriage return (CR) and
-  <code>\n</code> is a line
-
-  feed (LF). By default, only <code>\n</code> (line feed) is added to each
-  string in
-
-  order to create new lines.</p>
-
-  <p>Note: The browser will either save the file immediately or prompt the user
-
-  with a dialogue window.</p>
-line: 2118
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        let data = ['0', '01', '011'];
-
-        // Save the text file.
-        saveStrings(data, 'data.txt');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        // ASCII art courtesy Wikipedia:
-        // https://en.wikipedia.org/wiki/ASCII_art
-        let data = [' (\\_/) ', "(='.'=)", '(")_(")'];
-
-        // Save the text file.
-        saveStrings(data, 'cat', 'txt');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Display instructions.
-      text('Double-click to save', 5, 50, 90);
-
-      describe('The text "Double-click to save" written in black on a gray background.');
-    }
-
-    // Save the file when the user double-clicks.
-    function doubleClicked() {
-      if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
-        // Create an array.
-        //   +--+
-        //  /  /|
-        // +--+ +
-        // |  |/
-        // +--+
-        let data = ['  +--+', ' /  /|', '+--+ +', '|  |/', '+--+'];
-
-        // Save the text file.
-        // Use CRLF for line endings.
-        saveStrings(data, 'box', 'txt', true);
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>data to save.</p>
-    type: 'String[]'
-  - name: filename
-    description: |
-      <p>name of file to be saved.</p>
-    type: String
-  - name: extension
-    description: |
-      <p>format to use for the file.</p>
-    type: String
-    optional: true
-  - name: isCRLF
-    description: |
-      <p>whether to add <code>\r\n</code> to the end of each
-                                  string. Defaults to <code>false</code>.</p>
-    type: Boolean
-    optional: true
-chainable: false
----
-
-
-# saveStrings
diff --git a/src/content/reference/en/p5 copy/saveTable.mdx b/src/content/reference/en/p5 copy/saveTable.mdx
deleted file mode 100644
index dd6e64ea4d..0000000000
--- a/src/content/reference/en/p5 copy/saveTable.mdx	
+++ /dev/null
@@ -1,70 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/io/files.js#L2275
-title: saveTable
-module: IO
-submodule: Output
-file: src/io/files.js
-description: >
-  <p>Writes the contents of a <a href="/reference/p5/p5.Table">Table</a> object
-  to a file. Defaults to a
-
-  text file with comma-separated-values ('csv') but can also
-
-  use tab separation ('tsv'), or generate an HTML table ('html').
-
-  The file saving process and location of the saved file will
-
-  vary between web browsers.</p>
-line: 2275
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-     let table;
-
-     function setup() {
-     table = new p5.Table();
-
-     table.addColumn('id');
-     table.addColumn('species');
-     table.addColumn('name');
-
-     let newRow = table.addRow();
-     newRow.setNum('id', table.getRowCount() - 1);
-     newRow.setString('species', 'Panthera leo');
-     newRow.setString('name', 'Lion');
-
-     // To save, un-comment next line then click 'run'
-     // saveTable(table, 'new.csv');
-
-     describe('no image displayed');
-     }
-
-     // Saves the following to a file called 'new.csv':
-     // id,species,name
-     // 0,Panthera leo,Lion
-     </code></div>
-class: p5
-params:
-  - name: Table
-    description: |
-      <p>the <a href="#/p5.Table">Table</a> object to save to a file</p>
-    type: p5.Table
-  - name: filename
-    description: |
-      <p>the filename to which the Table should be saved</p>
-    type: String
-  - name: options
-    description: |
-      <p>can be one of "tsv", "csv", or "html"</p>
-    type: String
-    optional: true
-chainable: false
----
-
-
-# saveTable
diff --git a/src/content/reference/en/p5 copy/scale.mdx b/src/content/reference/en/p5 copy/scale.mdx
deleted file mode 100644
index a459477d80..0000000000
--- a/src/content/reference/en/p5 copy/scale.mdx	
+++ /dev/null
@@ -1,231 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L878
-title: scale
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Scales the coordinate system.</p>
-
-  <p>By default, shapes are drawn at their original scale. A rectangle that's 50
-
-  pixels wide appears to take up half the width of a 100 pixel-wide canvas.
-
-  The <code>scale()</code> function can shrink or stretch the coordinate system
-  so that
-
-  shapes appear at different sizes. There are two ways to call
-  <code>scale()</code> with
-
-  parameters that set the scale factor(s).</p>
-
-  <p>The first way to call <code>scale()</code> uses numbers to set the amount
-  of scaling.
-
-  The first parameter, <code>s</code>, sets the amount to scale each axis. For
-  example,
-
-  calling <code>scale(2)</code> stretches the x-, y-, and z-axes by a factor of
-  2. The
-
-  next two parameters, <code>y</code> and <code>z</code>, are optional. They set
-  the amount to
-
-  scale the y- and z-axes. For example, calling <code>scale(2, 0.5, 1)</code>
-  stretches
-
-  the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
-
-  leaves the z-axis unchanged.</p>
-
-  <p>The second way to call <code>scale()</code> uses a <a
-  href="/reference/p5/p5.Vector">p5.Vector</a>
-
-  object to set the scale factors. For example, calling
-  <code>scale(myVector)</code>
-
-  uses the x-, y-, and z-components of <code>myVector</code> to set the amount
-  of
-
-  scaling along the x-, y-, and z-axes. Doing so is the same as calling
-
-  <code>scale(myVector.x, myVector.y, myVector.z)</code>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-  <code>scale(1)</code>
-
-  twice has the same effect as calling <code>scale(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and <a
-  href="/reference/p5/pop/">pop()</a> functions
-
-  can be used to isolate transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>scale(2)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't cause
-
-  shapes to grow continuously.</p>
-line: 878
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Scale the coordinate system by a factor of 0.5.
-      scale(0.5);
-
-      // Draw a square at (30, 20).
-      // It appears at (15, 10) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle and a square drawn in white on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Scale the coordinate system by factors of
-      // 0.5 along the x-axis and
-      // 1.3 along the y-axis.
-      scale(0.5, 1.3);
-
-      // Draw a square at (30, 20).
-      // It appears as a rectangle at (15, 26) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A rectangle and a square drawn in white on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a square at (30, 20).
-      square(30, 20, 40);
-
-      // Create a p5.Vector object.
-      let v = createVector(0.5, 1.3);
-
-      // Scale the coordinate system by factors of
-      // 0.5 along the x-axis and
-      // 1.3 along the y-axis.
-      scale(v);
-
-      // Draw a square at (30, 20).
-      // It appears as a rectangle at (15, 26) after scaling.
-      square(30, 20, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw the red sphere.
-      fill('red');
-      box();
-
-      // Scale the coordinate system by factors of
-      // 0.5 along the x-axis and
-      // 1.3 along the y-axis and
-      // 2 along the z-axis.
-      scale(0.5, 1.3, 2);
-
-      // Draw the blue sphere.
-      fill('blue');
-      box();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 878
-    params:
-      - name: s
-        description: |
-          <p>amount to scale along the positive x-axis.</p>
-        type: 'Number|p5.Vector|Number[]'
-      - name: 'y'
-        description: >
-          <p>amount to scale along the positive y-axis. Defaults to
-          <code>s</code>.</p>
-        type: Number
-        optional: true
-      - name: z
-        description: >
-          <p>amount to scale along the positive z-axis. Defaults to
-          <code>y</code>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1039
-    params:
-      - name: scales
-        description: |
-          <p>vector whose components should be used to scale.</p>
-        type: 'p5.Vector|Number[]'
-    chainable: 1
-chainable: true
----
-
-
-# scale
diff --git a/src/content/reference/en/p5 copy/second.mdx b/src/content/reference/en/p5 copy/second.mdx
deleted file mode 100644
index e29042801c..0000000000
--- a/src/content/reference/en/p5 copy/second.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L277
-title: second
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current second as a number from 0–59.</p>
-line: 277
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current second.
-      let s = second();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the second.
-      text(`Current second: ${s}`, 10, 50, 80);
-
-      describe(`The text 'Current second: ${s}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current second between 0 and 59.
-  type: Integer
-chainable: false
----
-
-
-# second
diff --git a/src/content/reference/en/p5 copy/select.mdx b/src/content/reference/en/p5 copy/select.mdx
deleted file mode 100644
index 0ace11ab0d..0000000000
--- a/src/content/reference/en/p5 copy/select.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L21
-title: select
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Searches the page for the first element that matches the given
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
-  target="_blank">CSS selector string</a>.</p>
-
-  <p>The selector string can be an ID, class, tag name, or a combination.
-
-  <code>select()</code> returns a <a
-  href="/reference/p5/p5.Element">p5.Element</a> object if it
-
-  finds a match and <code>null</code> if not.</p>
-
-  <p>The second parameter, <code>container</code>, is optional. It specifies a
-  container to
-
-  search within. <code>container</code> can be CSS selector string, a
-
-  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
-  target="_blank">HTMLElement</a> object.</p>
-line: 21
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-      background(200);
-
-      // Select the canvas by its tag.
-      let cnv = select('canvas');
-      cnv.style('border', '5px deeppink dashed');
-
-      describe('A gray square with a dashed pink border.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      // Add a class attribute to the canvas.
-      cnv.class('pinkborder');
-
-      background(200);
-
-      // Select the canvas by its class.
-      cnv = select('.pinkborder');
-
-      // Style its border.
-      cnv.style('border', '5px deeppink dashed');
-
-      describe('A gray square with a dashed pink border.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      let cnv = createCanvas(100, 100);
-
-      // Set the canvas' ID.
-      cnv.id('mycanvas');
-
-      background(200);
-
-      // Select the canvas by its ID.
-      cnv = select('#mycanvas');
-
-      // Style its border.
-      cnv.style('border', '5px deeppink dashed');
-
-      describe('A gray square with a dashed pink border.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: selectors
-    description: |
-      <p>CSS selector string of element to search for.</p>
-    type: String
-  - name: container
-    description: |
-      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
-                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
-    type: String|p5.Element|HTMLElement
-    optional: true
-return:
-  description: <a href="#/p5.Element">p5.Element</a> containing the element.
-  type: p5.Element|null
-chainable: false
----
-
-
-# select
diff --git a/src/content/reference/en/p5 copy/selectAll.mdx b/src/content/reference/en/p5 copy/selectAll.mdx
deleted file mode 100644
index ccd1f3329f..0000000000
--- a/src/content/reference/en/p5 copy/selectAll.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/dom/dom.js#L109
-title: selectAll
-module: DOM
-submodule: DOM
-file: src/dom/dom.js
-description: >
-  <p>Searches the page for all elements that matches the given
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors"
-  target="_blank">CSS selector string</a>.</p>
-
-  <p>The selector string can be an ID, class, tag name, or a combination.
-
-  <code>selectAll()</code> returns an array of <a
-  href="/reference/p5/p5.Element">p5.Element</a>
-
-  objects if it finds any matches and an empty array if none are found.</p>
-
-  <p>The second parameter, <code>container</code>, is optional. It specifies a
-  container to
-
-  search within. <code>container</code> can be CSS selector string, a
-
-  <a href="/reference/p5/p5.Element">p5.Element</a> object, or an
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/"
-  target="_blank">HTMLElement</a> object.</p>
-line: 109
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create three buttons.
-      createButton('1');
-      createButton('2');
-      createButton('3');
-
-      // Select the buttons by their tag.
-      let buttons = selectAll('button');
-
-      // Position the buttons.
-      for (let i = 0; i < 3; i += 1) {
-        buttons[i].position(0, i * 30);
-      }
-
-      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Create three buttons and position them.
-      let b1 = createButton('1');
-      b1.position(0, 0);
-      let b2 = createButton('2');
-      b2.position(0, 30);
-      let b3 = createButton('3');
-      b3.position(0, 60);
-
-      // Add a class attribute to each button.
-      b1.class('btn');
-      b2.class('btn btn-pink');
-      b3.class('btn');
-
-      // Select the buttons by their class.
-      let buttons = selectAll('.btn');
-      let pinkButtons = selectAll('.btn-pink');
-
-      // Style the selected buttons.
-      buttons.forEach(setFont);
-      pinkButtons.forEach(setColor);
-
-      describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
-    }
-
-    // Set a button's font to Comic Sans MS.
-    function setFont(btn) {
-      btn.style('font-family', 'Comic Sans MS');
-    }
-
-    // Set a button's background and font color.
-    function setColor(btn) {
-      btn.style('background', 'deeppink');
-      btn.style('color', 'white');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: selectors
-    description: |
-      <p>CSS selector string of element to search for.</p>
-    type: String
-  - name: container
-    description: |
-      <p>CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
-                                                  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.</p>
-    type: String|p5.Element|HTMLElement
-    optional: true
-return:
-  description: >-
-    array of <a href="#/p5.Element">p5.Element</a>s containing any elements
-    found.
-  type: 'p5.Element[]'
-chainable: false
----
-
-
-# selectAll
diff --git a/src/content/reference/en/p5 copy/set.mdx b/src/content/reference/en/p5 copy/set.mdx
deleted file mode 100644
index caa9e75a66..0000000000
--- a/src/content/reference/en/p5 copy/set.mdx	
+++ /dev/null
@@ -1,157 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L997
-title: set
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Sets the color of a pixel or draws an image to the canvas.</p>
-
-  <p><code>set()</code> is easy to use but it's not as fast as
-
-  <a href="/reference/p5/pixels/">pixels</a>. Use <a
-  href="/reference/p5/pixels/">pixels</a>
-
-  to set many pixel values.</p>
-
-  <p><code>set()</code> interprets the first two parameters as x- and
-  y-coordinates. It
-
-  interprets the last parameter as a grayscale value, a <code>[R, G, B,
-  A]</code> pixel
-
-  array, a <a href="/reference/p5/p5.Color">p5.Color</a> object, or a
-
-  <a href="/reference/p5/p5.Image">p5.Image</a> object. If an image is passed,
-  the first
-
-  two parameters set the coordinates for the image's upper-left corner,
-
-  regardless of the current <a
-  href="/reference/p5/imageMode/">imageMode()</a>.</p>
-
-  <p><a href="/reference/p5/updatePixels/">updatePixels()</a> must be called
-  after using
-
-  <code>set()</code> for changes to appear.</p>
-line: 997
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Set four pixels to black.
-      set(30, 20, 0);
-      set(85, 20, 0);
-      set(85, 75, 0);
-      set(30, 75, 0);
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Four black dots arranged in a square drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a p5.Color object.
-      let black = color(0);
-
-      // Set four pixels to black.
-      set(30, 20, black);
-      set(85, 20, black);
-      set(85, 75, black);
-      set(30, 75, black);
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Four black dots arranged in a square drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(255);
-
-      // Draw a horizontal color gradient.
-      for (let x = 0; x < 100; x += 1) {
-        for (let y = 0; y < 100; y += 1) {
-          // Calculate the grayscale value.
-          let c = map(x, 0, 100, 0, 255);
-
-          // Set the pixel using the grayscale value.
-          set(x, y, c);
-        }
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('A horizontal color gradient from black to white.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use the image to set all pixels.
-      set(0, 0, img);
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('An image of a mountain landscape.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the pixel.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the pixel.</p>
-    type: Number
-  - name: c
-    description: |
-      <p>grayscale value | pixel array |
-                                     <a href="#/p5.Color">p5.Color</a> object | <a href="#/p5.Image">p5.Image</a> to copy.</p>
-    type: 'Number|Number[]|Object'
-chainable: false
----
-
-
-# set
diff --git a/src/content/reference/en/p5 copy/setAttributes.mdx b/src/content/reference/en/p5 copy/setAttributes.mdx
deleted file mode 100644
index 368bc49c6c..0000000000
--- a/src/content/reference/en/p5 copy/setAttributes.mdx	
+++ /dev/null
@@ -1,163 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.RendererGL.js#L118
-title: setAttributes
-module: Rendering
-submodule: Rendering
-file: src/webgl/p5.RendererGL.js
-description: |
-  <p>Set attributes for the WebGL Drawing context.
-  This is a way of adjusting how the WebGL
-  renderer works to fine-tune the display and performance.</p>
-  <p>Note that this will reinitialize the drawing context
-  if called after the WebGL canvas is made.</p>
-  <p>If an object is passed as the parameter, all attributes
-  not declared in the object will be set to defaults.</p>
-  <p>The available attributes are:
-  <br>
-  alpha - indicates if the canvas contains an alpha buffer
-  default is true</br></p>
-  <p>depth - indicates whether the drawing buffer has a depth buffer
-  of at least 16 bits - default is true</p>
-  <p>stencil - indicates whether the drawing buffer has a stencil buffer
-  of at least 8 bits</p>
-  <p>antialias - indicates whether or not to perform anti-aliasing
-  default is false (true in Safari)</p>
-  <p>premultipliedAlpha - indicates that the page compositor will assume
-  the drawing buffer contains colors with pre-multiplied alpha
-  default is true</p>
-  <p>preserveDrawingBuffer - if true the buffers will not be cleared and
-  and will preserve their values until cleared or overwritten by author
-  (note that p5 clears automatically on draw loop)
-  default is true</p>
-  <p>perPixelLighting - if true, per-pixel lighting will be used in the
-  lighting shader otherwise per-vertex lighting is used.
-  default is true.</p>
-  <p>version - either 1 or 2, to specify which WebGL version to ask for. By
-  default, WebGL 2 will be requested. If WebGL2 is not available, it will
-  fall back to WebGL 1. You can check what version is used with by looking at
-  the global <code>webglVersion</code> property.</p>
-line: 118
-isConstructor: false
-itemtype: method
-alt: a rotating cube with smoother edges
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(255);
-      push();
-      rotateZ(frameCount * 0.02);
-      rotateX(frameCount * 0.02);
-      rotateY(frameCount * 0.02);
-      fill(0, 0, 0);
-      box(50);
-      pop();
-    }
-    </code>
-    </div>
-    <br>
-    Now with the antialias attribute set to true.
-    <br>
-    <div>
-    <code>
-    function setup() {
-      setAttributes('antialias', true);
-      createCanvas(100, 100, WEBGL);
-    }
-
-    function draw() {
-      background(255);
-      push();
-      rotateZ(frameCount * 0.02);
-      rotateX(frameCount * 0.02);
-      rotateY(frameCount * 0.02);
-      fill(0, 0, 0);
-      box(50);
-      pop();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // press the mouse button to disable perPixelLighting
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-      noStroke();
-      fill(255);
-    }
-
-    let lights = [
-      { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
-      { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
-      { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
-      { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
-      { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
-      { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
-    ];
-
-    function draw() {
-      let t = millis() / 1000 + 1000;
-      background(0);
-      directionalLight(color('#222'), 1, 1, 1);
-
-      for (let i = 0; i < lights.length; i++) {
-        let light = lights[i];
-        pointLight(
-          color(light.c),
-          p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
-        );
-      }
-
-      specularMaterial(255);
-      sphere(width * 0.1);
-
-      rotateX(t * 0.77);
-      rotateY(t * 0.83);
-      rotateZ(t * 0.91);
-      torus(width * 0.3, width * 0.07, 24, 10);
-    }
-
-    function mousePressed() {
-      setAttributes('perPixelLighting', false);
-      noStroke();
-      fill(255);
-    }
-    function mouseReleased() {
-      setAttributes('perPixelLighting', true);
-      noStroke();
-      fill(255);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 118
-    params:
-      - name: key
-        description: |
-          <p>Name of attribute</p>
-        type: String
-      - name: value
-        description: |
-          <p>New value of named attribute</p>
-        type: Boolean
-  - line: 262
-    params:
-      - name: obj
-        description: |
-          <p>object with key-value pairs</p>
-        type: Object
-chainable: false
----
-
-
-# setAttributes
diff --git a/src/content/reference/en/p5 copy/setBPM.mdx b/src/content/reference/en/p5 copy/setBPM.mdx
deleted file mode 100644
index d2e94a6c5d..0000000000
--- a/src/content/reference/en/p5 copy/setBPM.mdx	
+++ /dev/null
@@ -1,29 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L9084
-title: setBPM
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Set the global tempo, in beats per minute, for all
-  p5.Parts. This method will impact all active p5.Parts.</p>
-line: 9084
-isConstructor: false
-itemtype: method
-class: p5
-params:
-  - name: BPM
-    description: |
-      <p>Beats Per Minute</p>
-    type: Number
-  - name: rampTime
-    description: |
-      <p>Seconds from now</p>
-    type: Number
-chainable: false
----
-
-
-# setBPM
diff --git a/src/content/reference/en/p5 copy/setCamera.mdx b/src/content/reference/en/p5 copy/setCamera.mdx
deleted file mode 100644
index bd4727d474..0000000000
--- a/src/content/reference/en/p5 copy/setCamera.mdx	
+++ /dev/null
@@ -1,81 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/p5.Camera.js#L3897
-title: setCamera
-module: 3D
-submodule: Camera
-file: src/webgl/p5.Camera.js
-description: >
-  <p>Sets the current (active) camera of a 3D sketch.</p>
-
-  <p><code>setCamera()</code> allows for switching between multiple cameras
-  created with
-
-  <a href="/reference/p5/createCamera/">createCamera()</a>.</p>
-
-  <p>Note: <code>setCamera()</code> can only be used in WebGL mode.</p>
-line: 3897
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Double-click to toggle between cameras.
-
-    let cam1;
-    let cam2;
-    let usingCam1 = true;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create the first camera.
-      // Keep its default settings.
-      cam1 = createCamera();
-
-      // Create the second camera.
-      // Place it at the top-left.
-      // Point it at the origin.
-      cam2 = createCamera();
-      cam2.setPosition(400, -400, 800);
-      cam2.lookAt(0, 0, 0);
-
-      // Set the current camera to cam1.
-      setCamera(cam1);
-
-      describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw the box.
-      box();
-    }
-
-    // Toggle the current camera when the user double-clicks.
-    function doubleClicked() {
-      if (usingCam1 === true) {
-        setCamera(cam2);
-        usingCam1 = false;
-      } else {
-        setCamera(cam1);
-        usingCam1 = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: cam
-    description: |
-      <p>camera that should be made active.</p>
-    type: p5.Camera
-chainable: false
----
-
-
-# setCamera
diff --git a/src/content/reference/en/p5 copy/setMoveThreshold.mdx b/src/content/reference/en/p5 copy/setMoveThreshold.mdx
deleted file mode 100644
index 3b90fb5f4d..0000000000
--- a/src/content/reference/en/p5 copy/setMoveThreshold.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L417
-title: setMoveThreshold
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/setMoveThreshold/">setMoveThreshold()</a>
-  function is used to set the movement threshold for
-
-  the <a href="/reference/p5/deviceMoved/">deviceMoved()</a> function. The
-  default threshold is set to 0.5.</p>
-line: 417
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // You will need to move the device incrementally further
-    // the closer the square's color gets to white in order to change the value.
-
-    let value = 0;
-    let threshold = 0.5;
-    function setup() {
-      setMoveThreshold(threshold);
-    }
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device moves`);
-    }
-    function deviceMoved() {
-      value = value + 5;
-      threshold = threshold + 0.1;
-      if (value > 255) {
-        value = 0;
-        threshold = 30;
-      }
-      setMoveThreshold(threshold);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>The threshold value</p>
-    type: Number
-chainable: false
----
-
-
-# setMoveThreshold
diff --git a/src/content/reference/en/p5 copy/setShakeThreshold.mdx b/src/content/reference/en/p5 copy/setShakeThreshold.mdx
deleted file mode 100644
index 30af9eadb0..0000000000
--- a/src/content/reference/en/p5 copy/setShakeThreshold.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L459
-title: setShakeThreshold
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>The <a href="/reference/p5/setShakeThreshold/">setShakeThreshold()</a>
-  function is used to set the movement threshold for
-
-  the <a href="/reference/p5/deviceShaken/">deviceShaken()</a> function. The
-  default threshold is set to 30.</p>
-line: 459
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    // Run this example on a mobile device
-    // You will need to shake the device more firmly
-    // the closer the box's fill gets to white in order to change the value.
-
-    let value = 0;
-    let threshold = 30;
-    function setup() {
-      setShakeThreshold(threshold);
-    }
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device is being shaked`);
-    }
-    function deviceMoved() {
-      value = value + 5;
-      threshold = threshold + 5;
-      if (value > 255) {
-        value = 0;
-        threshold = 30;
-      }
-      setShakeThreshold(threshold);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>The threshold value</p>
-    type: Number
-chainable: false
----
-
-
-# setShakeThreshold
diff --git a/src/content/reference/en/p5 copy/setup.mdx b/src/content/reference/en/p5 copy/setup.mdx
deleted file mode 100644
index 6a71ea6a0f..0000000000
--- a/src/content/reference/en/p5 copy/setup.mdx	
+++ /dev/null
@@ -1,111 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/main.js#L87
-title: setup
-module: Structure
-submodule: Structure
-file: src/core/main.js
-description: >
-  <p>A function that's called once when the sketch begins running.</p>
-
-  <p>Declaring the function <code>setup()</code> sets a code block to run once
-
-  automatically when the sketch starts running. It's used to perform
-
-  setup tasks such as creating the canvas and initializing variables:</p>
-
-  <pre><code class="language-js">function setup() {
-    // Code to run once at the start of the sketch.
-  }
-
-  </code></pre>
-
-  <p>Code placed in <code>setup()</code> will run once before code placed in
-
-  <a href="/reference/p5/draw/">draw()</a> begins looping. If the
-
-  <a href="/reference/p5/preload/">preload()</a> is declared, then
-  <code>setup()</code> will
-
-  run immediately after <a href="/reference/p5/preload/">preload()</a> finishes
-
-  loading assets.</p>
-
-  <p>Note: <code>setup()</code> doesn’t have to be declared, but it’s common
-  practice to do so.</p>
-line: 87
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw the circle.
-      circle(50, 50, 40);
-
-      describe('A white circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Paint the background once.
-      background(200);
-
-      describe(
-        'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
-      );
-    }
-
-    function draw() {
-      // Draw circles repeatedly.
-      circle(mouseX, mouseY, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/bricks.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Draw the image.
-      image(img, 0, 0);
-
-      describe(
-        'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'
-      );
-    }
-
-    function draw() {
-      // Style the circle.
-      noStroke();
-
-      // Draw the circle.
-      circle(mouseX, mouseY, 10);
-    }
-    </code>
-    </div>
-class: p5
-chainable: false
----
-
-
-# setup
diff --git a/src/content/reference/en/p5 copy/shader.mdx b/src/content/reference/en/p5 copy/shader.mdx
deleted file mode 100644
index c8213d9261..0000000000
--- a/src/content/reference/en/p5 copy/shader.mdx	
+++ /dev/null
@@ -1,244 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L682
-title: shader
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the <a href="/reference/p5/p5.Shader">p5.Shader</a> object to apply
-  while drawing.</p>
-
-  <p>Shaders are programs that run on the graphics processing unit (GPU). They
-
-  can process many pixels or vertices at the same time, making them fast for
-
-  many graphics tasks. They’re written in a language called
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/"
-  target="_blank">GLSL</a>
-
-  and run along with the rest of the code in a sketch.
-
-  <a href="/reference/p5/p5.Shader">p5.Shader</a> objects can be created using
-  the
-
-  <a href="/reference/p5/createShader/">createShader()</a> and
-
-  <a href="/reference/p5/loadShader/">loadShader()</a> functions.</p>
-
-  <p>The parameter, <code>s</code>, is the <a
-  href="/reference/p5/p5.Shader">p5.Shader</a> object to
-
-  apply. For example, calling <code>shader(myShader)</code> applies
-  <code>myShader</code> to
-
-  process each pixel on the canvas. The shader will be used for:</p>
-
-  <ul>
-
-  <li>Fills when a texture is enabled if it includes a uniform
-  <code>sampler2D</code>.</li>
-
-  <li>Fills when lights are enabled if it includes the attribute
-  <code>aNormal</code>, or if it has any of the following uniforms:
-  <code>uUseLighting</code>, <code>uAmbientLightCount</code>,
-  <code>uDirectionalLightCount</code>, <code>uPointLightCount</code>,
-  <code>uAmbientColor</code>, <code>uDirectionalDiffuseColors</code>,
-  <code>uDirectionalSpecularColors</code>, <code>uPointLightLocation</code>,
-  <code>uPointLightDiffuseColors</code>, <code>uPointLightSpecularColors</code>,
-  <code>uLightingDirection</code>, or <code>uSpecular</code>.</li>
-
-  <li>Fills whenever there are no lights or textures.</li>
-
-  <li>Strokes if it includes the uniform <code>uStrokeWeight</code>.</li>
-
-  </ul>
-
-  <p>The source code from a <a href="/reference/p5/p5.Shader">p5.Shader</a>
-  object's
-
-  fragment and vertex shaders will be compiled the first time it's passed to
-
-  <code>shader()</code>. See
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compileShader/"
-  target="_blank">MDN</a>
-
-  for more information about compiling shaders.</p>
-
-  <p>Calling <a href="/reference/p5/resetShader/">resetShader()</a> restores a
-  sketch’s
-
-  default shaders.</p>
-
-  <p>Note: Shaders can only be used in WebGL mode.</p>
-line: 682
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div modernizr='webgl'>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    // Create a string with the vertex shader program.
-    // The vertex shader is called for each vertex.
-    let vertSrc = `
-    precision highp float;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    attribute vec3 aPosition;
-    attribute vec2 aTexCoord;
-    varying vec2 vTexCoord;
-
-    void main() {
-      vTexCoord = aTexCoord;
-      vec4 positionVec4 = vec4(aPosition, 1.0);
-      gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
-    }
-    `;
-
-    // Create a string with the fragment shader program.
-    // The fragment shader is called for each pixel.
-    let fragSrc = `
-    precision highp float;
-
-    void main() {
-      // Set each pixel's RGBA value to yellow.
-      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
-    }
-    `;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Shader object.
-      let shaderProgram = createShader(vertSrc, fragSrc);
-
-      // Apply the p5.Shader object.
-      shader(shaderProgram);
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a plane as a drawing surface.
-      plane(100, 100);
-
-      describe('A yellow square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let mandelbrot;
-
-    // Load the shader and create a p5.Shader object.
-    function preload() {
-      mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Use the p5.Shader object.
-      shader(mandelbrot);
-
-      // Set the shader uniform p to an array.
-      mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
-
-      describe('A fractal image zooms in and out of focus.');
-    }
-
-    function draw() {
-      // Set the shader uniform r to a value that oscillates between 0 and 2.
-      mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
-
-      // Add a quad as a display surface for the shader.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Note: A "uniform" is a global variable within a shader program.
-
-    let redGreen;
-    let orangeBlue;
-    let showRedGreen = false;
-
-    // Load the shader and create two separate p5.Shader objects.
-    function preload() {
-      redGreen = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
-      orangeBlue = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Initialize the redGreen shader.
-      shader(redGreen);
-
-      // Set the redGreen shader's center and background color.
-      redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
-      redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
-
-      // Initialize the orangeBlue shader.
-      shader(orangeBlue);
-
-      // Set the orangeBlue shader's center and background color.
-      orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
-      orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
-
-      describe(
-        'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'
-      );
-    }
-
-    function draw() {
-      // Update the offset values for each shader.
-      // Move orangeBlue vertically.
-      // Move redGreen horizontally.
-      orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);
-      redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);
-
-      if (showRedGreen === true) {
-        shader(redGreen);
-      } else {
-        shader(orangeBlue);
-      }
-
-      // Style the drawing surface.
-      noStroke();
-
-      // Add a quad as a drawing surface.
-      quad(-1, -1, 1, -1, 1, 1, -1, 1);
-    }
-
-    // Toggle between shaders when the user double-clicks.
-    function doubleClicked() {
-      showRedGreen = !showRedGreen;
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: s
-    description: |
-      <p><a href="#/p5.Shader">p5.Shader</a> object
-                           to apply.</p>
-    type: p5.Shader
-chainable: true
----
-
-
-# shader
diff --git a/src/content/reference/en/p5 copy/shearX.mdx b/src/content/reference/en/p5 copy/shearX.mdx
deleted file mode 100644
index 244fea83e2..0000000000
--- a/src/content/reference/en/p5 copy/shearX.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1069
-title: shearX
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Shears the x-axis so that shapes appear skewed.</p>
-
-  <p>By default, the x- and y-axes are perpendicular. The <code>shearX()</code>
-  function
-
-  transforms the coordinate system so that x-coordinates are translated while
-
-  y-coordinates are fixed.</p>
-
-  <p>The first parameter, <code>angle</code>, is the amount to shear. For
-  example, calling
-
-  <code>shearX(1)</code> transforms all x-coordinates using the formula
-
-  <code>x = x + y * tan(angle)</code>. <code>shearX()</code> interprets angle
-  values using the
-
-  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-
-  <code>shearX(1)</code> twice has the same effect as calling
-  <code>shearX(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and
-
-  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
-
-  transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>shearX(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't
-
-  cause shapes to shear continuously.</p>
-line: 1069
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the x-axis.
-      shearX(QUARTER_PI);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the x-axis.
-      shearX(45);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle to shear by in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# shearX
diff --git a/src/content/reference/en/p5 copy/shearY.mdx b/src/content/reference/en/p5 copy/shearY.mdx
deleted file mode 100644
index 007a8b4bfa..0000000000
--- a/src/content/reference/en/p5 copy/shearY.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1146
-title: shearY
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Shears the y-axis so that shapes appear skewed.</p>
-
-  <p>By default, the x- and y-axes are perpendicular. The <code>shearY()</code>
-  function
-
-  transforms the coordinate system so that y-coordinates are translated while
-
-  x-coordinates are fixed.</p>
-
-  <p>The first parameter, <code>angle</code>, is the amount to shear. For
-  example, calling
-
-  <code>shearY(1)</code> transforms all y-coordinates using the formula
-
-  <code>y = y + x * tan(angle)</code>. <code>shearY()</code> interprets angle
-  values using the
-
-  current <a href="/reference/p5/angleMode/">angleMode()</a>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-
-  <code>shearY(1)</code> twice has the same effect as calling
-  <code>shearY(2)</code> once. The
-
-  <a href="/reference/p5/push/">push()</a> and
-
-  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
-
-  transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>shearY(1)</code> inside the <a href="/reference/p5/draw/">draw()</a>
-  function won't
-
-  cause shapes to shear continuously.</p>
-line: 1146
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the y-axis.
-      shearY(QUARTER_PI);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Use degrees.
-      angleMode(DEGREES);
-
-      describe('A white quadrilateral on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Shear the coordinate system along the y-axis.
-      shearY(45);
-
-      // Draw the square.
-      square(0, 0, 50);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>angle to shear by in the current <a
-      href="#/p5/angleMode">angleMode()</a>.</p>
-    type: Number
-chainable: true
----
-
-
-# shearY
diff --git a/src/content/reference/en/p5 copy/shininess.mdx b/src/content/reference/en/p5 copy/shininess.mdx
deleted file mode 100644
index a093e246c8..0000000000
--- a/src/content/reference/en/p5 copy/shininess.mdx	
+++ /dev/null
@@ -1,86 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2998
-title: shininess
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the amount of gloss ("shininess") of a
-
-  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.</p>
-
-  <p>Shiny materials focus reflected light more than dull materials.
-
-  <code>shininess()</code> affects the way materials reflect light sources
-  including
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>,
-
-  and <a href="/reference/p5/spotLight/">spotLight()</a>.</p>
-
-  <p>The parameter, <code>shine</code>, is a number that sets the amount of
-  shininess.
-
-  <code>shine</code> must be greater than 1, which is its default value.</p>
-line: 2998
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn on a red ambient light.
-      ambientLight(255, 0, 0);
-
-      // Get the mouse's coordinates.
-      let mx = mouseX - 50;
-      let my = mouseY - 50;
-
-      // Turn on a white point light that follows the mouse.
-      pointLight(255, 255, 255, mx, my, 50);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a specular material with a grayscale value.
-      specularMaterial(255);
-
-      // Draw the left sphere with low shininess.
-      translate(-25, 0, 0);
-      shininess(10);
-      sphere(20);
-
-      // Draw the right sphere with high shininess.
-      translate(50, 0, 0);
-      shininess(100);
-      sphere(20);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: shine
-    description: |
-      <p>amount of shine.</p>
-    type: Number
-chainable: true
----
-
-
-# shininess
diff --git a/src/content/reference/en/p5 copy/shorten.mdx b/src/content/reference/en/p5 copy/shorten.mdx
deleted file mode 100644
index a1018f7fb8..0000000000
--- a/src/content/reference/en/p5 copy/shorten.mdx	
+++ /dev/null
@@ -1,44 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L161
-title: shorten
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Decreases an array by one element and returns the shortened array,
-  maps to Array.pop().</p>
-line: 161
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">array.pop()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let myArray = ['A', 'B', 'C'];
-      print(myArray); // ['A', 'B', 'C']
-      let newArray = shorten(myArray);
-      print(myArray); // ['A','B','C']
-      print(newArray); // ['A','B']
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to shorten</p>
-    type: Array
-return:
-  description: shortened Array
-  type: Array
-chainable: false
----
-
-
-# shorten
diff --git a/src/content/reference/en/p5 copy/shuffle.mdx b/src/content/reference/en/p5 copy/shuffle.mdx
deleted file mode 100644
index a4ead252ef..0000000000
--- a/src/content/reference/en/p5 copy/shuffle.mdx	
+++ /dev/null
@@ -1,132 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L185
-title: shuffle
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: >
-  <p>Shuffles the elements of an array.</p>
-
-  <p>The first parameter, <code>array</code>, is the array to be shuffled. For
-  example,
-
-  calling <code>shuffle(myArray)</code> will shuffle the elements of
-  <code>myArray</code>. By
-
-  default, the original array won’t be modified. Instead, a copy will be
-
-  created, shuffled, and returned.</p>
-
-  <p>The second parameter, <code>modify</code>, is optional. If
-  <code>true</code> is passed, as in
-
-  <code>shuffle(myArray, true)</code>, then the array will be shuffled in place
-  without
-
-  making a copy.</p>
-line: 185
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of colors.
-      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
-
-      // Create a shuffled copy of the array.
-      let shuffledColors = shuffle(colors);
-
-      // Draw  a row of circles using the original array.
-      for (let i = 0; i < colors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 12.5;
-
-        // Style the circle.
-        let c = colors[i];
-        fill(c);
-
-        // Draw the circle.
-        circle(x, 33, 10);
-      }
-
-      // Draw  a row of circles using the original array.
-      for (let i = 0; i < shuffledColors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 12.5;
-
-        // Style the circle.
-        let c = shuffledColors[i];
-        fill(c);
-
-        // Draw the circle.
-        circle(x, 67, 10);
-      }
-
-      describe(
-        'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of colors.
-      let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
-
-      // Shuffle the array.
-      shuffle(colors, true);
-
-      // Draw  a row of circles using the original array.
-      for (let i = 0; i < colors.length; i += 1) {
-        // Calculate the x-coordinate.
-        let x = (i + 1) * 12.5;
-
-        // Style the circle.
-        let c = colors[i];
-        fill(c);
-
-        // Draw the circle.
-        circle(x, 50, 10);
-      }
-
-      describe(
-        'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: array
-    description: |
-      <p>array to shuffle.</p>
-    type: Array
-  - name: bool
-    description: >
-      <p>if <code>true</code>, shuffle the original array in place. Defaults to
-      <code>false</code>.</p>
-    type: Boolean
-    optional: true
-return:
-  description: shuffled array.
-  type: Array
-chainable: false
----
-
-
-# shuffle
diff --git a/src/content/reference/en/p5 copy/sin.mdx b/src/content/reference/en/p5 copy/sin.mdx
deleted file mode 100644
index 7f0cba972d..0000000000
--- a/src/content/reference/en/p5 copy/sin.mdx	
+++ /dev/null
@@ -1,107 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L363
-title: sin
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the sine of an angle.</p>
-
-  <p><code>sin()</code> is useful for many geometric tasks in creative coding.
-  The values
-
-  returned oscillate between -1 and 1 as the input angle increases.
-  <code>sin()</code>
-
-  calculates the sine of an angle, using radians by default, or according to
-
-  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-  DEGREES).</p>
-line: 363
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white ball on a string oscillates up and down.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the coordinates.
-      let x = 50;
-      let y = 30 * sin(frameCount * 0.05) + 50;
-
-      // Draw the oscillator.
-      line(50, y, x, y);
-      circle(x, y, 20);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form a wave pattern.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 30 * sin(x * 0.1) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots form an infinity symbol.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = 30 * cos(frameCount * 0.1) + 50;
-      let y = 10 * sin(frameCount * 0.2) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>the angle, in radians by default, or according to
-
-      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-      DEGREES).</p>
-    type: Number
-return:
-  description: sine of the angle.
-  type: Number
-chainable: false
----
-
-
-# sin
diff --git a/src/content/reference/en/p5 copy/smooth.mdx b/src/content/reference/en/p5 copy/smooth.mdx
deleted file mode 100644
index 2c42bda62c..0000000000
--- a/src/content/reference/en/p5 copy/smooth.mdx	
+++ /dev/null
@@ -1,94 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L303
-title: smooth
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Draws certain features with smooth (antialiased) edges.</p>
-
-  <p><code>smooth()</code> is active by default. In 2D mode,
-
-  <a href="/reference/p5/noSmooth/">noSmooth()</a> is helpful for scaling up
-  images
-
-  without blurring. The functions don't affect shapes or fonts.</p>
-
-  <p>In WebGL mode, <a href="/reference/p5/noSmooth/">noSmooth()</a> causes all
-  shapes to
-
-  be drawn with jagged (aliased) edges. The functions don't affect images or
-
-  fonts.</p>
-line: 303
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let heart;
-
-    // Load a pixelated heart image from an image data string.
-    function preload() {
-      heart = loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAEZJREFUGFd9jcsNACAIQ9tB2MeR3YdBMBBq8CIXPi2vBICIiOwkOedatllqWO6Y8yOWoyuNf1GZwgmf+RRG2YXr+xVFmA8HZ9Mx/KGPMtcAAAAASUVORK5CYII=');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      background(50);
-
-      // Antialiased hearts.
-      image(heart, 10, 10);
-      image(heart, 20, 10, 16, 16);
-      image(heart, 40, 10, 32, 32);
-
-      // Aliased hearts.
-      noSmooth();
-      image(heart, 10, 60);
-      image(heart, 20, 60, 16, 16);
-      image(heart, 40, 60, 32, 32);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A white circle on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Disable smoothing.
-      noSmooth();
-
-      background(200);
-
-      circle(0, 0, 80);
-
-      describe('A pixelated white circle on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-chainable: true
----
-
-
-# smooth
diff --git a/src/content/reference/en/p5 copy/sort.mdx b/src/content/reference/en/p5 copy/sort.mdx
deleted file mode 100644
index c2249d926a..0000000000
--- a/src/content/reference/en/p5 copy/sort.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L300
-title: sort
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Sorts an array of numbers from smallest to largest, or puts an array of
-  words in alphabetical order. The original array is not modified; a
-  re-ordered array is returned. The count parameter states the number of
-  elements to sort. For example, if there are 12 elements in an array and
-  count is set to 5, only the first 5 elements in the array will be sorted.</p>
-line: 300
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">array.sort()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let words = ['banana', 'apple', 'pear', 'lime'];
-      print(words); // ['banana', 'apple', 'pear', 'lime']
-      let count = 4; // length of array
-
-      words = sort(words, count);
-      print(words); // ['apple', 'banana', 'lime', 'pear']
-    }
-    </code></div>
-    <div class = 'norender'><code>
-    function setup() {
-      let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
-      print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
-      let count = 5; // Less than the length of the array
-
-      numbers = sort(numbers, count);
-      print(numbers); // [1,2,5,6,14,9,8,12]
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to sort</p>
-    type: Array
-  - name: count
-    description: |
-      <p>number of elements to sort, starting from 0</p>
-    type: Integer
-    optional: true
-return:
-  description: the sorted list
-  type: Array
-chainable: false
----
-
-
-# sort
diff --git a/src/content/reference/en/p5 copy/soundFormats.mdx b/src/content/reference/en/p5 copy/soundFormats.mdx
deleted file mode 100644
index 6bc28fe726..0000000000
--- a/src/content/reference/en/p5 copy/soundFormats.mdx	
+++ /dev/null
@@ -1,51 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L925
-title: soundFormats
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>List the SoundFile formats that you will include. LoadSound
-  will search your directory for these extensions, and will pick
-  a format that is compatable with the client's web browser.
-  <a href="http://media.io/">Here</a> is a free online file
-  converter.</p>
-line: 925
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    function preload() {
-      // set the global sound formats
-      soundFormats('mp3', 'ogg');
-
-      // load either beatbox.mp3, or .ogg, depending on browser
-      mySound = loadSound('/assets/beatbox.mp3');
-    }
-
-    function setup() {
-         let cnv = createCanvas(100, 100);
-         background(220);
-         text('sound loaded! tap to play', 10, 20, width - 20);
-         cnv.mousePressed(function() {
-           mySound.play();
-         });
-       }
-    </code></div>
-class: p5
-params:
-  - name: formats
-    description: |
-      <p>i.e. 'mp3', 'wav', 'ogg'</p>
-    type: String
-    optional: true
-    multiple: true
-chainable: false
----
-
-
-# soundFormats
diff --git a/src/content/reference/en/p5 copy/soundOut.mdx b/src/content/reference/en/p5 copy/soundOut.mdx
deleted file mode 100644
index 2f418a829c..0000000000
--- a/src/content/reference/en/p5 copy/soundOut.mdx	
+++ /dev/null
@@ -1,26 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L782
-title: soundOut
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >
-  <p><code>p5.soundOut</code> is the p5.sound final output bus. It sends output
-  to
-
-  the destination of this window's web audio context. It contains
-
-  Web Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),
-
-  and Gain Nodes for <code>.input</code> and <code>.output</code>.</p>
-line: 782
-isConstructor: false
-itemtype: property
-class: p5
-type: Object
----
-
-
-# soundOut
diff --git a/src/content/reference/en/p5 copy/specularColor.mdx b/src/content/reference/en/p5 copy/specularColor.mdx
deleted file mode 100644
index b23e834ca7..0000000000
--- a/src/content/reference/en/p5 copy/specularColor.mdx	
+++ /dev/null
@@ -1,308 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L205
-title: specularColor
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Sets the specular color for lights.</p>
-
-  <p><code>specularColor()</code> affects lights that bounce off a surface in a
-  preferred
-
-  direction. These lights include
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>, and
-
-  <a href="/reference/p5/spotLight/">spotLight()</a>. The function helps to
-  create
-
-  highlights on <a href="/reference/p5/p5.Geometry">p5.Geometry</a> objects that
-  are
-
-  styled with <a href="/reference/p5/specularMaterial/">specularMaterial()</a>.
-  If a
-
-  geometry does not use
-
-  <a href="/reference/p5/specularMaterial/">specularMaterial()</a>, then
-
-  <code>specularColor()</code> will have no effect.</p>
-
-  <p>Note: <code>specularColor()</code> doesn’t affect lights that bounce in all
-
-  directions, including <a href="/reference/p5/ambientLight/">ambientLight()</a>
-  and
-
-  <a href="/reference/p5/imageLight/">imageLight()</a>.</p>
-
-  <p>There are three ways to call <code>specularColor()</code> with optional
-  parameters to
-
-  set the specular highlight color.</p>
-
-  <p>The first way to call <code>specularColor()</code> has two optional
-  parameters, <code>gray</code>
-
-  and <code>alpha</code>. Grayscale and alpha values between 0 and 255, as in
-
-  <code>specularColor(50)</code> or <code>specularColor(50, 80)</code>, can be
-  passed to set the
-
-  specular highlight color.</p>
-
-  <p>The second way to call <code>specularColor()</code> has one optional
-  parameter,
-
-  <code>color</code>. A <a href="/reference/p5/p5.Color">p5.Color</a> object, an
-  array of color
-
-  values, or a CSS color string can be passed to set the specular highlight
-
-  color.</p>
-
-  <p>The third way to call <code>specularColor()</code> has four optional
-  parameters, <code>v1</code>,
-
-  <code>v2</code>, <code>v3</code>, and <code>alpha</code>. RGBA, HSBA, or HSLA
-  values, as in
-
-  <code>specularColor(255, 0, 0, 80)</code>, can be passed to set the specular
-  highlight
-
-  color. Color values will be interpreted using the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 205
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere drawn on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // No specular color.
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to add a point light.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Style the sphere.
-      noStroke();
-      specularColor(100);
-      specularMaterial(255, 255, 255);
-
-      // Control the light.
-      if (isLit === true) {
-        // Add a white point light from the top-right.
-        pointLight(255, 255, 255, 30, -20, 40);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the point light when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a specular highlight.
-      // Use a p5.Color object.
-      let c = color('dodgerblue');
-      specularColor(c);
-
-      // Add a white point light from the top-right.
-      pointLight(255, 255, 255, 30, -20, 40);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a white specular material.
-      specularMaterial(255, 255, 255);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a specular highlight.
-      // Use a CSS color string.
-      specularColor('#1E90FF');
-
-      // Add a white point light from the top-right.
-      pointLight(255, 255, 255, 30, -20, 40);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a white specular material.
-      specularMaterial(255, 255, 255);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Add a specular highlight.
-      // Use RGB values.
-      specularColor(30, 144, 255);
-
-      // Add a white point light from the top-right.
-      pointLight(255, 255, 255, 30, -20, 40);
-
-      // Style the sphere.
-      noStroke();
-
-      // Add a white specular material.
-      specularMaterial(255, 255, 255);
-
-      // Draw the sphere.
-      sphere(30);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 205
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                     <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-    chainable: 1
-  - line: 423
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 and 255.</p>
-        type: Number
-    chainable: 1
-  - line: 429
-    params:
-      - name: value
-        description: |
-          <p>color as a CSS string.</p>
-        type: String
-    chainable: 1
-  - line: 435
-    params:
-      - name: values
-        description: |
-          <p>color as an array of RGBA, HSBA, or HSLA
-                                          values.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 442
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# specularColor
diff --git a/src/content/reference/en/p5 copy/specularMaterial.mdx b/src/content/reference/en/p5 copy/specularMaterial.mdx
deleted file mode 100644
index 57e8977cf5..0000000000
--- a/src/content/reference/en/p5 copy/specularMaterial.mdx	
+++ /dev/null
@@ -1,311 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2743
-title: specularMaterial
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the specular color of shapes’ surface material.</p>
-
-  <p>The <code>specularMaterial()</code> color sets the components of light
-  color that
-
-  glossy coats on shapes will reflect. For example, calling
-
-  <code>specularMaterial(255, 255, 0)</code> would cause a shape to reflect red
-  and
-
-  green light, but not blue light.</p>
-
-  <p>Unlike <a href="/reference/p5/ambientMaterial/">ambientMaterial()</a>,
-
-  <code>specularMaterial()</code> will reflect the full color of light sources
-  including
-
-  <a href="/reference/p5/directionalLight/">directionalLight()</a>,
-
-  <a href="/reference/p5/pointLight/">pointLight()</a>,
-
-  and <a href="/reference/p5/spotLight/">spotLight()</a>. This is what gives it
-  shapes
-
-  their "shiny" appearance. The material’s shininess can be controlled by the
-
-  <a href="/reference/p5/shininess/">shininess()</a> function.</p>
-
-  <p><code>specularMaterial()</code> can be called three ways with different
-  parameters to
-
-  set the material’s color.</p>
-
-  <p>The first way to call <code>specularMaterial()</code> has one parameter,
-  <code>gray</code>.
-
-  Grayscale values between 0 and 255, as in <code>specularMaterial(50)</code>,
-  can be
-
-  passed to set the material’s color. Higher grayscale values make shapes
-
-  appear brighter.</p>
-
-  <p>The second way to call <code>specularMaterial()</code> has one parameter,
-  <code>color</code>. A
-
-  <a href="/reference/p5/p5.Color">p5.Color> object, an array of color values,
-  or a CSS
-
-  color string, as in <code>specularMaterial('magenta')</code>, can be passed to
-  set the
-
-  material’s color.</a></p>
-
-  <p>The third way to call <code>specularMaterial()</code> has four parameters,
-  <code>v1</code>, <code>v2</code>,
-
-  <code>v3</code>, and <code>alpha</code>. <code>alpha</code> is optional. RGBA,
-  HSBA, or HSLA values can be
-
-  passed to set the material’s colors, as in <code>specularMaterial(255, 0,
-  0)</code> or
-
-  <code>specularMaterial(255, 0, 0, 30)</code>. Color values will be interpreted
-  using
-
-  the current <a href="/reference/p5/colorMode/">colorMode()</a>.</p>
-line: 2743
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy coat if the user has double-clicked.
-      if (isGlossy === true) {
-        specularMaterial(255);
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy green coat if the user has double-clicked.
-      if (isGlossy === true) {
-        specularMaterial(0, 255, 0);
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy green coat if the user has double-clicked.
-      if (isGlossy === true) {
-        // Create a p5.Color object.
-        let c = color('green');
-        specularMaterial(c);
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click the canvas to apply a specular material.
-
-    let isGlossy = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on a white point light at the top-right.
-      pointLight(255, 255, 255, 30, -40, 30);
-
-      // Add a glossy green coat if the user has double-clicked.
-      if (isGlossy === true) {
-        specularMaterial('#00FF00');
-        shininess(50);
-      }
-
-      // Style the torus.
-      noStroke();
-      fill(255, 0, 0);
-
-      // Draw the torus.
-      torus(30);
-    }
-
-    // Make the torus glossy when the user double-clicks.
-    function doubleClicked() {
-      isGlossy = true;
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 2743
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value between 0 (black) and 255 (white).</p>
-        type: Number
-      - name: alpha
-        description: |
-          <p>alpha value in the current current
-                                   <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2966
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in
-                                          the current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value
-                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value
-                                          in the current <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2978
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                     an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-    chainable: 1
-chainable: true
----
-
-
-# specularMaterial
diff --git a/src/content/reference/en/p5 copy/sphere.mdx b/src/content/reference/en/p5 copy/sphere.mdx
deleted file mode 100644
index c2ceca44ad..0000000000
--- a/src/content/reference/en/p5 copy/sphere.mdx	
+++ /dev/null
@@ -1,165 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L1227
-title: sphere
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a sphere.</p>
-
-  <p>A sphere is a 3D shape with triangular faces that connect to form a round
-
-  surface. Spheres with few faces look like crystals. Spheres with many faces
-
-  have smooth surfaces and look like balls.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>sphere(20)</code>, it sets the radius of the sphere. By default,
-  <code>radius</code> is 50.</p>
-
-  <p>The second parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>sphere(20, 5)</code>, it sets the number of triangle subdivisions
-  to use
-
-  along the x-axis. All 3D shapes are made by connecting triangles to form
-
-  their surfaces. By default, <code>detailX</code> is 24.</p>
-
-  <p>The third parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>sphere(20, 5, 2)</code>, it sets the number of triangle
-  subdivisions to
-
-  use along the y-axis. All 3D shapes are made by connecting triangles to
-
-  form their surfaces. By default, <code>detailY</code> is 16.</p>
-
-  <p>Note: <code>sphere()</code> can only be used in WebGL mode.</p>
-line: 1227
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      sphere();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      // Set its radius to 30.
-      sphere(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      // Set its radius to 30.
-      // Set its detailX to 6.
-      sphere(30, 6);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the sphere.
-      // Set its radius to 30.
-      // Set its detailX to 24.
-      // Set its detailY to 4.
-      sphere(30, 24, 4);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the sphere. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of triangle subdivisions along the x-axis. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# sphere
diff --git a/src/content/reference/en/p5 copy/splice.mdx b/src/content/reference/en/p5 copy/splice.mdx
deleted file mode 100644
index 866bc4ddef..0000000000
--- a/src/content/reference/en/p5 copy/splice.mdx	
+++ /dev/null
@@ -1,58 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L346
-title: splice
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Inserts a value or an array of values into an existing array. The first
-  parameter specifies the initial array to be modified, and the second
-  parameter defines the data to be inserted. The third parameter is an index
-  value which specifies the array position from which to insert data.
-  (Remember that array index numbering starts at zero, so the first position
-  is 0, the second position is 1, and so on.)</p>
-line: 346
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">array.splice()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let myArray = [0, 1, 2, 3, 4];
-      let insArray = ['A', 'B', 'C'];
-      print(myArray); // [0, 1, 2, 3, 4]
-      print(insArray); // ['A','B','C']
-
-      splice(myArray, insArray, 3);
-      print(myArray); // [0,1,2,'A','B','C',3,4]
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to splice into</p>
-    type: Array
-  - name: value
-    description: |
-      <p>value to be spliced in</p>
-    type: Any
-  - name: position
-    description: |
-      <p>in the array from which to insert data</p>
-    type: Integer
-return:
-  description: the list
-  type: Array
-chainable: false
----
-
-
-# splice
diff --git a/src/content/reference/en/p5 copy/split.mdx b/src/content/reference/en/p5 copy/split.mdx
deleted file mode 100644
index 60b7944313..0000000000
--- a/src/content/reference/en/p5 copy/split.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L690
-title: split
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Splits a <code>String</code> into pieces and returns an array containing
-  the pieces.</p>
-
-  <p>The first parameter, <code>value</code>, is the string to split.</p>
-
-  <p>The second parameter, <code>delim</code>, is the character(s) that should
-  be used to
-
-  split the string. For example, calling
-
-  <code>split('rock...paper...scissors', '...')</code> would return the array
-
-  <code>['rock', 'paper', 'scissors']</code> because there are three periods
-  <code>...</code>
-
-  between each word.</p>
-line: 690
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock...paper...scissors';
-
-      // Split the string at each ...
-      let words = split(string, '...');
-
-      // Print the array to the console:
-      // ["rock", "paper", "scissors"]
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", and "scissors" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>the String to be split</p>
-    type: String
-  - name: delim
-    description: |
-      <p>the String used to separate the data</p>
-    type: String
-return:
-  description: Array of Strings
-  type: 'String[]'
-chainable: false
----
-
-
-# split
diff --git a/src/content/reference/en/p5 copy/splitTokens.mdx b/src/content/reference/en/p5 copy/splitTokens.mdx
deleted file mode 100644
index 95d6ef4f8e..0000000000
--- a/src/content/reference/en/p5 copy/splitTokens.mdx	
+++ /dev/null
@@ -1,180 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L751
-title: splitTokens
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Splits a <code>String</code> into pieces and returns an array containing
-  the pieces.</p>
-
-  <p><code>splitTokens()</code> is an enhanced version of
-
-  <a href="/reference/p5/split/">split()</a>. It can split a string when any
-  characters
-
-  from a list are detected.</p>
-
-  <p>The first parameter, <code>value</code>, is the string to split.</p>
-
-  <p>The second parameter, <code>delim</code>, is optional. It sets the
-  character(s) that
-
-  should be used to split the string. <code>delim</code> can be a single string,
-  as in
-
-  <code>splitTokens('rock...paper...scissors...shoot', '...')</code>, or an
-  array of
-
-  strings, as in
-
-  <code>splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])</code>. By
-  default,
-
-  if no <code>delim</code> characters are specified, then any whitespace
-  character is
-
-  used to split. Whitespace characters include tab (<code>\t</code>), line feed
-  (<code>\n</code>),
-
-  carriage return (<code>\r</code>), form feed (<code>\f</code>), and space.</p>
-line: 751
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock paper scissors shoot';
-
-      // Split the string at each space.
-      let words = splitTokens(string);
-
-      // Print the array to the console.
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 20;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock...paper...scissors...shoot';
-
-      // Split the string at each ...
-      let words = splitTokens(string, '...');
-
-      // Print the array to the console.
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 20;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-
-    <div class='notest'>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = 'rock;paper,scissors...shoot';
-
-      // Split the string at each semicolon, comma, or ...
-      let words = splitTokens(string, [';', ',', '...']);
-
-      // Print the array to the console.
-      print(words);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(12);
-
-      // Iterate over the words array.
-      for (let i = 0; i < words.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 20;
-
-        // Display the word.
-        text(words[i], 50, y);
-      }
-
-      describe(
-        'The words "rock", "paper", "scissors", and "shoot" written on separate lines. The text is black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: value
-    description: |
-      <p>string to split.</p>
-    type: String
-  - name: delim
-    description: |
-      <p>character(s) to use for splitting the string.</p>
-    type: String
-    optional: true
-return:
-  description: separated strings.
-  type: 'String[]'
-chainable: false
----
-
-
-# splitTokens
diff --git a/src/content/reference/en/p5 copy/spotLight.mdx b/src/content/reference/en/p5 copy/spotLight.mdx
deleted file mode 100644
index 3d221dc8f4..0000000000
--- a/src/content/reference/en/p5 copy/spotLight.mdx	
+++ /dev/null
@@ -1,398 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/light.js#L1272
-title: spotLight
-module: 3D
-submodule: Lights
-file: src/webgl/light.js
-description: >
-  <p>Creates a light that shines from a point in one direction.</p>
-
-  <p>Spot lights are like flashlights that shine in one direction creating a
-
-  cone of light. The shape of the cone can be controlled using the angle and
-
-  concentration parameters. A maximum of 5 spot lights can be active at
-  once.</p>
-
-  <p>There are eight ways to call <code>spotLight()</code> with parameters to
-  set the
-
-  light’s color, position, direction. For example,
-
-  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)</code> creates a red <code>(255,
-  0, 0)</code> light
-
-  at the origin <code>(0, 0, 0)</code> that points to the right <code>(1, 0,
-  0)</code>.</p>
-
-  <p>The <code>angle</code> parameter is optional. It sets the radius of the
-  light cone.
-
-  For example, <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)</code>
-  creates a
-
-  red <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
-  points to the right
-
-  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians. By
-  default, <code>angle</code> is
-
-  <code>PI / 3</code> radians.</p>
-
-  <p>The <code>concentration</code> parameter is also optional. It focuses the
-  light
-
-  towards the center of the light cone. For example,
-
-  <code>spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)</code> creates a red
-
-  <code>(255, 0, 0)</code> light at the origin <code>(0, 0, 0)</code> that
-  points to the right
-
-  <code>(1, 0, 0)</code> with an angle of <code>PI / 16</code> radians at
-  concentration of 50. By
-
-  default, <code>concentration</code> is 100.</p>
-line: 1272
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to adjust the spotlight.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Control the spotlight.
-      if (isLit === true) {
-        // Add a red spot light that shines into the screen.
-        // Set its angle to PI / 32 radians.
-        spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the spotlight when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-    // Double-click to adjust the spotlight.
-
-    let isLit = false;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
-    }
-
-    function draw() {
-      background(50);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Turn on the lights.
-      lights();
-
-      // Control the spotlight.
-      if (isLit === true) {
-        // Add a red spot light that shines into the screen.
-        // Set its angle to PI / 3 radians (default).
-        // Set its concentration to 1000.
-        let c = color(255, 0, 0);
-        let position = createVector(0, 0, 100);
-        let direction = createVector(0, 0, -1);
-        spotLight(c, position, direction, PI / 3, 1000);
-      }
-
-      // Draw the sphere.
-      sphere(30);
-    }
-
-    // Turn on the spotlight when the user double-clicks.
-    function doubleClicked() {
-      isLit = true;
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1272
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value in the current
-                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value in the current
-                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue, brightness, or lightness value in the current
-                                               <a href="#/p5/colorMode">colorMode()</a>.</p>
-        type: Number
-      - name: x
-        description: |
-          <p>x-coordinate of the light.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the light.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the light.</p>
-        type: Number
-      - name: rx
-        description: |
-          <p>x-component of light direction between -1 and 1.</p>
-        type: Number
-      - name: ry
-        description: |
-          <p>y-component of light direction between -1 and 1.</p>
-        type: Number
-      - name: rz
-        description: |
-          <p>z-component of light direction between -1 and 1.</p>
-        type: Number
-      - name: angle
-        description: |
-          <p>angle of the light cone. Defaults to <code>PI / 3</code>.</p>
-        type: Number
-        optional: true
-      - name: concentration
-        description: |
-          <p>concentration of the light. Defaults to 100.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1399
-    params:
-      - name: color
-        description: |
-          <p>color as a <a href="#/p5.Color">p5.Color</a> object,
-                                                       an array of color values, or a CSS string.</p>
-        type: 'p5.Color|Number[]|String'
-      - name: position
-        description: >
-          <p>position of the light as a <a href="#/p5.Vector">p5.Vector</a>
-          object.</p>
-        type: p5.Vector
-      - name: direction
-        description: >
-          <p>direction of light as a <a href="#/p5.Vector">p5.Vector</a>
-          object.</p>
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1408
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: position
-        description: ''
-        type: p5.Vector
-      - name: direction
-        description: ''
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1418
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-      - name: direction
-        description: ''
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1428
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: position
-        description: ''
-        type: p5.Vector
-      - name: rx
-        description: ''
-        type: Number
-      - name: ry
-        description: ''
-        type: Number
-      - name: rz
-        description: ''
-        type: Number
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1438
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-      - name: direction
-        description: ''
-        type: p5.Vector
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1450
-    params:
-      - name: v1
-        description: ''
-        type: Number
-      - name: v2
-        description: ''
-        type: Number
-      - name: v3
-        description: ''
-        type: Number
-      - name: position
-        description: ''
-        type: p5.Vector
-      - name: rx
-        description: ''
-        type: Number
-      - name: ry
-        description: ''
-        type: Number
-      - name: rz
-        description: ''
-        type: Number
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-  - line: 1462
-    params:
-      - name: color
-        description: ''
-        type: 'p5.Color|Number[]|String'
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-      - name: rx
-        description: ''
-        type: Number
-      - name: ry
-        description: ''
-        type: Number
-      - name: rz
-        description: ''
-        type: Number
-      - name: angle
-        description: ''
-        type: Number
-        optional: true
-      - name: concentration
-        description: ''
-        type: Number
-        optional: true
-chainable: true
----
-
-
-# spotLight
diff --git a/src/content/reference/en/p5 copy/sq.mdx b/src/content/reference/en/p5 copy/sq.mdx
deleted file mode 100644
index da0f2c4024..0000000000
--- a/src/content/reference/en/p5 copy/sq.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L928
-title: sq
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the square of a number.</p>
-
-  <p>Squaring a number means multiplying the number by itself. For example,
-
-  <code>sq(3)</code> evaluates 3 × 3 which is 9. <code>sq(-3)</code> evaluates
-  -3 × -3
-
-  which is also 9. Multiplying two negative numbers produces a positive
-
-  number. The value returned by <code>sq()</code> is always positive.</p>
-line: 928
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = sq(3);
-      circle(33, 33, d);
-
-      // Bottom-right.
-      d = sq(6);
-      circle(67, 67, d);
-
-      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that get higher quickly from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 0.01 * sq(x);
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>number to square.</p>
-    type: Number
-return:
-  description: squared number.
-  type: Number
-chainable: false
----
-
-
-# sq
diff --git a/src/content/reference/en/p5 copy/sqrt.mdx b/src/content/reference/en/p5 copy/sqrt.mdx
deleted file mode 100644
index 5e239f6fe4..0000000000
--- a/src/content/reference/en/p5 copy/sqrt.mdx	
+++ /dev/null
@@ -1,84 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/calculation.js#L988
-title: sqrt
-module: Math
-submodule: Calculation
-file: src/math/calculation.js
-description: >
-  <p>Calculates the square root of a number.</p>
-
-  <p>A number's square root can be multiplied by itself to produce the original
-
-  number. For example, <code>sqrt(9)</code> returns 3 because 3 × 3 = 9.
-  <code>sqrt()</code>
-
-  always returns a positive value. <code>sqrt()</code> doesn't work with
-  negative arguments
-
-  such as <code>sqrt(-9)</code>.</p>
-line: 988
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top-left.
-      let d = sqrt(16);
-      circle(33, 33, d);
-
-      // Bottom-right.
-      d = sqrt(1600);
-      circle(67, 67, d);
-
-      describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of black dots that get higher slowly from left to right.');
-    }
-
-    function draw() {
-      // Invert the y-axis.
-      scale(1, -1);
-      translate(0, -100);
-
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 5 * sqrt(x);
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>non-negative number to square root.</p>
-    type: Number
-return:
-  description: square root of number.
-  type: Number
-chainable: false
----
-
-
-# sqrt
diff --git a/src/content/reference/en/p5 copy/square.mdx b/src/content/reference/en/p5 copy/square.mdx
deleted file mode 100644
index 1e94a0087d..0000000000
--- a/src/content/reference/en/p5 copy/square.mdx	
+++ /dev/null
@@ -1,163 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1229
-title: square
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a square.</p>
-
-  <p>A square is a four-sided shape defined by the <code>x</code>,
-  <code>y</code>, and <code>s</code>
-
-  parameters. <code>x</code> and <code>y</code> set the location of its top-left
-  corner. <code>s</code> sets
-
-  its width and height. Every angle in the square measures 90˚ and all its
-
-  sides are the same length. See <a
-  href="/reference/p5/rectMode/">rectMode()</a> for
-
-  other ways to define squares.</p>
-
-  <p>The version of <code>square()</code> with four parameters creates a rounded
-  square.
-
-  The fourth parameter sets the radius for all four corners.</p>
-
-  <p>The version of <code>square()</code> with seven parameters also creates a
-  rounded
-
-  square. Each of the last four parameters set the radius of a corner. The
-
-  radii start with the top-left corner and move clockwise around the
-
-  square. If any of these parameters are omitted, they are set to the
-
-  value of the last radius that was set.</p>
-line: 1229
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      square(30, 20, 55);
-
-      describe('A white square with a black outline in on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give all corners a radius of 20.
-      square(30, 20, 55, 20);
-
-      describe(
-        'A white square with a black outline and round edges on a gray canvas.'
-      );
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Give each corner a unique radius.
-      square(30, 20, 55, 20, 15, 10, 5);
-
-      describe('A white square with a black outline and round edges of different radii.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      square(-20, -30, 55);
-
-      describe('A white square with a black outline in on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square spins around on gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the square.
-      square(-20, -30, 55);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the square.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the square.</p>
-    type: Number
-  - name: s
-    description: |
-      <p>side size of the square.</p>
-    type: Number
-  - name: tl
-    description: |
-      <p>optional radius of top-left corner.</p>
-    type: Number
-    optional: true
-  - name: tr
-    description: |
-      <p>optional radius of top-right corner.</p>
-    type: Number
-    optional: true
-  - name: br
-    description: |
-      <p>optional radius of bottom-right corner.</p>
-    type: Number
-    optional: true
-  - name: bl
-    description: |
-      <p>optional radius of bottom-left corner.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# square
diff --git a/src/content/reference/en/p5 copy/storeItem.mdx b/src/content/reference/en/p5 copy/storeItem.mdx
deleted file mode 100644
index 8552634c5a..0000000000
--- a/src/content/reference/en/p5 copy/storeItem.mdx	
+++ /dev/null
@@ -1,149 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/data/local_storage.js#L10
-title: storeItem
-module: Data
-submodule: LocalStorage
-file: src/data/local_storage.js
-description: >
-  <p>Stores a value in the web browser's local storage.</p>
-
-  <p>Web browsers can save small amounts of data using the built-in
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage/"
-  target="_blank">localStorage object</a>.
-
-  Data stored in <code>localStorage</code> can be retrieved at any point, even
-  after
-
-  refreshing a page or restarting the browser. Data are stored as key-value
-
-  pairs.</p>
-
-  <p><code>storeItem()</code> makes it easy to store values in
-  <code>localStorage</code> and
-
-  <a href="/reference/p5/getItem/">getItem()</a> makes it easy to retrieve
-  them.</p>
-
-  <p>The first parameter, <code>key</code>, is the name of the value to be
-  stored as a
-
-  string.</p>
-
-  <p>The second parameter, <code>value</code>, is the value to be stored. Values
-  can have
-
-  any type.</p>
-
-  <p>Note: Sensitive data such as passwords or personal information shouldn't be
-
-  stored in <code>localStorage</code>.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Store the player's name.
-      storeItem('name', 'Feist');
-
-      // Store the player's score.
-      storeItem('score', 1234);
-
-      describe('The text "Feist: 1234" written in black on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(14);
-
-      // Retrieve the name.
-      let name = getItem('name');
-
-      // Retrieve the score.
-      let score = getItem('score');
-
-      // Display the score.
-      text(`${name}: ${score}`, 50, 50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create an object.
-      let p = { x: 50, y: 50 };
-
-      // Store the object.
-      storeItem('position', p);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let p = getItem('position');
-
-      // Draw the circle.
-      circle(p.x, p.y, 30);
-    }
-    </code>
-    </div>
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Create a p5.Color object.
-      let c = color('deeppink');
-
-      // Store the object.
-      storeItem('color', c);
-
-      describe('A pink circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Retrieve the object.
-      let c = getItem('color');
-
-      // Style the circle.
-      fill(c);
-
-      // Draw the circle.
-      circle(50, 50, 30);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: key
-    description: |
-      <p>name of the value.</p>
-    type: String
-  - name: value
-    description: |
-      <p>value to be stored.</p>
-    type: String|Number|Boolean|Object|Array
-chainable: false
----
-
-
-# storeItem
diff --git a/src/content/reference/en/p5 copy/str.mdx b/src/content/reference/en/p5 copy/str.mdx
deleted file mode 100644
index c487979761..0000000000
--- a/src/content/reference/en/p5 copy/str.mdx	
+++ /dev/null
@@ -1,135 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L232
-title: str
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>Boolean</code> or <code>Number</code> to
-  <code>String</code>.</p>
-
-  <p><code>str()</code> converts values to strings. See the
-
-  <a href="/reference/p5/String/">String</a> reference page for guidance on
-  using
-
-  template literals instead.</p>
-
-  <p>The parameter, <code>n</code>, is the value to convert. If <code>n</code>
-  is a Boolean, as in
-
-  <code>str(false)</code> or <code>str(true)</code>, then the value will be
-  returned as a string,
-
-  as in <code>'false'</code> or <code>'true'</code>. If <code>n</code> is a
-  number, as in <code>str(123)</code>, then its
-
-  value will be returned as a string, as in <code>'123'</code>. If an array is
-  passed,
-
-  as in <code>str([12.34, 56.78])</code>, then an array of strings will be
-  returned.</p>
-line: 232
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a Boolean variable.
-      let original = false;
-
-      // Convert the Boolean to a string.
-      let converted = str(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "false : false" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a number variable.
-      let original = 123;
-
-      // Convert the number to a string.
-      let converted = str(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "123 = 123" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = [12, 34, 56];
-
-      // Convert the numbers to strings.
-      let strings = str(original);
-
-      // Create an empty string variable.
-      let final = '';
-
-      // Concatenate all the strings.
-      for (let s of strings) {
-        final += s;
-      }
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the concatenated string.
-      text(final, 50, 50);
-
-      describe('The text "123456" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: 'n'
-    description: |
-      <p>value to convert.</p>
-    type: String|Boolean|Number
-return:
-  description: converted string.
-  type: String
-chainable: false
----
-
-
-# str
diff --git a/src/content/reference/en/p5 copy/stroke.mdx b/src/content/reference/en/p5 copy/stroke.mdx
deleted file mode 100644
index bf086f9b66..0000000000
--- a/src/content/reference/en/p5 copy/stroke.mdx	
+++ /dev/null
@@ -1,311 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/color/setting.js#L1373
-title: stroke
-module: Color
-submodule: Setting
-file: src/color/setting.js
-description: >
-  <p>Sets the color used to draw points, lines, and the outlines of shapes.</p>
-
-  <p>Calling <code>stroke(255, 165, 0)</code> or <code>stroke('orange')</code>
-  means all shapes drawn
-
-  after calling <code>stroke()</code> will be outlined with the color orange.
-  The way
-
-  these parameters are interpreted may be changed with the
-
-  <a href="/reference/p5/colorMode/">colorMode()</a> function.</p>
-
-  <p>The version of <code>stroke()</code> with one parameter interprets the
-  value one of
-
-  three ways. If the parameter is a <code>Number</code>, it's interpreted as a
-  grayscale
-
-  value. If the parameter is a <code>String</code>, it's interpreted as a CSS
-  color
-
-  string. A <a href="/reference/p5/p5.Color">p5.Color</a> object can also be
-  provided to
-
-  set the stroke color.</p>
-
-  <p>The version of <code>stroke()</code> with two parameters interprets the
-  first one as a
-
-  grayscale value. The second parameter sets the alpha (transparency) value.</p>
-
-  <p>The version of <code>stroke()</code> with three parameters interprets them
-  as RGB, HSB,
-
-  or HSL colors, depending on the current <code>colorMode()</code>.</p>
-
-  <p>The version of <code>stroke()</code> with four parameters interprets them
-  as RGBA, HSBA,
-
-  or HSLA colors, depending on the current <code>colorMode()</code>. The last
-  parameter
-
-  sets the alpha (transparency) value.</p>
-line: 1373
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A grayscale value.
-      strokeWeight(4);
-      stroke(51);
-      square(20, 20, 60);
-
-      describe('A white square with a dark charcoal gray outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // R, G & B values.
-      stroke(255, 204, 0);
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a yellow outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Use HSB color.
-      colorMode(HSB);
-
-      // H, S & B values.
-      strokeWeight(4);
-      stroke(255, 204, 100);
-      square(20, 20, 60);
-
-      describe('A white square with a royal blue outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A CSS named color.
-      stroke('red');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a red outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Three-digit hex RGB notation.
-      stroke('#fae');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a pink outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Six-digit hex RGB notation.
-      stroke('#222222');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a black outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGB notation.
-      stroke('rgb(0, 255, 0)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A whiite square with a bright green outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Integer RGBA notation.
-      stroke('rgba(0, 255, 0, 0.25)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a soft green outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGB notation.
-      stroke('rgb(100%, 0%, 10%)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a red outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Percentage RGBA notation.
-      stroke('rgba(100%, 0%, 100%, 0.5)');
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a dark fuchsia outline.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // A p5.Color object.
-      stroke(color(0, 0, 255));
-      strokeWeight(4);
-      square(20, 20, 60);
-
-      describe('A white square with a blue outline.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1373
-    params:
-      - name: v1
-        description: >
-          <p>red value if color mode is RGB or hue value if color mode is
-          HSB.</p>
-        type: Number
-      - name: v2
-        description: >
-          <p>green value if color mode is RGB or saturation value if color mode
-          is HSB.</p>
-        type: Number
-      - name: v3
-        description: >
-          <p>blue value if color mode is RGB or brightness value if color mode
-          is HSB.</p>
-        type: Number
-      - name: alpha
-        description: >
-          <p>alpha value, controls transparency (0 - transparent, 255 -
-          opaque).</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1596
-    params:
-      - name: value
-        description: |
-          <p>a color string.</p>
-        type: String
-    chainable: 1
-  - line: 1602
-    params:
-      - name: gray
-        description: |
-          <p>a grayscale value.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1609
-    params:
-      - name: values
-        description: |
-          <p>an array containing the red, green, blue,
-                                          and alpha components of the color.</p>
-        type: 'Number[]'
-    chainable: 1
-  - line: 1616
-    params:
-      - name: color
-        description: |
-          <p>the stroke color.</p>
-        type: p5.Color
-    chainable: 1
-chainable: true
----
-
-
-# stroke
diff --git a/src/content/reference/en/p5 copy/strokeCap.mdx b/src/content/reference/en/p5 copy/strokeCap.mdx
deleted file mode 100644
index 80965419ab..0000000000
--- a/src/content/reference/en/p5 copy/strokeCap.mdx	
+++ /dev/null
@@ -1,67 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L388
-title: strokeCap
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Sets the style for rendering the ends of lines.</p>
-
-  <p>The caps for line endings are either rounded (<code>ROUND</code>), squared
-
-  (<code>SQUARE</code>), or extended (<code>PROJECT</code>). The default cap is
-  <code>ROUND</code>.</p>
-
-  <p>The argument passed to <code>strokeCap()</code> must be written in ALL CAPS
-  because
-
-  the constants <code>ROUND</code>, <code>SQUARE</code>, and
-  <code>PROJECT</code> are defined this way.
-
-  JavaScript is a case-sensitive language.</p>
-line: 388
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      strokeWeight(12);
-
-      // Top.
-      strokeCap(ROUND);
-      line(20, 30, 80, 30);
-
-      // Middle.
-      strokeCap(SQUARE);
-      line(20, 50, 80, 50);
-
-      // Bottom.
-      strokeCap(PROJECT);
-      line(20, 70, 80, 70);
-
-      describe(
-        'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: cap
-    description: |
-      <p>either ROUND, SQUARE, or PROJECT</p>
-    type: Constant
-chainable: true
----
-
-
-# strokeCap
diff --git a/src/content/reference/en/p5 copy/strokeJoin.mdx b/src/content/reference/en/p5 copy/strokeJoin.mdx
deleted file mode 100644
index 46a8a9206f..0000000000
--- a/src/content/reference/en/p5 copy/strokeJoin.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L442
-title: strokeJoin
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Sets the style of the joints that connect line segments.</p>
-
-  <p>Joints are either mitered (<code>MITER</code>), beveled
-  (<code>BEVEL</code>), or rounded
-
-  (<code>ROUND</code>). The default joint is <code>MITER</code> in 2D mode and
-  <code>ROUND</code> in WebGL
-
-  mode.</p>
-
-  <p>The argument passed to <code>strokeJoin()</code> must be written in ALL
-  CAPS because
-
-  the constants <code>MITER</code>, <code>BEVEL</code>, and <code>ROUND</code>
-  are defined this way.
-
-  JavaScript is a case-sensitive language.</p>
-line: 442
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      noFill();
-      strokeWeight(10);
-      strokeJoin(MITER);
-
-      // Draw the line.
-      beginShape();
-      vertex(35, 20);
-      vertex(65, 50);
-      vertex(35, 80);
-      endShape();
-
-      describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      noFill();
-      strokeWeight(10);
-      strokeJoin(BEVEL);
-
-      // Draw the line.
-      beginShape();
-      vertex(35, 20);
-      vertex(65, 50);
-      vertex(35, 80);
-      endShape();
-
-      describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the line.
-      noFill();
-      strokeWeight(10);
-      strokeJoin(ROUND);
-
-      // Draw the line.
-      beginShape();
-      vertex(35, 20);
-      vertex(65, 50);
-      vertex(35, 80);
-      endShape();
-
-      describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: join
-    description: |
-      <p>either MITER, BEVEL, or ROUND</p>
-    type: Constant
-chainable: true
----
-
-
-# strokeJoin
diff --git a/src/content/reference/en/p5 copy/strokeWeight.mdx b/src/content/reference/en/p5 copy/strokeWeight.mdx
deleted file mode 100644
index 82ebfc13d5..0000000000
--- a/src/content/reference/en/p5 copy/strokeWeight.mdx	
+++ /dev/null
@@ -1,77 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/attributes.js#L541
-title: strokeWeight
-module: Shape
-submodule: Attributes
-file: src/core/shape/attributes.js
-description: >
-  <p>Sets the width of the stroke used for points, lines, and the outlines of
-
-  shapes.</p>
-
-  <p>Note: <code>strokeWeight()</code> is affected by transformations,
-  especially calls to
-
-  <a href="/reference/p5/scale/">scale()</a>.</p>
-line: 541
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      line(20, 20, 80, 20);
-
-      // Middle.
-      strokeWeight(4);
-      line(20, 40, 80, 40);
-
-      // Bottom.
-      strokeWeight(10);
-      line(20, 70, 80, 70);
-
-      describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      line(20, 20, 80, 20);
-
-      // Scale by a factor of 5.
-      scale(5);
-
-      // Bottom. Coordinates are adjusted for scaling.
-      line(4, 8, 16, 8);
-
-      describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: weight
-    description: |
-      <p>the weight of the stroke (in pixels).</p>
-    type: Number
-chainable: true
----
-
-
-# strokeWeight
diff --git a/src/content/reference/en/p5 copy/subset.mdx b/src/content/reference/en/p5 copy/subset.mdx
deleted file mode 100644
index 1cf7cb7f4e..0000000000
--- a/src/content/reference/en/p5 copy/subset.mdx	
+++ /dev/null
@@ -1,59 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/array_functions.js#L381
-title: subset
-module: Data
-submodule: Array Functions
-file: src/utilities/array_functions.js
-description: |
-  <p>Extracts an array of elements from an existing array. The list parameter
-  defines the array from which the elements will be copied, and the start
-  and count parameters specify which elements to extract. If no count is
-  given, elements will be extracted from the start to the end of the array.
-  When specifying the start, remember that the first array element is 0.
-  This function does not change the source array.</p>
-line: 381
-deprecated: >-
-  Use <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">array.slice()</a>
-  instead.
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div class = 'norender'><code>
-    function setup() {
-      let myArray = [1, 2, 3, 4, 5];
-      print(myArray); // [1, 2, 3, 4, 5]
-
-      let sub1 = subset(myArray, 0, 3);
-      let sub2 = subset(myArray, 2, 2);
-      print(sub1); // [1,2,3]
-      print(sub2); // [3,4]
-    }
-    </code></div>
-class: p5
-params:
-  - name: list
-    description: |
-      <p>Array to extract from</p>
-    type: Array
-  - name: start
-    description: |
-      <p>position to begin</p>
-    type: Integer
-  - name: count
-    description: |
-      <p>number of values to extract</p>
-    type: Integer
-    optional: true
-return:
-  description: Array of extracted elements
-  type: Array
-chainable: false
----
-
-
-# subset
diff --git a/src/content/reference/en/p5 copy/tan.mdx b/src/content/reference/en/p5 copy/tan.mdx
deleted file mode 100644
index 376d093f33..0000000000
--- a/src/content/reference/en/p5 copy/tan.mdx	
+++ /dev/null
@@ -1,66 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/math/trigonometry.js#L445
-title: tan
-module: Math
-submodule: Trigonometry
-file: src/math/trigonometry.js
-description: >
-  <p>Calculates the tangent of an angle.</p>
-
-  <p><code>tan()</code> 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. <code>tan()</code> calculates the tan of an angle,
-  using radians
-
-  by default, or according to
-
-  if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-  DEGREES).</p>
-line: 445
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
-    }
-
-    function draw() {
-      // Calculate the coordinates.
-      let x = frameCount;
-      let y = 5 * tan(x * 0.1) + 50;
-
-      // Draw the point.
-      point(x, y);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: angle
-    description: >
-      <p>the angle, in radians by default, or according to
-
-      if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or
-      DEGREES).</p>
-    type: Number
-return:
-  description: tangent of the angle.
-  type: Number
-chainable: false
----
-
-
-# tan
diff --git a/src/content/reference/en/p5 copy/text.mdx b/src/content/reference/en/p5 copy/text.mdx
deleted file mode 100644
index eea293bfd8..0000000000
--- a/src/content/reference/en/p5 copy/text.mdx	
+++ /dev/null
@@ -1,96 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L182
-title: text
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/loading_displaying.js
-description: >
-  <p>Draws text to the canvas.</p>
-
-  <p>The first parameter, <code>str</code>, is the text to be drawn. The second
-  and third
-
-  parameters, <code>x</code> and <code>y</code>, set the coordinates of the
-  text's bottom-left
-
-  corner. See <a href="/reference/p5/textAlign/">textAlign()</a> for other ways
-  to
-
-  align text.</p>
-
-  <p>The fourth and fifth parameters, <code>maxWidth</code> and
-  <code>maxHeight</code>, are optional.
-
-  They set the dimensions of the invisible rectangle containing the text. By
-
-  default, they set its  maximum width and height. See
-
-  <a href="/reference/p5/rectMode/">rectMode()</a> for other ways to define the
-
-  rectangular text box. Text will wrap to fit within the text box. Text
-
-  outside of the box won't be drawn.</p>
-
-  <p>Text can be styled a few ways. Call the <a
-  href="/reference/p5/fill/">fill()</a>
-
-  function to set the text's fill color. Call
-
-  <a href="/reference/p5/stroke/">stroke()</a> and
-
-  <a href="/reference/p5/strokeWeight/">strokeWeight()</a> to set the text's
-  outline.
-
-  Call <a href="/reference/p5/textSize/">textSize()</a> and
-
-  <a href="/reference/p5/textFont/">textFont()</a> to set the text's size and
-  font,
-
-  respectively.</p>
-
-  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
-
-  <a href="/reference/p5/loadFont/">loadFont()</a>. Calling
-
-  <a href="/reference/p5/stroke/">stroke()</a> has no effect in
-  <code>WEBGL</code> mode.</p>
-line: 182
-isConstructor: false
-itemtype: method
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  background(200);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in black in the middle of a gray square.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('skyblue');\n  textSize(100);\n  text('\U0001F308', 0, 100);\n\n  describe('A rainbow in a blue sky.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  textSize(32);\n  fill(255);\n  stroke(0);\n  strokeWeight(4);\n  text('hi', 50, 50);\n\n  describe('The text \"hi\" written in white with a black outline.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background('black');\n  textSize(22);\n  fill('yellow');\n  text('rainbows', 6, 20);\n  fill('cornflowerblue');\n  text('rainbows', 6, 45);\n  fill('tomato');\n  text('rainbows', 6, 70);\n  fill('limegreen');\n  text('rainbows', 6, 95);\n\n  describe('The text \"rainbows\" written on several lines, each in a different color.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 10, 10, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  background(200);\n  rectMode(CENTER);\n  let s = 'The quick brown fox jumps over the lazy dog.';\n  text(s, 50, 50, 70, 80);\n\n  describe('The sample text \"The quick brown fox...\" written in black across several lines.');\n}\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet font;\n\nfunction preload() {\n  font = loadFont('/assets/inconsolata.otf');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(font);\n  textSize(32);\n  textAlign(CENTER, CENTER);\n}\n\nfunction draw() {\n  background(0);\n  rotateY(frameCount / 30);\n  text('p5*js', 0, 0);\n\n  describe('The text \"p5*js\" written in white and spinning in 3D.');\n}\n</code>\n</div>"
-class: p5
-params:
-  - name: str
-    description: |
-      <p>text to be displayed.</p>
-    type: String|Object|Array|Number|Boolean
-  - name: x
-    description: |
-      <p>x-coordinate of the text box.</p>
-    type: Number
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the text box.</p>
-    type: Number
-  - name: maxWidth
-    description: |
-      <p>maximum width of the text box. See
-                                 <a href="#/p5/rectMode">rectMode()</a> for
-                                 other options.</p>
-    type: Number
-    optional: true
-  - name: maxHeight
-    description: |
-      <p>maximum height of the text box. See
-                                 <a href="#/p5/rectMode">rectMode()</a> for
-                                 other options.</p>
-    type: Number
-    optional: true
-chainable: true
----
-
-
-# text
diff --git a/src/content/reference/en/p5 copy/textAlign.mdx b/src/content/reference/en/p5 copy/textAlign.mdx
deleted file mode 100644
index 3899f22842..0000000000
--- a/src/content/reference/en/p5 copy/textAlign.mdx	
+++ /dev/null
@@ -1,135 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L11
-title: textAlign
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the way text is aligned when <a href="/reference/p5/text/">text()</a>
-  is called.</p>
-
-  <p>By default, calling <code>text('hi', 10, 20)</code> places the bottom-left
-  corner of
-
-  the text's bounding box at (10, 20).</p>
-
-  <p>The first parameter, <code>horizAlign</code>, changes the way
-
-  <a href="/reference/p5/text/">text()</a> interprets x-coordinates. By default,
-  the
-
-  x-coordinate sets the left edge of the bounding box. <code>textAlign()</code>
-  accepts
-
-  the following values for <code>horizAlign</code>: <code>LEFT</code>,
-  <code>CENTER</code>, or <code>RIGHT</code>.</p>
-
-  <p>The second parameter, <code>vertAlign</code>, is optional. It changes the
-  way
-
-  <a href="/reference/p5/text/">text()</a> interprets y-coordinates. By default,
-  the
-
-  y-coordinate sets the bottom edge of the bounding box.
-  <code>textAlign()</code>
-
-  accepts the following values for <code>vertAlign</code>: <code>TOP</code>,
-  <code>BOTTOM</code>, <code>CENTER</code>,
-
-  or <code>BASELINE</code>.</p>
-line: 11
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a vertical line.
-      strokeWeight(0.5);
-      line(50, 0, 50, 100);
-
-      // Top line.
-      textSize(16);
-      textAlign(RIGHT);
-      text('ABCD', 50, 30);
-
-      // Middle line.
-      textAlign(CENTER);
-      text('EFGH', 50, 50);
-
-      // Bottom line.
-      textAlign(LEFT);
-      text('IJKL', 50, 70);
-
-      describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      strokeWeight(0.5);
-
-      // First line.
-      line(0, 12, width, 12);
-      textAlign(CENTER, TOP);
-      text('TOP', 50, 12);
-
-      // Second line.
-      line(0, 37, width, 37);
-      textAlign(CENTER, CENTER);
-      text('CENTER', 50, 37);
-
-      // Third line.
-      line(0, 62, width, 62);
-      textAlign(CENTER, BASELINE);
-      text('BASELINE', 50, 62);
-
-      // Fourth line.
-      line(0, 97, width, 97);
-      textAlign(CENTER, BOTTOM);
-      text('BOTTOM', 50, 97);
-
-      describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 11
-    params:
-      - name: horizAlign
-        description: |
-          <p>horizontal alignment, either LEFT,
-                                     CENTER, or RIGHT.</p>
-        type: Constant
-      - name: vertAlign
-        description: |
-          <p>vertical alignment, either TOP,
-                                     BOTTOM, CENTER, or BASELINE.</p>
-        type: Constant
-        optional: true
-    chainable: 1
-  - line: 98
-    params: []
-    return:
-      description: ''
-      type: Object
-chainable: true
----
-
-
-# textAlign
diff --git a/src/content/reference/en/p5 copy/textAscent.mdx b/src/content/reference/en/p5 copy/textAscent.mdx
deleted file mode 100644
index b81a657de6..0000000000
--- a/src/content/reference/en/p5 copy/textAscent.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L337
-title: textAscent
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: |
-  <p>Calculates the ascent of the current font at its current size.</p>
-  <p>The ascent represents the distance, in pixels, of the tallest character
-  above the baseline.</p>
-line: 337
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let font;
-
-    function preload()  {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup()  {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textFont(font);
-
-      // Different for each font.
-      let fontScale = 0.8;
-
-      let baseY = 75;
-      strokeWeight(0.5);
-
-      // Draw small text.
-      textSize(24);
-      text('dp', 0, baseY);
-
-      // Draw baseline and ascent.
-      let a = textAscent() * fontScale;
-      line(0, baseY, 23, baseY);
-      line(23, baseY - a, 23, baseY);
-
-      // Draw large text.
-      textSize(48);
-      text('dp', 45, baseY);
-
-      // Draw baseline and ascent.
-      a = textAscent() * fontScale;
-      line(45, baseY, 91, baseY);
-      line(91, baseY - a, 91, baseY);
-
-      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the "d".');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: ascent measured in units of pixels.
-  type: Number
-chainable: false
----
-
-
-# textAscent
diff --git a/src/content/reference/en/p5 copy/textDescent.mdx b/src/content/reference/en/p5 copy/textDescent.mdx
deleted file mode 100644
index 15837acff3..0000000000
--- a/src/content/reference/en/p5 copy/textDescent.mdx	
+++ /dev/null
@@ -1,71 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L396
-title: textDescent
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: |
-  <p>Calculates the descent of the current font at its current size.</p>
-  <p>The descent represents the distance, in pixels, of the character with the
-  longest descender below the baseline.</p>
-line: 396
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let font;
-
-    function preload()  {
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup()  {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the font.
-      textFont(font);
-
-      // Different for each font.
-      let fontScale = 0.9;
-
-      let baseY = 75;
-      strokeWeight(0.5);
-
-      // Draw small text.
-      textSize(24);
-      text('dp', 0, baseY);
-
-      // Draw baseline and descent.
-      let d = textDescent() * fontScale;
-      line(0, baseY, 23, baseY);
-      line(23, baseY, 23, baseY + d);
-
-      // Draw large text.
-      textSize(48);
-      text('dp', 45, baseY);
-
-      // Draw baseline and descent.
-      d = textDescent() * fontScale;
-      line(45, baseY, 91, baseY);
-      line(91, baseY, 91, baseY + d);
-
-      describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the "p".');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: descent measured in units of pixels.
-  type: Number
-chainable: false
----
-
-
-# textDescent
diff --git a/src/content/reference/en/p5 copy/textFont.mdx b/src/content/reference/en/p5 copy/textFont.mdx
deleted file mode 100644
index e5e9fa8da1..0000000000
--- a/src/content/reference/en/p5 copy/textFont.mdx	
+++ /dev/null
@@ -1,127 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/loading_displaying.js#L335
-title: textFont
-module: Typography
-submodule: Loading & Displaying
-file: src/typography/loading_displaying.js
-description: >
-  <p>Sets the font used by the <a href="/reference/p5/text/">text()</a>
-  function.</p>
-
-  <p>The first parameter, <code>font</code>, sets the font.
-  <code>textFont()</code> recognizes either
-
-  a <a href="/reference/p5/p5.Font">p5.Font</a> object or a string with the name
-  of a
-
-  system font. For example, <code>'Courier New'</code>.</p>
-
-  <p>The second parameter, <code>size</code>, is optional. It sets the font size
-  in pixels.
-
-  This has the same effect as calling <a
-  href="/reference/p5/textSize/">textSize()</a>.</p>
-
-  <p>Note: <code>WEBGL</code> mode only supports fonts loaded with
-
-  <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
-line: 335
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-      textFont('Courier New');
-      textSize(24);
-      text('hi', 35, 55);
-
-      describe('The text "hi" written in a black, monospace font on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background('black');
-      fill('palegreen');
-      textFont('Courier New', 10);
-      text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
-      text('>', 5, 70);
-
-      describe('A text prompt from a game is written in a green, monospace font on a black background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-      textFont('Verdana');
-      let currentFont = textFont();
-      text(currentFont, 25, 50);
-
-      describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let fontRegular;
-    let fontItalic;
-    let fontBold;
-
-    function preload() {
-      fontRegular = loadFont('/assets/Regular.otf');
-      fontItalic = loadFont('/assets/Italic.ttf');
-      fontBold = loadFont('/assets/Bold.ttf');
-    }
-
-    function setup() {
-      background(200);
-      textFont(fontRegular);
-      text('I am Normal', 10, 30);
-      textFont(fontItalic);
-      text('I am Italic', 10, 50);
-      textFont(fontBold);
-      text('I am Bold', 10, 70);
-
-      describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current font or p5 Object.
-  type: Object
-overloads:
-  - line: 335
-    params: []
-    return:
-      description: current font or p5 Object.
-      type: Object
-  - line: 418
-    params:
-      - name: font
-        description: |
-          <p>font as a <a href="#/p5.Font">p5.Font</a> object or a string.</p>
-        type: Object|String
-      - name: size
-        description: |
-          <p>font size in pixels.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: false
----
-
-
-# textFont
diff --git a/src/content/reference/en/p5 copy/textLeading.mdx b/src/content/reference/en/p5 copy/textLeading.mdx
deleted file mode 100644
index 3b5a22d9a2..0000000000
--- a/src/content/reference/en/p5 copy/textLeading.mdx	
+++ /dev/null
@@ -1,63 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L107
-title: textLeading
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the spacing between lines of text when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>Note: Spacing is measured in pixels.</p>
-
-  <p>Calling <code>textLeading()</code> without an argument returns the current
-  spacing.</p>
-line: 107
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // "\n" starts a new line of text.
-      let lines = 'one\ntwo';
-
-      // Left.
-      text(lines, 10, 25);
-
-      // Right.
-      textLeading(30);
-      text(lines, 70, 25);
-
-      describe('The words "one" and "two" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 107
-    params:
-      - name: leading
-        description: |
-          <p>spacing between lines of text in units of pixels.</p>
-        type: Number
-    chainable: 1
-  - line: 142
-    params: []
-    return:
-      description: ''
-      type: Number
-chainable: true
----
-
-
-# textLeading
diff --git a/src/content/reference/en/p5 copy/textOutput.mdx b/src/content/reference/en/p5 copy/textOutput.mdx
deleted file mode 100644
index 62ea4cb4b5..0000000000
--- a/src/content/reference/en/p5 copy/textOutput.mdx	
+++ /dev/null
@@ -1,186 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/accessibility/outputs.js#L10
-title: textOutput
-module: Environment
-submodule: Environment
-file: src/accessibility/outputs.js
-description: >
-  <p>Creates a screen reader-accessible description of shapes on the canvas.</p>
-
-  <p><code>textOutput()</code> adds a general description, list of shapes, and
-
-  table of shapes to the web page. The general description includes the
-
-  canvas size, canvas color, and number of shapes. For example,
-
-  <code>Your output is a, 100 by 100 pixels, gray canvas containing the
-  following 2 shapes:</code>.</p>
-
-  <p>A list of shapes follows the general description. The list describes the
-
-  color, location, and area of each shape. For example,
-
-  <code>a red circle at middle covering 3% of the canvas</code>. Each shape can
-  be
-
-  selected to get more details.</p>
-
-  <p><code>textOutput()</code> uses its table of shapes as a list. The table
-  describes the
-
-  shape, color, location, coordinates and area. For example,
-
-  <code>red circle location = middle area = 3%</code>. This is different from
-
-  <a href="/reference/p5/gridOutput/">gridOutput()</a>, which uses its table as
-  a grid.</p>
-
-  <p>The <code>display</code> parameter is optional. It determines how the
-  description is
-
-  displayed. If <code>LABEL</code> is passed, as in
-  <code>textOutput(LABEL)</code>, the description
-
-  will be visible in a div element next to the canvas. Using <code>LABEL</code>
-  creates
-
-  unhelpful duplicates for screen readers. Only use <code>LABEL</code> during
-
-  development. If <code>FALLBACK</code> is passed, as in
-  <code>textOutput(FALLBACK)</code>, the
-
-  description will only be visible to screen readers. This is the default
-
-  mode.</p>
-
-  <p>Read
-
-  <a
-  href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing
-  accessible canvas descriptions</a>
-
-  to learn more about making sketches accessible.</p>
-
-  <p><code>textOutput()</code> generates descriptions in English only. Text
-  drawn with
-
-  <a href="/reference/p5/text/">text()</a> is not described. Shapes created with
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> are not described. WEBGL
-  mode
-
-  and 3D shapes are not supported.</p>
-
-  <p>Use <a href="/reference/p5/describe/">describe()</a> and
-
-  <a href="/reference/p5/describeElement/">describeElement()</a> for more
-  control
-
-  over canvas descriptions.</p>
-line: 10
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      // Add the text description.
-      textOutput();
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      // Add the text description and
-      // display it for debugging.
-      textOutput(LABEL);
-
-      // Draw a couple of shapes.
-      background(200);
-      fill(255, 0, 0);
-      circle(20, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle and a blue square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the text description.
-      textOutput();
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-    }
-
-    function draw() {
-      // Add the text description and
-      // display it for debugging.
-      textOutput(LABEL);
-
-      // Draw a moving circle.
-      background(200);
-      let x = frameCount * 0.1;
-      fill(255, 0, 0);
-      circle(x, 20, 20);
-      fill(0, 0, 255);
-      square(50, 50, 50);
-
-      // Add a general description of the canvas.
-      describe('A red circle moves from left to right above a blue square.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: display
-    description: |
-      <p>either FALLBACK or LABEL.</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# textOutput
diff --git a/src/content/reference/en/p5 copy/textSize.mdx b/src/content/reference/en/p5 copy/textSize.mdx
deleted file mode 100644
index df77510315..0000000000
--- a/src/content/reference/en/p5 copy/textSize.mdx	
+++ /dev/null
@@ -1,65 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L151
-title: textSize
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the font size when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>Note: Font size is measured in pixels.</p>
-
-  <p>Calling <code>textSize()</code> without an argument returns the current
-  size.</p>
-line: 151
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Top.
-      textSize(12);
-      text('Font Size 12', 10, 30);
-
-      // Middle.
-      textSize(14);
-      text('Font Size 14', 10, 60);
-
-      // Bottom.
-      textSize(16);
-      text('Font Size 16', 10, 90);
-
-      describe('The text "Font Size 12" drawn small, "Font Size 14" drawn medium, and "Font Size 16" drawn large.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 151
-    params:
-      - name: size
-        description: |
-          <p>size of the letters in units of pixels.</p>
-        type: Number
-    chainable: 1
-  - line: 188
-    params: []
-    return:
-      description: ''
-      type: Number
-chainable: true
----
-
-
-# textSize
diff --git a/src/content/reference/en/p5 copy/textStyle.mdx b/src/content/reference/en/p5 copy/textStyle.mdx
deleted file mode 100644
index 572ca0454c..0000000000
--- a/src/content/reference/en/p5 copy/textStyle.mdx	
+++ /dev/null
@@ -1,79 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L197
-title: textStyle
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the style for system fonts when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>The parameter, <code>style</code>, can be either <code>NORMAL</code>,
-  <code>ITALIC</code>, <code>BOLD</code>, or
-
-  <code>BOLDITALIC</code>.</p>
-
-  <p><code>textStyle()</code> may be overridden by CSS styling. This function
-  doesn't
-
-  affect fonts loaded with <a href="/reference/p5/loadFont/">loadFont()</a>.</p>
-line: 197
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(12);
-      textAlign(CENTER);
-
-      // First row.
-      textStyle(NORMAL);
-      text('Normal', 50, 15);
-
-      // Second row.
-      textStyle(ITALIC);
-      text('Italic', 50, 40);
-
-      // Third row.
-      textStyle(BOLD);
-      text('Bold', 50, 65);
-
-      // Fourth row.
-      textStyle(BOLDITALIC);
-      text('Bold Italic', 50, 90);
-
-      describe('The words "Normal" displayed normally, "Italic" in italic, "Bold" in bold, and "Bold Italic" in bold italics.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 197
-    params:
-      - name: style
-        description: |
-          <p>styling for text, either NORMAL,
-                                     ITALIC, BOLD or BOLDITALIC.</p>
-        type: Constant
-    chainable: 1
-  - line: 244
-    params: []
-    return:
-      description: ''
-      type: String
-chainable: true
----
-
-
-# textStyle
diff --git a/src/content/reference/en/p5 copy/textWidth.mdx b/src/content/reference/en/p5 copy/textWidth.mdx
deleted file mode 100644
index 00721b0fee..0000000000
--- a/src/content/reference/en/p5 copy/textWidth.mdx	
+++ /dev/null
@@ -1,83 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L253
-title: textWidth
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: |
-  <p>Calculates the maximum width of a string of text drawn when
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-line: 253
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(28);
-      strokeWeight(0.5);
-
-      // Calculate the text width.
-      let s = 'yoyo';
-      let w = textWidth(s);
-
-      // Display the text.
-      text(s, 22, 55);
-
-      // Underline the text.
-      line(22, 55, 22 + w, 55);
-
-      describe('The word "yoyo" underlined.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(28);
-      strokeWeight(0.5);
-
-      // Calculate the text width.
-      // "\n" starts a new line.
-      let s = 'yo\nyo';
-      let w = textWidth(s);
-
-      // Display the text.
-      text(s, 22, 55);
-
-      // Underline the text.
-      line(22, 55, 22 + w, 55);
-
-      describe('The word "yo" written twice, one copy beneath the other. The words are divided by a horizontal line.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: str
-    description: |
-      <p>string of text to measure.</p>
-    type: String
-return:
-  description: width measured in units of pixels.
-  type: Number
-chainable: false
----
-
-
-# textWidth
diff --git a/src/content/reference/en/p5 copy/textWrap.mdx b/src/content/reference/en/p5 copy/textWrap.mdx
deleted file mode 100644
index 0ba2b556a7..0000000000
--- a/src/content/reference/en/p5 copy/textWrap.mdx	
+++ /dev/null
@@ -1,111 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/typography/attributes.js#L462
-title: textWrap
-module: Typography
-submodule: Attributes
-file: src/typography/attributes.js
-description: >
-  <p>Sets the style for wrapping text when
-
-  <a href="/reference/p5/text/">text()</a> is called.</p>
-
-  <p>The parameter, <code>style</code>, can be one of the following values:</p>
-
-  <p><code>WORD</code> starts new lines of text at spaces. If a string of text
-  doesn't
-
-  have spaces, it may overflow the text box and the canvas. This is the
-
-  default style.</p>
-
-  <p><code>CHAR</code> starts new lines as needed to stay within the text
-  box.</p>
-
-  <p><code>textWrap()</code> only works when the maximum width is set for a text
-  box. For
-
-  example, calling <code>text('Have a wonderful day', 0, 10, 100)</code> sets
-  the
-
-  maximum width to 100 pixels.</p>
-
-  <p>Calling <code>textWrap()</code> without an argument returns the current
-  style.</p>
-line: 462
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(20);
-      textWrap(WORD);
-
-      // Display the text.
-      text('Have a wonderful day', 0, 10, 100);
-
-      describe('The text "Have a wonderful day" written across three lines.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(20);
-      textWrap(CHAR);
-
-      // Display the text.
-      text('Have a wonderful day', 0, 10, 100);
-
-      describe('The text "Have a wonderful day" written across two lines.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the text.
-      textSize(20);
-      textWrap(CHAR);
-
-      // Display the text.
-      text('祝你有美好的一天', 0, 10, 100);
-
-      describe('The text "祝你有美好的一天" written across two lines.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: style
-    description: |
-      <p>text wrapping style, either WORD or CHAR.</p>
-    type: Constant
-return:
-  description: style
-  type: String
-chainable: false
----
-
-
-# textWrap
diff --git a/src/content/reference/en/p5 copy/texture.mdx b/src/content/reference/en/p5 copy/texture.mdx
deleted file mode 100644
index 7258f53ace..0000000000
--- a/src/content/reference/en/p5 copy/texture.mdx	
+++ /dev/null
@@ -1,207 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1716
-title: texture
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Sets the texture that will be used on shapes.</p>
-
-  <p>A texture is like a skin that wraps around a shape. <code>texture()</code>
-  works with
-
-  built-in shapes, such as <a href="/reference/p5/square/">square()</a> and
-
-  <a href="/reference/p5/sphere/">sphere()</a>, and custom shapes created with
-
-  functions such as <a href="/reference/p5/buildGeometry/">buildGeometry()</a>.
-  To
-
-  texture a geometry created with <a
-  href="/reference/p5/beginShape/">beginShape()</a>,
-
-  uv coordinates must be passed to each
-
-  <a href="/reference/p5/vertex/">vertex()</a> call.</p>
-
-  <p>The parameter, <code>tex</code>, is the texture to apply.
-  <code>texture()</code> can use a range
-
-  of sources including images, videos, and offscreen renderers such as
-
-  <a href="/reference/p5/p5.Graphics">p5.Graphics</a> and
-
-  <a href="/reference/p5/p5.Framebuffer">p5.Framebuffer</a> objects.</p>
-
-  <p>To texture a geometry created with <a
-  href="/reference/p5/beginShape/">beginShape()</a>,
-
-  you will need to specify uv coordinates in <a
-  href="/reference/p5/vertex/">vertex()</a>.</p>
-
-  <p>Note: <code>texture()</code> can only be used in WebGL mode.</p>
-line: 1716
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A spinning cube with an image of a ceiling on each face.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the x-, y-, and z-axes.
-      rotateZ(frameCount * 0.01);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Draw the box.
-      box(50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let pg;
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Create a p5.Graphics object.
-      pg = createGraphics(100, 100);
-
-      // Draw a circle to the p5.Graphics object.
-      pg.background(200);
-      pg.circle(50, 50, 30);
-
-      describe('A spinning cube with circle at the center of each face.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the x-, y-, and z-axes.
-      rotateZ(frameCount * 0.01);
-      rotateX(frameCount * 0.01);
-      rotateY(frameCount * 0.01);
-
-      // Apply the p5.Graphics object as a texture.
-      texture(pg);
-
-      // Draw the box.
-      box(50);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let vid;
-
-    // Load a video and create a p5.MediaElement object.
-    function preload() {
-      vid = createVideo('/assets/fingers.mov');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Hide the video.
-      vid.hide();
-
-      // Set the video to loop.
-      vid.loop();
-
-      describe('A rectangle with video as texture');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Apply the video as a texture.
-      texture(vid);
-
-      // Draw the rectangle.
-      rect(-40, -40, 80, 80);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let vid;
-
-    // Load a video and create a p5.MediaElement object.
-    function preload() {
-      vid = createVideo('/assets/fingers.mov');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      // Hide the video.
-      vid.hide();
-
-      // Set the video to loop.
-      vid.loop();
-
-      describe('A rectangle with video as texture');
-    }
-
-    function draw() {
-      background(0);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Apply the video as a texture.
-      texture(vid);
-
-      // Draw a custom shape using uv coordinates.
-      beginShape();
-      vertex(-40, -40, 0, 0);
-      vertex(40, -40, 1, 0);
-      vertex(40, 40, 1, 1);
-      vertex(-40, 40, 0, 1);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: tex
-    description: |
-      <p>media to use as the texture.</p>
-    type: >-
-      p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture
-chainable: true
----
-
-
-# texture
diff --git a/src/content/reference/en/p5 copy/textureMode.mdx b/src/content/reference/en/p5 copy/textureMode.mdx
deleted file mode 100644
index 397d1856b9..0000000000
--- a/src/content/reference/en/p5 copy/textureMode.mdx	
+++ /dev/null
@@ -1,254 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L1903
-title: textureMode
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Changes the coordinate system used for textures when they’re applied to
-
-  custom shapes.</p>
-
-  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
-  shape needs a
-
-  way to map the points on its surface to the pixels in an image. Built-in
-
-  shapes such as <a href="/reference/p5/rect/">rect()</a> and
-
-  <a href="/reference/p5/box/">box()</a> already have these texture mappings
-  based on
-
-  their vertices. Custom shapes created with
-
-  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
-  passed as
-
-  uv coordinates.</p>
-
-  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
-  arguments,
-
-  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
-  <code>(x, y, z)</code>
-
-  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
-  the
-
-  corners of a rectangular image are mapped to the corners of a rectangle by
-  default:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  rect(0, 0, 30, 50);
-
-  </code></pre>
-
-  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
-
-  the same result could be achieved as follows:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-
-  // Top-left.
-
-  // u: 0, v: 0
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 300, v: 0
-
-  vertex(30, 0, 0, 300, 0);
-
-
-  // Bottom-right.
-
-  // u: 300, v: 500
-
-  vertex(30, 50, 0, 300, 500);
-
-
-  // Bottom-left.
-
-  // u: 0, v: 500
-
-  vertex(0, 50, 0, 0, 500);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p><code>textureMode()</code> changes the coordinate system for uv
-  coordinates.</p>
-
-  <p>The parameter, <code>mode</code>, accepts two possible constants. If
-  <code>NORMAL</code> is
-
-  passed, as in <code>textureMode(NORMAL)</code>, then the texture’s uv
-  coordinates can
-
-  be provided in the range 0 to 1 instead of the image’s dimensions. This can
-
-  be helpful for using the same code for multiple images of different sizes.
-
-  For example, the code snippet above could be rewritten as follows:</p>
-
-  <pre><code class="language-js">// Set the texture mode to use normalized
-  coordinates.
-
-  textureMode(NORMAL);
-
-
-  // Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-
-  // Top-left.
-
-  // u: 0, v: 0
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 1, v: 0
-
-  vertex(30, 0, 0, 1, 0);
-
-
-  // Bottom-right.
-
-  // u: 1, v: 1
-
-  vertex(30, 50, 0, 1, 1);
-
-
-  // Bottom-left.
-
-  // u: 0, v: 1
-
-  vertex(0, 50, 0, 0, 1);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p>By default, <code>mode</code> is <code>IMAGE</code>, which scales uv
-  coordinates to the
-
-  dimensions of the image. Calling <code>textureMode(IMAGE)</code> applies the
-  default.</p>
-
-  <p>Note: <code>textureMode()</code> can only be used in WebGL mode.</p>
-line: 1903
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('An image of a ceiling against a black background.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Draw the custom shape.
-      // Use the image's width and height as uv coordinates.
-      beginShape();
-      vertex(-30, -30, 0, 0);
-      vertex(30, -30, img.width, 0);
-      vertex(30, 30, img.width, img.height);
-      vertex(-30, 30, 0, img.height);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image and create a p5.Image object.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('An image of a ceiling against a black background.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Draw the custom shape.
-      // Use normalized uv coordinates.
-      beginShape();
-      vertex(-30, -30, 0, 0);
-      vertex(30, -30, 1, 0);
-      vertex(30, 30, 1, 1);
-      vertex(-30, 30, 0, 1);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: mode
-    description: |
-      <p>either IMAGE or NORMAL.</p>
-    type: Constant
-chainable: false
----
-
-
-# textureMode
diff --git a/src/content/reference/en/p5 copy/textureWrap.mdx b/src/content/reference/en/p5 copy/textureWrap.mdx
deleted file mode 100644
index 6734a5325b..0000000000
--- a/src/content/reference/en/p5 copy/textureWrap.mdx	
+++ /dev/null
@@ -1,370 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/material.js#L2082
-title: textureWrap
-module: 3D
-submodule: Material
-file: src/webgl/material.js
-description: >
-  <p>Changes the way textures behave when a shape’s uv coordinates go beyond the
-
-  texture.</p>
-
-  <p>In order for <a href="/reference/p5/texture/">texture()</a> to work, a
-  shape needs a
-
-  way to map the points on its surface to the pixels in an image. Built-in
-
-  shapes such as <a href="/reference/p5/rect/">rect()</a> and
-
-  <a href="/reference/p5/box/">box()</a> already have these texture mappings
-  based on
-
-  their vertices. Custom shapes created with
-
-  <a href="/reference/p5/vertex/">vertex()</a> require texture mappings to be
-  passed as
-
-  uv coordinates.</p>
-
-  <p>Each call to <a href="/reference/p5/vertex/">vertex()</a> must include 5
-  arguments,
-
-  as in <code>vertex(x, y, z, u, v)</code>, to map the vertex at coordinates
-  <code>(x, y, z)</code>
-
-  to the pixel at coordinates <code>(u, v)</code> within an image. For example,
-  the
-
-  corners of a rectangular image are mapped to the corners of a rectangle by
-  default:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  rect(0, 0, 30, 50);
-
-  </code></pre>
-
-  <p>If the image in the code snippet above has dimensions of 300 x 500 pixels,
-
-  the same result could be achieved as follows:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-
-  // Top-left.
-
-  // u: 0, v: 0
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 300, v: 0
-
-  vertex(30, 0, 0, 300, 0);
-
-
-  // Bottom-right.
-
-  // u: 300, v: 500
-
-  vertex(30, 50, 0, 300, 500);
-
-
-  // Bottom-left.
-
-  // u: 0, v: 500
-
-  vertex(0, 50, 0, 0, 500);
-
-
-  endShape();
-
-  </code></pre>
-
-  <p><code>textureWrap()</code> controls how textures behave when their uv's go
-  beyond the
-
-  texture. Doing so can produce interesting visual effects such as tiling.
-
-  For example, the custom shape above could have u-coordinates are greater
-
-  than the image’s width:</p>
-
-  <pre><code class="language-js">// Apply the image as a texture.
-
-  texture(img);
-
-
-  // Draw the rectangle.
-
-  beginShape();
-
-  vertex(0, 0, 0, 0, 0);
-
-
-  // Top-right.
-
-  // u: 600
-
-  vertex(30, 0, 0, 600, 0);
-
-
-  // Bottom-right.
-
-  // u: 600
-
-  vertex(30, 50, 0, 600, 500);
-
-
-  vertex(0, 50, 0, 0, 500);
-
-  endShape();
-
-  </code></pre>
-
-  <p>The u-coordinates of 600 are greater than the texture image’s width of 300.
-
-  This creates interesting possibilities.</p>
-
-  <p>The first parameter, <code>wrapX</code>, accepts three possible constants.
-  If <code>CLAMP</code>
-
-  is passed, as in <code>textureWrap(CLAMP)</code>, the pixels at the edge of
-  the
-
-  texture will extend to the shape’s edges. If <code>REPEAT</code> is passed, as
-  in
-
-  <code>textureWrap(REPEAT)</code>, the texture will tile repeatedly until
-  reaching the
-
-  shape’s edges. If <code>MIRROR</code> is passed, as in
-  <code>textureWrap(MIRROR)</code>, the
-
-  texture will tile repeatedly until reaching the shape’s edges, flipping
-
-  its orientation between tiles. By default, textures <code>CLAMP</code>.</p>
-
-  <p>The second parameter, <code>wrapY</code>, is optional. It accepts the same
-  three
-
-  constants, <code>CLAMP</code>, <code>REPEAT</code>, and <code>MIRROR</code>.
-  If one of these constants is
-
-  passed, as in <code>textureWRAP(MIRROR, REPEAT)</code>, then the texture will
-  <code>MIRROR</code>
-
-  horizontally and <code>REPEAT</code> vertically. By default,
-  <code>wrapY</code> will be set to
-
-  the same value as <code>wrapX</code>.</p>
-
-  <p>Note: <code>textureWrap()</code> can only be used in WebGL mode.</p>
-line: 2082
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      // Note: CLAMP is the default mode.
-      textureWrap(CLAMP);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('Four identical images of a landscape arranged in a grid.');
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      textureWrap(REPEAT);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      textureWrap(MIRROR);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    function preload() {
-      img = loadImage('/assets/rockies128.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Set the texture mode.
-      textureMode(NORMAL);
-
-      // Set the texture wrapping.
-      textureWrap(REPEAT, MIRROR);
-
-      // Apply the image as a texture.
-      texture(img);
-
-      // Style the shape.
-      noStroke();
-
-      // Draw the shape.
-      // Use uv coordinates > 1.
-      beginShape();
-      vertex(-30, -30, 0, 0, 0);
-      vertex(30, -30, 0, 2, 0);
-      vertex(30, 30, 0, 2, 2);
-      vertex(-30, 30, 0, 0, 2);
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: wrapX
-    description: |
-      <p>either CLAMP, REPEAT, or MIRROR</p>
-    type: Constant
-  - name: wrapY
-    description: |
-      <p>either CLAMP, REPEAT, or MIRROR</p>
-    type: Constant
-    optional: true
-chainable: false
----
-
-
-# textureWrap
diff --git a/src/content/reference/en/p5 copy/tint.mdx b/src/content/reference/en/p5 copy/tint.mdx
deleted file mode 100644
index e99dee4431..0000000000
--- a/src/content/reference/en/p5 copy/tint.mdx	
+++ /dev/null
@@ -1,201 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/loading_displaying.js#L1192
-title: tint
-module: Image
-submodule: Loading & Displaying
-file: src/image/loading_displaying.js
-description: >
-  <p>Tints images using a color.</p>
-
-  <p>The version of <code>tint()</code> with one parameter interprets it one of
-  four ways.
-
-  If the parameter is a number, it's interpreted as a grayscale value. If the
-
-  parameter is a string, it's interpreted as a CSS color string. An array of
-
-  <code>[R, G, B, A]</code> values or a <a
-  href="/reference/p5/p5.Color">p5.Color</a> object can
-
-  also be used to set the tint color.</p>
-
-  <p>The version of <code>tint()</code> with two parameters uses the first one
-  as a
-
-  grayscale value and the second as an alpha value. For example, calling
-
-  <code>tint(255, 128)</code> will make an image 50% transparent.</p>
-
-  <p>The version of <code>tint()</code> with three parameters interprets them as
-  RGB or
-
-  HSB values, depending on the current
-
-  <a href="/reference/p5/colorMode/">colorMode()</a>. The optional fourth
-  parameter
-
-  sets the alpha value. For example, <code>tint(255, 0, 0, 100)</code> will give
-  images
-
-  a red tint and make them transparent.</p>
-line: 1192
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left image.
-      image(img, 0, 0);
-
-      // Right image.
-      // Tint with a CSS color string.
-      tint('red');
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left image.
-      image(img, 0, 0);
-
-      // Right image.
-      // Tint with RGB values.
-      tint(255, 0, 0);
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left.
-      image(img, 0, 0);
-
-      // Right.
-      // Tint with RGBA values.
-      tint(255, 0, 0, 100);
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Left.
-      image(img, 0, 0);
-
-      // Right.
-      // Tint with grayscale and alpha values.
-      tint(255, 180);
-      image(img, 50, 0);
-
-      describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1192
-    params:
-      - name: v1
-        description: |
-          <p>red or hue value.</p>
-        type: Number
-      - name: v2
-        description: |
-          <p>green or saturation value.</p>
-        type: Number
-      - name: v3
-        description: |
-          <p>blue or brightness.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-  - line: 1318
-    params:
-      - name: value
-        description: |
-          <p>CSS color string.</p>
-        type: String
-  - line: 1323
-    params:
-      - name: gray
-        description: |
-          <p>grayscale value.</p>
-        type: Number
-      - name: alpha
-        description: ''
-        type: Number
-        optional: true
-  - line: 1329
-    params:
-      - name: values
-        description: |
-          <p>array containing the red, green, blue &
-                                          alpha components of the color.</p>
-        type: 'Number[]'
-  - line: 1335
-    params:
-      - name: color
-        description: |
-          <p>the tint color</p>
-        type: p5.Color
-chainable: false
----
-
-
-# tint
diff --git a/src/content/reference/en/p5 copy/torus.mdx b/src/content/reference/en/p5 copy/torus.mdx
deleted file mode 100644
index f0e2740d59..0000000000
--- a/src/content/reference/en/p5 copy/torus.mdx	
+++ /dev/null
@@ -1,200 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/webgl/3d_primitives.js#L2183
-title: torus
-module: Shape
-submodule: 3D Primitives
-file: src/webgl/3d_primitives.js
-description: >
-  <p>Draws a torus.</p>
-
-  <p>A torus is a 3D shape with triangular faces that connect to form a ring.
-
-  Toruses with few faces look flattened. Toruses with many faces have smooth
-
-  surfaces.</p>
-
-  <p>The first parameter, <code>radius</code>, is optional. If a
-  <code>Number</code> is passed, as in
-
-  <code>torus(30)</code>, it sets the radius of the ring. By default,
-  <code>radius</code> is 50.</p>
-
-  <p>The second parameter, <code>tubeRadius</code>, is also optional. If a
-  <code>Number</code> is
-
-  passed, as in <code>torus(30, 15)</code>, it sets the radius of the tube. By
-  default,
-
-  <code>tubeRadius</code> is 10.</p>
-
-  <p>The third parameter, <code>detailX</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>torus(30, 15, 5)</code>, it sets the number of edges used to draw
-  the hole
-
-  of the torus. Using more edges makes the hole look more like a circle. By
-
-  default, <code>detailX</code> is 24.</p>
-
-  <p>The fourth parameter, <code>detailY</code>, is also optional. If a
-  <code>Number</code> is passed,
-
-  as in <code>torus(30, 15, 5, 7)</code>, it sets the number of triangle
-  subdivisions to
-
-  use while filling in the torus’ height. By default, <code>detailY</code> is
-  16.</p>
-
-  <p>Note: <code>torus()</code> can only be used in WebGL mode.</p>
-line: 2183
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      torus();
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30.
-      torus(30);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30 and tubeRadius to 15.
-      torus(30, 15);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30 and tubeRadius to 15.
-      // Set its detailX to 5.
-      torus(30, 15, 5);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click and drag the mouse to view the scene from different angles.
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white torus on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Enable orbiting with the mouse.
-      orbitControl();
-
-      // Draw the torus.
-      // Set its radius to 30 and tubeRadius to 15.
-      // Set its detailX to 5.
-      // Set its detailY to 3.
-      torus(30, 15, 5, 3);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: radius
-    description: |
-      <p>radius of the torus. Defaults to 50.</p>
-    type: Number
-    optional: true
-  - name: tubeRadius
-    description: |
-      <p>radius of the tube. Defaults to 10.</p>
-    type: Number
-    optional: true
-  - name: detailX
-    description: |
-      <p>number of edges that form the hole. Defaults to 24.</p>
-    type: Integer
-    optional: true
-  - name: detailY
-    description: |
-      <p>number of triangle subdivisions along the y-axis. Defaults to 16.</p>
-    type: Integer
-    optional: true
-chainable: true
----
-
-
-# torus
diff --git a/src/content/reference/en/p5 copy/touchEnded.mdx b/src/content/reference/en/p5 copy/touchEnded.mdx
deleted file mode 100644
index aebb308dc1..0000000000
--- a/src/content/reference/en/p5 copy/touchEnded.mdx	
+++ /dev/null
@@ -1,196 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L468
-title: touchEnded
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>A function that's called once each time a screen touch ends.</p>
-
-  <p>Declaring the function <code>touchEnded()</code> sets a code block to run
-
-  automatically when the user stops touching a touchscreen device:</p>
-
-  <pre><code class="language-js">function touchEnded() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
-  the most
-
-  recent touch points when <code>touchEnded()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function touchEnded() {
-    // Paint over the background.
-    background(200);
-
-    // Mark each remaining touch point when the user stops
-    // a touch.
-    for (let touch of touches) {
-      circle(touch.x, touch.y, 40);
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, event, is optional. <code>touchEnded()</code> will be passed
-  a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
-  target="_blank">TouchEvent</a>
-
-  object with properties that describe the touch event:</p>
-
-  <pre><code class="language-js">function touchEnded(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <a
-  href="/reference/p5/mouseReleased/">mouseReleased()</a> will
-
-  run when the user’s touch ends if <code>touchEnded()</code> isn’t declared. If
-
-  <code>touchEnded()</code> is declared, then <code>touchEnded()</code> will run
-  when a user’s
-
-  touch ends and <a href="/reference/p5/mouseReleased/">mouseReleased()</a>
-  won’t.</p>
-
-  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
-
-  <code>touchEnded()</code>, and <a
-  href="/reference/p5/touchMoved/">touchMoved()</a> are all
-
-  related. <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon
-  as the
-
-  user touches a touchscreen device. <code>touchEnded()</code> runs as soon as
-  the user
-
-  ends a touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs
-  repeatedly as
-
-  the user moves any touch points.</p>
-line: 468
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle colors when a touch ends.
-    function touchEnded() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let bgColor = 50;
-    let fillColor = 255;
-    let borderWidth = 0.5;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
-      );
-    }
-
-    function draw() {
-      background(bgColor);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      fill(0);
-      noStroke();
-
-      // Display the number of touch points.
-      text(touches.length, 50, 20);
-
-      // Style the touch points.
-      fill(fillColor);
-      stroke(0);
-      strokeWeight(borderWidth);
-
-      // Display the touch points as circles.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-
-    // Set the background color to a random grayscale value.
-    function touchStarted() {
-      bgColor = random(80, 255);
-    }
-
-    // Set the fill color to a random grayscale value.
-    function touchEnded() {
-      fillColor = random(0, 255);
-    }
-
-    // Set the stroke weight.
-    function touchMoved() {
-      // Increment the border width.
-      borderWidth += 0.1;
-
-      // Reset the border width once it's too thick.
-      if (borderWidth > 20) {
-        borderWidth = 0.5;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>TouchEvent</code> argument.</p>
-    type: TouchEvent
-    optional: true
-chainable: false
----
-
-
-# touchEnded
diff --git a/src/content/reference/en/p5 copy/touchMoved.mdx b/src/content/reference/en/p5 copy/touchMoved.mdx
deleted file mode 100644
index 80c23b81f8..0000000000
--- a/src/content/reference/en/p5 copy/touchMoved.mdx	
+++ /dev/null
@@ -1,198 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L295
-title: touchMoved
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>A function that's called when the user touches the screen and moves.</p>
-
-  <p>Declaring the function <code>touchMoved()</code> sets a code block to run
-
-  automatically when the user touches a touchscreen device and moves:</p>
-
-  <pre><code class="language-js">function touchMoved() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
-  the most
-
-  recent touch points when <code>touchMoved()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function touchMoved() {
-    // Paint over the background.
-    background(200);
-
-    // Mark each touch point while the user moves.
-    for (let touch of touches) {
-      circle(touch.x, touch.y, 40);
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, event, is optional. <code>touchMoved()</code> will be passed
-  a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
-  target="_blank">TouchEvent</a>
-
-  object with properties that describe the touch event:</p>
-
-  <pre><code class="language-js">function touchMoved(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <a
-  href="/reference/p5/mouseDragged/">mouseDragged()</a> will
-
-  run when the user’s touch points move if <code>touchMoved()</code> isn’t
-  declared. If
-
-  <code>touchMoved()</code> is declared, then <code>touchMoved()</code> will run
-  when a user’s
-
-  touch points move and <a href="/reference/p5/mouseDragged/">mouseDragged()</a>
-  won’t.</p>
-
-  <p>Note: <a href="/reference/p5/touchStarted/">touchStarted()</a>,
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a>, and
-
-  <code>touchMoved()</code> are all related.
-
-  <a href="/reference/p5/touchStarted/">touchStarted()</a> runs as soon as the
-  user
-
-  touches a touchscreen device. <a
-  href="/reference/p5/touchEnded/">touchEnded()</a>
-
-  runs as soon as the user ends a touch. <code>touchMoved()</code> runs
-  repeatedly as
-
-  the user moves any touch points.</p>
-line: 295
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    function touchMoved() {
-      // Update the grayscale value.
-      value += 5;
-
-      // Reset the grayscale value.
-      if (value > 255) {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let bgColor = 50;
-    let fillColor = 255;
-    let borderWidth = 0.5;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
-      );
-    }
-
-    function draw() {
-      background(bgColor);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      fill(0);
-      noStroke();
-
-      // Display the number of touch points.
-      text(touches.length, 50, 20);
-
-      // Style the touch points.
-      fill(fillColor);
-      stroke(0);
-      strokeWeight(borderWidth);
-
-      // Display the touch points as circles.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-
-    // Set the background color to a random grayscale value.
-    function touchStarted() {
-      bgColor = random(80, 255);
-    }
-
-    // Set the fill color to a random grayscale value.
-    function touchEnded() {
-      fillColor = random(0, 255);
-    }
-
-    // Set the stroke weight.
-    function touchMoved() {
-      // Increment the border width.
-      borderWidth += 0.1;
-
-      // Reset the border width once it's too thick.
-      if (borderWidth > 20) {
-        borderWidth = 0.5;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional TouchEvent argument.</p>
-    type: TouchEvent
-    optional: true
-chainable: false
----
-
-
-# touchMoved
diff --git a/src/content/reference/en/p5 copy/touchStarted.mdx b/src/content/reference/en/p5 copy/touchStarted.mdx
deleted file mode 100644
index fc33b1f1c5..0000000000
--- a/src/content/reference/en/p5 copy/touchStarted.mdx	
+++ /dev/null
@@ -1,197 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L125
-title: touchStarted
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>A function that's called once each time the user touches the screen.</p>
-
-  <p>Declaring a function called <code>touchStarted()</code> sets a code block
-  to run
-
-  automatically each time the user begins touching a touchscreen device:</p>
-
-  <pre><code class="language-js">function touchStarted() {
-    // Code to run.
-  }
-
-  </code></pre>
-
-  <p>The <a href="/reference/p5/touches/">touches</a> array will be updated with
-  the most
-
-  recent touch points when <code>touchStarted()</code> is called by p5.js:</p>
-
-  <pre><code class="language-js">function touchStarted() {
-    // Paint over the background.
-    background(200);
-
-    // Mark each touch point once with a circle.
-    for (let touch of touches) {
-      circle(touch.x, touch.y, 40);
-    }
-  }
-
-  </code></pre>
-
-  <p>The parameter, event, is optional. <code>touchStarted()</code> will be
-  passed a
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/"
-  target="_blank">TouchEvent</a>
-
-  object with properties that describe the touch event:</p>
-
-  <pre><code class="language-js">function touchStarted(event) {
-    // Code to run that uses the event.
-    console.log(event);
-  }
-
-  </code></pre>
-
-  <p>On touchscreen devices, <a
-  href="/reference/p5/mousePressed/">mousePressed()</a> will
-
-  run when a user’s touch starts if <code>touchStarted()</code> isn’t declared.
-  If
-
-  <code>touchStarted()</code> is declared, then <code>touchStarted()</code> will
-  run when a user’s
-
-  touch starts and <a href="/reference/p5/mousePressed/">mousePressed()</a>
-  won’t.</p>
-
-  <p>Note: <code>touchStarted()</code>, <a
-  href="/reference/p5/touchEnded/">touchEnded()</a>, and
-
-  <a href="/reference/p5/touchMoved/">touchMoved()</a> are all related.
-
-  <code>touchStarted()</code> runs as soon as the user touches a touchscreen
-  device.
-
-  <a href="/reference/p5/touchEnded/">touchEnded()</a> runs as soon as the user
-  ends a
-
-  touch. <a href="/reference/p5/touchMoved/">touchMoved()</a> runs repeatedly as
-  the
-
-  user moves any touch points.</p>
-line: 125
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let value = 0;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the square.
-      fill(value);
-
-      // Draw the square.
-      square(25, 25, 50);
-    }
-
-    // Toggle colors with each touch.
-    function touchStarted() {
-      if (value === 0) {
-        value = 255;
-      } else {
-        value = 0;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    let bgColor = 50;
-    let fillColor = 255;
-    let borderWidth = 0.5;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
-      );
-    }
-
-    function draw() {
-      background(bgColor);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-      fill(0);
-      noStroke();
-
-      // Display the number of touch points.
-      text(touches.length, 50, 20);
-
-      // Style the touch points.
-      fill(fillColor);
-      stroke(0);
-      strokeWeight(borderWidth);
-
-      // Display the touch points as circles.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-
-    // Set the background color to a random grayscale value.
-    function touchStarted() {
-      bgColor = random(80, 255);
-    }
-
-    // Set the fill color to a random grayscale value.
-    function touchEnded() {
-      fillColor = random(0, 255);
-    }
-
-    // Set the stroke weight.
-    function touchMoved() {
-      // Increment the border width.
-      borderWidth += 0.1;
-
-      // Reset the border width once it's too thick.
-      if (borderWidth > 20) {
-        borderWidth = 0.5;
-      }
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional <code>TouchEvent</code> argument.</p>
-    type: TouchEvent
-    optional: true
-chainable: false
----
-
-
-# touchStarted
diff --git a/src/content/reference/en/p5 copy/touches.mdx b/src/content/reference/en/p5 copy/touches.mdx
deleted file mode 100644
index 7ad03e1610..0000000000
--- a/src/content/reference/en/p5 copy/touches.mdx	
+++ /dev/null
@@ -1,102 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/touch.js#L10
-title: touches
-module: Events
-submodule: Touch
-file: src/events/touch.js
-description: >
-  <p>An <code>Array</code> of all the current touch points on a touchscreen
-  device.</p>
-
-  <p>The <code>touches</code> array is empty by default. When the user touches
-  their
-
-  screen, a new touch point is tracked and added to the array. Touch points
-
-  are <code>Objects</code> with the following properties:</p>
-
-  <pre><code class="language-js">// Iterate over the touches array.
-
-  for (let touch of touches) {
-    // x-coordinate relative to the top-left
-    // corner of the canvas.
-    console.log(touch.x);
-
-    // y-coordinate relative to the top-left
-    // corner of the canvas.
-    console.log(touch.y);
-
-    // x-coordinate relative to the top-left
-    // corner of the browser.
-    console.log(touch.winX);
-
-    // y-coordinate relative to the top-left
-    // corner of the browser.
-    console.log(touch.winY);
-
-    // ID number
-    console.log(touch.id);
-  }
-
-  </code></pre>
-line: 10
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. White circles appear where the user touches the square.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a circle at each touch point.
-      for (let touch of touches) {
-        circle(touch.x, touch.y, 40);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // On a touchscreen device, touch the canvas using one or more fingers
-    // at the same time.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'A gray square. Labels appear where the user touches the square, displaying the coordinates.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a label above each touch point.
-      for (let touch of touches) {
-        text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: 'Object[]'
----
-
-
-# touches
diff --git a/src/content/reference/en/p5 copy/translate.mdx b/src/content/reference/en/p5 copy/translate.mdx
deleted file mode 100644
index dd725eb199..0000000000
--- a/src/content/reference/en/p5 copy/translate.mdx	
+++ /dev/null
@@ -1,241 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/transform.js#L1223
-title: translate
-module: Transform
-submodule: Transform
-file: src/core/transform.js
-description: >
-  <p>Translates the coordinate system.</p>
-
-  <p>By default, the origin <code>(0, 0)</code> is at the sketch's top-left
-  corner in 2D
-
-  mode and center in WebGL mode. The <code>translate()</code> function shifts
-  the origin
-
-  to a different position. Everything drawn after <code>translate()</code> is
-  called
-
-  will appear to be shifted. There are two ways to call <code>translate()</code>
-  with
-
-  parameters that set the origin's position.</p>
-
-  <p>The first way to call <code>translate()</code> uses numbers to set the
-  amount of
-
-  translation. The first two parameters, <code>x</code> and <code>y</code>, set
-  the amount to
-
-  translate along the positive x- and y-axes. For example, calling
-
-  <code>translate(20, 30)</code> translates the origin 20 pixels along the
-  x-axis and 30
-
-  pixels along the y-axis. The third parameter, <code>z</code>, is optional. It
-  sets the
-
-  amount to translate along the positive z-axis. For example, calling
-
-  <code>translate(20, 30, 40)</code> translates the origin 20 pixels along the
-  x-axis,
-
-  30 pixels along the y-axis, and 40 pixels along the z-axis.</p>
-
-  <p>The second way to call <code>translate()</code> uses a
-
-  <a href="/reference/p5/p5.Vector">p5.Vector</a> object to set the amount of
-
-  translation. For example, calling <code>translate(myVector)</code> uses the
-  x-, y-,
-
-  and z-components of <code>myVector</code> to set the amount to translate along
-  the x-,
-
-  y-, and z-axes. Doing so is the same as calling
-
-  <code>translate(myVector.x, myVector.y, myVector.z)</code>.</p>
-
-  <p>By default, transformations accumulate. For example, calling
-
-  <code>translate(10, 0)</code> twice has the same effect as calling
-
-  <code>translate(20, 0)</code> once. The <a
-  href="/reference/p5/push/">push()</a> and
-
-  <a href="/reference/p5/pop/">pop()</a> functions can be used to isolate
-
-  transformations within distinct drawing groups.</p>
-
-  <p>Note: Transformations are reset at the beginning of the draw loop. Calling
-
-  <code>translate(10, 0)</code> inside the <a
-  href="/reference/p5/draw/">draw()</a> function won't
-
-  cause shapes to move continuously.</p>
-line: 1223
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw a circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Translate the origin to the center.
-      translate(50, 50);
-
-      // Draw the red circle.
-      fill('red');
-      circle(0, 0, 40);
-
-      // Translate the origin to the right.
-      translate(25, 0);
-
-      // Draw the blue circle.
-      fill('blue');
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle moves slowly from left to right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Calculate the x-coordinate.
-      let x = frameCount * 0.2;
-
-      // Translate the origin.
-      translate(x, 50);
-
-      // Draw a circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Create a p5.Vector object.
-      let v = createVector(50, 50);
-
-      // Translate the origin by the vector.
-      translate(v);
-
-      // Draw a circle at coordinates (0, 0).
-      circle(0, 0, 40);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe(
-        'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      // Turn on the lights.
-      lights();
-
-      // Style the spheres.
-      noStroke();
-
-      // Draw the red sphere.
-      fill('red');
-      sphere(10);
-
-      // Translate the origin to the right.
-      translate(30, 0, 0);
-
-      // Draw the blue sphere.
-      fill('blue');
-      sphere(10);
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1223
-    params:
-      - name: x
-        description: |
-          <p>amount to translate along the positive x-axis.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>amount to translate along the positive y-axis.</p>
-        type: Number
-      - name: z
-        description: |
-          <p>amount to translate along the positive z-axis.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 1394
-    params:
-      - name: vector
-        description: |
-          <p>vector by which to translate.</p>
-        type: p5.Vector
-    chainable: 1
-chainable: true
----
-
-
-# translate
diff --git a/src/content/reference/en/p5 copy/triangle.mdx b/src/content/reference/en/p5 copy/triangle.mdx
deleted file mode 100644
index 08f1afb223..0000000000
--- a/src/content/reference/en/p5 copy/triangle.mdx	
+++ /dev/null
@@ -1,104 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/2d_primitives.js#L1385
-title: triangle
-module: Shape
-submodule: 2D Primitives
-file: src/core/shape/2d_primitives.js
-description: >
-  <p>Draws a triangle.</p>
-
-  <p>A triangle is a three-sided shape defined by three points. The
-
-  first two parameters specify the triangle's first point <code>(x1, y1)</code>.
-  The
-
-  middle two parameters specify its second point <code>(x2, y2)</code>. And the
-  last two
-
-  parameters specify its third point <code>(x3, y3)</code>.</p>
-line: 1385
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      triangle(30, 75, 58, 20, 86, 75);
-
-      describe('A white triangle with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      triangle(-20, 25, 8, -30, 36, 25);
-
-      describe('A white triangle with a black outline on a gray canvas.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white triangle spins around on a gray canvas.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Draw the triangle.
-      triangle(-20, 25, 8, -30, 36, 25);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x1
-    description: |
-      <p>x-coordinate of the first point.</p>
-    type: Number
-  - name: y1
-    description: |
-      <p>y-coordinate of the first point.</p>
-    type: Number
-  - name: x2
-    description: |
-      <p>x-coordinate of the second point.</p>
-    type: Number
-  - name: y2
-    description: |
-      <p>y-coordinate of the second point.</p>
-    type: Number
-  - name: x3
-    description: |
-      <p>x-coordinate of the third point.</p>
-    type: Number
-  - name: y3
-    description: |
-      <p>y-coordinate of the third point.</p>
-    type: Number
-chainable: true
----
-
-
-# triangle
diff --git a/src/content/reference/en/p5 copy/trim.mdx b/src/content/reference/en/p5 copy/trim.mdx
deleted file mode 100644
index a782306725..0000000000
--- a/src/content/reference/en/p5 copy/trim.mdx	
+++ /dev/null
@@ -1,113 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/string_functions.js#L916
-title: trim
-module: Data
-submodule: String Functions
-file: src/utilities/string_functions.js
-description: >
-  <p>Removes whitespace from the start and end of a <code>String</code> without
-  changing the middle.</p>
-
-  <p><code>trim()</code> trims
-
-  <a href="https://developer.mozilla.org/en-US/docs/Glossary/whitespace/"
-  target="_blank">whitespace characters</a>
-
-  such as spaces, carriage returns, tabs, Unicode "nbsp" character.</p>
-
-  <p>The parameter, <code>str</code>, is the string to trim. If a single string
-  is passed,
-
-  as in <code>trim('   pad   ')</code>, a single string is returned. If an array
-  of
-
-  strings is passed, as in <code>trim(['    pad   ', '\n space \n'])</code>, an
-  array of
-
-  strings is returned.</p>
-line: 916
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let string = '   p5*js   ';
-
-      // Trim the whitespace.
-      let trimmed = trim(string);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the text.
-      text(`Hello, ${trimmed}!`, 50, 50);
-
-      describe('The text "Hello, p5*js!" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of strings.
-      let strings = ['   wide  ', '\n  open  ', '\n spaces  '];
-
-      // Trim the whitespace.
-      let trimmed = trim(strings);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(10);
-
-      // Display the text.
-      text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);
-
-      describe('The text "wide open spaces" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: trimmed string.
-  type: String
-overloads:
-  - line: 916
-    params:
-      - name: str
-        description: |
-          <p>string to trim.</p>
-        type: String
-    return:
-      description: trimmed string.
-      type: String
-  - line: 984
-    params:
-      - name: strs
-        description: |
-          <p>strings to trim.</p>
-        type: 'String[]'
-    return:
-      description: trimmed strings.
-      type: 'String[]'
-chainable: false
----
-
-
-# trim
diff --git a/src/content/reference/en/p5 copy/turnAxis.mdx b/src/content/reference/en/p5 copy/turnAxis.mdx
deleted file mode 100644
index e8dc93e115..0000000000
--- a/src/content/reference/en/p5 copy/turnAxis.mdx	
+++ /dev/null
@@ -1,54 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/acceleration.js#L378
-title: turnAxis
-module: Events
-submodule: Acceleration
-file: src/events/acceleration.js
-description: >
-  <p>When a device is rotated, the axis that triggers the <a
-  href="/reference/p5/deviceTurned/">deviceTurned()</a>
-
-  method is stored in the turnAxis variable. The turnAxis variable is only
-  defined within
-
-  the scope of deviceTurned().</p>
-line: 378
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Run this example on a mobile device
-    // Rotate the device by 90 degrees in the
-    // X-axis to change the value.
-
-    let value = 0;
-    function draw() {
-      fill(value);
-      rect(25, 25, 50, 50);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when device turns`);
-      describe(`50-by-50 black rect in center of canvas.
-        turns white on mobile when x-axis turns`);
-    }
-    function deviceTurned() {
-      if (turnAxis === 'X') {
-        if (value === 0) {
-          value = 255;
-        } else if (value === 255) {
-          value = 0;
-        }
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# turnAxis
diff --git a/src/content/reference/en/p5 copy/types/Array.mdx b/src/content/reference/en/p5 copy/types/Array.mdx
deleted file mode 100644
index 17fe1c2ed3..0000000000
--- a/src/content/reference/en/p5 copy/types/Array.mdx	
+++ /dev/null
@@ -1,269 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1140
-title: Array
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A list that keeps several pieces of data in order.</p>
-
-  <p>Arrays are helpful for storing related data. They can contain data of any
-
-  type. For example, an array could contain a list of someone's favorite
-
-  colors as strings. Arrays are created as follows:</p>
-
-  <pre><code class="language-js">let myArray = ['deeppink', 'darkorchid',
-  'magenta'];
-
-  </code></pre>
-
-  <p>Each piece of data in an array is called an element. Each element has an
-
-  address, or index, within its array. The variable <code>myArray</code> refers
-  to an
-
-  array with three <a href="/reference/p5/String/">String</a> elements,
-  <code>'deeppink'</code>,
-
-  <code>'darkorchid'</code>, and <code>'magenta'</code>. Arrays are
-  zero-indexed, which means
-
-  that <code>'deeppink'</code> is at index 0, <code>'darkorchid'</code> is at
-  index 1, and
-
-  '<code>magenta'</code> is at index 2. Array elements can be accessed using
-  their
-
-  indices as follows:</p>
-
-  <pre><code class="language-js">let zeroth = myArray[0]; // 'deeppink'
-
-  let first = myArray[1]; // 'darkorchid'
-
-  let second = myArray[2]; // 'magenta'
-
-  </code></pre>
-
-  <p>Elements can be added to the end of an array by calling the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push/"
-  target="_blank">push()</a>
-
-  method as follows:</p>
-
-  <pre><code class="language-js">myArray.push('lavender');
-
-
-  let third = myArray[3]; // 'lavender'
-
-  </code></pre>
-
-  <p>See <a
-  href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays/"
-  target="_blank">MDN</a>
-
-  for more information about arrays.</p>
-line: 1140
-isConstructor: false
-itemtype: property
-example:
-  - >-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an array
-
-    // with three numeric elements.
-
-    let xCoordinates = [25, 50, 75];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'Three white circles drawn in a horizontal line on a gray background.'
-      );
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access the element at index 0, which is 25.
-      circle(xCoordinates[0], 50, 20);
-
-      // Access the element at index 1, which is 50.
-      circle(xCoordinates[1], 50, 20);
-
-      // Access the element at index 2, which is 75.
-      circle(xCoordinates[2], 50, 20);
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an array with three
-    numeric elements.
-
-    let xCoordinates = [20, 40, 60];
-
-
-    // Add another element to the end of the array.
-
-    xCoordinates.push(80);
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access the element at index 0, which is 20.
-      circle(xCoordinates[0], 50, 20);
-
-      // Access the element at index 1, which is 40.
-      circle(xCoordinates[1], 50, 20);
-
-      // Access the element at index 2, which is 60.
-      circle(xCoordinates[2], 50, 20);
-
-      // Access the element at index 3, which is 80.
-      circle(xCoordinates[3], 50, 20);
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an empty array.
-
-    let xCoordinates = [];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Add elements to the array using a loop.
-      for (let x = 20; x < 100; x += 20) {
-        xCoordinates.push(x);
-      }
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access the element at index i and use it to draw a circle.
-      for (let i = 0; i < xCoordinates.length; i += 1) {
-        circle(xCoordinates[i], 50, 20);
-      }
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an empty array.
-
-    let xCoordinates = [];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Add elements to the array using a loop.
-      for (let x = 20; x < 100; x += 20) {
-        xCoordinates.push(x);
-      }
-
-      describe('Four white circles drawn in a horizontal line on a gray background.');
-    }
-
-
-    function draw() {
-      background(200);
-
-      // Access each element of the array and use it to draw a circle.
-      for (let x of xCoordinates) {
-        circle(x, 50, 20);
-      }
-    }
-
-    </code>
-
-    </div>
-
-
-    <div>
-
-    <code>
-
-    // Declare the variable xCoordinates and assign it an empty array.
-
-    let xCoordinates = [];
-
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Add elements to the array using a loop.
-      for (let x = 20; x < 100; x += 20) {
-        xCoordinates.push(x);
-      }
-
-      describe(
-        'Four white circles in a horizontal line on a gray background. The circles move randomly.'
-      );
-    }
-
-
-    function draw() {
-      background(200);
-
-      for (let i = 0; i < xCoordinates.length; i += 1) {
-        // Update the element at index i.
-        xCoordinates[i] += random(-1, 1);
-
-        // Use the element at index i to draw a circle.
-        circle(xCoordinates[i], 50, 20);
-      }
-    }
-
-    </code>
-
-    </div>
-class: p5
----
-
-
-# Array
diff --git a/src/content/reference/en/p5 copy/types/Boolean.mdx b/src/content/reference/en/p5 copy/types/Boolean.mdx
deleted file mode 100644
index 01d02c8de2..0000000000
--- a/src/content/reference/en/p5 copy/types/Boolean.mdx	
+++ /dev/null
@@ -1,273 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L502
-title: Boolean
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A value that's either <code>true</code> or <code>false</code>.</p>
-
-  <p><code>Boolean</code> values help to make decisions in code. They appear any
-  time a
-
-  logical condition is checked. For example, the condition
-
-  "Is a mouse button being pressed?" must be either <code>true</code> or
-
-  <code>false</code>:</p>
-
-  <pre><code class="language-js">// If the user presses the mouse, draw a circle
-  at
-
-  // the mouse's location.
-
-  if (mouseIsPressed === true) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>The <code>if</code> statement checks whether
-
-  <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> is
-  <code>true</code> and draws a
-
-  circle if it is. <code>Boolean</code> expressions such as <code>mouseIsPressed
-  === true</code>
-
-  evaluate to one of the two possible <code>Boolean</code> values:
-  <code>true</code> or <code>false</code>.</p>
-
-  <p>The <code>===</code> operator (EQUAL) checks whether two values are equal.
-  If they
-
-  are, the expression evaluates to <code>true</code>. Otherwise, it evaluates to
-
-  <code>false</code>.</p>
-
-  <p>Note: There's also a <code>==</code> operator with two <code>=</code>
-  instead of three. Don't use
-
-  it.</p>
-
-  <p>The <a href="/reference/p5/mouseIsPressed/">mouseIsPressed</a> system
-  variable is
-
-  always <code>true</code> or <code>false</code>, so the code snippet above
-  could also be written
-
-  as follows:</p>
-
-  <pre><code class="language-js">if (mouseIsPressed) {
-    circle(mouseX, mouseY, 20);
-  }
-
-  </code></pre>
-
-  <p>The <code>!==</code> operator (NOT EQUAL) checks whether two values are not
-  equal, as
-
-  in the following example:</p>
-
-  <pre><code class="language-js">if (2 + 2 !== 4) {
-    text('War is peace.', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>Starting from the left, the arithmetic expression <code>2 + 2</code>
-  produces the
-
-  value <code>4</code>. The <code>Boolean</code> expression <code>4 !== 4</code>
-  evaluates to <code>false</code> because
-
-  <code>4</code> is equal to itself. As a result, the <code>if</code>
-  statement's body is skipped.</p>
-
-  <p>Note: There's also a <code>!=</code> operator with one <code>=</code>
-  instead of two. Don't use
-
-  it.</p>
-
-  <p>The <code>Boolean</code> operator <code>&&</code> (AND) checks whether two
-  expressions are both
-
-  <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true && key === 'p') {
-    text('You pressed the "p" key!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user is pressing a key AND that key is <code>'p'</code>, then a
-  message will
-
-  display.</p>
-
-  <p>The <code>Boolean</code> operator <code>||</code> (OR) checks whether at
-  least one of two
-
-  expressions is <code>true</code>:</p>
-
-  <pre><code class="language-js">if (keyIsPressed === true || mouseIsPressed ===
-  true) {
-    text('You did something!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>If the user presses a key, or presses a mouse button, or both, then a
-
-  message will display.</p>
-
-  <p>The following truth table summarizes a few common scenarios with
-  <code>&&</code> and
-
-  <code>||</code>:</p>
-
-  <pre><code class="language-js">true && true  // true
-
-  true && false // false
-
-  false && false // false
-
-  true || true  // true
-
-  true || false // true
-
-  false || false // false
-
-  </code></pre>
-
-  <p>The relational operators <code>></code>, <code><< code="">,
-  <code>>=</code>, and <code><=< code=""> also produce <code>Boolean</code>
-
-  values:</=<></code></<></code></p>
-
-  <pre><code class="language-js">2 > 1 // true
-
-  2 < 1 // false
-
-  2 >= 2 // true
-
-  2 <= 2="" true="" <="" code=""/></code></pre>
-
-  <p>See <a href="/reference/p5/if/">if</a> for more information about
-  <code>if</code> statements and
-
-  <a href="/reference/p5/Number/">Number</a> for more information about
-  <code>Number</code>s.</p>
-line: 502
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the user presses the mouse, draw a circle at that location.
-      if (mouseIsPressed) {
-        circle(mouseX, mouseY, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square. When the user presses the mouse, a circle appears at that location.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the user presses the mouse, draw a circle at that location.
-      if (mouseIsPressed === true) {
-        circle(mouseX, mouseY, 20);
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click on the canvas to begin detecting key presses.
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A gray square that turns pink when the user presses the mouse or a key.');
-    }
-
-    function draw() {
-      background(200);
-
-      // If the user presses the mouse, change the background color.
-      if (mouseIsPressed === true || keyIsPressed === true) {
-        background('deeppink');
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Click the canvas to begin detecting key presses.
-
-    // Create a Boolean variable.
-    let isPlaying = false;
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe(
-        'The message "Begin?\nY or N" written in green on a black background. The message "Good luck!" appears when they press the "y" key.'
-      );
-    }
-
-    function draw() {
-      background(0);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textFont('Courier New');
-      textSize(16);
-      fill(0, 255, 0);
-
-      // Display a different message when the user begins playing.
-      if (isPlaying === false) {
-        text('Begin?', 50, 40);
-        text('Y or N', 50, 60);
-      } else {
-        text('Good luck!', 50, 50);
-      }
-    }
-
-    // Start playing when the user presses the 'y' key.
-    function keyPressed() {
-      if (key === 'y') {
-        isPlaying = true;
-      }
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# Boolean
diff --git a/src/content/reference/en/p5 copy/types/Number.mdx b/src/content/reference/en/p5 copy/types/Number.mdx
deleted file mode 100644
index 3dfa850720..0000000000
--- a/src/content/reference/en/p5 copy/types/Number.mdx	
+++ /dev/null
@@ -1,201 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L853
-title: Number
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A number that can be positive, negative, or zero.</p>
-
-  <p>The <code>Number</code> data type is useful for describing values such as
-  position,
-
-  size, and color. A number can be an integer such as 20 or a decimal number
-
-  such as 12.34. For example, a circle's position and size can be described
-
-  by three numbers:</p>
-
-  <pre><code class="language-js">circle(50, 50, 20);
-
-  </code></pre>
-
-  <pre><code class="language-js">circle(50, 50, 12.34);
-
-  </code></pre>
-
-  <p>Numbers support basic arithmetic and follow the standard order of
-
-  operations: Parentheses, Exponents, Multiplication, Division, Addition,
-
-  and Subtraction (PEMDAS). For example, it's common to use arithmetic
-
-  operators with p5.js' system variables that are numbers:</p>
-
-  <pre><code class="language-js">// Draw a circle at the center.
-
-  circle(width / 2, height / 2, 20);
-
-  </code></pre>
-
-  <pre><code class="language-js">// Draw a circle that moves from left to right.
-
-  circle(frameCount * 0.01, 50, 20);
-
-  </code></pre>
-
-  <p>Here's a quick overview of the arithmetic operators:</p>
-
-  <pre><code class="language-js">1 + 2 // Add
-
-  1 - 2 // Subtract
-
-  1 * 2 // Multiply
-
-  1 / 2 // Divide
-
-  1 % 2 // Remainder
-
-  1 ** 2 // Exponentiate
-
-  </code></pre>
-
-  <p>It's common to update a number variable using arithmetic. For example, an
-
-  object's location can be updated like so:</p>
-
-  <pre><code class="language-js">x = x + 1;
-
-  </code></pre>
-
-  <p>The statement above adds 1 to a variable <code>x</code> using the
-  <code>+</code> operator. The
-
-  addition assignment operator <code>+=</code> expresses the same idea:</p>
-
-  <pre><code class="language-js">x += 1;
-
-  </code></pre>
-
-  <p>Here's a quick overview of the assignment operators:</p>
-
-  <pre><code class="language-js">x += 2 // Addition assignment
-
-  x -= 2 // Subtraction assignment
-
-  x *= 2 // Multiplication assignment
-
-  x /= 2 // Division assignment
-
-  x %= 2 // Remainder assignment
-
-  </code></pre>
-
-  <p>Numbers can be compared using the
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators"
-  target="_blank">relational operators</a>
-
-  <code>></code>, <code><< code="">, <code>>=</code>, <code><=< code="">,
-  <code>===</code>, and <code>!==</code>.  For example, a sketch's
-
-  <a href="/reference/p5/frameCount/">frameCount</a> can be used as a
-  timer:</=<></code></<></code></p>
-
-  <pre><code class="language-js">if (frameCount > 1000) {
-    text('Game over!', 50, 50);
-  }
-
-  </code></pre>
-
-  <p>An expression such as <code>frameCount > 1000</code> evaluates to a
-  <code>Boolean</code> value
-
-  that's either <code>true</code> or <code>false</code>. The relational
-  operators all produce
-
-  <code>Boolean</code> values:</p>
-
-  <pre><code class="language-js">2 > 1 // true
-
-  2 < 1 // false
-
-  2 >= 2 // true
-
-  2 <= 2="" true="" !="=" false="" <="" code=""/></code></pre>
-
-  <p>See <a href="/reference/p5/Boolean/">Boolean</a> for more information about
-  comparisons and conditions.</p>
-
-  <p>Note: There are also <code>==</code> and <code>!=</code> operators with one
-  fewer <code>=</code>. Don't use them.</p>
-
-  <p>Expressions with numbers can also produce special values when something
-
-  goes wrong:</p>
-
-  <pre><code class="language-js">sqrt(-1) // NaN
-
-  1 / 0 // Infinity
-
-  </code></pre>
-
-  <p>The value <code>NaN</code> stands for
-
-  <a
-  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN/"
-  target="_blank">Not-A-Number</a>.
-
-  <code>NaN</code> appears when calculations or conversions don't work.
-  <code>Infinity</code> is a
-
-  value that's larger than any number. It appears during certain
-
-  calculations.</p>
-line: 853
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Draw a circle at the center.
-      circle(50, 50, 70);
-
-      // Draw a smaller circle at the center.
-      circle(width / 2, height / 2, 30);
-
-      describe('Two concentric, white circles drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle travels from left to right on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      circle(frameCount * 0.05, 50, 20);
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# Number
diff --git a/src/content/reference/en/p5 copy/types/Object.mdx b/src/content/reference/en/p5 copy/types/Object.mdx
deleted file mode 100644
index c5c9adf8bb..0000000000
--- a/src/content/reference/en/p5 copy/types/Object.mdx	
+++ /dev/null
@@ -1,91 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L999
-title: Object
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: "<p>A container for data that's stored as key-value pairs.</p>\n<p>Objects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.</p>\n<p>For example, an object could contain the location, size, and appearance of\na dog:</p>\n<pre><code class=\"language-js\">// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '\U0001F436' };\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);\n\n// Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n</code></pre>\n<p>The variable <code>dog</code> is assigned an object with four properties. Objects\nare declared with curly braces <code>{}</code>. Values can be accessed using the dot\noperator, as in <code>dog.size</code>. In the example above, the key <code>size</code>\ncorresponds to the value <code>20</code>. Objects can also be empty to start:</p>\n<pre><code class=\"language-js\">// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n// Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '\U0001F431';\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);\n\n// Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n</code></pre>\n<p>An object's data can be updated while a sketch runs. For example, the <code>cat</code>\ncould run away from the <code>dog</code> by updating its location:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat.x += 5;\n</code></pre>\n<p>If needed, an object's values can be accessed using square brackets <code>[]</code>\nand strings instead of dot notation:</p>\n<pre><code class=\"language-js\">// Run to the right.\ncat[\"x\"] += 5;\n</code></pre>\n<p>This syntax can be helpful when the key's name has spaces, as in\n<code>cat['height (m)']</code>.</p>\n"
-line: 999
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    // Declare the variable data and assign it an object with three properties.
-    let data = { x: 50, y: 50, d: 20 };
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the object's values using the . operator.
-      circle(data.x, data.y, data.d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable data and assign it an object with three properties.
-    let data = { x: 50, y: 50, d: 20 };
-
-    // Add another property for color.
-    data.color = 'deeppink';
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A pink circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the object's values using the . operator.
-      fill(data.color);
-      circle(data.x, data.y, data.d);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    // Declare the variable data and assign it an object with three properties.
-    let data = { x: 50, y: 50, d: 20 };
-
-    // Add another property for color.
-    data.color = 'deeppink';
-
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('A white circle on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Access the object's values using the . operator.
-      fill(data.color);
-      circle(data.x, data.y, data.d);
-
-      // Update the object's x and y properties.
-      data.x += random(-1, 1);
-      data.y += random(-1, 1);
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# Object
diff --git a/src/content/reference/en/p5 copy/types/String.mdx b/src/content/reference/en/p5 copy/types/String.mdx
deleted file mode 100644
index e62a9a8b9c..0000000000
--- a/src/content/reference/en/p5 copy/types/String.mdx	
+++ /dev/null
@@ -1,153 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L710
-title: String
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A sequence of text characters.</p>
-
-  <p>The <code>String</code> data type is helpful for working with text. For
-  example, a
-
-  string could contain a welcome message:</p>
-
-  <pre><code class="language-js">// Use a string literal.
-
-  text('Hello!', 10, 10);
-
-  </code></pre>
-
-  <pre><code class="language-js">// Create a string variable.
-
-  let message = 'Hello!';
-
-
-  // Use the string variable.
-
-  text(message, 10, 10);
-
-  </code></pre>
-
-  <p>The most common way to create strings is to use some form of quotations as
-
-  follows:</p>
-
-  <pre><code class="language-js">text("hi", 50, 50);
-
-  </code></pre>
-
-  <pre><code class="language-js">text('hi', 50, 50);
-
-  </code></pre>
-
-  <pre><code class="language-js">text(`hi`, 50, 50);
-
-  </code></pre>
-
-  <p><code>"hi"</code>, <code>'hi'</code>, and <code>hi</code> are all string
-  literals. A "literal" means a
-
-  value was actually written, as in <code>text('hi', 50, 50)</code>. By
-  contrast,
-
-  <code>text(message, 50, 50)</code> uses the variable <code>message</code>, so
-  it isn't a string
-
-  literal.</p>
-
-  <p>Single quotes <code>''</code> and double quotes <code>""</code> mean the
-  same thing. It's nice to
-
-  have the option for cases when a string contains one type of quote:</p>
-
-  <pre><code class="language-js">text("What's up?", 50, 50);
-
-  </code></pre>
-
-  <pre><code class="language-js">text('Air quotes make you look "cool."', 50,
-  50);
-
-  </code></pre>
-
-  <p>Backticks <code>``</code> create template literals. Template literals have
-  many uses.
-
-  For example, they can contain both single and double quotes as needed:</p>
-
-  <pre><code class="language-js">text(`"Don't you forget about me"`,  10, 10);
-
-  </code></pre>
-
-  <p>Template literals are helpful when strings are created from variables like
-
-  so:</p>
-
-  <pre><code class="language-js">let size = random(10, 20);
-
-  circle(50, 50, size);
-
-
-  text(`The circle's diameter is ${size} pixels.`,  10, 10);
-
-  </code></pre>
-
-  <p>The <code>size</code> variable's value will replace <code>${size}</code>
-  when the string is
-
-  created. <code>${}</code> is a placeholder for any value. That means an
-  expression can
-
-  be used, as in <code>${round(PI, 3)}</code>. All of the following are valid
-  template
-
-  literals:</p>
-
-  <pre><code class="language-js">text(`π is about ${round(PI, 2)} pixels.`,  10,
-  10);
-
-  text(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 
-  10, 30);
-
-  </code></pre>
-
-  <p>Template literals can include several variables:</p>
-
-  <pre><code class="language-js">let x = random(0, 100);
-
-  let y = random(0, 100);
-
-  let size = random(10, 20);
-
-  circle(x, y, size);
-
-
-  text(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`,  10, 10);
-
-  </code></pre>
-
-  <p>Template literals are also helpful for creating multi-line text like
-  so:</p>
-
-  <pre><code class="language-js">let poem = `My sketch doesn't run;
-
-  it waits for me patiently
-
-  while bugs point the way.`;
-
-
-  text(poem, 10, 10);
-
-  </code></pre>
-line: 710
-isConstructor: false
-itemtype: property
-example:
-  - "\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Display a welcome message.\n  text('Hello!', 50, 50);\n\n  describe('The text \"Hello!\" written on a gray background.');\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n\n  background(200);\n\n  // Style the text.\n  textAlign(CENTER, CENTER);\n  textSize(20);\n\n  // Create a string variable.\n  let world = '\U0001F30D';\n\n  // Display a welcome message using a template string.\n  text(`Hello, ${world}!`, 50, 50);\n\n  describe('The text \"Hello, \U0001F30D!\" written on a gray background.');\n}\n</code>\n</div>"
-class: p5
----
-
-
-# String
diff --git a/src/content/reference/en/p5 copy/unchar.mdx b/src/content/reference/en/p5 copy/unchar.mdx
deleted file mode 100644
index 8ef044b393..0000000000
--- a/src/content/reference/en/p5 copy/unchar.mdx	
+++ /dev/null
@@ -1,114 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L731
-title: unchar
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a single-character <code>String</code> to a
-  <code>Number</code>.</p>
-
-  <p><code>unchar()</code> converts single-character strings to their
-  corresponding
-
-  integer (whole number).</p>
-
-  <p>The parameter, <code>n</code>, is the character to convert. For example,
-
-  <code>unchar('A')</code>, returns the number 65. If an array is passed, as in
-
-  <code>unchar(['A', 'B', 'C'])</code>, an array of integers is returned.</p>
-line: 731
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a string variable.
-      let original = 'A';
-
-      // Convert the string to a number.
-      let converted = unchar(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} : ${converted}`, 50, 50);
-
-      describe('The text "A : 65" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of characters.
-      let original = ['A', 'B', 'C'];
-
-      // Convert the string to a number.
-      let converted = unchar(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Iterate over elements of the converted array.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${original[i]} : ${converted[i]}`, 50, y);
-      }
-
-      describe(
-        'The text "A : 65", "B : 66", and "C :67" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 731
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String
-    return:
-      description: converted number.
-      type: Number
-  - line: 805
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: 'String[]'
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# unchar
diff --git a/src/content/reference/en/p5 copy/unhex.mdx b/src/content/reference/en/p5 copy/unhex.mdx
deleted file mode 100644
index 5c507abc4c..0000000000
--- a/src/content/reference/en/p5 copy/unhex.mdx	
+++ /dev/null
@@ -1,121 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/conversion.js#L956
-title: unhex
-module: Data
-submodule: Conversion
-file: src/utilities/conversion.js
-description: >
-  <p>Converts a <code>String</code> with a hexadecimal value to a 
-  <code>Number</code>.</p>
-
-  <p><code>unhex()</code> converts a string with its hexadecimal number value to
-  a number.
-
-  Hexadecimal (hex) numbers are base-16, which means there are 16 unique
-
-  digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
-
-  number <code>11</code> (eleven) in base-10 is written as the letter
-  <code>B</code> in hex.</p>
-
-  <p>The first parameter, <code>n</code>, is the hex string to convert. For
-  example,
-
-  <code>unhex('FF')</code>, returns the number 255. If an array is passed, as in
-
-  <code>unhex(['00', '80', 'FF'])</code>, an array of numbers is returned.</p>
-line: 956
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create a a hex string variable
-      let original = 'FF';
-
-      // Convert the hex string to a number.
-      let converted = unhex(original);
-
-      // Style the text.
-      textAlign(CENTER, CENTER);
-      textSize(16);
-
-      // Display the original and converted values.
-      text(`${original} = ${converted}`, 50, 50);
-
-      describe('The text "FF = 255" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Create an array of numbers.
-      let original = ['00', '80', 'FF'];
-
-      // Convert the numbers to hex strings.
-      // Only use two hex digits.
-      let converted = unhex(original, 2);
-
-      // Style the text.
-      textAlign(RIGHT, CENTER);
-      textSize(16);
-
-      // Iterate over the converted values.
-      for (let i = 0; i < converted.length; i += 1) {
-
-        // Calculate the y-coordinate.
-        let y = (i + 1) * 25;
-
-        // Display the original and converted values.
-        text(`${ original[i]} = ${converted[i]}`, 80, y);
-      }
-
-      describe(
-        'The text "00 = 0", "80 = 128", and "FF = 255" written on three separate lines. The text is in black on a gray background.'
-      );
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: converted number.
-  type: Number
-overloads:
-  - line: 956
-    params:
-      - name: 'n'
-        description: |
-          <p>value to convert.</p>
-        type: String
-    return:
-      description: converted number.
-      type: Number
-  - line: 1033
-    params:
-      - name: ns
-        description: |
-          <p>values to convert.</p>
-        type: 'String[]'
-    return:
-      description: converted numbers.
-      type: 'Number[]'
-chainable: false
----
-
-
-# unhex
diff --git a/src/content/reference/en/p5 copy/updatePixels.mdx b/src/content/reference/en/p5 copy/updatePixels.mdx
deleted file mode 100644
index 5de892374b..0000000000
--- a/src/content/reference/en/p5 copy/updatePixels.mdx	
+++ /dev/null
@@ -1,94 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/image/pixels.js#L1118
-title: updatePixels
-module: Image
-submodule: Pixels
-file: src/image/pixels.js
-description: >
-  <p>Updates the canvas with the RGBA values in the
-
-  <a href="/reference/p5/pixels/">pixels</a> array.</p>
-
-  <p><code>updatePixels()</code> only needs to be called after changing values
-  in the
-
-  <a href="/reference/p5/pixels/">pixels</a> array. Such changes can be made
-  directly
-
-  after calling <a href="/reference/p5/loadPixels/">loadPixels()</a> or by
-  calling
-
-  <a href="/reference/p5/set/">set()</a>.</p>
-line: 1118
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    let img;
-
-    // Load the image.
-    function preload() {
-      img = loadImage('/assets/rockies.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100);
-
-      // Display the image.
-      image(img, 0, 0, 100, 100);
-
-      // Get the pixel density.
-      let d = pixelDensity();
-
-      // Calculate the halfway index in the pixels array.
-      let halfImage = 4 * (d * width) * (d * height / 2);
-
-      // Load the pixels array.
-      loadPixels();
-
-      // Copy the top half of the canvas to the bottom.
-      for (let i = 0; i < halfImage; i += 1) {
-        pixels[i + halfImage] = pixels[i];
-      }
-
-      // Update the canvas.
-      updatePixels();
-
-      describe('Two identical images of mountain landscapes, one on top of the other.');
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: x
-    description: |
-      <p>x-coordinate of the upper-left corner of region
-                              to update.</p>
-    type: Number
-    optional: true
-  - name: 'y'
-    description: |
-      <p>y-coordinate of the upper-left corner of region
-                              to update.</p>
-    type: Number
-    optional: true
-  - name: w
-    description: |
-      <p>width of region to update.</p>
-    type: Number
-    optional: true
-  - name: h
-    description: |
-      <p>height of region to update.</p>
-    type: Number
-    optional: true
-chainable: false
----
-
-
-# updatePixels
diff --git a/src/content/reference/en/p5 copy/userStartAudio.mdx b/src/content/reference/en/p5 copy/userStartAudio.mdx
deleted file mode 100644
index 076d8537c5..0000000000
--- a/src/content/reference/en/p5 copy/userStartAudio.mdx	
+++ /dev/null
@@ -1,99 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/lib/addons/p5.sound.js#L198
-title: userStartAudio
-module: p5.sound
-submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: >-
-  <p>It is not only a good practice to give users control over starting
-
-  audio. This policy is enforced by many web browsers, including iOS and
-
-  <a href="https://goo.gl/7K7WLu/" title="Google Chrome's autoplay
-
-  policy">Google Chrome</a>, which create the Web Audio API's
-
-  <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/"
-  title="Audio Context @ MDN">Audio Context</a>
-
-  in a suspended state.</p>
-
-
-  <p>In these browser-specific policies, sound will not play until a user
-
-  interaction event (i.e. <code>mousePressed()</code>) explicitly resumes
-
-  the AudioContext, or starts an audio node. This can be accomplished by
-
-  calling <code>start()</code> on a <code>p5.Oscillator</code>,
-
-  <code> play()</code> on a <code>p5.SoundFile</code>, or simply
-
-  <code>userStartAudio()</code>.</p>
-
-
-  <p><code>userStartAudio()</code> starts the AudioContext on a user
-
-  gesture. The default behavior will enable audio on any
-
-  mouseUp or touchEnd event. It can also be placed in a specific
-
-  interaction function, such as <code>mousePressed()</code> as in the
-
-  example below. This method utilizes
-
-  <a href="https://github.com/tambien/StartAudioContext/">StartAudioContext
-
-  </a>, a library by Yotam Mann (MIT Licence, 2016).</p>
-line: 198
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div><code>
-    function setup() {
-      // mimics the autoplay policy
-      getAudioContext().suspend();
-
-      let mySynth = new p5.MonoSynth();
-
-      // This won't play until the context has resumed
-      mySynth.play('A6');
-    }
-    function draw() {
-      background(220);
-      textAlign(CENTER, CENTER);
-      text(getAudioContext().state, width/2, height/2);
-    }
-    function mousePressed() {
-      userStartAudio();
-    }
-    </code></div>
-class: p5
-params:
-  - name: elements
-    description: |
-      <p>This argument can be an Element,
-                                    Selector String, NodeList, p5.Element,
-                                    jQuery Element, or an Array of any of those.</p>
-    type: Element|Array
-    optional: true
-  - name: callback
-    description: |
-      <p>Callback to invoke when the AudioContext
-                                    has started</p>
-    type: Function
-    optional: true
-return:
-  description: |-
-    Returns a Promise that resolves when
-                                         the AudioContext state is 'running'
-  type: Promise
-chainable: false
----
-
-
-# userStartAudio
diff --git a/src/content/reference/en/p5 copy/vertex.mdx b/src/content/reference/en/p5 copy/vertex.mdx
deleted file mode 100644
index 92d5bb9138..0000000000
--- a/src/content/reference/en/p5 copy/vertex.mdx	
+++ /dev/null
@@ -1,242 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/shape/vertex.js#L1881
-title: vertex
-module: Shape
-submodule: Vertex
-file: src/core/shape/vertex.js
-description: >
-  <p>Adds a vertex to a custom shape.</p>
-
-  <p><code>vertex()</code> sets the coordinates of vertices drawn between the
-
-  <a href="/reference/p5/beginShape/">beginShape()</a> and
-
-  <a href="/reference/p5/endShape/">endShape()</a> functions.</p>
-
-  <p>The first two parameters, <code>x</code> and <code>y</code>, set the x- and
-  y-coordinates of the
-
-  vertex.</p>
-
-  <p>The third parameter, <code>z</code>, is optional. It sets the z-coordinate
-  of the
-
-  vertex in WebGL mode. By default, <code>z</code> is 0.</p>
-
-  <p>The fourth and fifth parameters, <code>u</code> and <code>v</code>, are
-  also optional. They set
-
-  the u- and v-coordinates for the vertex’s texture when used with
-
-  <a href="/reference/p5/endShape/">endShape()</a>. By default, <code>u</code>
-  and <code>v</code> are both 0.</p>
-line: 1881
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Style the shape.
-      strokeWeight(3);
-
-      // Start drawing the shape.
-      // Only draw the vertices.
-      beginShape(POINTS);
-
-      // Add the vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape();
-
-      describe('Four black dots that form a square are drawn on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(30, 20);
-      vertex(85, 20);
-      vertex(85, 75);
-      vertex(30, 75);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      background(200);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(-20, -30, 0);
-      vertex(35, -30, 0);
-      vertex(35, 25, 0);
-      vertex(-20, 25, 0);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-
-      describe('A white square on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A white square spins around slowly on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Start drawing the shape.
-      beginShape();
-
-      // Add vertices.
-      vertex(-20, -30, 0);
-      vertex(35, -30, 0);
-      vertex(35, 25, 0);
-      vertex(-20, 25, 0);
-
-      // Stop drawing the shape.
-      endShape(CLOSE);
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let img;
-
-    // Load an image to apply as a texture.
-    function preload() {
-      img = loadImage('/assets/laDefense.jpg');
-    }
-
-    function setup() {
-      createCanvas(100, 100, WEBGL);
-
-      describe('A photograph of a ceiling rotates slowly against a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Rotate around the y-axis.
-      rotateY(frameCount * 0.01);
-
-      // Style the shape.
-      noStroke();
-
-      // Apply the texture.
-      texture(img);
-      textureMode(NORMAL);
-
-      // Start drawing the shape
-      beginShape();
-
-      // Add vertices.
-      vertex(-20, -30, 0, 0, 0);
-      vertex(35, -30, 0, 1, 0);
-      vertex(35, 25, 0, 1, 1);
-      vertex(-20, 25, 0, 0, 1);
-
-      // Stop drawing the shape.
-      endShape();
-    }
-    </code>
-    </div>
-class: p5
-overloads:
-  - line: 1881
-    params:
-      - name: x
-        description: |
-          <p>x-coordinate of the vertex.</p>
-        type: Number
-      - name: 'y'
-        description: |
-          <p>y-coordinate of the vertex.</p>
-        type: Number
-    chainable: 1
-  - line: 2052
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: |
-          <p>z-coordinate of the vertex. Defaults to 0.</p>
-        type: Number
-        optional: true
-    chainable: 1
-  - line: 2059
-    params:
-      - name: x
-        description: ''
-        type: Number
-      - name: 'y'
-        description: ''
-        type: Number
-      - name: z
-        description: ''
-        type: Number
-        optional: true
-      - name: u
-        description: |
-          <p>u-coordinate of the vertex's texture. Defaults to 0.</p>
-        type: Number
-        optional: true
-      - name: v
-        description: |
-          <p>v-coordinate of the vertex's texture. Defaults to 0.</p>
-        type: Number
-        optional: true
-    chainable: 1
-chainable: true
----
-
-
-# vertex
diff --git a/src/content/reference/en/p5 copy/webglVersion.mdx b/src/content/reference/en/p5 copy/webglVersion.mdx
deleted file mode 100644
index 1909f94a86..0000000000
--- a/src/content/reference/en/p5 copy/webglVersion.mdx	
+++ /dev/null
@@ -1,105 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L508
-title: webglVersion
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>String</code> variable with the WebGL version in use.</p>
-
-  <p><code>webglVersion</code>'s value equals one of the following string
-  constants:</p>
-
-  <ul>
-
-  <li><code>WEBGL2</code> whose value is <code>'webgl2'</code>,</li>
-
-  <li><code>WEBGL</code> whose value is <code>'webgl'</code>, or</li>
-
-  <li><code>P2D</code> whose value is <code>'p2d'</code>. This is the default
-  for 2D sketches.</li>
-
-  </ul>
-
-  <p>See <a href="/reference/p5/setAttributes/">setAttributes()</a> for ways to
-  set the
-
-  WebGL version.</p>
-line: 508
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Display the current WebGL version.
-      text(webglVersion, 42, 54);
-
-      describe('The text "p2d" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      // Load a font to use.
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      // Create a canvas using WEBGL mode.
-      createCanvas(100, 50, WEBGL);
-      background(200);
-
-      // Display the current WebGL version.
-      fill(0);
-      textFont(font);
-      text(webglVersion, -15, 5);
-
-      describe('The text "webgl2" written in black on a gray background.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    let font;
-
-    function preload() {
-      // Load a font to use.
-      font = loadFont('/assets/inconsolata.otf');
-    }
-
-    function setup() {
-      // Create a canvas using WEBGL mode.
-      createCanvas(100, 50, WEBGL);
-
-      // Set WebGL to version 1.
-      setAttributes({ version: 1 });
-
-      background(200);
-
-      // Display the current WebGL version.
-      fill(0);
-      textFont(font);
-      text(webglVersion, -14, 5);
-
-      describe('The text "webgl" written in black on a gray background.');
-    }
-    </code>
-    </div>
-class: p5
-type: String
----
-
-
-# webglVersion
diff --git a/src/content/reference/en/p5 copy/while.mdx b/src/content/reference/en/p5 copy/while.mdx
deleted file mode 100644
index 5fdcb2985a..0000000000
--- a/src/content/reference/en/p5 copy/while.mdx	
+++ /dev/null
@@ -1,161 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/reference.js#L1872
-title: while
-module: Foundation
-submodule: Foundation
-file: src/core/reference.js
-description: >
-  <p>A way to repeat a block of code.</p>
-
-  <p><code>while</code> loops are helpful for repeating statements while a
-  condition is
-
-  <code>true</code>. They're like <code>if</code> statements that repeat. For
-  example, a <code>while</code>
-
-  loop makes it easy to express the idea "draw several lines" like so:</p>
-
-  <pre><code class="language-js">// Declare a variable to keep track of
-  iteration.
-
-  let x = 10;
-
-
-  // Repeat as long as x < 100
-
-  while (x < 100) {
-    line(x, 25, x, 75);
-
-    // Increment by 20.
-    x += 20;
-  }
-
-  </code></pre>
-
-  <p>The loop's header begins with the keyword <code>while</code>. Loops
-  generally count up
-
-  or count down as they repeat, or iterate. The statement in parentheses
-
-  <code>x < 100</code> is a condition the loop checks each time it iterates. If
-  the
-
-  condition is <code>true</code>, the loop runs the code between the curly
-  braces <code>{}</code>,
-
-  The code between the curly braces is called the loop's body. If the
-
-  condition is <code>false</code>, the body is skipped and the loop is
-  stopped.</p>
-
-  <p>It's common to create infinite loops accidentally. For example, the
-
-  following loop never stops iterating because it doesn't count up:</p>
-
-  <pre><code class="language-js">// Declare a variable to keep track of
-  iteration.
-
-  let x = 10;
-
-
-  // Repeat as long as x < 100
-
-  while (x < 100) {
-    line(x, 25, x, 75);
-  }
-
-
-  // This should be in the loop's body!
-
-  x += 20;
-
-  </code></pre>
-
-  <p>The statement <code>x += 20</code> appears after the loop's body. That
-  means the
-
-  variable <code>x</code> is stuck at <code>10</code>,  which is always less
-  than <code>100</code>.</p>
-
-  <p><code>while</code> loops are useful when the number of iterations isn't
-  known in
-
-  advance. For example, concentric circles could be drawn at random
-
-  increments:</p>
-
-  <pre><code class="language-js">let d = 100;
-
-  let minSize = 5;
-
-
-  while (d > minSize) {
-    circle(50, 50, d);
-    d -= random(10);
-  }
-
-  </code></pre>
-line: 1872
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe('Five black vertical lines on a gray background.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Declare a variable to keep track of iteration.
-      let x = 10;
-
-      // Repeat as long as x < 100
-      while (x < 100) {
-        line(x, 25, x, 75);
-
-        // Increment by 20.
-        x += 20;
-      }
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      // Slow the frame rate.
-      frameRate(5);
-
-      describe(
-        "A gray square with several concentric circles at the center. The circles' sizes decrease at random increments."
-      );
-    }
-
-    function draw() {
-      background(200);
-
-      let d = 100;
-      let minSize = 5;
-
-      while (d > minSize) {
-        circle(50, 50, d);
-        d -= random(5, 15);
-      }
-    }
-    </code>
-    </div>
-class: p5
----
-
-
-# while
diff --git a/src/content/reference/en/p5 copy/width.mdx b/src/content/reference/en/p5 copy/width.mdx
deleted file mode 100644
index 0eb6ad07bb..0000000000
--- a/src/content/reference/en/p5 copy/width.mdx	
+++ /dev/null
@@ -1,87 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L812
-title: width
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the width of the canvas in
-  pixels.</p>
-
-  <p><code>width</code>'s default value is 100. Calling
-
-  <a href="/reference/p5/createCanvas/">createCanvas()</a> or
-
-  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> changes the value of
-
-  <code>width</code>. Calling <a href="/reference/p5/noCanvas/">noCanvas()</a>
-  sets its value to
-
-  0.</p>
-line: 812
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      background(200);
-
-      // Display the canvas' width.
-      text(width, 42, 54);
-
-      describe('The number 100 written in black on a gray square.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(50, 100);
-
-      background(200);
-
-      // Display the canvas' width.
-      text(width, 21, 54);
-
-      describe('The number 50 written in black on a gray rectangle.');
-    }
-    </code>
-    </div>
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Display the canvas' width.
-      text(width, 42, 54);
-
-      describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
-    }
-
-    // If the mouse is pressed, reisze
-    // the canvas and display its new
-    // width.
-    function mousePressed() {
-      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
-        resizeCanvas(50, 100);
-        background(200);
-        text(width, 21, 54);
-      }
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# width
diff --git a/src/content/reference/en/p5 copy/winMouseX.mdx b/src/content/reference/en/p5 copy/winMouseX.mdx
deleted file mode 100644
index ae7dbc3fac..0000000000
--- a/src/content/reference/en/p5 copy/winMouseX.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L463
-title: winMouseX
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's horizontal position
-  within the
-
-  browser.</p>
-
-  <p><code>winMouseX</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. For example, if the mouse is 50 pixels from
-
-  the left edge of the browser, then <code>winMouseX</code> will be 50.</p>
-
-  <p>On a touchscreen device, <code>winMouseX</code> will hold the x-coordinate
-  of the most
-
-  recent touch point.</p>
-
-  <p>Note: Use <a href="/reference/p5/mouseX/">mouseX</a> to track the mouse’s
-
-  x-coordinate within the canvas.</p>
-line: 463
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates within the browser window.
-      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# winMouseX
diff --git a/src/content/reference/en/p5 copy/winMouseY.mdx b/src/content/reference/en/p5 copy/winMouseY.mdx
deleted file mode 100644
index 32c59cba4c..0000000000
--- a/src/content/reference/en/p5 copy/winMouseY.mdx	
+++ /dev/null
@@ -1,61 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/events/mouse.js#L504
-title: winMouseY
-module: Events
-submodule: Mouse
-file: src/events/mouse.js
-description: >
-  <p>A <code>Number</code> variable that tracks the mouse's vertical position
-  within the
-
-  browser.</p>
-
-  <p><code>winMouseY</code> keeps track of the mouse's position relative to the
-  top-left
-
-  corner of the browser window. For example, if the mouse is 50 pixels from
-
-  the top edge of the browser, then <code>winMouseY</code> will be 50.</p>
-
-  <p>On a touchscreen device, <code>winMouseY</code> will hold the y-coordinate
-  of the most
-
-  recent touch point.</p>
-
-  <p>Note: Use <a href="/reference/p5/mouseY/">mouseY</a> to track the mouse’s
-
-  y-coordinate within the canvas.</p>
-line: 504
-isConstructor: false
-itemtype: property
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      describe("A gray square. The mouse's x- and y-coordinates are displayed as the user moves the mouse.");
-    }
-
-    function draw() {
-      background(200);
-
-      // Style the text.
-      textAlign(CENTER);
-      textSize(16);
-
-      // Display the mouse's coordinates within the browser window.
-      text(`x: ${winMouseX} y: ${winMouseY}`, 50, 50);
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# winMouseY
diff --git a/src/content/reference/en/p5 copy/windowHeight.mdx b/src/content/reference/en/p5 copy/windowHeight.mdx
deleted file mode 100644
index 829ac3d76b..0000000000
--- a/src/content/reference/en/p5 copy/windowHeight.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L680
-title: windowHeight
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the height of the browser's
-  viewport.</p>
-
-  <p>The <a
-  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
-  target="_blank">layout viewport</a>
-
-  is the area within the browser that's available for drawing.</p>
-line: 680
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the browser's dimensions.
-      createCanvas(windowWidth, windowHeight);
-
-      background(200);
-
-      describe('A gray canvas that takes up the entire browser window.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# windowHeight
diff --git a/src/content/reference/en/p5 copy/windowResized.mdx b/src/content/reference/en/p5 copy/windowResized.mdx
deleted file mode 100644
index aed52e6b4b..0000000000
--- a/src/content/reference/en/p5 copy/windowResized.mdx	
+++ /dev/null
@@ -1,64 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L708
-title: windowResized
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A function that's called when the browser window is resized.</p>
-
-  <p>Code placed in the body of <code>windowResized()</code> will run when the
-
-  browser window's size changes. It's a good place to call
-
-  <a href="/reference/p5/resizeCanvas/">resizeCanvas()</a> or make other
-
-  adjustments to accommodate the new window size.</p>
-
-  <p>The <code>event</code> parameter is optional. If added to the function
-  declaration, it
-
-  can be used for debugging or other purposes.</p>
-line: 708
-isConstructor: false
-itemtype: method
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      createCanvas(windowWidth, windowHeight);
-
-      describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');
-    }
-
-    function draw() {
-      background(200);
-
-      // Draw a circle at the center.
-      circle(width / 2, height / 2, 50);
-    }
-
-    // Resize the canvas when the
-    // browser's size changes.
-    function windowResized() {
-      resizeCanvas(windowWidth, windowHeight);
-    }
-    </code>
-    </div>
-class: p5
-params:
-  - name: event
-    description: |
-      <p>optional resize Event.</p>
-    type: Event
-    optional: true
-chainable: false
----
-
-
-# windowResized
diff --git a/src/content/reference/en/p5 copy/windowWidth.mdx b/src/content/reference/en/p5 copy/windowWidth.mdx
deleted file mode 100644
index 26ec5fc2a9..0000000000
--- a/src/content/reference/en/p5 copy/windowWidth.mdx	
+++ /dev/null
@@ -1,43 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/core/environment.js#L652
-title: windowWidth
-module: Environment
-submodule: Environment
-file: src/core/environment.js
-description: >
-  <p>A <code>Number</code> variable that stores the width of the browser's
-  viewport.</p>
-
-  <p>The <a
-  href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport/"
-  target="_blank">layout viewport</a>
-
-  is the area within the browser that's available for drawing.</p>
-line: 652
-isConstructor: false
-itemtype: property
-alt: This example does not render anything.
-example:
-  - |-
-
-    <div class="norender">
-    <code>
-    function setup() {
-      // Set the canvas' width and height
-      // using the browser's dimensions.
-      createCanvas(windowWidth, windowHeight);
-
-      background(200);
-
-      describe('A gray canvas that takes up the entire browser window.');
-    }
-    </code>
-    </div>
-class: p5
-type: Number
----
-
-
-# windowWidth
diff --git a/src/content/reference/en/p5 copy/year.mdx b/src/content/reference/en/p5 copy/year.mdx
deleted file mode 100644
index 04efa83189..0000000000
--- a/src/content/reference/en/p5 copy/year.mdx	
+++ /dev/null
@@ -1,47 +0,0 @@
----
-# This file was auto-generated. Please do not edit it manually!
-# To make changes, edit the comments in the corresponding source file:
-# https://github.com/processing/p5.js/blob/v1.11.13/src/utilities/time_date.js#L311
-title: year
-module: IO
-submodule: Time & Date
-file: src/utilities/time_date.js
-description: |
-  <p>Returns the current year as a number such as 1999.</p>
-line: 311
-isConstructor: false
-itemtype: method
-example:
-  - |-
-
-    <div>
-    <code>
-    function setup() {
-      createCanvas(100, 100);
-
-      background(200);
-
-      // Get the current year.
-      let y = year();
-
-      // Style the text.
-      textAlign(LEFT, CENTER);
-      textSize(12);
-      textFont('Courier New');
-
-      // Display the year.
-      text(`Current year: ${y}`, 10, 50, 80);
-
-      describe(`The text 'Current year: ${y}' written in black on a gray background.`);
-    }
-    </code>
-    </div>
-class: p5
-return:
-  description: current year.
-  type: Integer
-chainable: false
----
-
-
-# year